Override WPGeo Styles

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Author

Posts
May 14, 2014 at 8:54 am #2007
John Allsopp
Expired Member

Post count: 399
I have seen this question come up in the forum and thought i’d share my thoughts here so that people can find it easier.

To override the styles there are several ways.
1) Quick and nasty – use !important (not recommended)
2) Use css specificity – add a body class so that you can target each area more specifically
3) My favourite way however is to enqueue a new stylesheet and load it after the plugin has loaded – this will mean any style in the new css file will override the plugin. This is (in my opinion) a nicer solution, and has the added benefit of overriding all plugins, so you could add woocommerce etc styles in here too.

To do this, create a css file and then add the code below to your child theme’s functions.php file.
```
add_action(  'wp_enqueue_scripts', 'pw_geo_styles', 9999  );
function pw_geo_styles() {
	wp_register_style( 'pw_geo_css', get_stylesheet_directory_uri(   ).'/css/wpgeocss.css'  );
	wp_enqueue_style( 'pw_geo_css'  );
}
```
In my example, i created a folder in my theme called css, and created a css file within the folder, named wpgeocss.css

Now when you want to override a style, simply copy the style into your new css file and make your changes.

Hope that helps some people 🙂
May 14, 2014 at 9:38 am #2011

Guust
Moderator

Post count: 29970

Thanks for that, John.
But is that not the function of the style.css file of a child theme?
Often, even when using a child theme, I find myself having to use !important because that is the only way to override some plugin CSS. Would your solution prevent that?
I guess using CSS specificity would also fix that.
[and for those who wonder what that means, I found this explains it quickly:
http://www.htmldog.com/guides/css/intermediate/specificity/ ]

May 14, 2014 at 10:33 am #2013

John Allsopp
Expired Member

Post count: 399

Hi @guust
The child theme’s style.css will override the parent theme’s style.css, but it loads before stylesheets for plugins, so it won’t override them.

My solution makes the new stylesheet load last (after all theme and plugins) so yes, you won’t need to use !important if you do it my way 🙂

nb: An alternative would be to find the enqueue statement for the plugin you want to override (in the plugin files) and dequeue it, then enqueue it yourself with a higher priority to bring it before your theme – but that requires finding how it was enqueued (and doing it for all the plugins you want to override) – so i find it easier to just load a new stylesheet after everything else.

May 14, 2014 at 11:13 am #2021
John Allsopp
Expired Member

Post count: 399
Another way to skin the cat would be to find how your theme enqueues the styles and change that.
Normally i work with Genesis, so if i wanted to override the nasty Woocommerce css for example, i could get Genesis to load it’s styles later, then i don’t need to add another stylesheet.
```
remove_action( 'genesis_meta', 'genesis_load_stylesheet' );

add_action( 'wp_enqueue_scripts', 'genesis_enqueue_main_stylesheet', 15 );
```
Unfortunately WPGeo doesn’t play nice with Genesis, so this doesn’t really apply – just thought i’d throw it out there.
May 14, 2014 at 6:39 pm #2061

Paolo
Site Admin

Post count: 31206

A GD ready Genesis child theme will come soon…

Thanks for sharing your knowledge with other members!

May 20, 2014 at 11:30 am #2615

John Allsopp
Expired Member

Post count: 399

Thanks @guust for the link.
A note on CSS specificity, to keep things simple think of it as a number, and the biggest number wins…
Inline styles = 1,x,x,x (1000 for each inline style:something;)
IDs “#” = x,1,x,x (100 for each ID)
Classes “.” = x,x,1,x (10 for each class)
Elements “p etc” = x,x,x,1 (1 for each element)
“!important” can be thought to beat them all with 1,x,x,x,x (10,000)

eg: #geodir_wrapper ul li .geodir_new_listing = a score of 112
100 for the ID (#geodir_wrapper)
10 for the class (.geodir_new_listing)
2 for the elements (ul & li)

To override that style you would need to get more specific. One way to do this is add a class to the body “.myclass”,

eg: .myclass #geodir_wrapper ul li .geodir_new_listing = a score of 122
100 for the ID (#geodir_wrapper)
20 for the classes (.myclass and .geodir_new_listing)
2 for the elements (ul & li)

Hope that helps rather than confuses!

May 21, 2014 at 11:10 am #2716
eqhes
Expired Member

Post count: 40
You can also create the style.css file in the child theme and set it like this:
```
/*
Theme Name: your_theme_name
Description: Your theme description.
Author: Your Name @ Your Company
Template: parent_theme
*/

@import url("../parent_theme/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */
```
This is how WordPress recommends to work with styles in child themes as you can see here.
May 21, 2014 at 10:25 pm #2756

John Allsopp
Expired Member

Post count: 399

Hi @eqhes,
That’s exactly what i’m suggesting you do – it’s just that the style.css you create in your child theme will not override styles in the plugin unless you force it to load after the plugin’s css files, or use css-specificity as i explained above, to give greater weight to style your elements.

August 18, 2014 at 8:53 pm #12506

b budd
Buyer

Post count: 50

This reply has been marked as private.

August 18, 2014 at 11:29 pm #12521

John Allsopp
Expired Member

Post count: 399

Hi,
You can contact me at john[at]poshweb.co.uk 🙂

Integrating to that level would be quite a big job, but there is an option there for Ads/Custom Content – you can add shortcodes in that unit, so that could be a possibility for you.

I have made some more changes to the plugin – listings title has been moved below breadcrumb (in keeping with blog category titles) and both listing title and widget titles now pick up Sahifa styling. I also improved the search bar.

I will look at it again in the morning to see if there’s anything i missed.
🙂

August 19, 2014 at 1:41 am #12526

b budd
Buyer

Post count: 50

This reply has been marked as private.

August 19, 2014 at 1:46 am #12527

identity
Lifetime Member

Post count: 445

Excellent John! This is very helpful and truly appreciate you sharing your knowledge.

cheers
Author

Posts