Forums

Customizing Elemental Theme - Header Navigation

Permalink
Hello, I am new to concrete5. We have 5.7 installed. We have copied the elemental theme to applications/themes, and started to do some customization.

In the folder css/presets I am able to copy one of the presets to my own, and edit it. I see the following options for navigation:

// Top Header - Main Navigation */
@header-navigation-type-color: #0000cc;
@header-navigation-type-font-size: 1.2em;
@header-navigation-type-font-weight: 1.0em;
@header-navigation-type-font-family: 'Droid Sans';
@header-navigation-type-text-transform: none;

@header-navigation-hover-color: #0000cc;
@header-navigation-menu-background-color: #ffffff;
@header-navigation-menu-border-color: #edf2f3;
@header-navigation-menu-background-hover-color: #ffffff;
@header-navigation-menu-text-color: #0000cc;
@header-navigation-menu-text-hover-color: #0099ff;

Are these the only options there are? I would like background of a clicked item to change, or its color to change. All I can see here is that I can change its hover color, but not the "clicked" color. Is that possible with this theme, or do I need to start from scratch?

Can someone explain to me how the setting in css/presents percolates up to the actual code? I can trace it to the css/styles.xml page, but I'm wondering where to go from there?

Thanks for any insight you can offer,
Heather
HeatherMyers
 
WebcentricLtd replied on at Permalink Best Answer Reply
Hi Heather,

you can add as many new customisable styles as you want to.

you add your style variable to:

yourtheme/css/presets/defaults.less

you instantiate it as a customisable style in

yourtheme/css/styles.xml

and then you apply it to the element you want in the less files under

yourtheme/css/build/yourstylefile.less

The less files are normally logically names for the area of the theme they pertain to.

Does that make sense? The documentation is really quite good on the subject and once you start doing it it all quickly falls into place.

http://www.concrete5.org/documentation/developers/5.7/designing-for...
HeatherMyers replied on at Permalink Reply
HeatherMyers
AndyJ,

Thank you for the reply. I think that gets me started. I'll read through the documentation and watch the cast as well.

Heather
HeatherMyers replied on at Permalink Reply
HeatherMyers
AndyJ,

I guess what I'm really missing is understanding LESS. I found in css/build/header.less the navigation section:

nav {
.dropdown{
&:after {
content: ' ▶';
}
&:hover {
&:after {
content:'\25bc';
}
}
}

ul {
a {
padding-right: 40px;
font-family: @header-navigation-type-font-family;
font-size: @header-navigation-type-font-size;
font-weight: @header-navigation-type-font-weight;
color: @header-navigation-type-color;
text-transform: @header-navigation-type-text-transform;

&:hover {
color: @header-navigation-hover-color;
text-decoration: none;
}
}
...

and I can see there the "hover color" is applied in the &:hover section, but I have no clue as to what terms I need to add a "clicked" section. Actually I think this is the "active" tag...

I think I have the background figured out, just trying to understand how to set an active color. Thank you for your help again.

Thanks,
Heather
WebcentricLtd replied on at Permalink Reply
hi,
if you're not up to speed with LESS yet then you can just add standard CSS into the less file.

Basically you'd be looking at adding a :visited on the element you want and using the color variable.
HeatherMyers replied on at Permalink Reply
HeatherMyers
Thanks, I think I'm starting to get it, looks like I really need to come up to speed on LESS, CSS, etc to fully understand how to customize concrete5 themes.

Baby steps!