Shifting/Changing Post Backgrounds

Moehrenstein

Hi there! My Forum ist getting nicer and I am learning more css than ever!

For the user expierience i would like to color the post backgrounds diffrently. So I would like to have diffrent backgrounds for even and uneven posts. (Like dark grey for the first, white for the second, dark grey for the third, white for the fourth and so on.) This way the user can diffrence faster between single posts in the discussion.

I managed to color only all of them at a time, so I hoped some of you coding pros might have a tipp for me how i could archieve this kind of behavior on my forum.

I am using 2.2.1 and bootstrap as theme. (sandstone version.)

R_J

Use the "Inspect Element" function of your browser. You will see that your comments either have the class "Item Alt ItemComment" or "Item ItemComment". So styling all comments of class "Alt" will give you the desired result.

R_J

Use the "Inspect Element" function of your browser. You will see that your comments either have the class "Item Alt ItemComment" or "Item ItemComment". So styling all comments of class "Alt" will give you the desired result.

Moehrenstein

Gnaaargh, i looked the hole night on the classes and looked for something like this^^ Thank you very much! I shouldnt sit that long on my computer^^

If anybody else encouter this an stumble upon this thread via search here is the code i used via edit css:

.Item.Alt.ItemComment {
background-color: #F5F5F5;
}

R_J

I would think about making it less specific. In the discussion list, the discussion items also have this class and also the messages in a conversation. Maybe your styling looks more consistent if those alternating lines are styled the same wherever it is possible.

Moehrenstein

Hm, i checked the discussion list and the messages, but it seems that the code only affects the posts.

R_J

That's what I've said: your code is so specific (it even includes ItemComment) that it only works on comments. You could try finding a css rule that works for all Alt items.

R_J

And what I totally forgot was that there is a way to do so in CSS without any styling at all: https://www.w3.org/Style/Examples/007/evenodd.en.html

vrijvlinder

There are ways to add classes to existing classed elements via plugin or jquery
This is all dependent on the theme and the default theme code. You could either add this via theme or plugin.. to pretty much anything. Then use the your new class name to add the desired changes in the css file.

Example:

<script type="text/javascript">
jQuery(document).ready(function($){
$( ".Message" ).addClass( "myClass yourClass" );
 });
</script>';

hgtonight

@vrijvlinder said:
There are ways to add classes to existing classed elements via plugin or jquery
This is all dependent on the theme and the default theme code. You could either add this via theme or plugin.. to pretty much anything. Then use the your new class name to add the desired changes in the css file.

Example:

<script type="text/javascript">
jQuery(document).ready(function($){
$( ".Message" ).addClass( "myClass yourClass" );
 });
</script>';

You should just change your CSS to match the jquery selector instead of appending new classes.

Unless you are doing something really funky for filtering, or dynamic, JS shouldn't be used to add classes.