...

View Full Version : How to change text color of option box title on ECWID widget??



Cyberspark
11-21-2011, 06:02 AM
Hello & hope everyone is well!

I want to change the color of the text that is above the option boxes from black to this color #DDD9CD. I circled the text I want to change in red. The actual active ECWID widget is all the way to the right. I do not want to change the shopping cart code, only the color of the text over the option boxes so that it will be readable on my site.

Here is the link to my site http://lovelynaturals.weebly.com/ecwid-test.html

http://lovelynaturals.weebly.com/uploads/8/0/0/9/8009548/5841526_orig.jpg

I was able to change the color of the product name and the price. I understand that the code is color: #ANY-COLOR; However, I do not know WHERE to place this code. To make it easier for someone to help me, in the link above, I have included the full code, each line with a blue number at the start. Can anyone please tell me what line I need to place my color code? Do I need to type 'style=' someplace or some other code name?



Here is the code


<div class='ecwid-Product'><form>
<div class='ecwid-productBrowser-head' style='text-align: center; padding-bottom: 15px; font: normal 20px tahoma, geneva, verdana, sans-serif; color: #DDD9CD'>&#x0022;AFRO AURA&#x0022;</div>
<div class='ecwid-productBrowser-price' style='text-align: center; padding-bottom: 15px; color: #DDD9CD' id='ecwid-price-6033837'>$39.99</div>
<table align='center' border='0'><tr><td align='left' class='ecwid'><div id="ecwid-productoption-6033837-Portrait_Size_in_Pixels_i.e._1024_x_768-container" class="ecwid-productBrowser-details-optionPanelcolor: #DDD9CD; ecwid-productBrowser-details-optionPanel-textfield ecwid-productoption-Portrait_Size_in_Pixels_i.e._1024_x_768-container"><label class="ecwid-fieldLabel" for="gwt-uid-468">Portrait Size in Pixels i.e. 1024 x 768</label><table id="gwt-uid-468" class="ecwid-fieldEnvelope ecwid-fieldEnvelope-hidden ecwid-productBrowser-details-optionError" cellSpacing="0" cellPadding="0"><tbody><tr><td style="vertical-align: top;" align="left"><div class="ecwid-fieldEnvelope-around"><input id="ecwid-productoption-6033837-Portrait_Size_in_Pixels_i.e._1024_x_768" class="gwt-TextBox ecwid-productBrowser-details-optionTextField ecwid-productoption-Portrait_Size_in_Pixels_i.e._1024_x_768" maxLength="200" type="text"></div></td></tr><tr><td style="vertical-align: top;" align="left"><div style="display: none; visibility: hidden;"><div style="display: none; visibility: hidden;" class="ecwid-fieldEnvelope-label ecwid-fieldEnvelope-label-light"></div></div></td></tr></tbody></table></div><div id="ecwid-productoption-6033837-Choose_Color-container" class="ecwid-productBrowser-details-optionPanel ecwid-productBrowser-details-optionPanel-select ecwid-productoption-Choose_Color-container"><label class="ecwid-fieldLabel" for="ecwid-productoption-6033837-Choose_Color">Choose Color</label><select id="ecwid-productoption-6033837-Choose_Color" class="ecwid-productBrowser-details-optionSelectBox ecwid-productoption-Choose_Color"><option id="ecwid-productoption-6033837-Choose_Color-Dark_Green" selected="1" value="Dark Green">Dark Green</option><option id="ecwid-productoption-6033837-Choose_Color-Dark_Blue" value="Dark Blue">Dark Blue</option><option id="ecwid-productoption-6033837-Choose_Color-Choose_for_me..." value="Choose for me...">Choose for me...</option></select></div><div id="ecwid-productoption-6033837-Upload_your_photo_:0028at_least_800_x_800_pixels:0029-container" class="ecwid-productBrowser-details-optionPanel ecwid-productBrowser-details-optionPanel-files ecwid-productoption-Upload_your_photo_:0028at_least_800_x_800_pixels:0029-container"><label class="ecwid-fieldLabel" for="gwt-uid-469">Upload your photo (at least 800 x 800 pixels)</label><div id="gwt-uid-469" class="ecwid-productBrowser-details-optionUploadFiles-widget"><div style="padding: 7px 0px;"><table class="ecwid-productBrowser-details-optionUploadFiles" cellSpacing="0" cellPadding="0"><tbody></tbody></table></div><div class="ecwid-productBrowser-details-optionUploadFiles-button"><table class="ecwid-fieldEnvelope ecwid-fieldEnvelope-hidden" cellSpacing="0" cellPadding="0"><tbody><tr><td style="vertical-align: top;" align="left"><div class="ecwid-fieldEnvelope-around"><button class="gwt-Button" type="button">Upload files</button></div></td></tr><tr><td style="vertical-align: top;" align="left"><div style="display: none; visibility: hidden;"></div></td></tr></tbody></table></div><div style="display: none; visibility: hidden;" class="ecwid-fieldEnvelope-label ecwid-fieldEnvelope-label-light"></div></div></div><div id="ecwid-productoption-6033837-E-mail_:0028contact_about_this_portrait_only:0029-container" class="ecwid-productBrowser-details-optionPanel ecwid-productBrowser-details-optionPanel-textfield ecwid-productoption-E-mail_:0028contact_about_this_portrait_only:0029-container"><label class="ecwid-fieldLabel" for="gwt-uid-470">E-mail (contact about this portrait only)</label><table id="gwt-uid-470" class="ecwid-fieldEnvelope ecwid-fieldEnvelope-hidden ecwid-productBrowser-details-optionError" cellSpacing="0" cellPadding="0"><tbody><tr><td style="vertical-align: top;" align="left"><div class="ecwid-fieldEnvelope-around"><input id="ecwid-productoption-6033837-E-mail_:0028contact_about_this_portrait_only:0029" class="gwt-TextBox ecwid-productBrowser-details-optionTextField ecwid-productoption-E-mail_:0028contact_about_this_portrait_only:0029" maxLength="200" type="text"></div></td></tr><tr><td style="vertical-align: top;" align="left"><div style="display: none; visibility: hidden;"><div style="display: none; visibility: hidden;" class="ecwid-fieldEnvelope-label ecwid-fieldEnvelope-label-light"></div></div></td></tr></tbody></table></div><div id="ecwid-productoption-6033837-Additional_notes-container" class="ecwid-productBrowser-details-optionPanel ecwid-productBrowser-details-optionPanel-textarea ecwid-productoption-Additional_notes-container"><label class="ecwid-fieldLabel" for="ecwid-productoption-6033837-Additional_notes">Additional notes</label><textarea id="ecwid-productoption-6033837-Additional_notes" class="gwt-TextArea ecwid-productBrowser-details-optionTextArea ecwid-productoption-Additional_notes"></textarea></div></td></tr></table><div style='text-align: center'><script type="text/javascript" src="http://app.ecwid.com/script.js?657124" charset="utf-8"></script><script type="text/javascript">xAddToBag('productid=6033837');</script></div>
</form></div>

