Version 1.0: Add alternating background colors to rows

Discussions

Ted @ Crowdstack

You can add alternating background colors to rows in Crowdstack 1.0.

For instance, here is an unstyled list of forums (v1 sites only):

Screen Shot 2015-10-01 at 11.56.18 AM

We can apply alternating background colors to these forums easily by adding this CSS to our theme:

.h-ubb-directory-forum-box:nth-child(odd) {
background-color:#f8f8f8;
border:1px solid #dfdfdf;
padding:10px;
}
.h-ubb-directory-forum-box:nth-child(even) {
background-color:#f0f0f0;
border: 1px solid #dfdfdf;
padding:10px;
}

After we apply this CSS, our Forum List looks like this:

The CSS above specifically tagets the .h-ubb-directory-forum-box, so if you are looking to add alternating colors for a different list, you'll want to make sure you target that specific class.

Attachments

Show

Replies sorted oldest to newest

neilHoop.la All-Star Bug Hunter

Thanks for the code. This is a very helpful organizational option we had in the old Hoopla (and Eve, God rest her soul). Would be nice to see this as a true theme option.

10/12/1512:08 PM

Bradley BlinnHoop.la All-Star

Ted, I copied and pasted your code and it worked perfectly. Thx. Might you be willing to provide the code for when you are within a forum and its displaying the list of topics? The above code doesn't work on this page and I have no idea how to write the CSS to target this

10/13/158:48 PM

LoriCrowdstack, Inc.

Hey, Bradley:

try using the same code, except instead of .h-ubb-directory-forum-box

you'll use .h-ubb-topic-list-box

10/14/157:26 PM

Bradley BlinnHoop.la All-Star

this worked perfectly. Thanks!

10/15/1510:36 AM

Ted @ CrowdstackSocial Strata

Here's a similar tip that actually renders things more closely to how things looked in Hoop.la 1.0:

https://hey.crowdstack.com/support/topic/encase-...

10/15/151:46 PM

Add Reply

<ul id="{%=id%}ButtonGroup" class="button-group h-popup-buttons even-button-group even-1">
    <li id="{%=id%}Okay_buttonContainer"><a id="{%=id%}Okay" href="javascript:void(0);" class="button success no-margin-bottom h-alert-modal-ok-button" role="button">OK</a><script type="text/javascript">
        (function() {
            function {%=id%}Okay_click(event, data) {
            {%=id%}Popup.hide();
        }
        
                $('#{%=id%}Okay').on('click', {%=id%}Okay_click);
        })();
    </script></li></ul><a href="javascript:void(0);" class="close-reveal-modal" aria-label="Close Modal">&#215;</a><div class="last-modal-focus focus-utility-element" tabindex="0"></div>
</div>
<script type="text/javascript">
        (function() {
            {%=id%}Popup = new SS.Popup.ModalPopup('{%=id%}');
        })();
    </script>

Skip to main content

Discussions

Attachments

Add Reply

Membership Required

Remove From Your Block List

Block

Please wait...