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

Pages

Drae

Active member
#1
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?
 

Drae

Active member
#3
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

Well-known member
#4
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

Active member
#5
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

Well-known member
#6
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.
 

MagnusB

Well-known member
#8
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

Active member
#9
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.
 

Drae

Active member
#11
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!