Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to change text color of option box title on ECWID widget??

    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



    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

    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.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    line 578 of css.css

    http://app.ecwid.com/css?ownerid=657...y%23ecwid_body

    Code:
    html#ecwid_html body#ecwid_body label.ecwid-fieldLabel {
        font: normal 14px tahoma, geneva, verdana, sans-serif;
        color: #1e2c38;
        display: block;
    }
    Last edited by Sammy12; 11-21-2011 at 06:10 AM.

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    line 578 of css.css

    http://app.ecwid.com/css?ownerid=657...y%23ecwid_body

    Code:
    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;
    }

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    find a document that looks like this
    http://app.ecwid.com/css?ownerid=657...y%23ecwid_body

    should be in a folder called css in your directory
    http://app.ecwid.com/css
    Last edited by Sammy12; 11-21-2011 at 06:20 AM.

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I change my mind,

    just add this to the css in the html file:

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

  • #7
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    I change my mind,

    just add this to the css in the html file:

    Code:
    .ecwid-fieldLabel {
       color: #DDD9CD !important;
    }
    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; ?

  • #8
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    no, you add a completely new class

    like this:


  • #9
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #10
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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
    Last edited by Sammy12; 11-21-2011 at 06:59 AM.

  • #12
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    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.

  • #13
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.



    Then I paste the code into my weebly editor



    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.





    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?

  • #14
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •