Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #18400

    Hi,

    would you mind having a look at this page: http://www.wp2.fotowalther.ch/?product=1191#!prettyPhoto

    The fundamental tweaks I applied are:

    Flashlight Styles:

    - dark-skin.css

    - Primary Color: #000000

    - Font Color on colored background: #ffffff

    custom.css:

    .content .box {

    min-width: 990px;

    width: 990px;

    }

    .box, .blog-meta, .return_content, .arrowslidecontrolls_fullscreen, .hide_content_wrap a, .img_count, .slide_thumbnails, .widget {

    background: #636466;

    }

    #top .main_menu .menu ul {

    background: #636466;

    }

    How can I make

    1) Links on top of the page “My Account | Shopping Cart | Checkout” in solid white (#ffffff)

    2) “woocommerce-page form.cart” with bg color #636466 and a border (format and color the same as the “Description” tab on the bottom of the page)

    3) “woocommerce-page form.cart” text “Product options” and variations in the drop-down menu to be #ffffff (instead of grayisch) and the text “Clear selection to be #ffffff (instead of black)?

    If I set the Flashlight styles: Primary Color to #ffffff, the “Add to cart” button turns white (it want it black).

    The boxes/tabs should show #ffffff text on #636466 background with dark border

    4) Product price is yellowish – I want it to be #ffffff (I don’t see any yellow color setting, neither in Flashlight, nor in WooCommerce)

    5) What happened to the right and lower border of the description tab? How can I align it to the upper border?

    6) How can I make the text (product description) in the “Description” tab to be #ffffff instead of grayish?

    Thanks for helping!

    Bruno

    #99318

    Hi Bruno,

    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    #top.single-product .sub_menu a {
    color: #fff;
    }
    #top.single-product .variations td {
    color: #fff;
    }
    #top.single-product select {
    color: #fff;
    }
    .reset_variations {
    color: #fff;
    }

    #top .price, div .stock {
    color: #fff;
    }
    #top.single-product .entry-content {
    width: auto;
    }
    #top div div.product .woocommerce_tabs ul.tabs li.active a {
    background: #636466;
    color: #fff;
    }
    .woocommerce_tabs p {
    color: #fff;
    }

    For updates like these where you are customizing individual bits, I’d suggest taking a look at either Firebug for Firefox or the Inspect Element fuctions in Chrome or Safari. That way you can pick out the individual bits of css that need to be modified and just add them to your quick css or custom.css.

    Regards,

    Devin

    #99319

    Hi Devin,

    Great – Thanks!

    After adding your codes to the quick css the tab “Additional information” is here again.

    Is there a CSS code that would hide “Additional Information” (otherwise I would delete it from the file).

    (I tried

    .woocommerce_tabs #tab-attributes {

    display: none !important;

    }

    but it did not work.

    Regards,

    Bruno

    #99320

    Hi Bruno,

    Try this code instead:

    .attributes_tab {
    display: none;
    }

    or

    .attributes_tab {
    display: none !important;
    }

    Hope this helps. :)

    Regards,

    Ismael

    #99321

    Hi Ismael,

    the first suggestion worked right away.

    Thanks.

    Bruno

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Changes to WooCommerce product detail page’ is closed to new replies.