Pages

[Drae]

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?

 

[MagnusB]

I think all pages have

<div id="content" class="pagenode_container">

At the top.

 

[Drae]

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.

 

[MagnusB]

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]

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.

 

[MagnusB]

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.

 

[Drae]

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

 

[MagnusB]

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]

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) :

p {
padding-bottom:5px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
color: #d2c3a6;
font-size: 12px;
}

And I tried using this:

#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.

 

[MagnusB]

Can you provide a link? Or you can take a look at what CSS rules are applied to the p

 

[Drae]

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

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

.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]

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

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.

 

[Drae]

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.

I think I already do, but thanks.