Hey there,

I am really sorry for the delay of this reply as it is a weekend for us here.

Based on what i check on your site today, it seems like your header and footer colour is red colour, is it this is the colour you would like to show?

If that is not, perhaps you can update me which colour you would like to show so I will assist you on this.

Sometime it might took a while to compress your current setting, CSS stylesheet, you have to keep refresh a few time then it will only show the correct changes.

Thanks Arlex,

Red is the color I had tried to set for the header and footer only because I knew that if I saw the header and footer change then I would know the template allows me the ability to change the colors. Interestingly I am still not seeing Red like you saw. So, maybe the history of my local browser is the problem. But, it certainly is not quick responding like I was hoping for.

I am not sure exactly what colors I will end up with in the long run and am hoping to try a few different options. I will post this reply now and then try to delete the cache of my local browser and then check again just in case the changes start to display then.

Sean

I am able to change all the colors for all the rows that I added to the template. Actually it is only the predefined headers that I am having trouble with.

In the image I am attaching I am having problems figuring out how to change the background color for the following three rows:

The very top row which presently has social media icons and phone numbers in it.

The middle row which is the Menu row

The bottom row which has all the EasySocial links in it.

I have been trying to change these in the Custom Style section of the Presets. Is this the wrong place to change those? Somehow I did change them to red previously but am still struggling to figure out where the settings are for these three rows.

Any pointers in the right direction will be greatly appreciated.

Sean

Also, where are the color settings for the offcanvas column on the right?

Hey there,

It seems that I am able to replicate it on your site.

Based on what we found, it seems that when we change your top bar color in Custom Style section of the Presets, your custom.css which is at JoomlaFolder/templates/charm/css/presets/custom.css has changed to the color what I set but your server still cache the old CSS as we checked your refreshed page's view page source, view-source:http://dev2.carneycorner.com/templates/charm/css/presets/custom.css didn't have changes I made.

Can you temporary disable the cache system and do the setting to see how it goes?

I have been trying to change these in the Custom Style section of the Presets. Is this the wrong place to change those?

No worries, it is the correct place to change those.

Thank you very much. I had turned off cache already in the Global Configuration and also the Cache plugin. So, it seemed odd to have any cache. But, I do also have installed the Regular Labs cache cleaner which should not have allowed the cache to be created but I have also disabled it as well. The only folder in the Cache cleaner list in General Configuration was com_templates. So, we were caching. Hopefully what I just did will work. If you know of any other place to turn off cache, please let me know.

Sean

I am baffled about this caching issue. I have the cache off everywhere and yet the com_templates folder keeps getting saved in the caching folder. Every time I go to the Global Configuration to verify that nothing is being cached, I discover that the cache the folder is sill being created. But, I do not believe that the folder should be created.

I can change all the colors in the Layout Builder with immediate changes of color after hitting the Save button. But, I do not seem able to change any of the colors in the preset.

Again I am just trying to change the three rows that are part of the Predefined Headers.

I am wondering if the template itself is somehow forcing the creating of this com_template folder even though the caching has been turned off.

Sean

Hey Sean,

I believe my colleague missed up mention this cache setting, you should look for your server side.

Because my colleague already explained once change some colour from the Charm template configuration setting, it did updated the colour code from those CSS file on your server but if you manually access that CSS file on the browser, it still loaded old CSS code instead of those latest changes code.

Regarding this cache folder 'com_templates', it will always store this cache scss file under this folder, even though your live site template also stored some CSS cache under this folder as well if I am not wrong.

How this Charm template work is, If you enabled compression SCSS and development mode in this template, when you access your site 1 time, it will re-compression again all the CSS into this SCSS file which is under cache folder.

After checked this long hour ago, it seems like your server did enabled pagespeed module which cache those CSS and Javascript on your server side, now I've help you temporary renamed this original .htaccess file to .htaccess_original, then i temporary comment out these following code from your .htaccess file, it seems like it work fine when i change some colour from the preset setting.

Orignal code :
[gist type="php"]
ModPagespeed on
ModPagespeedEnableFilters rewrite_images,combine_javascript,combine_css,inline_javascript

<IfModule mod_headers.c>
Header merge Cache-Control "no-transform"
</IfModule>
[/gist]

