How to change background color only for one specific page in theme?
Permalink
I've seen a lot of questions about changing the background color for a theme, but this applies to all pages. Is there a way to change it only for a single page that I've created?
I see how I can modify colors for an individual block by going in Edit mode and selecting Design. Is there anything like this that I can do for a page?
Traditionally, I'd be able to traverse the folders to locate the webpage then modify the body css to do this, but concrete5 doesn't use this structure and so I'm lost.
Any advice much appreciated.
I see how I can modify colors for an individual block by going in Edit mode and selecting Design. Is there anything like this that I can do for a page?
Traditionally, I'd be able to traverse the folders to locate the webpage then modify the body css to do this, but concrete5 doesn't use this structure and so I'm lost.
Any advice much appreciated.
We did something like this with one of our themes for a client. We ended up setting up a page attribute with a color picker. Then if the attribute existed we simply applied it as a style for the background to a specific html attribute, otherwise we just left it as the default.
I'm using someone else's theme and can't modify it. But, can I add a page attribute myself somehow?
Otherwise, is there no way to control a page's background color this using concrete5 features then, as can be done for background color of blocks?
For example, can I apply css to a single page only, or can I manually add a page attribute?
I'm a newbie, so sorry if the question is a little scattered.
Otherwise, is there no way to control a page's background color this using concrete5 features then, as can be done for background color of blocks?
For example, can I apply css to a single page only, or can I manually add a page attribute?
I'm a newbie, so sorry if the question is a little scattered.
Some ways round it:
- Add a style tag with your background style in an html block on the page (may give a flash of unstyled content and also is not strictly valid).
- Use the page properties to put the style tag in 'Header Extra Content'.
- Use my Style Quickie block to add css to the page header (a bit of an overkill for css as basic as a page background).
Bear in mind that the theme background may not be the body background, but may be provided by an element within that. You may also need to make it more specific or !important for your style to win.
- Add a style tag with your background style in an html block on the page (may give a flash of unstyled content and also is not strictly valid).
- Use the page properties to put the style tag in 'Header Extra Content'.
- Use my Style Quickie block to add css to the page header (a bit of an overkill for css as basic as a page background).
Bear in mind that the theme background may not be the body background, but may be provided by an element within that. You may also need to make it more specific or !important for your style to win.
>Use the page properties to put the style tag in 'Header Extra Content'.
Could you give an example what that code would look like? I can't seem to get it working. I tried inserting into 'Header Extra Content' section:
<style>
body {background-color:#FF0000;}
</style>
but concrete5 wouldn't accept it (opened a popup "error" window). It doesn't even accept empty <style></style> tags.
UPDATE:
I found a way using a css file:
1. create css file myStyles.css with this code in it: body {background-color: #f00 important!;}
2. Go to page where want to change background color, then add link to this page via Edit > Properties > Custom Attributes > Header Extra Content
<link rel="stylesheet" media="screen" type="text/css" href="/css/myStyles.css"/>
3. refresh browser window.
However, I'd still like to know if there was a simple way to avoid creating a file but just adding the css directly into the 'Extra Header Content' text area...
Could you give an example what that code would look like? I can't seem to get it working. I tried inserting into 'Header Extra Content' section:
<style>
body {background-color:#FF0000;}
</style>
but concrete5 wouldn't accept it (opened a popup "error" window). It doesn't even accept empty <style></style> tags.
UPDATE:
I found a way using a css file:
1. create css file myStyles.css with this code in it: body {background-color: #f00 important!;}
2. Go to page where want to change background color, then add link to this page via Edit > Properties > Custom Attributes > Header Extra Content
<link rel="stylesheet" media="screen" type="text/css" href="/css/myStyles.css"/>
3. refresh browser window.
However, I'd still like to know if there was a simple way to avoid creating a file but just adding the css directly into the 'Extra Header Content' text area...
I just double checked on c5.6.3.1 & Greek Yogurt and I can insert styles into Header Extra Content:
And then another test with
Both worked as expected. The !important may not be needed, but for the purpose of a quick test on a greedy Greek Yogurt I didn't want to mess about too much.
<style> #main-content-inner {background-color:pink;} </style>
And then another test with
<style> body {background-color:pink !important;} </style>
Both worked as expected. The !important may not be needed, but for the purpose of a quick test on a greedy Greek Yogurt I didn't want to mess about too much.
Thanks. Hmm, it does work when I copy and paste your code in. When I tried it I had a link included at the same time, and it didn't work.... that is:
<link rel="stylesheet" media="screen" type="text/css" href="/css/myStyles.css"/>
<style>
body {background-color:pink !important;}
</style>
where the body style is not included in the myStyles.css file.
<link rel="stylesheet" media="screen" type="text/css" href="/css/myStyles.css"/>
<style>
body {background-color:pink !important;}
</style>
where the body style is not included in the myStyles.css file.
