CSS niggles - by fishmonkeyman - on WordPress WooCommerce support

This topic has 6 replies, 2 voices, and was last updated 2 years, 10 months ago ago by Olga Barlow

  • Avatar: fishmonkeyman
    fishmonkeyman
    Participant
    June 8, 2021 at 16:45

    Hello,

    First of all, many thanks for your excellent theme. It’s been a real pleasure to develop my website with Xstore (and the addition of FileBird and Yellow Pencil has been transformational).

    I do have a number of niggles that I’d like to iron out before launch, though, if you can help me. I’ll split my queries over several topics.

    CSS:

    1/ I appear to have recently lost the default ‘Read More’ button styling on the blog post images in the blog grid. Can you help me replace this please?

    2/ In the SHOP sidebar, the search icon has a bold white border around it. I don’t know when or why that appeared, but I am unable to get rid of it.

    3/ I am unable to PERMANENTLY change the size of the search icon in the header either by using the Customiser or Yellow Pencil. It keeps reverting to its original size after a few minutes.

    Can you also assist me with where to find the CSS code to modify the following:

    4/ Main menu dropdown (Yellow Pencil says it’s ‘hidden’ so I am unable to change the CSS)

    5/ Changing the colour of the overlay on the ‘Team Member’ image from white to another colour.
    (https://www.millidge.com/not-the-millidge/)

    Many thanks in advance
    –Gary.

    Please, contact administrator
    for this information.
    5 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    June 9, 2021 at 20:11

    Hello,

    Oh, thank you for using our theme!

    1) It’s because of the Instagram journal plugin. It overwrites the theme styles. I have added the below code to change styles back. So, check now.

    article.blog-post .read-more.btn, article.post-grid .read-more.btn, .wp-picture:hover .blog-mask-inner .btn {
        text-shadow: none;
        background-image: none;
        border-radius: 0;
        font-size: .85rem;
    }

    2) I don’t see the issue https://gyazo.com/86b0b89c84fb2cd00f9b47ca327e1baf We had this bug in the previous version of the theme but it was fixed. So, clear the browser cache and check the shop page search button again.

    3) Go to Theme Options > Header Builder > Search > Icons Zoom (Proportion) https://gyazo.com/cbcf4477301e2a72b73302df0d9ca88c

    4) What exactly do you want to change? Color, size, hover color?

    5) Edit the page and Team member element and change the overlay color https://gyazo.com/31838b8d213b3826fc312bc62e85a70a

    Regards

    Avatar: fishmonkeyman
    fishmonkeyman
    Participant
    June 10, 2021 at 15:32

    Many thanks for your solutions, they are very much appreciated.
    1. Good to know. Thank you for restoring the styling – I was convinced I must have deleted the code somehow!
    2. Yes, a browser cache issue.
    3. Yes, that is the setting I was using. Quite possibly some cache issue, but I will check over the next day or so.
    4. Probably just a hover – either different colour hover text or a colour background. I’d need to have a play around.
    5. D’oh! How did I miss that setting?

    I do have one further query – I’d like to style the shop pages ‘Categories’ header to match the ‘Search Products’ header above (i.e. the same styling as the menu headers on the blog pages).

    Thanks again for your wonderful support

    –Gary

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    June 11, 2021 at 10:27

    Hello,

    4) Add the below code to Theme Options > Custom CSS

    #header .et_b_header-menu .nav-sublist-dropdown .item-link:hover {
        color: #222222;
        opacity: 1;
        background: #d2d2d2;
    }

    6) Remove the following code from the child theme style.css and clear cache.

    .sidebar-widget.widget_product_categories .widget-title {
        color: #090909;
        background: #fafafa;
    }
    
    .sidebar-widget.widget_product_categories .widget-title,.wpb_widgetised_column .widget_product_categories .widget-title {
        padding: 25px 10px;
        margin-bottom: 10px;
        text-align: center;
        font-size: 22px;
        border: none;
        line-height: 1.1;
    }

    Regards

    Avatar: fishmonkeyman
    fishmonkeyman
    Participant
    June 11, 2021 at 12:11

    Perfect! Thank you, that’s saved me hours of tinkering.
    i really appreciate the speedy and excellent support.

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    June 11, 2021 at 20:08

    Hello,

    You are welcome.

    Regards

  • Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘CSS niggles’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.