I am a newbie, I do not know how to code at all. I chose ECWID because I thought I would not have to code, however their support has not responded yet and I would like to launch my site very soon. I would appreciate any help and feedback, I have been trying to do this for many hours and hours- someone please help. :( Thanks for listening.

Sammy12
11-21-2011, 06:07 AM
line 578 of css.css

http://app.ecwid.com/css?ownerid=657124&h=-1275818988&lang=en&id-selector=html%23ecwid_html%20body%23ecwid_body



html#ecwid_html body#ecwid_body label.ecwid-fieldLabel {
font: normal 14px tahoma, geneva, verdana, sans-serif;
color: #1e2c38;
display: block;
}

Cyberspark
11-21-2011, 06:14 AM
line 578 of css.css

http://app.ecwid.com/css?ownerid=657124&h=-1275818988&lang=en&id-selector=html%23ecwid_html%20body%23ecwid_body



html#ecwid_html body#ecwid_body label.ecwid-fieldLabel {
font: normal 14px tahoma, geneva, verdana, sans-serif;
color: #1e2c38;
display: block;
}


Thank you, thank you for replying :):):)

However, I dont understand- where is line 578 of css.css? Where in the code do I put this?

[code]
html#ecwid_html body#ecwid_body label.ecwid-fieldLabel {
font: normal 14px tahoma, geneva, verdana, sans-serif;
color: #1e2c38;
display: block;
}

