News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

How to get the boards on index a little alternate colored?

Started by sangham.net, May 29, 2015, 07:47:14 AM

Previous topic - Next topic

sangham.net

Valued SMF-Supporter and SMF-friends,
dear programmers and stylers,

Atma (me) would like to make the colors/style of the background of the board over view alternated, so that they might be easier to discriminate.

As far as seen the use of window.. and window2.., which is actually the way of alternation, as it seem, are used to discriminate the style within the certain board description already.

Does anybody have a good and easy handle able idea to make such alternation?

Thanks a lot in advanced!

metta & mudita
Samana Johann

shadow82x

What theme/SMF Version are you using?

Unfortunately changing the windowbg classes are far from ideal as that'd change much than just the board descriptions style. (It would change numerous elements across the theme.)

You'll likely want to create a new css class for alternating board colors and update a few lines of code in your theme's BoardIndex file.
Colin B
Former Spammer, Customize, & Support Team Member

Antechinus

It should be possible to do it without defining a new class. I'd be playing around with CSS3 nth-child tricks. They're commonly used for zebra striping tables.

sangham.net

Quote from: mcblaber on May 30, 2015, 03:37:58 AM
What theme/SMF Version are you using?

Unfortunately changing the windowbg classes are far from ideal as that'd change much than just the board descriptions style. (It would change numerous elements across the theme.)

You'll likely want to create a new css class for alternating board colors and update a few lines of code in your theme's BoardIndex file.
Valued mcblaber,

Atma had seen, yes. Especially when it comes to frames there is not much freedom. On the other side quick to change colors.

So no change to do it within the Css, right? What would be needed to change in BoardIndex to have the board sections be alternated in color? Actually something most software use as such is compfortable for the eye to discriminate within a list.

Alternate seems to require such as a code. Request by even and uneven board number?

sangham.net

Quote from: Antechinus on May 30, 2015, 05:18:43 PM
It should be possible to do it without defining a new class. I'd be playing around with CSS3 nth-child tricks. They're commonly used for zebra striping tables.
Valued Antechinus,

sounds interseting, put honestly Atma (me) does not understand this language totally you use here. Atma guesses that he would need simply samples of nth-child tricks in use, maybe even for zebra striping tables.

Thanks a lot.

Samana Johann


sangham.net

Looks exactly like that Atma hoped to find. Great valued Antechinus, thanks. Atma will try shortest links advices.

sangham.net

**hm... not easy to find a common denominator... those are all <tr >s, the child nr. is by creation, not by placement and there are BoardChilds between... seems to go to either a mathematics diplom work or Atma does not see the short cut for now. Simply by <tr >s, but than the childs would be included. **

sangham.net

The "nth-child" is a great tool, but Atma could not find a solution with it in this case, valued Antechinus.

Bigguy

To stagger board colors, add this to index.css.

#board_1, #board_3, #board_5, #board_7, #board_9, #board_11, #board_13, #board_15, #board_17, #board_19, #board_21, #board_23, #board_25 {
background: #fff;
}
#board_2, #board_4, #board_6, #board_8, #board_10, #board_12, #board_14, #board_16, #board_18, #board_20, #board_22, #board_24, #board_26 {
background: #f7f7f7;
}


However, this only functions properly when background colors are removed from the "windowbg" sections.

.windowbg, .windowbg2, .windowbg3, #preview_body {
}


This is best with a new forum, before you create boards. If you currently have boards then you may need to rearrange them in admin to stagger the background colors properly. Altering the css per board will work as well.

Example: http://argthemes.com/index.php

Arg wanted me to post this for ya ;)

sangham.net

Though so, thanks Mr. Bigguy. No other change as to do it on the #board_xy class but what about the windowbg class backgrounds elsewhere?

If making a manual styling for each board_xy isn't there a possibility to overwrite the backgroundcolor of the windowbg classes?

Not easy.

(its not a new board, but that would be no problem) if sorted like Mr. Biggguy did in this sample, its simple to use the "nth-child" if one does not have child boards... Thanks anyway for the great effort, Mr Bigguy. Gratitude.

Bigguy

As I said at the end of all that, Arg wanted me to post it. He will see what you posted and I am almost sure will get back to me about this. :)

sangham.net


Gary

