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

XF 1.2 Styling Subforums

Discussion in 'Styling and Customization Questions' started by Giverny, Nov 18, 2013.

  1. Giverny

    Giverny Member

    Hi all,

    Just a quick question... is there any easy way to style the subforums in screenshot #1 to look similar to screenshot #2 but with the header saying 'Subforum' or something?

    #1
    [​IMG]


    #2
    [​IMG]

    Sorry to keep pestering with silly questions - I've not been left in charge of styling the forum (thankfully) and the guy who's doing it isn't quite sure how to go about this bit.

    Thanks!
     
  2. Shelley

    Shelley Well-Known Member

    you could try something like the following by adding to EXTRA.CSS

    Code:
    .forum_view .nodeList  {
    border-radius: 4px;
    border-top: 20px solid #f23318;
    border-bottom: 3px solid #f23318;
    border-right: 3px solid #f23318;
    border-left: 3px solid #f23318;}
    The output of that is as follows (Screenshot below)

    Screenshot_19.png
     
  3. Giverny

    Giverny Member

    Thanks, Shelley. Would there be any way to also give it a title within the red text?
     
  4. Shelley

    Shelley Well-Known Member

    hmmmm not as far as i know since it's a border. I suppose you could use :before selector and IDs to be more specific .

    Not an ideal way of doing this but you could do the following where the node_ID of the very top node can be manipulated to get this display. TBH There's probably a much easier way of doing this but the following would work. Bare in mind you have to enter the top subforum node id. Your ID will differ from below so you'll most likely have to change this.


    Code:
    .forum_view .nodeList  {
    border-radius: 4px;
    border-top: 5px solid #f23318;
    border-bottom: 3px solid #f23318;
    border-right: 3px solid #f23318;
    border-left: 3px solid #f23318;
    padding: 0 0 10px; }
    
    .forum_view .level_2.node_30:before {
    background-color: #f23318;
    border-bottom: 3px solid #f23318;
    content: "title your forum Here";
    display: block;
    text-align: center;
    color: white;
    font-size: 30px;}
    
    Screenshot_21.png
     

Share This Page