Pro-Pack: Custom CSS not overiding SLP theme CSS

Home Forums Store Locator Plus Pro-Pack: Custom CSS not overiding SLP theme CSS

This topic contains 2 replies, has 3 voices, and was last updated by  Lance Cleveland 1 year, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #26216

    Kathy
    Participant

    I purchased the Pro Pack so that I could enter custom CSS.  I have entered my CSS in the CSS Manipulation box of the View tab of the User Experience.  But my CSS does not take effect.   When I inspect the elements on my page it seems that the SLP theme CSS file (above_and_beyond_nyloboard_01.css) is overiding my custom CSS.  Why is my custom CSS not taking precedence?

    Here is my Location page: http://www.mybuddytag.com/find-store/
    Here is my custom CSS:

    span.location_name {
    color: #59e04a;
    display: block;
    font-weight: 700;
    }

    input#addressSubmit, input#slpw_addressSubmit {
    background-color: #FF0000;
    border: medium none;
    border-radius: 6px 6px 6px 6px;
    color: #FFFFFF;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    margin: 0;
    padding: 10px 20px;
    text-transform: uppercase;
    }

    input#addressSubmit:hover, input#slpw_addressSubmit:hover {
    background-color: #ff6700;
    }

    div#map_sidebar .results_row_left_column,
    div#slpw_resultsbox .results_row_left_column {
    width: 33%;
    }

    div#map_sidebar .results_row_center_column,
    div#slpw_resultsbox .results_row_center_column {
    width: 33%;
    }

    div#map_sidebar .results_row_right_column,
    div#slpw_resultsbox .results_row_right_column {
    text-align: left;
    width: 33%;
    }

    div#map_sidebar .results_entry, div#slpw_resultsbox .results_entry {
    border-bottom: 1px solid #0d72ba;
    padding: 1em 1% 0.5em;
    }

    #26260

    Kian
    Participant

    I’m having similar issues as well. I’ve tried adding my own IDs/classes in the page template to edit them, but even that doesn’t work.

    #26614

    Lance Cleveland
    Keymaster

    Your CSS rules need to be more specific to obtain a higher precedence than the built-in WordPress or default Store Locator Plus theme rules.

    For example:

    #results_box div.results_entry span.location_name { }

     

    A good way to test this sort of thing is to use a tool like the built-in browser tools.   I’ve recently started using the built-in Firefox developer tools and using the “Inspector” tool.  You can use this to test/craft new CSS rules right within the browser window.

    One way to make CSS rules more specific, look “up the chain” of wrapping HTML constructs such as the next div with an ID tag that wraps the span.

    Also use that web developer tools to see all the WordPress & Store Locator Plus CSS rules and make sure your rule is at least as specific as the rules set by WordPress or Store Locator Plus themes.

    If you are styling results, always starting your rules with #results_box then the built-in rule shown with web developer tools is a good start and should override most CSS styles with your custom setup.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.