Jump to content
reneerd

Foundation - altering "Search Our Store" text

Recommended Posts

Hello again everyone...   Hope the new year has been good.

 

I have a question that probably has a "duh" answer but I just cant figure it.   I need to change properties of the text inside the search[keyword] placeholder.  Basically its super light and hard to see on the site I am working on.  I have figured out how to change the font weight but need to make it more vivid.  Best guess is it has a transparency value or the color is a super light grey.

 Does anyone know where I can find the css or php that handles this?  I should be able to figure it out from there but the where is the problem. lol  Something just seems to override or an inserted color in the same area I did the font-weight is being ignored.

Skin: Default Foundation.

Search-Issue.JPG

Edited by reneerd

Share this post


Link to post
Share on other sites

You can affect all text input fields' placeholder attribute by adding this CSS rule:

In the skin file cubecart.default.css, add:

*::placeholder { color: blue; font-weight: bold; } /* adjust to suit */

The file cubecart.default.css is a file with extra CSS rules that are read when CubeCart has been told to use the 'default' sub-theme of the skin. (This implies there can be other sub-themes.)

Share this post


Link to post
Share on other sites

Dammit!

Thank you Bsmither... always a pleasure.

Interestingly I had come across another post where you were discussing the cubecart.default.css and had JUST started messing with it when this updated.

 

 

Share this post


Link to post
Share on other sites

Okay thanks again BSmither you definitely got me on the right path.  Damn was it a long and facedesking path.  Going to post my exact methodology to get it to work across browser for other quasi-lay people like myself :)

So after getting it to work it only worked on one browser, the rest did not take the changes.  After some research and trial/error the following gets these changes on all browsers:

Note: This is specifically related to placeholders. 

Edit /public_html/skins/YOURSKIN_NAME/css/cubecart.default.css and insert the following.  Anything inbetween the curly brackets { ... }  can be modified to do what you want.

input::-webkit-input-placeholder{ /*chrome kernal fun */
  color: black;
  font-size: 1.1em;
  font-weight: bolder;
  font-style: italic;
}

::-webkit-input-placeholder {
  color: black;
  font-size: 1.1em;
  font-weight: bolder;
  font-style: italic;
}

:-moz-placeholder { /* Firefox 18- */
  color: black;
  font-size: 1.1em;
  font-weight: bolder;
  font-style: italic;
  }

::-moz-placeholder {  /* Firefox 19+ */
  color: black;
  font-size: 1.1em;
  font-weight: bolder;
  font-style: italic;
}

:-ms-input-placeholder {  
  color: black;
  font-size: 1.1em;
  font-weight: bolder;
  font-style: italic;
}

::placeholder {
  color: black;
  font-size: 1.1em;
  font-weight: bolder;
  font-style: italic;
}

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

×