How to override core CSS

[Willem-Siebe Spoelstra 0]

Hi,

 

On my website ruzzleonline[dot]nl I have a Google Searchbox in the left sidebar (last widget at bottom).

This search box looks not good, because I found out with Google Inspection Tool that CSS from Pagelines is being active, that does not work well with the CSS from the Google Searchbox.

 

 

From your info I found out that the below is the order of CSS, I use style.less with my Pagelines Customize Plugin. 

 

 

 

1. The framework's core CSS files (style.css, objects.css, etc...)
2. Any active sections containing their own style.css
3. Child themes style.css (This includes the "Base Theme," if activated)
4. The dynamic.css (This includes CSS added to the "Custom Code" settings)
   • dynamic.css is stored in your site's database.
5. If activated, the style.css located in the PageLines Customize Plugin

 

 

 

 

However, I'm not succesfull in changing the CSS , this is what I need to achieve / assign to the input element of the Google Searchbox:

input[type="text"] {
.box-shadow(none);
.border-radius(none);
}

input {
vertical-align: none;
.box-sizing: none;
color: green;
}

input[type="text"]:focus {
.box-shadow(none);
.border-radius(none);
border-color: none;
}

Hope somebody can help.

 

Kind regards,

 

Willem

[Rob 547]

Hi Willem,

 

Actually, the CSS for the Google Search Box is not controlled by PageLines. The tags you refer to in your topic are generic input tags, and affect most form fields.

 

Google has specific coding, which, if I recall correctly, comes in from them. You can try and override it by modifying their CSS (as you find it with Chrome's Inspection Tool) and place the modified code in Dashboard > PageLines > Site Options > Custom Code.  Below is an example of their custom code for the Google Search Code (gsc):

.gsc-input-box {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #D9D9D9;
    height: 25px;
}

[Willem-Siebe Spoelstra 0]

Hi Rob, 

 

I managed to change the Google CSS to make it more specific. So the input field for Google Search now has the CSS from the first post. 

Thanks for your help!

 

Kind regards, 

 

Willem