CSS and image change per board

[Sam]

Hey,
I was wondering if it possible to change the css styling (colours) and images per board. I've found a couple of plugins that will allow me to change things like the background and such, but not colours. How would I go about doing this?

[Retread]

Hi Sam

If you want to change specific things in just one board, you could wrap the css in <style> </style> tags and put it in the board header.

The caveat here is those changes will be applied always on that board and it won't change when someone selects a different theme in their profile.

EDIT #2:

I'm putting this section in a spoiler as it seems to be the hard way.

SPOILER: Click to show

And it would probably be a lot of work finding the class references for each thing you want to change.

For instance, if you wanted to change the styling on the welcome text and the link to login/register look in the forum wrapper. You'll find that element is wrapped in paragraph tags with id="welcome":

					<p id="welcome">
						{if !$[current_user.is_member]}
							Welcome Guest.
							{if $[login_link] || $[register_link]}
								Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
							{/if}
						{else}
							<span>Welcome $[current_user.name].</span>  $[logout_link]
						{/if}
					</p>

You could redefine certain attributes of #welcome. 

For instance if you wanted font-size 20px
with the welcome text in purple comic sans ms
and the link in crimson impact,

You'd put something like this in your board header

<style>
#welcome {color:purple; font-family:comic sans ms; font-size:20px;}
#welcome a { color:crimson; font-family:impact;}    
</style>

A couple of tweaks here and there would be manageable. Wholesale changes could be a nightmare.

EDIT:

It might be possible to refer to a different style sheet in that board, but I don't actually know if that can be done.

EDIT #2:

Apparently you could refer the style sheet for a different theme you have on your forum. Use the View Page Source on your browser to find the link for the style sheet when viewing the special theme you want to apply to a specific board. It will look something like this:

<link rel="stylesheet" type="text/css" media="screen" href="//storage.proboards.com/SEVERAL-NUMBERS-HERE/css/BUNCH-LETTERS-HERE.css" id="forum_style" />

If you paste that into the Board Header, you'll have all the styling from that other theme being applied in that board only, and regardless of the theme you have selected.

[Nscalerr 🐺]

Edit:
It might be possible to refer to a different style sheet in that board, but I don't actually know if that can be done. - Also it may have unwanted side effects!


Edit 2
Apparently you could refer the style sheet for a different theme you have on your forum. Use the View Page Source on your browser to find the link for the style sheet when viewing the special theme you want to apply to a specific board. - While it may be possible, refer to my caveat above!


Far better and safer to have just the CSS that is required for the styling in each board, with the proviso that it is cached in the stylesheet and not in each board.

Sam which part of the board do you wish to change, as the CSS varies a bit depending on which bit you are wanting to target??

[Former Member]

So headers and footers for each board.. You put in a style tag into the header of the board you want to have special coloring.

BTW this is that guy from LMBE called Henny4315.

[Sam]

Feb 11, 2019 9:16:34 GMT -8 Retread said:

Hi Sam

If you want to change specific things in just one board, you could wrap the css in <style> </style> tags and put it in the board header.

The caveat here is those changes will be applied always on that board and it won't change when someone selects a different theme in their profile.

EDIT #2:

I'm putting this section in a spoiler as it seems to be the hard way.

SPOILER: Click to show

And it would probably be a lot of work finding the class references for each thing you want to change.

For instance, if you wanted to change the styling on the welcome text and the link to login/register look in the forum wrapper. You'll find that element is wrapped in paragraph tags with id="welcome":

					<p id="welcome">
						{if !$[current_user.is_member]}
							Welcome Guest.
							{if $[login_link] || $[register_link]}
								Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
							{/if}
						{else}
							<span>Welcome $[current_user.name].</span>  $[logout_link]
						{/if}
					</p>

You could redefine certain attributes of #welcome. 

For instance if you wanted font-size 20px
with the welcome text in purple comic sans ms
and the link in crimson impact,

You'd put something like this in your board header

<style>
#welcome {color:purple; font-family:comic sans ms; font-size:20px;}
#welcome a { color:crimson; font-family:impact;}    
</style>

A couple of tweaks here and there would be manageable. Wholesale changes could be a nightmare.

EDIT:

It might be possible to refer to a different style sheet in that board, but I don't actually know if that can be done.

EDIT #2:

Apparently you could refer the style sheet for a different theme you have on your forum. Use the View Page Source on your browser to find the link for the style sheet when viewing the special theme you want to apply to a specific board. It will look something like this:

<link rel="stylesheet" type="text/css" media="screen" href="//storage.proboards.com/SEVERAL-NUMBERS-HERE/css/BUNCH-LETTERS-HERE.css" id="forum_style" />

If you paste that into the Board Header, you'll have all the styling from that other theme being applied in that board only, and regardless of the theme you have selected.

Hey,
How do I do that? You can't edit the individual css of a board can you? Or would I have to use the "$[category.board.id] == ##"? I have looked into using this, but with it I can't change things in the Forum Wrapper which is one of the things I need to do.
As this is a LEGO forum, for example: The Star Wars board will have a different background and a different header image and different colours, while the LEGO General board will have normal colours and backgrounds?

What do you mean by "If you want to change specific things in just one board, you could wrap the css in <style> </style> tags and put it in the board header."? If I put it in the board header in the Layout section then won't it just change all the boards?

[Sam]

Feb 11, 2019 19:23:01 GMT -8 Nscalerr 🐺 said:

Edit:
It might be possible to refer to a different style sheet in that board, but I don't actually know if that can be done. - Also it may have unwanted side effects!


Edit 2
Apparently you could refer the style sheet for a different theme you have on your forum. Use the View Page Source on your browser to find the link for the style sheet when viewing the special theme you want to apply to a specific board. - While it may be possible, refer to my caveat above!


Far better and safer to have just the CSS that is required for the styling in each board, with the proviso that it is cached in the stylesheet and not in each board.

Sam which part of the board do you wish to change, as the CSS varies a bit depending on which bit you are wanting to target??

Well the for example on the Star Wars board I want a different background image, a different forum header image, and different colours.

[Sam]

Feb 13, 2019 14:09:24 GMT -8 @smithj said:

So headers and footers for each board.. :P You put in a style tag into the header of the board you want to have special coloring. :P

BTW this is that guy from LMBE called Henny4315.

Wait there's a section for that?

[Nscalerr 🐺]

Feb 14, 2019 1:02:49 GMT -8 Sam said:

What do you mean by "If you want to change specific things in just one board, you could wrap the css in <style> </style> tags and put it in the board header."? If I put it in the board header in the Layout section then won't it just change all the boards?

Hi sam

It means you have the following and you add it to just the board you want to change in Admin Home > Structure > Headers & Footers > Manage

<style>
Some CSS here.
</style>


So for Star Wars you would go to the board for Star Wars and add the following to just that board in the above area. This will then only affect that board. Of course add your own images and colours.
header {
background: url("add link to image here");
}
.board {
background: url("add link to image here");
color: #000000;
}

[Former Member]

Feb 14, 2019 1:06:35 GMT -8 Sam said:

Feb 13, 2019 14:09:24 GMT -8 @smithj said:

So headers and footers for each board..  You put in a style tag into the header of the board you want to have special coloring.

BTW this is that guy from LMBE called Henny4315.

Wait there's a section for that?

Yes... legomessage.boards.net/admin/structure/headers
You'll see a list of all boards. Just click on the board and start coding.