Adding logo img to theme - all pages, customize theme colors
Permalink Browser Info Environment
Hi,
I'm brand new to the concrete5 platform but loving the possibilities. I purchased Slate to jump start a new website, and in general have been able to puzzle out customization as needed. I changed the color theme from the standard to minimal-dark without any trouble, and somewhere along the line I was able to change the logo img, but now I need to update that image and I've been unable to do so. I know this should be easy, but I can't find the global setting to update the logo throughout my site. I've upgraded my c5 installation to 5.5, and really wish I had not. I found the fix for the logo update for 5.5 (in your Slate documentation), found the Slate header.php file (I use Dreamweaver CS5 for ftp and design/coding) but the code in my file doesn't match the code that is shown in the Slate documentation. The code in my header.php file that appears to control the logo and Site Name is this...
The instructions given in most c5 documentation is usually related to the older Dashboard (5.4.x). Can you point me to where I need to put the new img file to update the logo through the c5.5 Dashboard?
On a related note, when I change the background colors for the various sections of the Slate theme, in the "Customize Theme" in Dashboard > Pages and Themes, no colors seem to change in my website.
Thanks,
Kim
I'm brand new to the concrete5 platform but loving the possibilities. I purchased Slate to jump start a new website, and in general have been able to puzzle out customization as needed. I changed the color theme from the standard to minimal-dark without any trouble, and somewhere along the line I was able to change the logo img, but now I need to update that image and I've been unable to do so. I know this should be easy, but I can't find the global setting to update the logo throughout my site. I've upgraded my c5 installation to 5.5, and really wish I had not. I found the fix for the logo update for 5.5 (in your Slate documentation), found the Slate header.php file (I use Dreamweaver CS5 for ftp and design/coding) but the code in my file doesn't match the code that is shown in the Slate documentation. The code in my header.php file that appears to control the logo and Site Name is this...
The instructions given in most c5 documentation is usually related to the older Dashboard (5.4.x). Can you point me to where I need to put the new img file to update the logo through the c5.5 Dashboard?
On a related note, when I change the background colors for the various sections of the Slate theme, in the "Customize Theme" in Dashboard > Pages and Themes, no colors seem to change in my website.
Thanks,
Kim
| Type: | Discussion |
|---|---|
| Status: | New |
You wont be able to put in a logo that spans the whole width of the header, because the logo div is set to 40% of the header area (to allow room for the header top area). Also, the reason the image is scaling is because there's a max-width property of 100% on all images (which makes the images scale down on smaller browsers) - which means the max width an image will go is the width of it's container, which in this case is 40% of the total header area
Got it, thanks. So I'll stay with the logo as is, which I sized to fit the logo space. Thanks for your explanation of the logo img scaling and why - very helpful.
Any ideas about the color problem? (I'd like to have a black band extend behind the logo the width of the main container: 1100 px). Looking at the underlying code, it looks like there is no div that spans the entire width of the logo/header area - just the 40% header area where the logo img is and then the Header Top area on the right side of the design. I think that's why I can't change the background color of the logo area to span across the top of the website. Is that correct?
Is there any way to wrap the "logo" and "header area" is a containing div and make that div background black? I'm hesitant to just throw in some CSS and end up breaking the template. :-)
Thanks
Any ideas about the color problem? (I'd like to have a black band extend behind the logo the width of the main container: 1100 px). Looking at the underlying code, it looks like there is no div that spans the entire width of the logo/header area - just the 40% header area where the logo img is and then the Header Top area on the right side of the design. I think that's why I can't change the background color of the logo area to span across the top of the website. Is that correct?
Is there any way to wrap the "logo" and "header area" is a containing div and make that div background black? I'm hesitant to just throw in some CSS and end up breaking the template. :-)
Thanks
You should just be able to change the color for Header Background in the theme customization page. It's weird though that in your screenshot you have two color fields for almost all the properties, that shouldnt be like that. Did you try changing either/both of the color fields?
That's what I thought I should be able to do (change the color in the Header Background). I'm so new to the c5 design environment I didn't realize that two colors per property was weird. Slate is the first theme I've worked with in any detail, so I thought perhaps there were different style sheets for different page types.
Yes, I tried changing one color field, then the other, and I cannot change any of the colors from the Customize Theme panel. I tried this in Chrome, FireFox and IE9 - I can open the color mixer tools, but clicking on a new color has no effect. All that works in the color pop-up is the "close" button.
And I was only able to add custom CSS be editing the style sheet directly (in DreamWeaver). Clicking "Add your CSS" opens an editing box, but changes I type into that box don't stick.
Yes, I tried changing one color field, then the other, and I cannot change any of the colors from the Customize Theme panel. I tried this in Chrome, FireFox and IE9 - I can open the color mixer tools, but clicking on a new color has no effect. All that works in the color pop-up is the "close" button.
And I was only able to add custom CSS be editing the style sheet directly (in DreamWeaver). Clicking "Add your CSS" opens an editing box, but changes I type into that box don't stick.
I just edited my copy of the minimal-dark.css file in DreamWeaver, changing the header background from [none] to black [#000], then uploaded the edited file to my c5 installation.
That worked perfectly.
It would be nice to be able to use the Customize Theme option in the Dashboard. But editing in DW is an easy enough work-around, as long as I know which style to change!
Thanks for pointing me to that particular style this fix.
That worked perfectly.
It would be nice to be able to use the Customize Theme option in the Dashboard. But editing in DW is an easy enough work-around, as long as I know which style to change!
Thanks for pointing me to that particular style this fix.
Seems like there's an issue with your concrete5 install's theme customization page. I cannot reproduce that issue on my setup. Maybe search the main forums here and see if anyone else has that issue. Not sure why it's doing that.
The doubling of properties on the Customize Themes page is from having more than one main.css file in same folder. I had made changes and backed up main.css to main_orig.css and it seems to double the properties. Not sure what is in them (css files) that c5 looks for.
See my attachment.
See my attachment.
Ah, that makes sense i guess. Concrete5 looks for comments in the css file like
that set what styles are customizable.
/* customize_background */that set what styles are customizable.
I read your answer to tlit64301 (posted shortly before my original post) and confirmed that I am using the latest version of Slate (1.4) and then went and checked my Stacks. I had a Global Stack "Site Name" and when I updated the image there, it appeared back on in my website. So that was a great start.
However, the new image is larger than the old - I had created a wider image to fill the header/logo space (1100 w like the rotating banner below the menu). When I put this larger image in, it was resized to fit the size of the original image! I tried resetting the height/width manually to match the size of the new image. I tried clearing the height/width settings in the image properties in 'Site Name'. I tried clearing the cache. None of these worked. When I look at the website source code in the published page, I can see where the old image width/height are appearing in the rendered page, but I can't find where, in the code, to change these to match the size of the new image that I'd like to use.
Any suggestions about how I can reset the image properties to use the width/height of my new logo img?
Thanks,
Kim