Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1270484

    I am using the Enfold wp theme to set up an ecommerce web site. I would like the product name on the product page to have a background color. What CSS code do I use in the developer settings, custom CSS class, of the special heading element.
    Thanks

    #1270507

    Hi RosannaK,

    Try going to Enfold > General Styling > Quick CSS, then add this CSS code:

    #top #wrap_all .woocommerce-loop-product__title {
        background-color: blue;
    }

    just change the blue color.

    Best regards,
    Nikko

    #1270707

    Hi Nikko,
    Thanks for your quick response.

    I did input to CSS code where you said but no changes have happened to special header. Any other ideas?

    Thanks

    #1270731

    Hi RosannaK,

    Can you give us a link to where this should apply? so we can try to investigate why it’s not working.

    Best regards,
    Nikko

    #1270948

    Hi Nikko,
    Here is the woo commerce product page I am currently working on. The Header in gold font is where I want to change the background color to a charcoal or black color.
    Hope this helps. If you can get it to work there is one more color area I am struggling with on this page; the add to cart button. I have been able to get the background black but unsuccessful in making the font gold. Can you advise me on this as well? I am trying for color consistency with the tab color set up.

    Many thanks.

    Rosanna

    #1271474

    Hi Rosanna,

    I apologize for the delayed response.
    The code I gave did work on the Enfold setup/site that I have, can you give us a link? the woocommerce product page that you are referring.
    I’m just speculating but I think the problem might be caching if the CSS code is not fetched on the frontend of your site.

    Best regards,
    Nikko

    #1271690
    This reply has been marked as private.
    #1271784

    Hi RosannaK,

    Thanks for giving us the link and admin access.
    I noticed that you were using Advanced Layout Builder, so I suggest doing the following steps:
    1. Edit the Special Heading (product title), go to Advanced > Developer Settings > Custom CSS Class, then put my-product-title then save.
    2. Go to Enfold > General Styling > Quick CSS, then add this CSS code:

    #top .my-product-title {
        background-color: blue;
    }

    Just change the blue (value) in background color to any color you’d like.
    Also to apply this in other products, you only need to do step 1.

    Best regards,
    Nikko

    #1271974
    This reply has been marked as private.
    #1272056

    Hi RosannaK,

    I have removed the spacers and replaced it with border of the same color, I replaced this code:

    #top .my-product-title {
        background-color: blue;
    }

    With:

    #top .my-product-title {
        background-color: blue;
        border-top: 1px solid #ddb72c;
        border-bottom: 1px solid #ddb72c;
        margin: 30px 0 !important;
        padding: 30px 0 !important;
    }

    However with the blue background color, the border does not look visible, I would suggest changing the background color from blue to another one.

    Best regards,
    Nikko

    #1272250
    This reply has been marked as private.
    #1272317

    Hi,

    Add this to quick css:

    #top form.cart .button {
        color: #ddb72c!important;
    }

    Best regards,
    Jordan Shannon

    #1273822

    Thanks, this works fine.

    #1273880

    Hi RosannaK,

    We’re happy to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

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

The topic ‘CSS code to add a background color to a special heading element’ is closed to new replies.