Archived

This topic is now archived and is closed to further replies.

  • 0

How to override core CSS

Question

Posted · Report post

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

Share this post


Link to post
Share on other sites

2 answers to this question

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites