HTML Templates help: Colored individual category BG

[L3010]

Forum URL: eroldi.boards.net/

Hello!

I'm making a forum with lots of different categories. I have a list of 9 modifications that i want to make a reality. I'm asking for help but also would love to learn the basics myself of how to make plugins and change layout templates.

In this thread I'm asking for help regarding changing individual category BG and HL BG color. Is this possible? In that case, could someone explain this to me step-by-step so that i'll be able to code similar modifications on my own.

The following image is a "photoshoped"* screenshot of what i want my final result to look like.

*: Edited using Gimp

I am aware that a PB plugin exists called Multicolored Categories that allows you to change the border color and grid color of each category. The plugin is open-source but when i look at the source code i struggle to understand how it's made.

If there is there someone who is willing to help me with my problem and try to explain how the solution works, i would be very thankful.

/ Leo

[Chris]

There are usually more than one way to skin a category. The following uses pure CSS to affect the background for a specific category here on support as an example.







a[name="category-4"] + .container.boards .content {
   background: red;
}
a[name="category-4"] + .container.boards .content .board.item:hover{
   background:blueviolet
}




The main selector constructors employed in the CSS rules given above are attribute selectors, adjacent sibling combinator

Similar CSS rules could be constructed to affect the titlebar, border colors or anything else possible through CSS styling.

[L3010]

This works at home!
But while inside the colored categories, the background is still default.

What's the code to change the default background and colors while on a specific page?

[Chris]

May 27, 2021 1:05:19 GMT -8 L3010 said:

This works at home!
But while inside the colored categories, the background is still default.

What's the code to change the default background and colors while on a specific page?

Applying a CSS via the category headers and footers would be the logical choice to affect all boards residing within that category

[Kami]

this is definitely valid but imo it would be easier & better practice to accomplish this via templates + stylesheet  instead of scattering random style tags all over the place -- assuming some familiarity with the HTML templates, you could opt to use if/else statements within the HTML to add specific classes to child content (eg; if category ID is X, add Y class to this element) and target said class via the stylesheet. if at all possible i recommend getting into the practice of using the stylesheet for css changes (especially as headers and footers will not exist in their current permutation come v6 so best to start the habit early).

if you need additional assistance, i would be more than happy to help -- provided that my vaccine tomorrow doesn't kick my butt. if it does it might take me a little while to reply.

[Retread]

May 27, 2021 11:13:52 GMT -8 Kami said:

this is definitely valid but imo it would be easier & better practice to accomplish this via templates + stylesheet  instead of scattering random style tags all over the place --

I agree with this ^ wholeheartedly.

May 27, 2021 11:13:52 GMT -8 Kami said:

assuming some familiarity with the HTML templates, you could opt to use if/else statements within the HTML to add specific classes to child content (eg; if category ID is X, add Y class to this element) and target said class via the stylesheet.

I suppose you could use it/else, but I reckon it would be far more simple and direct to use the $[category.id] as a component in the class name.

For instance, in this part of the Home layout template:
{foreach $[category]}
$[category.anchor]
<div class="container boards">
<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>
<div class="content cap-bottom">
$[category.board_list]
</div>
</div>
{/foreach}

We can add a unique (to each category) class to each parent element (div) in the third line:
{foreach $[category]}
$[category.anchor]
<div class="container boards cat-$[category.id]">
<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>
<div class="content cap-bottom">
$[category.board_list]
</div>
</div>
{/foreach}

This would result in the class cat-1 as an additional class name assigned if the category ID is 1, etc.




On other layout templates, such as the Board List, you can do something similar using the $[board.category_id] variable.

[Kami]

May 29, 2021 5:16:17 GMT -8 Retread said:

May 27, 2021 11:13:52 GMT -8 Kami said:

this is definitely valid but imo it would be easier & better practice to accomplish this via templates + stylesheet  instead of scattering random style tags all over the place --

I agree with this ^ wholeheartedly.

May 27, 2021 11:13:52 GMT -8 Kami said:

assuming some familiarity with the HTML templates, you could opt to use if/else statements within the HTML to add specific classes to child content (eg; if category ID is X, add Y class to this element) and target said class via the stylesheet.

I suppose you could use it/else, but I reckon it would be far more simple and direct to use the $[category.id] as a component in the class name.

For instance, in this part of the Home layout template:
{foreach $[category]}
$[category.anchor]
<div class="container boards">
<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>
<div class="content cap-bottom">
$[category.board_list]
</div>
</div>
{/foreach}

We can add a unique (to each category) class to each parent element (div) in the third line:
{foreach $[category]}
$[category.anchor]
<div class="container boards cat-$[category.id]">
<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>
<div class="content cap-bottom">
$[category.board_list]
</div>
</div>
{/foreach}

