[SOLVED] Different className for sections

msome · 2021-01-29 06:54:05

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)

colak · 2021-01-29 07:19:59

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>

msome · 2021-01-29 08:06:15

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)

colak · 2021-01-29 08:43:22

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?

msome · 2021-01-29 08:51:34

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)

colak · 2021-01-29 09:35:02

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}

msome · 2021-01-29 09:45:41

Thank you, colak

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

colak · 2021-01-29 10:57:31

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)

msome · 2021-01-29 11:15:46

good 👍

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

jakob · 2021-01-29 11:18:07

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.

Textpattern CMS

Textpattern CMS support forum

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

[SOLVED] Different className for sections

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

Re: [SOLVED] Different className for sections

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

Re: [SOLVED] Different className for sections

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

Re: [SOLVED] Different className for sections

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

Re: [SOLVED] Different className for sections

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

Re: [SOLVED] Different className for sections

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

Re: [SOLVED] Different className for sections

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

Re: [SOLVED] Different className for sections

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

Re: [SOLVED] Different className for sections

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

Re: [SOLVED] Different className for sections

Board footer