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

Pages

Discussion in 'Styling and Customization Questions' started by Drae, Feb 16, 2013.

  1. Drae

    Drae Active Member

    At the moment I have a lot of pages on my Xenforo forum. At present, its content is wrapped within <div class="primaryContent"> so it has a background.

    However, in my latest skin, the primaryContent is transparent with no colour applied to it, so I was wondering if there is a way to style the pages' backgrounds per skin without excessive coding in every page (I have over 100 pages so anything that means it does it automatically is awesome)? I'm assuming it'll need the extra.css template or I could create a new css template specifically for the pages?
     
  2. MagnusB

    MagnusB Well-Known Member

    I think all pages have
    Code:
    <div id="content" class="pagenode_container">
    At the top.
     
    Drae likes this.
  3. Drae

    Drae Active Member

    I've tried editing the node_page.css with a few tries, including just now I did this:

    .pagenode_container {
    background: #000;
    }

    But it remained with no background.
     
  4. MagnusB

    MagnusB Well-Known Member

    Looking more at the html, pagenode_container would be a poor choice, it is the top parent (not adjusting for .pageWidth).

    Can you try #pageNodeContent
     
    Drae likes this.
  5. Drae

    Drae Active Member

    No additions were being acknowledged in the page_node.css so I went into the extra.css.

    This worked:

    .pagenode_container {
    background: #000;
    width: 998px;
    margin: auto;
    }

    But I also tried your way (using #pageNodeContent) and just the background requirements and that worked too.

    Many thanks! Bit annoying that it has to be coded into the extra.css when there's a css template for the pages themselves. Wonder why it doesn't work in that bit.
     
  6. MagnusB

    MagnusB Well-Known Member

    Are you using an element inspector such as Firebug or Developer tools in Chrome? They are usually the best way of debugging these problems. To me, it sounds like there was an order problem, and placing it in extra.css, you changed it to the "correct" order. It might also be that the rule just did not load at all, for some reason.
     
  7. Drae

    Drae Active Member

    I was using Firefox's Inspect element thing :) Thanks for all your help, Magnus.
     
  8. MagnusB

    MagnusB Well-Known Member

    Get firebug instead, it is much better UI (IMO) for that sort of thing, especially the "Computed" view, which lets you see all CSS properties applied to the element, and which rule is applying them. The firefox built in tools have a way to go in terms of usability, IMO.
     
    Drae likes this.
  9. Drae

    Drae Active Member

    Awesome, I'll look into that, thanks!

    I'm currently having an issue on the page snow where the font is the wrong size. I've tried both using this in the CSS (which worked for my other skins) :

    Code:
    p {
    padding-bottom:5px;
    padding-top:10px;
    padding-left:10px;
    padding-right:10px;
    color: #d2c3a6;
    font-size: 12px;
    }
    And I tried using this:

    Code:
    #pageNodeContainer p {
    padding-bottom:5px;
    padding-top:10px;
    padding-left:10px;
    padding-right:10px;
    color: #d2c3a6;
    font-size: 12px;
    }
    But no change. The default font size across the skin is 12px but this is showing up around possibly 9px.
     
  10. MagnusB

    MagnusB Well-Known Member

    Can you provide a link? Or you can take a look at what CSS rules are applied to the p ;)
     
  11. Drae

    Drae Active Member

    Here's a link to one of the webpages in particular: http://sizaelrpg.com/pages/joining_guide/

    The skin itself isn't available yet though - it's a surprise for my community for our next game update :D

    I managed to figure it out though. This is the extra.css for the skin so far:

    Code:
    .afftable {
    width:990px;
    border-left: #000 solid 4px;
    border-right: #000 solid 4px;
    margin: auto;
    }
    
    .avatar .img {
    background-position: center;
    }
    
    .qlinks {
    float: right;
    font-size:75%;
    color: #f5f5f5;
    cursor: pointer;
    border: 2px solid #000;
    border-radius: 20px;
    background:url(http://sizaelrpg.com/styles/c5boom/dark/images/boom_subheadings.png) #0b2638;
    }
    
    .qlinks h2 {
    color: #f5f5f5;
    padding-top: 2px;
    }
    
    .info {
    border: 2px solid #000;
    border-radius: 3px;
    background:url(http://sizaelrpg.com/styles/c5boom/dark/images/boom_subheadings.png) #0b2638;
    }
    
    .awa {
    border: 2px solid #000;
    border-radius: 3px;
    background:url(http://sizaelrpg.com/styles/c5boom/dark/images/boom_subheadings.png) #0b2638;
    }
    
    hr {
    background:#a7eff0;
    height:2px;
    color:#a7eff0;
    border:4px;
    }
    
    
    h1 {
    font-size:180%;
    padding-left:10px;
    color: #f5f5f5;
    }
    
    h2 {
    font-size:165%;
    padding-left:10px;
    color: #a7eff0;
    }
    
    p {
    padding-bottom:5px;
    padding-top:10px;
    padding-left:10px;
    padding-right:10px;
    color: #d2c3a6;
    }
    
    #pageNodeContent {
    background:url(http://sizaelrpg.com/styles/c5boom/dark/images/boom_back2_trans54.png) #081118;
    border-radius: 20px;
    border: 2px solid #000;
    font-size: 16px;
    }
    
    #pageNodeContent td {
    padding: 5px;
    }
    
    #pageNodeContent .primaryContent a {
    color: #a7eff0;
    }
    
    #pageNodeContent .primaryContent a:hover {
    color: #e5c291;
    }
    I had to take the font-size out of P and add it into #pageNodeContent, though I still had to make it a little bigger than I had intended to get it to look right lol!
     
    Digital Doctor and MagnusB like this.
  12. Digital Doctor

    Digital Doctor Well-Known Member

    Use Jake Bunce's Nodes as Tabs addon if you want your pages to appear under a Tab of their own vs the forums Tab.
     
  13. Drae

    Drae Active Member

    I think I already do, but thanks.
     

Share This Page