Hey there,
I’ve tried using a few plugins to display different styles for my pages, however they don’t display the CSS style properly.
Not sure if you tried these:
https://wordpress.org/plugins/rt-custom-css-page-and-post/
https://wordpress.org/plugins/custom-css-by-techsperia/screenshots/
If you have then what is different?
Maybe other styles are still being loaded later and thus taking priority.
Do you have a link and the CSS along with details about what it should be targeting?
Take care.
Thanks. However I don’t want to insert CSS into a box, I want to load a separate CSS style for a new page.
There are plugins that I have used to do that, but they don’t show the style properly.
Also you know the bit where it says ‘styles’ on editor, my default style shows as:
Stylesheet (style.css)
Then the other styles show without the bold ‘stylesheet’ text and brackets. Would that be a problem?
There are plugins that I have used to do that, but they don’t show the style properly.
There could be several reasons for that. Maybe there’s a syntax error, or maybe, as Tim mentioned, there’s another CSS rule which is overriding the rule that you are adding. Have you tried examining the page using a web debugging tool like Firebug or Chrome Developer Tools? Can you post a link to your site with an example of what you are trying to do?
If you understand CSS, you can also target a page specifically by using one of the body element’s classes which contains the page ID. Do a view source on the page in question and you should be able to see it.
Hey again.
You shouldn’t really be editing the styles in their unless it’s a child theme, updates would remove your changes.
However I don’t want to insert CSS into a box, I want to load a separate CSS style for a new page.
So you don’t want to enter it into a CSS box which only loads on a specific page. You want to load it another way for a specific page?
Or am I still not understanding?
Cheers.
What I want is for one my pages I just want to display the header and footer, not the content area. So I’ve edited the default stylesheet and made a new one. So from there it’s about connecting that new one to the that one page.
Is it possible to load an entire stylesheet just from the box?
What if instead of writing an entire new stylesheet, you included some page-specific CSS in your original stylesheet instead? Right-click on your page and select “View Source” or something along those lines. Look for your <body> tag and find the HTML class that’s either postid-xxx or page-id-xxx. Then, in your stylesheet, use something like this:
.postid-xxx/.page-id-xxx #content-area {
display: none;
}
Obviously, substitute the correct selectors.
Thanks for the help.
What I currently have is a box with shading, shadows, padding etc, which I want to disable for one page.
Then what I want to do is display a different background colour for that page.
Can you post a link to your website? For the background color, you could do something like this:
body.page-id-xxx {
background-color: #A46AFA;
}
Try a site like Colorpicker to get the appropriate hex code.
Here is my content code:
I basically want to disable all of that for one page and display a background colour in its place.
background: url(images/content-bg.png)
border-radius: 5px;
-moz-box-shadow: 0 0 7px -3px #000;
-ms-box-shadow: 0 0 7px -3px #000;
-o-box-shadow: 0 0 7px -3px #000;
-webkit-box-shadow: 0 0 7px -3px #000;
box-shadow: 0 0 7px -3px #000;
float: left;
padding: 10px;
position: relative;
width: 960px;
margin-top: -50px;
z-index: 4;
}
#content-inner {
background: #fff url(images/white-noise.gif);
body.page-id-62 {background-color:black;}
float: left;
padding: 15px 15px 10px;
position: relative;
width: 930px;
z-index: 5;
}`
First, you should delete the line body.page-id-62 {background-color:black;}, it’s in the wrong place.
Without seeing the site, it’s hard to know for sure, but try something like this:
body.page-id-62 #content-outer {
background: black;
border-radius: 0;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
body.page-id-62 #content-inner {
background: black;
}
Do I just put that above the default code on each content?
If your theme provides a custom CSS option, put it there; otherwise, get a custom CSS plugin and put it there instead.
Thanks, that kinda worked. But it only filled the inner central content box with a colour, not the outer page.
So what I did was extend the width of the inner box and it filled the entire right side of the page, but the left side is all white.
Is that to do with margins or something?
Can you post a link to your website? It’ll be easier to see how the HTML is set up.