Replace with :
[gist type="php"]
##ModPagespeed on
##ModPagespeedEnableFilters rewrite_images,combine_javascript,combine_css,inline_javascript

##<IfModule mod_headers.c>
## Header merge Cache-Control "no-transform"
##</IfModule>
[/gist]

But sometime you need to refresh your homepage after you do some changes from your setting or need to refresh 1 or 2 times, so the system can able to compression it correctly.

Can you give it a check again is it show the changes immediately now?

Arlex,

Thank you so much for figuring this out. I am able to see changes. Sometimes I have to completely remove the history from the cache and then restart the browser. But, it is working.

I can now change the Header. I can change the Top Row. I can change the drop down menus.

I have not figured out how to change the colors for the background and text of the EasySocial bar which is the third row.

Can you point me to the correct place to change the background color of the third row where the EasySocial links are?

Thank you, Sean

Hey Sean,

Currently, there is no setting for that as the EasySocial toolbar's color has been hardcoded in Charm Template. In order to change the color of it, you can add the following CSS code into Custom Code > Custom CSS:

#es.mod-es.mod-es-toolbar .es-toolbar {

    background-color: yellow !important;

}

Do take note that the 'yellow' is just an example, kindly change and set the color you want into it.

I suggest you use color HEX code so that you can get the exact color you want, you can check it out here https://www.quackit.com/css/css_color_codes.cfm

Do remember to clear all your cache before you see the changes.

I placed your code into my custom.css file within the templates->Charm->CSS folder since I know I will end up with more than ten lines of CSS code before I am done. (I have moved previous custom.css from the template field of the template into that file as well).

The code did not work. I am wondering if you might be willing to try again. Although that may be asking too much?

I want to make the toolbar for EasySocial in the Charm template match the toolbar settings I just configured for EasyBlog and also for EasyDiscuss:

Toolbar Color: #345C34
Active Color: 022800
Text: FFFFFF
Border: 021900
Composer icon BG Color: 428BCA

You would be welcome to put it into my custom.css and I would then try to learn from it :-)

Thanks, Sean

Hey there,

We had added the following CSS code into your JoomlaFolder/templates/charm/css/custom.css:

/* Tweak colors on EasySocial bar */

body #es.mod-es.mod-es-toolbar .es-toolbar {

   background-color: #345c34 !important;

   alink: #022800;

   border: #021900;

}



#es.mod-es.mod-es-toolbar .es-toolbar:before, 

#es.mod-es.mod-es-toolbar .es-toolbar:after {

	background-color: #345c34 !important;

}



/* toolbar link colour */ 

body #es.mod-es.mod-es-toolbar .es-toolbar__link {

  color: #fff !important;

}



/* toolbar active link colour */

body #es.mod-es.mod-es-toolbar .es-toolbar .is-active > a {

    color: #022800 !important;

}

Can you have a look and see how it goes?

As for your Composer icon BG Color, it seems that you had updated the color of it to #428BCA in EasyBlog. Did I get it correctly?

In my opinion for active link colour, it's quite hard to see as the colour of it and background colour of the toolbar are dark and not match.

That all worked really well. It looks great. I did change some of the colors because you were right. :-) I still have one problem color which is the color of the hover link. I think we still need to add a line of CSS for that.

Could you give me a line to add that would allow me to change the hover color. We can do just yellow for now and I will change the color after it is working.

Thanks, Sean

I've applied this following custom css into your custom.css file. JoomlaFolder/templates/charm/css/custom.css

/* hover Easysocial toolbar link colour */

body #es.mod-es.mod-es-toolbar .es-toolbar__link:hover {

    color: #FF0000 !important;

}

It should show the red colour when you hover the toolbar link.

Thank you very much. I will check in the morning because the hosting company has announced that there are serious problems on that server and they have scheduled an emergency maintenance window for this evening. So, I think we should not worry about any of my tickets until after they are done.

Sure, please update us on this.

Thanks for all the help. This is all working well.

Hi there,

You are most welcome. Glad to hear that your issue has been resolved now.

As a gentle reminder, kindly start a new thread if you have any other issue in the future so it will be easier for us to manage your inquiry. I will lock and mark this thread as resolved.