theme background

Permalink
Hi there

could anyone tell me how to change the colour of background in plain yogurt or dark chockolate themes? Better yet, how to use image?

Thanks in advance.

Eulalia
View Replies: View Best Answer
Steevb replied on at Permalink Reply
Steevb
Go to 'themes' - customize' then choose 'Background', then choose a color.
mhawke replied on at Permalink Best Answer Reply
mhawke
Or you could actually open the css file and change the background to an image. I have a site with a background image that adjusts it's size to match the browser's size. Here is the css for that:

body {/* customize_background */ background-color: #000; /* customize_background */
   padding: 0px;
   margin: 0px; 
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center center;
   -moz-background-size: cover;
   background-size: cover;
   height:100%;
   background-color: transparent;
   background-image:url('big_bkgd_image.jpg');
}


('big_bkgd_image.jpg' is the name of your background image located in your theme folder explained below)

I'm not sure if you have done this already but you should not change the original core theme files that are inside the 'concrete' folder. If you make changes in there, they will be over-written the next time you update your site to a new version. What you need to do is to download the folder that contains the core theme found in, for example, '[root]/concrete/themes/dark_chocolate'. Then rename the folder to something like 'my_dark_chocolate' and upload it to the themes folder found at '[root]/themes/' so you end up with a structure like '[root]/themes/my_dark_chocolate/...theme files...'. Then go to 'Dashboard->Themes' and 'Inspect' then 'Install' then 'Activate' the 'My Dark Chocolate' theme.

Now you can tinker with your new theme's css file by opening the 'main.css' file located in this new theme folder and putting the css posted above in place of the css for the body at the top of the main.css file.

Clear as mud?

To see your new background, you might need to clear your browser cache and also visit 'Dashboard-System and Settings->Cache and Speed Settings' and clear your concrete5 internal cache. While you're there, turn the "Basic' cache and the 'Full Page' cache off while you're making changes to your site so that these changes show up right away in your browser.
Eulalia replied on at Permalink Reply
Eulalia
Not bad my friend... Thank you.
mhawke replied on at Permalink Reply
mhawke
Happy to help.
Eulalia replied on at Permalink Reply
Eulalia
mhawke- back to you.

Tried the editing this evening when I got home, not totally strange- I'd customized the plain yogurt one other time for page width. Below is a copy of the main css with your code. Uploaded the image "background_home_2r.jpg" to the images folder. did the whole theme in root/themes as dark_chocolate_homepage_theme.

Theme loads but no image.

Once again thanks. Appreciate learning.

SS

/* HTML Tag Redefinition */
html, body {height: 100%; }
body{/* customize_background */ background-color: #000; /* customize_background */
padding: 0px;
margin: 0px; 
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
-moz-background-size: cover;
background-size: cover;
color: #333333;
line-height:20px;
height:100%;
background-color: transparent;
background-image:url('background_home_2r.jpg');
}


img {border: 0px}
a { cursor:pointer}

