styling question

[bogie]

I notice somewhere in the template files is a box to give elements a CSS class, now i am a numpty at this sort sort of thing.........

Does that mean I can give the box arrowed above, a name in the template and then colour or alter that box independently of the others?

If so I assume this is true of 'other' box's?

Any guidance on doing this is greatly appreciated.

We have decided to open a couple of new sites, and convert most existing sites over to woltlab, so i am having to learn how to theme them etc . Not my strong point seeing as i am colour blind, and have all the style of a Bag lady.

 

[dtdesign]

I recommend that you play around with the developer tools of your browser (can be accessed with F12 on Windows by default), as they allow you to inspect the page and quickly identify parts.

The box shown above is identified by the CSS selector

.boxesSidebarRight .box[data-box-identifier="com.woltlab.wcf.SignedInAs"]

You can use it to apply a custom background-color property or use any other CSS instructions.

 

[bogie]

I recommend that you play around with the developer tools of your browser (can be accessed with F12 on Windows by default), as they allow you to inspect the page and quickly identify parts.

The box shown above is identified by the CSS selector

.boxesSidebarRight .box[data-box-identifier="com.woltlab.wcf.SignedInAs"]

You can use it to apply a custom background-color property or use any other CSS instructions.

Hi
Yes thats how i have been doing it, but it changes the colour of all side box's, my question was can we easily separate the box's? in other words is there somewhere we can give each another CSS class name?

 

[dtdesign]

.boxesSidebarRight .box[data-box-identifier="com.woltlab.wcf.SignedInAs"] {
    background-color: red;
}

This code applies the red background color only to the box marked in your screenshot above, all other boxes will not be affected. Other than that, you can edit the boxes through your ACP and set a custom CSS class name, there is a dedicated input field for this.

 

[bogie]

.boxesSidebarRight .box[data-box-identifier="com.woltlab.wcf.SignedInAs"] {
    background-color: red;
}

This code applies the red background color only to the box marked in your screenshot above, all other boxes will not be affected. Other than that, you can edit the boxes through your ACP and set a custom CSS class name, there is a dedicated input field for this.

Thanks that didnt show in my browser.

I wasnt sure if i had seen the set custom class name, thats the bit i am after thanks.