Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2021-01-29 06:54:05

msome
Member
Registered: 2015-09-16
Posts: 32

[SOLVED] Different className for sections

Different links for sections,

<txp:section title="1" link="1" /> (if this section "about" - class name == .red {background-color: red})
<txp:section title="1" link="1" /> (if this section "review"- class name == .green {background-color: green})
...
about, review, ... - tag, not manually

different classes for them ?

Last edited by msome (2021-01-29 08:06:52)

Offline

#2 2021-01-29 07:19:59

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,597
Website GitHub Twitter

Re: [SOLVED] Different className for sections

You could hand code the menu

<a href="<txp:site_url />about/"<txp:if_section name="about"> class="red"</txp:if_section> rel="bookmark">About</a>
<a href="<txp:site_url />review/"<txp:if_section name="review"> class="green"</txp:if_section> rel="bookmark">review</a>

Yiannis
——————————
neme.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

#3 2021-01-29 08:06:15

msome
Member
Registered: 2015-09-16
Posts: 32

Re: [SOLVED] Different className for sections

thanks, colak,

but
I only need to display one section the article belongs to.

Is there an automatic way?
so as not to write links manually …

Last edited by msome (2021-01-29 08:36:39)

Offline

#4 2021-01-29 08:43:22

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,597
Website GitHub Twitter

Re: [SOLVED] Different className for sections

Apologies, I’m trying to decipher your request.

Are you not going to have a menu? Are you trying to colour-code the menu by giving it a particular colour when the article or section page belongs to that section?

can you explain to us with slightly more detail on what you are trying to achieve?


Yiannis
——————————
neme.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

#5 2021-01-29 08:51:34

msome
Member
Registered: 2015-09-16
Posts: 32

Re: [SOLVED] Different className for sections

Sorry.
Just articles that are assigned to different sections.
In the title of a specific article, there should be its section (its name) (only one) (review or about or, …).

For different sections, different CSS classes.

<div class="main__title">
   <div class="main__more"><txp:title /></div>
      <div class="section"><txp:section title="1" link="1" /></div>
   </div>
</div>
<div class="main__text">
   <txp:body />
   <txp:excerpt />
</div>

I need change this <txp:section title=“1” link=“1” /> add different className

Last edited by msome (2021-01-29 09:09:34)

Offline

#6 2021-01-29 09:35:02

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,597
Website GitHub Twitter

Re: [SOLVED] Different className for sections

I think I understand. If you add an id to the body, as below

<body id="<txp:section />">
...
<div class="main__title">
   <div class="main__more"><txp:title /></div>
      <div class="section"><txp:section title="1" link="1" /></div>
   </div>
</div>
<div class="main__text">
   <txp:body />
   <txp:excerpt />
</div>

you can then achieve this with css

#about .main__title .main__more .section {background-color: red}
#review .main__title .main__more .section {background-color: green}

Yiannis
——————————
neme.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

#7 2021-01-29 09:45:41

msome
Member
Registered: 2015-09-16
Posts: 32

Re: [SOLVED] Different className for sections

Thank you, colak

Last edited by msome (2021-01-29 11:05:42)

Offline

#8 2021-01-29 10:57:31

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,597
Website GitHub Twitter

Re: [SOLVED] Different className for sections

Another way:)

you can replace

<div class="section"><txp:section title="1" link="1" /></div>

with

<div class="section" id="<txp:section />"><txp:section title="1" link="1" /></div>

and style them in the css with

#about {background-color: red}
#review {background-color: green}

but this method is not recommended as it is best practices to id the section in the body as in the previous example.

Last edited by colak (2021-01-29 11:02:59)


Yiannis
——————————
neme.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

#9 2021-01-29 11:15:46

msome
Member
Registered: 2015-09-16
Posts: 32

Re: [SOLVED] Different className for sections

good 👍

Last edited by msome (2021-01-29 11:16:08)

Offline

#10 2021-01-29 11:18:07

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,129
Website

Re: [SOLVED] Different className for sections

txp:section also has an optional class attribute – see the docs :-)

For example, I just tried the following in the body_header form on the Textpattern demo:

<txp:section link title class='section-label__<txp:section />' />

(link is shorthand for link="1", title similarly) and that produces:

<a class="section-label__articles" href="https://release-demo.textpattern.co/articles/">Articles</a>

and so on for each section in the section_list tag. You can then reference that in your css, e.g.:

.section-label__articles { background-colour: red; }

and so on.


TXP Builders – finely-crafted code, design and txp

Online

Board footer

Powered by FluxBB