label { font-weight:bold;}
fieldset { border:1px solid #ccc;}

/* error text class optionally provided by theme */
div.ccm-error-response {color: #f00; margin-bottom: 12px}

/* Page Structure / Navigation */
#page{ width:900px; margin:auto; text-align:left }
#page #headerSpacer{ height:64px }
#page #header{ position:relative; }
#page #header #logo{ color:#999; font-size:32px;
font-family:Arial, Helvetica, sans-serif;
line-height: auto;
margin-bottom: 0px; padding: 0px; margin-top:8px; cursor:pointer; left:0px ; z-index:10; width:auto; float:left; position: relative }
#page #header #logo a{ /* customize_header_logo */color:#777; /* customize_header_logo */ text-decoration:none;}
#page #header #logo p{ display:inline; line-height:inherit; font-size:inherit; padding:inherit; margin:inherit; color:inherit }


#page #header #headerNav{ position: absolute; top: 14px; right: 0px; z-index:2; width:100%; overflow:visible;}
#page #header ul.nav-header{ list-style:none; margin:0px; padding:0px; width:auto; z-index:2; overflow:visible; float: right}
#page #header ul.nav-header li{float:left; padding:2px 0px; margin-left:16px; margin-bottom: 0px; color:#999; font-size:13px; margin-top:0px }
#page #header ul.nav-header li a,#page #header ul.nav-header li a:hover{ /*color:#999999*/ }
#page #header ul.nav-header li.nav-selected{ border:1px solid #333; padding:2px 8px; }
#page #header ul.nav-header li.nav-selected a { /*text-decoration:underline*/ }
#page #header #header-area{margin-top: 10px; margin-bottom: 10px }
#page #header #header-area #header-area-inside{margin-bottom: 12px;}
#page #header #header-area img { display: block}
#page .divider{padding-top: 12px; background: url(images/nav_horizontal_divider.gif) no-repeat top; overflow:hidden; height:1px; clear:both; width:100%; }

#page #central{background:url(images/nav_sidebar_right_bg.gif) repeat-y center; clear:both; }
#page .no-sidebar { background-image: none !important}
#page #central.central-left { background:url(images/nav_sidebar_left_bg.gif) repeat-y center !important; }
#page #central.central-left div#sidebar {float: left !important; }
#page #central.central-left #body {padding-left: 68px !important; padding-right: 0px !important; float:right}

#page #central #body{ float:left; width:67%; padding-right:28px; padding-left: 0px !important; padding-right: 0px !important }
#page .no-sidebar #body{ float: none !important; width: auto !important; }
#page #central #sidebar{ float:right; width:23%; overflow:hidden }
#page #central #sidebar p{ line-height:24px}
#page #central #sidebar ul.nav{ list-style:none; margin-left:0px; padding:0px; padding-left:24px; font-size:11px;}
#page #central #sidebar ul.nav li{ margin-bottom:16px; }
#page #central #sidebar ul.nav a{ text-decoration:none; /* color:#333*/ }
#page #central #sidebar ul.nav a.nav-selected {font-weight: bold}
#page #central #sidebar ul.nav a:hover{ text-decoration:underline }
#page #central #sidebar ul.nav ul{ list-style:none; margin-left:0px; padding:0px; padding-left:16px; margin-top:16px; }
#page #central #sidebar ul.nav ul li{ margin-bottom:16px; }

#page #central.navLeft{ background:url(images/nav_sidebar_left_bg.gif) repeat-y center; }
#page #central.navLeft #sidebar{float:left}
#page #central.navLeft #body{float:right; padding-right:0px; width:68%; }

#page #central.noSideNav{ background: none; }
#page #central.noSideNav #sidebar{ display:none }
#page #central.noSideNav #body{float: none; padding-left:0px; padding-right:0px; width:100%; }

#page #footer{ padding-top:24px; clear:both; padding-bottom:16px; color:#555; font-size:10px }
#page #footer a{ text-decoration:none }
#page #footer span.sign-in {margin-left: 20px}
#page #footer span.powered-by { float:right; }

/* Page Elements */

.pagingNav{ margin:16px 0px 8px 0px}
.pagination{ text-align:center; color:#bbb; padding-top:4px}
.pagination .pageRight{width:20%; float:right; text-align:right}
.pagination .pageLeft{width:20%; float:left; text-align:left}

/* MISC STYLES & SHORTCUTS */
div.code {border: 1px solid #ddd; background: #eee; padding: 10px}
div.spacer,div.ccm-spacer{ clear:both; font-size:1px; line-height:1px }
.noTopSpace{margin-top:0px; padding-top:0px}

/* customize_miscellaneous */ /* customize_miscellaneous */
Steevb replied on at Permalink Reply
Steevb
Try this:
html, body {height: 100%; background: url(images/background_home_2r.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover; }


If you get a problem with IE try putting a new div under body tag and then reference the image.

You don't need to repeat yourself calling 'background', just stack in a line.
mhawke replied on at Permalink Reply
mhawke
My code calls for the image to just be in your theme folder. If you want to put the background image in the 'images' folder then try changing the last line of my css to:

background-image:url(images/background_home_2r.jpg);


Also, I think my original code had a small problem. Leave the quotes off the images/background_home_2r.jpg part or C5 misinterprets the path to the image.
Eulalia replied on at Permalink Reply
Eulalia
Hi again mhawke

Sorry if this is a nuisance. Would like to resolve this and move on though, think site calls for some changes.

Tried 55webdesign code, same result (white background).

Here is a copy of section of your code:

/* HTML Tag Redefinition */
html, body {height: 100%; }
body {/* customize_background */ background-color: #000; /* customize_background */

padding: 0px;
margin: 0px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
-moz-background-size: cover;
background-size: cover;
color: #333333;
line-height:20px;
height:100%;
background-color: transparent;
background-image:url(images/background_home_2r.jpg);

}

img {border: 0px}
a { cursor:pointer}


image is in images folder. I am thinking the problem is that the rest of the site is in plain yogurt and I just want to make the splash page with this modification.

What do you think?

Many thanks

SS

http://www.stephenscott.ca/
Steevb replied on at Permalink Reply
Steevb
Works for me.

Example:http://www.55webdesign.co.uk/

/* HTML Tag Redefinition */
html, body {height: 100%; background: url(images/house-bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover; }
mhawke replied on at Permalink Reply
mhawke
Let's see if we can get you back to making some more of your beautiful artwork!

Two things...

1) When I look at the 'view source' of your page, the css you think you are changing isn't coming through at all.

2) Your image does not appear to be where you think it is.

Your background image should show up if you put this in your browser but it's not there:

http://www.stephenscott.ca/themes/image_page_wide/images/background_home_2r.jpg


This indicates that you might be placing stuff in the wrong folder on your site:

A couple of things to check.

Make sure you are changing the main.css file in your '[root]/themes/image_page_wide' folder.

Make sure your all your concrete5 caching is turned off at 'Dashboard->System and Settings->Cache and Speed Settings'
Eulalia replied on at Permalink Reply
Eulalia
Thanks for the compliment. For sure, like to move on. I find this work interesting, and I have patience knowing there is an answer. But hey-

So- sorry to be a problem. Got to resolve this.

Nope, everything in httpdocs/themes/dark_chocolate_homepage_theme. code in main css. the page that shows in my link is a full page, plain yogurt customized, image_page_wide. Want to make modifications to dark chocolate and use it there, but maybe better to use the code in image_page_wide (plain yogurt theme)....?

Caching off. What to do.

Thanks a lot for any more help.

One last thought. When I click activate it wants to apply to all pages. So I didn't. I didn't do that to image_page_wide and it still worked.
mhawke replied on at Permalink Reply
mhawke
Your main page is most definitely pulling from '[root]/themes/image_page_wide'. If you want it to get it's theme from someplace else, you need to:

1) Hover over the 'Edit' button
2) Choose 'Design'
3) In the lower bunch of theme icons, you can choose a different theme for that one page.

