Jump to content

Foundation - altering "Search Our Store" text


reneerd

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

Link to comment
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.)

Link to comment
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;
}

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...