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?

Jormungand
View Replies: View Best Answer
Jormungand replied on at Permalink Reply 3 Attachments
Jormungand
Maybe I didn't explain it precisely enough:

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?
mhawke replied on at Permalink Reply
mhawke
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.
Jormungand replied on at Permalink Reply
Jormungand
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.
mhawke replied on at Permalink Reply
mhawke
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?
mhawke replied on at Permalink Reply
mhawke
Just noticed that perhaps you have a typo. Check to make sure you have upper-case s's.
<?php echo $this->getStyleSheet()?>
---------------------^----^


Your code snipppet from a previous post shows you have getStylesheet() with a lower case 's' on the 'sheet' part
Jormungand replied on at Permalink Reply
Jormungand
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-...
mhawke replied on at Permalink Reply
mhawke
Is there a public URL where we could have a quick look?
Jormungand replied on at Permalink Reply
Jormungand
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.
mhawke replied on at Permalink Reply
mhawke
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?
Jormungand replied on at Permalink Reply
Jormungand
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.
mhawke replied on at Permalink Reply
mhawke
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.
Jormungand replied on at Permalink Reply
Jormungand
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.
VidalThemes replied on at Permalink Reply
VidalThemes
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:

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:;
mhawke replied on at Permalink Reply
mhawke
Good to know.
Jormungand replied on at Permalink Reply
Jormungand
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).
Jormungand replied on at Permalink Reply
Jormungand
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?
mhawke replied on at Permalink Reply
mhawke
It's possible that the CSS sheets are loaded in the wrong order. You want any sheet with customization to load last.
Jormungand replied on at Permalink Reply
Jormungand
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:

<!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') ?>" />        
        <?php

There is still something wrong, but either I'm blind or too dumb to find it.
VidalThemes replied on at Permalink Best Answer Reply
VidalThemes
Have you tried altering the formatting? I see you have your customisable styles 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 */
}
Jormungand replied on at Permalink Reply
Jormungand
... 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!
VidalThemes replied on at Permalink Reply
VidalThemes
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.
mhawke replied on at Permalink Reply
mhawke
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?
Jormungand replied on at Permalink Reply
Jormungand
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.
mhawke replied on at Permalink Reply
mhawke
I believe dashboard theme customization only works with typography.css
mhawke replied on at Permalink Reply
mhawke
Jormungand replied on at Permalink Reply
Jormungand
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.
mhawke replied on at Permalink Reply
mhawke
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 replied on at Permalink Reply
Steevb
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/
Jormungand replied on at Permalink Reply
Jormungand
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.
mhawke replied on at Permalink Reply
mhawke
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?)
Jormungand replied on at Permalink Reply
Jormungand
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. ;)