Is that what you're looking to do?
Eulalia replied on at Permalink Reply
Eulalia
Good morning

By default my site uses plain yogurt. some pages modified some not. for main page want to use modification (ie: dark_chocolate_homepage_theme.

Theme is installed in themes- dashboard. when i edit page, hit design, I select that theme from the drop down. all is good but no image. image is in root/dark_chocolate_homepage_theme (or else it wouldn't show up in dashboard).

file in question is a 500K jpg- should fill screen, is 96dpi, but measures 837 X 592... problem here?

Cheers
wlollc replied on at Permalink Reply
wlollc
In CSS the path is relative to the stylesheet or css file.

if your image is located in root/a/b/c/image.jpg
if your stylesheet is located in root/g/h/y/main.css

This is what it should look like:

background-image: url(../../../a/b/c/image.jpg)


It's kinda like "backing-out" of current folder, up to root, then down into where the image actually resides.

hope this helps.
Eulalia replied on at Permalink Reply
Eulalia
I managed to make the background image work with the dark chocolate theme, on one page, which is what I wanted.

Not sure how it worked this time. Just deleted the theme from the site and reinstalled it with a different name, and a different version of the image. Same code, although deleted the line just under the code inserted.

So there- thanks for all the help. the code worked, but it seems the operations regarding the editing of css has very specific protocols....
animall777 replied on at Permalink Reply
hello mhawke
I would like to ask:
is the procedure the same as you wrote here if I'm working with different theme (Long Story Short).
I followed your video, later tried putting your css to my main.css but no changes to my web :(

tks