This would result in the class cat-1 as an additional class name assigned if the category ID is 1, etc.




On other layout templates, such as the Board List, you can do something similar using the $[board.category_id] variable.

feeling kinda sick from my vaccine so apologies if this is incoherent babbling

i don't disagree with this method inherently, but the reason i suggested if/else as opposed to simply appending the board or category ID as a class name is for clarity. it might be easier to stick a variable at the end but ".container.boards.cat-1" as a class would require you to memorise which category (or board) corresponded with which ID if you wanted to assign a specific colour to each, and of course if you wanted to get more granular with styling a descriptive class would be the way to go.

it's a matter of personal preference for some of it -- if/else in the templates would make the css less bulky and more clear while bulking up the templates, while ID variables in the templates would bulk up the css and lose some clarity as to which board corresponds with which ID. that said, descriptive classes are often better practice because of clarity when being "read" by the browser.

it's a decent suggestion don't get me wrong! but in this case the "easiest" method isn't always the "better" one. (: just wanted to provide context for why i said what i did

[Retread]

May 29, 2021 11:12:20 GMT -8 Kami said:

i don't disagree with this method inherently, but the reason i suggested if/else as opposed to simply appending the board or category ID as a class name is for clarity. it might be easier to stick a variable at the end but ".container.boards.cat-1" as a class would require you to memorise which category (or board) corresponded with which ID if you wanted to assign a specific colour to each

Yes, assigning a more descriptive class name could be a bit clearer. But you pay for that convenience at least once, perhaps more often in the long term.

In addition to needing as many if and if/else statements as there are categories that currently exist, you'd need to go back to the template and add more statement if more categories are added in the future (and need their own styling).

By keeping things simple in the template, you'd only need to add to the style sheet for future category additions. No need to revisit the template(s).

Regarding memorization, it would make sense to list the current category IDs that correspond to the category names in comments above that section of the style sheet. And add to the comments when new categories are added.

You say tomayto, I say tomahto.
Either way gets you to the promised land. 😃

[L3010]

Hello! Thanks for your help!

Is there a list somewhere of all the $[] variables?

I am very new to PB-Modding and HTML in general.

Have i understood corectly?...

- PB has many variables, "$[]-variables" that you can use to target different elements of the website. To change the color of individual categories, make a class targeting an individual category and then change the color via CSS if the class.

[L3010]

Another question: (where is the best place to ask simple questions like thease?)

- How do i change the (let's say background color for this example) at a specific page?

if (pb.data("route").name == "thread"){

}

[L3010]

I am super sorry if i ask easy questions or take your time but i'm new to this and i really want to get started making a forum!

Let me know if I should be posting in another place

[Kami]

Jun 1, 2021 3:32:39 GMT -8 L3010 said:

Hello! Thanks for your help!

Is there a list somewhere of all the $[] variables?

I am very new to PB-Modding and HTML in general.

Have i understood corectly?...

- PB has many variables, "$[]-variables" that you can use to target different elements of the website. To change the color of individual categories, make a class targeting an individual category and then change the color via CSS if the class.

Sort of. Variables are just that: variables. They have different purposes and different outputs, and you can use them as effectively shorthand for certain elements on the site (for example, display names or board IDs) that may have variable (😉) outcomes. It's not inherently about targeting elements by using variables, but that is one thing you can utilise them for.

And yes: if you target an individual category and add a class to it by using a conditional statement that targets that category, you can than target the class with CSS and it will take effect once the condition (in this case, the category ID) is met.

You could also use a variable to output the category ID to append to the HTML as a class in and of itself, instead of creating a unique class. It is not my preference, and based on my experience I don't personally recommend this method, but it is an option available to you.

Jun 1, 2021 3:41:57 GMT -8 L3010 said:

Another question: (where is the best place to ask simple questions like thease?)

- How do i change the (let's say background color for this example) at a specific page?

if (pb.data("route").name == "thread"){

}

The templates board is the best place to ask about templates.

You could certainly use routes to target specific pages, but "thread" would be a fairly broad target (all threads) rather than specific. If that is what you want, then absolutely! Otherwise, you'd have to get a bit more specific in what you target.

Jun 1, 2021 3:50:09 GMT -8 L3010 said:

I am super sorry if i ask easy questions or take your time but i'm new to this and i really want to get started making a forum!

Let me know if I should be posting in another place

Generally speaking, it's recommended to create one thread per issue so that helpers can give targeted responses and avoid any confusion by addressing multiple inquiries within the same post. Otherwise, if you're interested in help with templates specifically, the templates board is the best place to go. If you want help with a theme more broadly, then the themes board. If you're not sure where your question belongs, or if it's not specifically about themes, templates, or plugins (eg a general HTML question), then this board (coding help) is fine too: (: