user tip soaringeagles guide to styling jamrooms ning skin

soaringeagle
@soaringeagle
11 years ago
3,304 posts
after a couple days of frustration with styling im finaly getting the hang of it and the trick of its really finding the items (and yea i know nearly everythings an item) that you want to target in the templates and add class names or containing divs to get the control you desire.

a few important facts to remember

1 your skin is not the only templates you will need to add classes to, the skin and modules work together to build a page. 1 example is the ning discussion page and details, these templates are found in the ning discussions module
2 templates call other templates and modules and if you cant find what your looking for, like the comments on a forum post, chances are (and in this case is) theres an if for else type statement calling those comments, the likes, and everything else in that block
3 surrounding an if else type statement with a containing div alows you to target all items within that div you added
4 little lost? 2 quick ways to find yourself and the code your targetting 1 put .hereiam {background-color:red!important;} in your css then simply add heriam to any element and everything withinit turns bright red you can alternately add <h1>here i am</h1> and see a heading in the page (yes this is a guide for dummies)

on the front page i i targetted the headings and "items" to get this glazed "capped" look but that left all other items hanging out there with that flat chopped off top look

to fix this i had to edit a few templates adding classes then targetting all items within or in some cases all but the 1st item (.item:nth-child(n+2) targets all items after the 1st child)

on the forum lists page this was simple to do using the nth-child method and adding classes to the title area for padding

and all i did was add the border radius to all but the 1st "item"
i am not near done just wanted to share examples of how to get the control you want

heres the css ive used so far for forum tweaks

.ningdiscusscommentdetails .item,.discussfirstpost .item:nth-child(n+2),.ningdiscussblockcontent .item:nth-child(n+2) {-webkit-border-radius:2em;-moz-border-radius:2em;border-radius:2em;}
.title.discusstitleblock {
  padding: 1em 3em 0.3em 2em;
}

real simple
heres a discussuion detail page now to target the comments likes shares etc all i did was wrap a div around the if that brings in those items

   <div class="ningdiscusscommentdetails">
        {if !isset($item.discuss_forbidden)}
            {* bring in the item details *}
            {jrCore_item_detail_features module="jrNingDiscuss" item=$item}
        {/if}
        </div>

at 1st i felt like it was a real oversight to not have built in classes but now im starting to see how it makes sence to have a more "blank slate" aproach that lets you put them where you want them or to surround them with containing divs to target a group of items


just thought this would help some of you out who are trying to get used to the new system
jpg
 •  59KB




--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

updated by @soaringeagle: 01/13/15 10:55:06AM

Tags