custom class

Permalink
Ive been using C5 for years but never understood how to use custom classes.
On the default ELEMENTAL theme install there is an area on the home page thats got a green/yellow tint to the background.
I figured out that if you go to edit the page footer area design and then click the 'cog' icon, you can see in the 'custom class' box the text 'area-content-accent'.

I cant find any comprehensive list of classes that are built into the ELEMENTAL theme?
I know creating custom classes is a coder skill I don't have, so how does one use this feature as a non coder?

As always any clear insight is very much appreciated. Thanks.

deanhawthornthwaite
 
ConcreteOwl replied on at Permalink Best Answer Reply
ConcreteOwl
The custom classes can be found in concrete/themes/elemental/css/build/custom-design-classes.
You would however be better off downloading the cloneamental theme and deploy/modify that, (it is a clone of the elemental theme)
EDIT
The 'area-content-accent' color is called in the area-content-accent.less file on line 2 as
background-color: @accent-background-color;

and the actual color depends on the preset you are using, the default preset calls the defaults.less file which declares the color like this on line 129
@accent-background-color: #f8faf1;
deanhawthornthwaite replied on at Permalink Reply
deanhawthornthwaite
Hey weyboat, thanks so much for explaining!
I found those files, the defaults.less file sits inside the css/presets folder.

I tried changing the area-content-accent colour in the defaults.less file and saved.
When I check the site, the colour is the same ( i cleared the cache)?

Am I missing something please?
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
You must ensure you are using the default preset for that to take effect, it sounds like you are using one of the other presets, blue-sky preset, night-road preset or royal preset?
If you are using one of the other presets, edit the corresponding less file in css/presets
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
Make sure you are using the cloneamental theme if you want to edit the less files..
deanhawthornthwaite replied on at Permalink Reply
deanhawthornthwaite
I'm using "Sunrise" the top one in the list under design.
Ive adjusted the colours so this must be overriding i assume? If this is the case then I don't see how you can change that accent colour as its not in the listed of editable colours section under customize design. Do you add it in the custom CSS area at the bottom of the list maybe?
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
Are you using the cloneamental theme?
deanhawthornthwaite replied on at Permalink Reply
deanhawthornthwaite
Sorry I haven't got round to changing to that theme, so will do it now and re-run my test.
deanhawthornthwaite replied on at Permalink Reply 2 Attachments
deanhawthornthwaite
OK I'm not on CLONAMENTAL.
What Ive figured is when customising colours under the 'miscellaneous' section, you can change the default accent colour using 'Accent Background' so no need to edit code.
Yippee!

Whats puzzling is, by editing various colours i can change the thin outline on an 'event list' forward and back button, but it doesn't change on 'page list pagination' overflow buttons which are very similar?
Ive attached scree shots of both.

Oh the fun of messing with websites: :0)