Modifying the CSS of a concrete theme

Developing with Concrete
1

Hi,

I am new to concrete and am in the process of learning how to “concretify” my custom static site (HTML + CSS). I followed the instructions and I now have my site set up using concrete on my local machine.

Now that I know some of the basics, like adding editable areas, I want to continue developing my site. I started coding CSS like I normally do, only to find that changes made to the CSS file do not affect the site. Could anyone kindly explain why this is? And how do I change the CSS of my concrete site?

2

Make sure your cache is turned off
/index.php/dashboard/system/optimization/

or if you want to keep it turned out make sure you clear it.
/index.php/dashboard/system/optimization/clearcache

1 Like
3

Thank you for the quick reply. All caching is already turned off. Does this mean I normally should be able to edit the css file directly?

4

It seems I am able to update the page’s CSS via inline styles, but not the CSS file itself… I have no idea…

5

Are you definitely pulling in the CSS file to the page? Does anything show up from it?

6

Yes, I have “<?=$view->getThemePath()?>/” in the href and all the styles from before I converted the code to a theme are working. When I remove the link to the stylesheet there are no styles, so it is definitely taking the styles from the file… but when I modify the stylesheet there is no effect.

7

Update: some of the styles I put in the stylesheet have shown up. I tried reverting my changes to see if they would show up but nothing happens… It almost seems as if it’s just taking an eternity to load.

8

Despite having already disable caching globally, there must have been some cache remaining because everything started behaving normally after I cleared the cache a few times. Thank you @TMDesigns for responding to my post. I am very grateful that you were willing to try and help out a noob like me. :smiley:

9

also on Chrome (or Chrom-based browsers) you can use ctrl + shit + r to hard refresh and clear the cache. (I’m sure there are similar commands on other browsers)
I have to do this from time to time as well when css changes wont fully show up.

Another tip:
wrap all your css-modifications with the div.ccm-page class to prevent issues with the concrete editing interface.
(look here for more info)

Hope this helps.

1 Like
10

Thank you so much! This is very helpful.

11

You may find this add-on helpful. I purchased one for testing, then ended up buying some more licenses. It saves a lot of time when tweaking a theme’s CSS.

12

Thanks, I may consider it in the future for paid client work. It looks very convenient.