1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Splitting Category Nodes

Discussion in 'Styling and Customization Questions' started by Dynamic, Mar 14, 2012.

  1. Dynamic

    Dynamic Well-Known Member

    Hey guys, sorry for all the questions. Hopefully it will help others out too.

    Is there a way to split up the node list to display a different "table" for each category?

    Right now it looks like this

    |--------------------------------------|
    |Cat Name |
    | |
    |Node1 |
    |Node2 |
    |Node3 |
    |Node4 |
    | |
    |Cat Name |
    | |
    |Node1 |
    |Node2 |
    |Node3 |
    |Node4 |
    | |
    |Cat Name |
    | |
    |Node1 |
    |Node2 |
    |Node3 |
    |Node4 |
    |---------------------------------------|

    I would like it to look like this

    |--------------------------------------|
    |Cat Name |
    | |
    |Node1 |
    |Node2 |
    |Node3 |
    |Node4 |
    |---------------------------------------|

    |--------------------------------------|
    |Cat Name |
    | |
    |Node1 |
    |Node2 |
    |Node3 |
    |Node4 |
    |---------------------------------------|


    |--------------------------------------|
    |Cat Name |
    | |
    |Node1 |
    |Node2 |
    |Node3 |
    |Node4 |
    |---------------------------------------|

    Any help would be great :D

    Thanks.
     
  2. Forsaken

    Forsaken Well-Known Member

    http://www.se7ensins.com/forums/

    Something similar to the way their categories are?
     
  3. Dynamic

    Dynamic Well-Known Member

    Yeah dude! Exactly like that :D
     
  4. Forsaken

    Forsaken Well-Known Member

    Code:
    .category
    {
    padding:10px; 
    }
    
    You'll have to do whatever else you need to it, but that is what I used when coding Se7ensins.
     
  5. Dynamic

    Dynamic Well-Known Member

    Hi Forsaken,

    It did not work. It moved the titles down, but did not make each of them their own little box. The background colour is still visible between the lists.

    Thanks.
     
  6. Forsaken

    Forsaken Well-Known Member

    Code:
    .nodeList .category { 
    background-color: #FFFFFF;
    border-bottom-color: #E0E0E0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: #E0E0E0;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: #E0E0E0;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: #E0E0E0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top-style: solid;
    border-top-width: 1px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    position: relative;
    }
    
    Thats the code I used for Se7enSins, so it should work.
     
    MichaelDance and Dynamic like this.
  7. Dynamic

    Dynamic Well-Known Member

    Worked!!

    Thanks heaps man, I really appreciate that :D
     
  8. MichaelDance

    MichaelDance Well-Known Member

    Thank you :D
     
  9. gldtn

    gldtn Well-Known Member

    How about turning that into this ;)

    Code:
    .nodeList .category {
        background-color: #FFFFFF;
        border: 1px solid #E0E0E0;
        border-radius: 5px;
        padding: 5px;
        position: relative;
    }
     
    MichaelDance likes this.
  10. Forsaken

    Forsaken Well-Known Member

    The previous code was copy and pasted from the editor of my browser so it didn't use shorthand.
     
    gldtn, Shelley and MichaelDance like this.

Share This Page