Customizable Styles do not work
Permalink
First time I try the customizable styles.
I changed the path to the CSS to
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStylesheet('main.css') ?>" />
In the CSS I put the declarations in comments. i.e.:
/* customize_fontsize */
font-size: 16px;
/* customize_fontsize */
When I now try to adjust the theme, I get all the control elements as expected. But my changes doesn't get adopted. After every change the preview window refreshes, but there are still the previous colors, font-sizes etc. Pressing the Save button also doesn't save the changes.
I already cleared the cache.
Did I forget something to get this to work?
I changed the path to the CSS to
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStylesheet('main.css') ?>" />
In the CSS I put the declarations in comments. i.e.:
/* customize_fontsize */
font-size: 16px;
/* customize_fontsize */
When I now try to adjust the theme, I get all the control elements as expected. But my changes doesn't get adopted. After every change the preview window refreshes, but there are still the previous colors, font-sizes etc. Pressing the Save button also doesn't save the changes.
I already cleared the cache.
Did I forget something to get this to work?
Try a few things...
1) Don't just clear your cache, turn all caching off while modifying anything on your site or you'll go insane. That also means turning off the caching in your browser(s) as well.
2) Try adding the customization code into 'typography.css' instead of main.css.
3) Check to see what style sheet is actually 'in charge' by Right-click->Inspect Element on the element in question and have a look in the right panel for the style sheets and line numbers that control the rendering. (see attached screenshot). If a rule is crossed out then this indicates that it's being over-ridden by a declaration somewhere else. As a last resort, you can click the 'Computed' tab to find out what rule is actually the 'final arbitrator' on the page.
1) Don't just clear your cache, turn all caching off while modifying anything on your site or you'll go insane. That also means turning off the caching in your browser(s) as well.
2) Try adding the customization code into 'typography.css' instead of main.css.
3) Check to see what style sheet is actually 'in charge' by Right-click->Inspect Element on the element in question and have a look in the right panel for the style sheets and line numbers that control the rendering. (see attached screenshot). If a rule is crossed out then this indicates that it's being over-ridden by a declaration somewhere else. As a last resort, you can click the 'Computed' tab to find out what rule is actually the 'final arbitrator' on the page.
Thank you mhawke for your suggestions. Unfortunately they didn't work.
I switched off block cache and full cache.
I reduced the customizable elements to one: body {color:#000;}
I tried it both in typography.css and in main.css of course with adjusted paths (getStylesheet).
With Firebug I analyzed the element and there were no other declarations overwriting it.
Does the customization function work with JS? Maybe one of my javascripts blocks it.
I switched off block cache and full cache.
I reduced the customizable elements to one: body {color:#000;}
I tried it both in typography.css and in main.css of course with adjusted paths (getStylesheet).
With Firebug I analyzed the element and there were no other declarations overwriting it.
Does the customization function work with JS? Maybe one of my javascripts blocks it.
So, just to clarify, Firebug is reporting that the body text should be black but the browser is not rendering it in black?
Can you open the page in another browser (Chrome, IE) that hasn't visited this page recently?
Can you open the page in another browser (Chrome, IE) that hasn't visited this page recently?
Just noticed that perhaps you have a typo. Check to make sure you have upper-case s's.
Your code snipppet from a previous post shows you have getStylesheet() with a lower case 's' on the 'sheet' part
<?php echo $this->getStyleSheet()?> ---------------------^----^
Your code snipppet from a previous post shows you have getStylesheet() with a lower case 's' on the 'sheet' part
I used firebug to check if the customized color is overwritten by another declaration.
When I have my custom declaration in the css I can see it in firebug. I can put the custom declaration in the typography.css or in the main.css and it is correctly shown in firebug.
Only switching colors from the c5 backend doesn't work.
Changing browsers has no effect.
Oops, I missed the typo. But after correcting it, it still doesn't do what I want.
Edit: I just found out that at least one other c5 user has the same issue.https://www.concrete5.org/community/forums/themes/customize-feature-...
When I have my custom declaration in the css I can see it in firebug. I can put the custom declaration in the typography.css or in the main.css and it is correctly shown in firebug.
Only switching colors from the c5 backend doesn't work.
Changing browsers has no effect.
Oops, I missed the typo. But after correcting it, it still doesn't do what I want.
Edit: I just found out that at least one other c5 user has the same issue.https://www.concrete5.org/community/forums/themes/customize-feature-...
Is there a public URL where we could have a quick look?
Here's a link:http://2013.volumeberlin.com/
I made to different customizable declarations.
The standard font-color in the body tag is configured in typography.css and the link color is set in main.css.
I made to different customizable declarations.
The standard font-color in the body tag is configured in typography.css and the link color is set in main.css.
Thanks.
Right now the font color for body is showing as #000 in the css and is rendering as #000 on the site. What color is it set to in the 'customize theme' in the back-end?
Right now the font color for body is showing as #000 in the css and is rendering as #000 on the site. What color is it set to in the 'customize theme' in the back-end?
When I change in Themes/customize the color via the palette for example to red, the screen below refreshes, but doesn't apply the changes. The font is still black.
Clicking on 'Save' on the bottom of the page, all palettes return to their former colors.
That's why I first thought the permissions were set wrong. Now they are set to 777.
Clicking on 'Save' on the bottom of the page, all palettes return to their former colors.
That's why I first thought the permissions were set wrong. Now they are set to 777.
The changes are not stored in an actual style sheet so server permissions are not required. The changes are saved in the database in a table called "PageThemeStyles". I would suggest having a look in that table to see if the settings are being saved.
On another note. How do you get any work done on a page that is 24 meg in size? It takes over a 3 minutes to load the page for me (granted I'm on Cape Breton Island, Nova Scotia, Canada) and 22 seconds for Pingdom to load the page.(http://tools.pingdom.com/fpt/#!/eICA0W/http://2013.volumeberlin.com/)
IMHO, I think in the long run, the speed of the site as it's currently designed (tons of sliders and large images) is a bigger problem than getting the customization to work. You can always just change the css in the style sheets rather than through the back-end if you can't get it to work.
On another note. How do you get any work done on a page that is 24 meg in size? It takes over a 3 minutes to load the page for me (granted I'm on Cape Breton Island, Nova Scotia, Canada) and 22 seconds for Pingdom to load the page.(http://tools.pingdom.com/fpt/#!/eICA0W/http://2013.volumeberlin.com/)
IMHO, I think in the long run, the speed of the site as it's currently designed (tons of sliders and large images) is a bigger problem than getting the customization to work. You can always just change the css in the style sheets rather than through the back-end if you can't get it to work.
The communication with the database seems to work. The change of both link color and the body font color were successful.
Wow, thanks for the tip with the page size. I didn't realize that my customer uploaded images in 300 dpi!
The many sliders are the customer's request. I can't economize here.
Wow, thanks for the tip with the page size. I didn't realize that my customer uploaded images in 300 dpi!
The many sliders are the customer's request. I can't economize here.
Hi There,
font-size does not work in the customisable styles, you need to put all your font declarations in one "font" rule for example:
The only css that works with customisable styles is:
font:;
color:;
and background-color:;
font-size does not work in the customisable styles, you need to put all your font declarations in one "font" rule for example:
body{ /* customize_body_text */ font: normal normal 14px Arial; /* customize_body_text */ /* customize_body_text */ color:#8f8f8f; /* customize_body_text */ /* customize_body_background */ background-color: #efefef; /* customize_body_background */
The only css that works with customisable styles is:
font:;
color:;
and background-color:;
Good to know.
Thank you for the information.
For testing I only use now the color declaration in body. But it still does not work (see answer above).
For testing I only use now the color declaration in body. But it still does not work (see answer above).
Does somebody has another suggestion on how to get this to work?
I found out that the custom styles get saved in the database. I see the values in phpMyAdmin in the PageThemeStyles table.
But the theme still doesn't use the values from the DB, instead seems to prefer the original values from the css file.
EDIT: I switched to Greek Yogurt. There the customization works well. So this must be a problem of the self-made theme.
Does somebody have an idea how I can find out what causes that trouble?
I found out that the custom styles get saved in the database. I see the values in phpMyAdmin in the PageThemeStyles table.
But the theme still doesn't use the values from the DB, instead seems to prefer the original values from the css file.
EDIT: I switched to Greek Yogurt. There the customization works well. So this must be a problem of the self-made theme.
Does somebody have an idea how I can find out what causes that trouble?
It's possible that the CSS sheets are loaded in the wrong order. You want any sheet with customization to load last.
I only have customizations in the main.css and now it's the very last css to load.
I also commented out all javascript in the header.php:
There is still something wrong, but either I'm blind or too dumb to find it.
I also commented out all javascript in the header.php:
<!DOCTYPE html>
<html>
<head>
<?php
Loader::element('header_required');
?>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--<script type="text/javascript" src="<?php /* echo $this->getThemePath() */ ?>/js/java-Func.js"></script>
<script type="text/javascript" src="<?php /* echo $this->getThemePath() */ ?>/js/matchmedia.js"></script>
<script type="text/javascript" src="<?php /* echo $this->getThemePath() */ ?>/js/picturefill.js"></script>
<style type="text/css" media="screen">@import url(<?php /* echo $this->getThemePath() */ ?>/js/jqGalScroll.css);</style>-->
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css') ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->getThemePath() ?>/MyFontsWebfontsKit.css">
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main.css') ?>" />
<?phpViewing 15 lines of 30 lines. View entire code block.
There is still something wrong, but either I'm blind or too dumb to find it.
Have you tried altering the formatting? I see you have your customisable styles like this:
They should be like this:
#mainmenu a, a { /* customize_Linkfarbe */ color: #000000; /* customize_Linkfarbe */ }
They should be like this:
#mainmenu a, a { /* customize_Linkfarbe */ color: #000000; /* customize_Linkfarbe */ }
... what ...?
I never would have guessed that a simple line break could do so much trouble and I didn't know the cusomization is supposed to be in one line.
That finally solved my problem!
Thank you Vidall for the solution and thank you mhawke for your patience and suggestions!
Thanks to both of you!
I never would have guessed that a simple line break could do so much trouble and I didn't know the cusomization is supposed to be in one line.
That finally solved my problem!
Thank you Vidall for the solution and thank you mhawke for your patience and suggestions!
Thanks to both of you!
No worries, sorry I didnt spot it sooner, it only occurred to me when I went on your site and looked at the actual stylesheet.
I'm embarrassed. :$
Sorry it took so long.
I know you're happy to solve this but using getStyleSheet forces concrete5 to parse through your typography.css file on every page load even if you haven't made any customizations. Are you sure you need to slow your site down with this process?
Sorry it took so long.
I know you're happy to solve this but using getStyleSheet forces concrete5 to parse through your typography.css file on every page load even if you haven't made any customizations. Are you sure you need to slow your site down with this process?
Nevermind. I'm very grateful for your help and happy it finally works.
Thanks for the tip with getStyleSheet. Maybe you are right.
I have only one line in the typography.css, so I transfered it to the main.css, deleted typography.css and removed the link from the header.php.
My customer wants her website editable, so she needs the customizations at least in the main.css.
Thanks for the tip with getStyleSheet. Maybe you are right.
I have only one line in the typography.css, so I transfered it to the main.css, deleted typography.css and removed the link from the header.php.
My customer wants her website editable, so she needs the customizations at least in the main.css.
I believe dashboard theme customization only works with typography.css
Thanks again for your advice. That's a real good addon for my needs but not for my customer.
She has no idea of HTML/CSS so I can't avoid providing buttons or palettes so she can configurate her website on her own.
She has no idea of HTML/CSS so I can't avoid providing buttons or palettes so she can configurate her website on her own.
Well then I would leave the customization lines in the CSS and limit the damage she can do. in my experience, the client will most likely ruin the site within the year but hey, 'the customer is always right' until they see for themselves that they were wrong.
Steevb is correct in saying that customization code can be in any CSS file. I just tried it in 'style.css' on my test site and it works fine. You do need to make sure any rule you have customized is not overridden by a stylesheet that loads later. I was lead astray by code in concrete/core/models/page_theme.php which suggests that typography.css is used in the getThemeEditor() function (lines 169 & 637)
@Steevb, have you ever had a c5 site fully validate? I have not and I've quit trying. For pros like yourself, validators can quickly sift through a page and point you in the right direction but I find that sending relative newcomers to a validation service can scare the livin' daylights out of them because they have no way of knowing what errors are critical (like duplicate ID's on slideshow galleries) and they waste a lot of time trying to fix them all.
Steevb is correct in saying that customization code can be in any CSS file. I just tried it in 'style.css' on my test site and it works fine. You do need to make sure any rule you have customized is not overridden by a stylesheet that loads later. I was lead astray by code in concrete/core/models/page_theme.php which suggests that typography.css is used in the getThemeEditor() function (lines 169 & 637)
@Steevb, have you ever had a c5 site fully validate? I have not and I've quit trying. For pros like yourself, validators can quickly sift through a page and point you in the right direction but I find that sending relative newcomers to a validation service can scare the livin' daylights out of them because they have no way of knowing what errors are critical (like duplicate ID's on slideshow galleries) and they waste a lot of time trying to fix them all.
Formatting custom styles shouldn't make any difference, either way as shown by Vidall should work?
You can customise the theme from either 'main.css' or 'typography.css'.
You do have a few issues with your theme. You could try placing your css and javascript at the top of your header.php, so it is called before the C5 'header_required' bit and all your javascript scroll calls.
You also have duplicate id's (div id="galerie"), id's should be unique, change them to classes (div class="galerie").
Use the W3C validator to help with other errors:http://validator.w3.org/
You can customise the theme from either 'main.css' or 'typography.css'.
You do have a few issues with your theme. You could try placing your css and javascript at the top of your header.php, so it is called before the C5 'header_required' bit and all your javascript scroll calls.
You also have duplicate id's (div id="galerie"), id's should be unique, change them to classes (div class="galerie").
Use the W3C validator to help with other errors:http://validator.w3.org/
I implemented the typography.css again. Everything seems to work now.
Steevb, thanks for the advice to validate the site.
Fortunately the issues were easy to solve (I only have one warning left).
I haven't noticed that there is an ID left in a block and changed it to class.
Steevb, thanks for the advice to validate the site.
Fortunately the issues were easy to solve (I only have one warning left).
I haven't noticed that there is an ID left in a block and changed it to class.
Changing an ID to a class can break lots of things.
1) Are there CSS rules aimed at the original ID
2) Is there JavaScript aimed at the original ID (gallery slideshow js?)
1) Are there CSS rules aimed at the original ID
2) Is there JavaScript aimed at the original ID (gallery slideshow js?)
I browsed through all of the data in the slideshow block searching for the galerie id and changed it into a galerie class.
The slideshows work fine (change image on click) so I think there is nothing left to do here. ;)
The slideshows work fine (change image on click) so I think there is nothing left to do here. ;)
I want to give the user the option to change the appearance of the site.
So I changed the main.css by putting the changeable declaration in between comments (screenshot: example_in_css.jpg).
I also changed the link to the main.css from default getThemePath to getStylesheet (screenshot: main_css_linked_with_getstylesheet.jpg)
Now the controls (i.e. color palettes) appear in customize theme window (screenshot: theme_controls.jpg).
But changes made in these palettes don't have any effect on the site.
I even changed CHMOD of the main.css to 777.
Can anayone give helpful advice?