How do I change text colours?

StephenSLR · #1 05-27-2012, 08:18 AM

I'd like to know how to change text colours.

The t-shirt sizes in the widget are in white against a grey background and very hard to read.

See here at bottom of page.

http://www.lycanthia.com/#ecwid:cate...

s

Kess · #2 05-28-2012, 06:19 PM

To change the options text color please add the following rule to your CSS theme (Ecwid control panel -> System Settings -> Design -> CSS Themes):

Code:

span.ecwid-productbrowser-details-optionradiobutton {
color: COLOR_CODE

where COLOR_CODE is the code desired color. The color codes can be found at http://reference.sitepoint.com/css/colorvalues

Click "Save (Ctrl+S)".

StephenSLR · #3 05-30-2012, 04:21 AM

I've done that with no effect, there's also a discrepancy.

We've added this app to our facebook store, all is fine

https://apps.facebook.com/ecwid-shop/store/114172834996?ecwid:mode=product&ecwid

roduct=1023 5814

On the website however the app text colours have changed, the 'sizes' description is blue on black

http://www.lycanthia.com/#ecwid:cate...

which is hard to read and on this page the 'sizes' text is blue on black plus the radio button text is white on grey, also hard to read.

http://www.lycanthia.com/#ecwid:cate...

How do I change this?

s

Kess · #4 06-05-2012, 08:31 AM

The sizes of the "Within The Walls T-Shirts" product are written in the product description text in your store, and, as far as I can see, the text color is also defined there. Please open Ecwid control panel → Catalog → Products → click on "Within The Walls T-Shirts" -> General -> click on "HTML" in the upper right corner of the description field. You will see the following:

Code:

<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: center;">Image shows front and back.</p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: center;"><strong>Sizes</strong></p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: left;">Laid out flat the shirts measured from armpit to armpit are as follows:</p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: left;">Small = 46 cm (18 inches)</p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: left;">Medium = 52 cm (20.25 inches)</p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: left;">Large = 56.5 cm (22.25 inches)</p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: left;">XL = 61.5 cm (24 inches)</p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: left;">2XL = 66.5 (26 inches)</p>

This color is applied both to your facebook store and your store at http://www.lycanthia.com/. But since these stores have different background color, the test looks differently - it is well-read in Facebook against the white background, and is hardly seen on the black background of your site.

You can change the color: #1e2c38 setting in the product HTML description to the color code you need and save the changes.

As for the white color of the options, this color is defined in the site theme (not in Ecwid) by the following rule:

Code:

body,td,th {
color: #FFF;

However you can change it with the help of the CSS code. I have checked your store backend, and as far as I can see, you have added this rule from my previous message to "Standard (copy)" theme, but it is not activated. You have "Standard' theme activated at the moment. Please activate the "Standard (copy)" theme and apply the following rule instead there:

Code:

div.ecwid-productBrowser-details-optionPanel-radio  {
color: black;
}

and click "Save (Ctrl+S)".

StephenSLR · #5 06-05-2012, 08:53 AM

Thanks,

I've changed the website and it looks good however the fb app description looks very blocky.

https://apps.facebook.com/ecwid-shop/store/114172834996?ecwid:mode=product&ecwid

roduct=1023 5814

Is there a way to change the whole background and not just outlining the text?

s

Kess · #6 06-05-2012, 02:37 PM

If I get it right, you would like the product description text color for "Within The Walls T-Shirts" product to be cyan both at http://www.lycanthia.com/ and in your facebook store, but the background of http://www.lycanthia.com/ should be black while the facebook store background needs to be white. Am I correct?

If so, you just need to delete the background settings from the "Within The Walls T-Shirts" product HTML description ( Ecwid control panel → Catalog → Products → click on "Within The Walls T-Shirts" -> General -> click on "HTML" in the upper right corner of the description field). At the moment the code there is as follows:

Code:

<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: center;"><span style="background-color: #000000; color: #00ffff;">Image shows front and back.</span></p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: center;"><span style="background-color: #000000; color: #00ffff;"><strong>Sizes</strong></span></p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: left;"><span style="background-color: #000000; color: #00ffff;">Laid out flat the shirts measured from armpit to armpit are as follows:</span></p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: left;"><span style="background-color: #000000; color: #00ffff;">Small = 46 cm (18 inches)</span></p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: left;"><span style="background-color: #000000; color: #00ffff;">Medium = 52 cm (20.25 inches)</span></p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: left;"><span style="background-color: #000000; color: #00ffff;">Large = 56.5 cm (22.25 inches)</span></p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: left;"><span style="background-color: #000000; color: #00ffff;">XL = 61.5 cm (24 inches)</span></p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: left;"><span style="background-color: #000000; color: #00ffff;">2XL = 66.5 (26 inches)</span></p>

Remove all the background settings from it, i.e. change this code to:

Code:

<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: center;"><span style="color: #00ffff;">Image shows front and back.</span></p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: center;"><span style="color: #00ffff;"><strong>Sizes</strong></span></p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: left;"><span style="color: #00ffff;">Laid out flat the shirts measured from armpit to armpit are as follows:</span></p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: left;"><span style="color: #00ffff;">Small = 46 cm (18 inches)</span></p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: left;"><span style="color: #00ffff;">Medium = 52 cm (20.25 inches)</span></p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: left;"><span style="color: #00ffff;">Large = 56.5 cm (22.25 inches)</span></p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: left;"><span style="color: #00ffff;">XL = 61.5 cm (24 inches)</span></p>
<p style="color: #1e2c38; font-family: tahoma, geneva, verdana, sans-serif; text-align: left;"><span style="color: #00ffff;">2XL = 66.5 (26 inches)</span></p>

and save the changes.

Also, if you would like to apply some CSS changes to your Facebook store only, please refer to the following article for instructions:
http://kb.ecwid.com/w/page/15853261/...

Another article you may like is http://kb.ecwid.com/w/page/28425525/... , it contains some hints for improving the look of a site with the dark background.

Alissa Pittman · #7 06-11-2012, 02:18 PM

I found that altering the css code as stated to change from white to gray on the radio button font didn't work. After searching through the css code, i noticed a missing } and a change of caps- for all of us that are not super fluent in code here is what worked for me:
span.ecwid-productBrowser-details-optionRadioButton {
margin: 5px;
display: block;
font: 13px helvetica, arial, verdana, sans-serif;
color: #000000;/*Added because default was white font on gray and hard to read */
}