Blue lines around Category on Home page for Snowboard Template

This topic has 10 replies, 2 voices, and was last updated 8 years ago ago by Rose Tyler

  • Avatar: ycs7a
    ycs7a
    Participant
    November 27, 2016 at 00:22

    Hi,

    I wish to add the same blue lines around the Categories drop-down menu on my home page. This is so I can have the same look as the Snowboard menu of the Royal Demo.

    I looked around the Forum, and I found a similar question answered, with a video.

    Do I only need to add the following css code to the theme, and follow the instructions as explained on the video?

    .widget_product_categories h2{
    color:blue;
    }

    I am not versed in css, so I wanted to check first.

    9 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 28, 2016 at 08:03

    Hello,

    Please provide me link to your site in Private Content. I need to see your page.

    Regards,
    Rose Tyler.

    Avatar: ycs7a
    ycs7a
    Participant
    November 29, 2016 at 21:41

    Please find the requested information enclosed

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 30, 2016 at 08:18

    Hello,

    You can add this css code in Theme Options > Custom CSS > Global Custom CSS:

    .widget_product_categories {
        border: 2px solid #0cb3d7;
        margin-bottom: 30px;
    }
    .widget_product_categories .widgettitle {
        background-color: #0cb3d7 !important;
    }
    .widget_product_categories .with-accordion {
        margin: 0 10px;
    }

    Regards,
    Rose Tyler.

    Avatar: ycs7a
    ycs7a
    Participant
    November 30, 2016 at 10:25

    Thanks, but on subsequent pages the categories is not blue. How can you alter this?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 30, 2016 at 11:33

    Hello,

    Please, provide us with link to these pages or you can to change the class from the previous code to the new. Try find class via Inspect element tool in Chrome browser. Please, read the article and watch the video: https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/.

    Regards,
    Rose Tyler.

    Avatar: ycs7a
    ycs7a
    Participant
    November 30, 2016 at 11:44

    So, if I understand you correctly, I must:

    1. Change every page one for one?
    2. Learn and understand all these codes?

    I am very, very beginner with this.

    To understand more, I require from you a bit more explanation. I don’t mind doing this over the phone and/or with Team Viewer, but I do require assistance.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 30, 2016 at 12:12

    Hello,

    You do not need to write code to each page one by one.
    Try change style, as a write in the article, or I will do it for you. Only provide links to pages where previous code not work.
    Also, I don’t see the previous code on your site, put it in Theme Options > Custom CSS, please.

    Regards,
    Rose Tyler.

    Avatar: ycs7a
    ycs7a
    Participant
    November 30, 2016 at 12:18

    Okay I will try the instructions as written in the article, and ask you when I need assistance.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 30, 2016 at 13:00

    Hello,

    Great, feel free to contact us if you need any help.

    Regards,
    Rose Tyler.

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

You must be logged in to reply to this topic.Log in/Sign up

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