Jump to content


Photo
- - - - -

How to override core CSS


Best Answer Rob , 22 April 2013 - 09:47 PM

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;
}
Go to the full post


  • Please log in to reply
2 replies to this topic

#1 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 22 April 2013 - 09:08 PM

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 

    Please Login or Register to see this Hidden Content

     if activated)
  4. The dynamic.css (This includes CSS added to the 

    Please Login or Register to see this Hidden Content

     settings)
    • dynamic.css is stored in your site's database.
  5. If activated, the style.css located in the 

    Please Login or Register to see this Hidden Content

 

 

 

 

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:

Please Login or Register to see this Hidden Content

Hope somebody can help.

 

Kind regards,

 

Willem



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 22 April 2013 - 09:47 PM   Best Answer

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):

Please Login or Register to see this Hidden Content



#3 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 23 April 2013 - 07:58 AM

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