Forums

What's the best way to srtyle a new div

Permalink
What is the best way to style a newly created div?

In this case the div contains the 'Book now' link here (http://gotimetrekkers.com/concrete5/tour/test2) - top right corner.

I'm OK with standard css. I believe there is somewhere to insert custom css on the front end (via customize theme), but at the moment my customize panel is not showing. In any case, I'd rather style the div the 'proper' way :)

I'm using a copied version of Elemental theme.

Thanks
p
 
WebcentricLtd replied on at Permalink Reply
hi,
if you have access to the stylesheet you really just need to append a style for the a element to the class:

single_tour_book_now

for example

.single_tour_book_now a { styles here; }
PJSAndo replied on at Permalink Reply
Thanks. Where is the style sheet located? (Elemental theme)
WebcentricLtd replied on at Permalink Reply
unless you've made any other customisations your copy of elemental will be creating your stylesheet automagically from the various .less files in your theme's build directory. I would find the most logical file and add the style in there. You can use normal css declarations in less files.
WebcentricLtd replied on at Permalink Reply
I'd always make a copy of any file you're about to edit unless using some versioning tool.
PJSAndo replied on at Permalink Reply
Thanks.
I've added the styling to the bottom of main.less. Seems to work mostly. But for some reason does not work for styling links/hover/active - which is being overridden somewhere....?

Please see Book now top right corner herehttp://gotimetrekkers.com/concrete5/tour/test2...
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
@PJSAndo

You can override the theme styles this way.

Reading about CSS specificity will benefit you as you make your theme.
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-y...

div.ccm-page main .single_tour_book_now a:not(.fa):not(.btn) {
    color: white;
}
div.ccm-page main .single_tour_book_now a:not(.fa):not(.btn):hover {
    color: black;
}
div.ccm-page main .single_tour_book_now a:not(.fa):not(.btn):active {
    color: yellow;
}
PJSAndo replied on at Permalink Reply
Hi MrKDilkington,

Brilliant. Thanks for that.

Specificity! Tricky stuff!