Sammy12
11-21-2011, 06:15 AM
find a document that looks like this
http://app.ecwid.com/css?ownerid=657124&h=-1275818988&lang=en&id-selector=html%23ecwid_html%20body%23ecwid_body

should be in a folder called css in your directory
http://app.ecwid.com/css

Cyberspark
11-21-2011, 06:21 AM
where do I find this document? Is this a place or blank document that I place my code in? Do I view the page with the ecwid widget on a certain type browser?
I am building my site on weebly, is it there? Or do I have to log in to ecwid and find it there?

Sammy12
11-21-2011, 06:22 AM
I change my mind,

just add this to the css in the html file:



.ecwid-fieldLabel {
color: #DDD9CD !important;
}


http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-120.png

Cyberspark
11-21-2011, 06:26 AM
I change my mind,

just add this to the css in the html file:



.ecwid-fieldLabel {
color: #DDD9CD !important;
}


http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-120.png

ok- but where in the html file? do I need to find .ecwid-fieldLabel somewhere in the html code and then right after that put color: #DDD9CD !important; ?

Sammy12
11-21-2011, 06:27 AM
no, you add a completely new class

like this:

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-121.png

Cyberspark
11-21-2011, 06:41 AM
ok, I am using the Chrome developer tool. However, the only way I know how to change the code is to go to the weebly editor and it allows me to paste custom html code into a box.

Am I supposed to paste the code into the developer tool?

Cyberspark
11-21-2011, 06:53 AM
I appreciate your patience & time, I truly am a newbie- I just need to know if I change the code in the weebly editor, do I sign in to my ecwid account and change it or can I somehow change it using the chrome developer tool? I have never used the chrome developer tool.

Sammy12
11-21-2011, 06:57 AM
chrome developer tool only temporarily changes the page, once you reload the page, changes go away

1. do you have website files? like can you see files like http://lovelynaturals.weebly.com/ecwid-test.html

can you see ecwid-test.html literal file, you need to change the script in that file

Cyberspark
11-21-2011, 07:01 AM
chrome developer tool only temporarily changes the page, once you reload the page, changes go away

1. do you have website files? like can you see files like http://lovelynaturals.weebly.com/ecwid-test.html

Yes, I think I do at the weebly editor.

Cyberspark
11-21-2011, 07:45 AM
I only know how to make changes to code from the weebly editor or the ecwid account.

I get the code from shopping cart code from ECWID.

http://lovelynaturals.weebly.com/uploads/8/0/0/9/8009548/5183769_orig.jpg

Then I paste the code into my weebly editor

http://lovelynaturals.weebly.com/uploads/8/0/0/9/8009548/2553989_orig.jpg

If dont know of any other way to change the code. The code you gave me to create another class, I am unsure of how to create a class. Here is the original ECWID code each code line has a blue number. If it is not too much trouble, please tell me which line by the blue number, is the line I need to put the code in.

http://lovelynaturals.weebly.com/uploads/8/0/0/9/8009548/6927081_orig.jpg
http://lovelynaturals.weebly.com/uploads/8/0/0/9/8009548/6067000_orig.jpg
http://lovelynaturals.weebly.com/uploads/8/0/0/9/8009548/6298120_orig.jpg

When I know which line to put the code in, I will add the code you gave me and then put it in the weebly editor.

Am I making any sense or am I confusing you?

Cyberspark
11-21-2011, 09:22 AM
Well, I have to give up on this one! I have just decided to change the color of my website so that I can read the black text on the ECWID widget :o

Hopefully, I wont have to bug u guys anymore- but at least good to know someone responded if I need to come back again.

Thanks Sammy12 for all your patience :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum