Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 12, 2020 at 12:32 pm #1212127
    LarryLayouter

    Hi support,
    using a lot of grid rows on a subpage I would like to apply alternating background colors to the rows by CSS. Of course this could be done by applying “main content / alternate content” in the grid row’s color section. But the grid rows change from time to time and doing it manually is no option.
    I already tried the following approach but without success:

    .ausstellungen div#main:nth-child(2n) div {background-color: red !important;}

    Could you please take a look?
    Details in the private section.
    Thanks a lot

    May 12, 2020 at 1:19 pm #1212158
    Guenni007

    as participant i could not see your link – but tell me if all grid-rows have the same grid cell count?
    If grid-rows under each other do you like to change the sequence – to form a kind of checkerboard pattern?

    May 12, 2020 at 1:23 pm #1212159
    LarryLayouter
    This reply has been marked as private.
    May 12, 2020 at 1:43 pm #1212168
    Guenni007

    maybe – even if you could not create a simple example or post the page:

    This will give you a hint to the right way :

    #main .av-layout-grid-container:nth-of-type(odd) .flex_cell:nth-of-type(even) {
 background: #900 !important;    
}
#main .av-layout-grid-container:nth-of-type(odd) .flex_cell:nth-of-type(even) * {
 color: #fff !important;    
}
#main .av-layout-grid-container:nth-of-type(even) .flex_cell:nth-of-type(odd) {
 background: #900 !important;    
}
#main .av-layout-grid-container:nth-of-type(even) .flex_cell:nth-of-type(odd) * {
 color: #fff !important;    
}

    https://webers-testseite.de/colorize-grids/

    On responsive breakpoint you had to style them with other rules :

    May 12, 2020 at 2:09 pm #1212176
    LarryLayouter

    Guenni, this is great and very close to what I meant – thanks a lot!
    (Ich nehme an, Du kannst „private reply“ als Participant auch nicht sehen?…?)

    For the public:
    I wanted each whole grid row to change it’s background color alternating:
    first row = color 1
    next row = color 2 etc.

    I changed Guennis code to 

    #main .av-layout-grid-container:nth-of-type(odd) {background: #fff !important;}
#main .av-layout-grid-container:nth-of-type(even) {background: #efefef !important;}

    … and this works …

    May 12, 2020 at 2:31 pm #1212183
    Guenni007

    aha – also nur die container gesamt .
    Deshalb hat es auch nicht mit nth-child geklappt. Wahrscheinlich hattest du noch andere Container dazwischen – die zählen bei child alle mit.
    nth-of-type ist selektiver.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.