Changing Category Block Color | Community
Skip to main content

Changing Category Block Color

  • September 12, 2017
  • 5 replies
  • 0 views
Z

Hello everyone, currently when you come to the home page the category color is white with blue font and when you hover it then it turns blue with white font.  Basically what I want to do is flip these two color.  I want the blocks to be constantly blue with white font and then when you hover it turns white with blue font.  I tried changing it with the simple color pickers on the adjustment page but that didnt seem to do it.  It seems you cant just change the border color with these options!  Any suggestions?  Im using the Copenhagen theme.

 

Thanks!

    This topic has been closed for replies.

    5 replies

    Trapta
    • Trapta
    • September 13, 2017

    Hi @Zach,

     You need to do it by adding CSS in your CSS editor.

     Go to line no. 812 in your CSS editor and replace the code from line no. 812 to line no. 861 with the below code -

    .blocks-item {
      background-color: #4369a7;
      border: 1px solid#4369a7;
      border-radius: 4px;
      box-sizing: border-box;
      color: #fff;
      display: flex;
      flex: 1 0 340px;
      flex-direction: column;
      justify-content: center;
      margin: 0 0 30px;
      max-width: 100%;
      text-align: center;
    }

    @media (min-width: 768px) {
     .blocks-item {
       margin: 0 15px 30px;
     }
    }

    .blocks-item:hover, .blocks-item:focus, .blocks-item:active {
      background-color: #fff;
    }

    .blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
      color: #4369a7;
      text-decoration: none;
    }

    .blocks-item-internal {
      background-color: transparent;
      border: 1px solid #ddd;
    }

    .blocks-item-internal .icon-lock::before {
      content: "\1F512";
      font-size: 15px;
      bottom: 5px;
      position: relative;
    }

    .blocks-item-internal a {
      color: #fff;
    }

    .blocks-item-link {
      color: #fff;
      padding: 20px 30px;
    }
     
    Let me know if you face any issue.
     
    Thanks
    Team Diziana
    Z
    • Zach19
    • Author
    • September 13, 2017

    Worked flawlessly as usual!  I tried messing around with the CSS but I guess i couldn't quite get it.  You guys are great as usual though! Thanks.

    Trapta
    • Trapta
    • September 13, 2017

    @Zach Awesome!

    Thanks for the feedback :)

    Team Diziana

    V
    • ViralGains
    • August 12, 2020

    hi! This worked really well but I am having a couple of issues that I am hoping you could help me with.


    When I added this code it changed the pre-clicked link text to be purple instead of white and it make my icons bigger.

     

    Is there a way to reduce the icon size so it doesn't touch the edge of the border on hover & is there a way to change my pre-clicked link text to white?

    Pulkit12
    • Pulkit12
    • August 13, 2020

    Hi Customer Success ViralGains

    It's possible to share the URL of your Help Center where you have got this issue so that I will go through it and provide you a solution for your problem.

    Thanks 

    Pulkit

    Terms & ConditionsCookie settingsAccessibility statement