Quote from: sangham.net on May 31, 2015, 02:31:40 PM
Not easy.
Uh... yes it is. Define !important to the attributes before the closing semi-colon.


And what's child boards got to do with how nth-child works, unless you wanted each individual board to have their own colours.


.class_name:nth-child(odd)
{
  color: #FFCC31 !important;
}
.class_name:nth-child(even)
{
  color: #FFFFCC !important;
}


Simple.
Gary M. Gadsdon
Do NOT PM me unless I say so
War of the Simpsons
Bongo Comics Fan Forum
Youtube Let's Plays

^ YT is changing monetisation policy, help reach 1000 sub threshold.

sangham.net

Thanks for the !importand  hint, Mrs. Gary.

How ever, it could be done only one by one as far as seen. "board_xy class" So far no anchor, useable common denominator has been seen. And the <tr>s have class names which seem to be not css friendly, like "icon1 stickybg" without underscore (in the next table, singe the forum indexes).

Not easy.

Gary

Quote from: sangham.net on May 31, 2015, 04:52:52 PM
Mrs. Gary.
That had BETTER be a typo. Since I didn't know that 'Gary' changed to be a unisex name

Quote from: sangham.net on May 31, 2015, 04:52:52 PM
How ever, it could be done only one by one as far as seen. "board_xy class" So far no anchor, useable common denominator has been seen. And the <tr>s have class names which seem to be not css friendly, like "icon1 stickybg" without underscore (in the next table, singe the forum indexes).
if there's a space when defining classes or ID's that means it's drawing the attributes of two classes with those separated names and stacking them together. So the tr you're talking about has the elements of icon1 and stickybg combined. It's just how CSS is done in places to save space to prevent having to define the two sets of attributes together in one class as well as separately for other areas of the site that calls one but not the other.

From what I can see amidst your extremely bad English is that alternating colours without having to use Windowbg/2 is the only thing you're after which, like ant and I have said is perfectly doable using nth-child. I can't speak for ant, but I've been there done it and got the T-Shirt.

If you're using a element, class or id where :nth-child is defined it'll follow the algorithm that it's given in brackets. With odd or even applying here. There's no need to determine each one individually.
Gary M. Gadsdon
Do NOT PM me unless I say so
War of the Simpsons
Bongo Comics Fan Forum
Youtube Let's Plays

^ YT is changing monetisation policy, help reach 1000 sub threshold.

sangham.net

Could have been the avatar picture. Mr. Gary, thanks for your patient end effort. Almost 5:00am and 1 or two hours a day are really needed. Will try it again after the nap even have already tried the most Mr. Gary mentioned.

Maybe Mr. Gay likes to take a look how to integrate a decent alternation in that tables. Index board Index forum

Gary

Quote from: sangham.net on May 31, 2015, 05:52:57 PM
Could have been the avatar picture.
First I've seen anyone think my avatar is actually me... first for everything I guess. It's Terra Branford, the protagonist of Final Fantasy VI.


Anyway -
Quote from: sangham.net on May 31, 2015, 05:52:57 PMMaybe Mr. Gay likes to take a look how to integrate a decent alternation in that tables. Index board Index forum
For the index something like this should suffice:


.table_list tbody.content tr:nth-child(odd)
{
//
}
.table_list tbody.content tr:nth-child(even)
{
//
}



For the message index, assuming you want them on the actual topics themselves

.table_grid tbody tr:nth-child(odd)
{
//
}
.table_grid tbody tr:nth-child(even)
{
//
}



Granted, I've not tested the code, so you can fiddle around with it on your own.
Gary M. Gadsdon
Do NOT PM me unless I say so
War of the Simpsons
Bongo Comics Fan Forum
Youtube Let's Plays

^ YT is changing monetisation policy, help reach 1000 sub threshold.

sangham.net

Thanks Mr. Gary,

that's the try Mr. Biggay suggested, valued Mr. Gray. Would be good if there wouldn't be child bordes mixed in between and there is no real anchor to get them out of a simply algorithmic.

Steve

You really need to get the names of the people you're talking to right. It's Gary, not Gray and dropping the Mr./Mrs./whatever will prevent any situations like you had when you said 'Mrs. Gary' and 'Mrs. Steve' ... ;)
DO NOT pm me for support!

Advertisement: