Announcement

Collapse
No announcement yet.

Alternating Row Colors for Topics Using Pure CSS (Solved for Cloud)

Collapse
X
Collapse
First Prev Next Last
  • Filter
  • Time
  • Show
Clear All
new posts

    Alternating Row Colors for Topics Using Pure CSS (Solved for Cloud)

    Inside each individual forum, I looked and looked for a way to do alternating row colors to get rid of all the white blank space. I couldn't find a pure CSS approach so I did the trial and error method and this is what I came up with that works.

    If you want the first row and every other row from there to be colored, use the following css. Note, I did this for an individual page as I have some pages I don't want this effect on b/c it's not necessary. Change the page to whatever page you're on or just remove it to have the effect for all pages.

    Code:
    .page66 .topic-list-container .topic-list .topic-item:nth-child(odd) {
      background: #CCC;
    }
    If you want the 2nd row and every other row from there to be colored, use the following css.

    Code:
    .page66 .topic-list-container .topic-list .topic-item:nth-child(even) {
      background: #CCC;
    }
    Change color as necessary to achieve the desired effect.

    Click image for larger version

Name:	Screen Shot 2018-05-07 at 9.38.21 PM.png
Views:	1
Size:	205.7 KB
ID:	10862

    #2
    Thanks for sharing!

    Comment


      #3
      Nice Mod

      I like the concept but how can I implement this without affecting any of those sticky topics? I would like those to all stay the same original standout colors

      Thanks

      Comment


      • Mitch
        Mitch commented
        Editing a comment
        Or even a code I could add to custom set it so it won't start till so many threads down.

      #4
      I did this with sticky topics. I’ll post the code when I get to my computer today.

      There’s a .sticky attribute that I used twould avoid messing with the sticky topics. But it also requires using odd and even nth child.

      Comment


      • Mitch
        Mitch commented
        Editing a comment
        Thanks

      #5
      Code:
      .topic-list-container .topic-list .topic-item:nth-child(odd) {
      background: whitesmoke;
      }
      .topic-list-container .topic-list .topic-item.sticky:nth-child(odd) {
      background-color: #d2d2d2;
      
      }
      .topic-list-container .topic-list .topic-item.sticky:nth-child(even) {
      background-color: #d2d2d2;
      }
      My full code to include sticky topics. I removed page numbers for this example. Change color for each as you see fit

      Comment


        #6
        Beautiful,, it worked nicely Thanks much...

        While were at it is there anything to add for soft deleted posts? So they don't change either

        Comment


          #7
          Code:
          .topic-list-container .topic-list .topic-item.deleted:nth-child (odd) {
          background-color: #D2D2D2;
          }
          .topic-list-container .topic-list .topic-item.deleted:nth-child (even) {
          background-color: #D2D2D2;
          }
          change color as required

          Comment


            #8
            Here is my full code with color changes. The soft deleted still seems to be unchanged




            .topic-list-container .topic-list .topic-item:nth-child(odd) {
            background: #ECECEC;
            }
            .topic-list-container .topic-list .topic-item.sticky:nth-child(odd) {
            background-color: #FCF7D7;

            }
            .topic-list-container .topic-list .topic-item.sticky:nth-child(even) {
            background-color: #FCF7D7;
            }
            .topic-list-container .topic-list .topic-item.deleted:nth-child (odd) {
            background-color: #E30018;
            }
            .topic-list-container .topic-list .topic-item.deleted:nth-child (even) {
            background-color: #E30018;
            }

            Comment


              #9
              I just looked up the variable path using the inspect mode on my browser and that's what it came to so if that doesn't work, maybe it's best to hard code it using the following:

              Code:
              .topic-list-container .topic-list .topic-item.deleted {
              background-color: #E30018 !important;
              }
              I don't have a soft deleted topic on a row where the color has been changed so I can't replicate this on my site at the moment.

              Comment


                #10
                ``````

                Comment


                  #11
                  That hard code did the trick. Thanks again well done

                  Comment


                    #12
                    How do I get a similar effect on my main forum list as well?

                    Comment

                    Working...
                    X