Jump to content
Sign in to follow this  
Willem-Siebe Spoelstra

How to override core CSS

Recommended Posts

Willem-Siebe Spoelstra    0
Willem-Siebe Spoelstra

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


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites
Rob    547
Rob

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;
}

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Willem-Siebe Spoelstra    0
Willem-Siebe Spoelstra

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


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×