Custom CSS

[primesites]

Hi Guys,
I’m looking for the best/correct way to add CSS to override the look and feel of certain front-end elements.
Specifically, the location search form, to edit form fields, buttons and spacing.
Also to override the look of the location listing below the maps and how to override styling.
We’ve noticed the many styles in the plugin source code CSS have !important defined which makes it hard(er) to override.
Any pointers on where/how best to override CSS would be very helpful.
Thanks

[Matthew]

Hi there,

Thank you for getting in touch with us, we do appreciate your time.

As you may know, CSS has a set of priority levels that determine which CSS rules will be used when multiple CSS selectors are targeted at the same element.

Thus using the rule of “Specificity” and using the “!important” keyword would be the best way and easiest way to override the default CSS implemented by our stylesheets as well as any external styling caused by other plugins or theme style.

Should you need, here is an example of using the rule of “Specificity” to increase priority of the CSS rule:
– body div.myDivClass – most specific
– div.myDivClass – more specific
– .myDivClass – least specific

I hope this answers your question?

Kindest Regards,
Matthew

[primesites]

This reply has been marked as private.

[Matthew]

Hi there,

Thank you for getting back to me and for your time on this, it is much appreciated.

I am more than happy to assist you with this, thus please may you use the following CSS code to adding a margin between the Store Locator and the map:

div.wpgmza-store-locator{
    margin-bottom: 25px !important;
}

In the above CSS code, the rule of specificity is simply applied by specifying that the ‘.wpgmza-store-locator’ class is found within a ‘div’ eleement.

Please may you implement the above CSS code, clear your browser cache and confirm if this helps?

I look forward to your response.

Kindest Regards,
Matthew

[primesites]

Hi Matthew,

Thanks for the help and info about specificity. That did the trick on the website.

Once last request is for help with styling the location listing below the map. We would like to just have the image of each location displayed, with no text at all (so no title, address, description of text link at all). Clicking anywhere on the image/tile will go to the “More details” link location. Ideally with a simple hover-over effect to perhaps change opacity of the image or something.

Thanks in advance.

[Matthew]

Hi again,

That is most fantastic to hear and it is my pleasure assisting you.

Yes, the functionality that you have described is achievable with the help of some custom CSS and JS code which I am more than happy to write for you.

Thus please could I kindly ask if you may provide me with your respective email address so that I may reach out to you to discuss how to proceed with implementing this customization (please may you mark your reply as private)?

I look forward to hearing back from you.

Kindest Regards,
Matthew

[primesites]

This reply has been marked as private.

[primesites]

Hi Matthew,
We’ve not heard back from you, so just wanted to make sure your reply didn’t perhaps end up at the wrong address?
Thanks

[Matthew]

Hi there,

Thank you for your patience on this, it is much appreciated!

My apologies for the delayed response as we are currently under capacity constraints, however nonetheless, I have now reached out to you regarding the customization at the email address provided.

I look forward to hearing back from you.

Kindest Regards,
Matthew

[Author]

Posts