Okay
  Public Ticket #2080406
Change text and icon colors of "Page Feature"
Closed

Comments

  • ryanteixeira started the conversation

    I am not sure what is the best way to do this.  The primary and secondary colors are driving the colors for the "page feature", however I want White text and icons for the current grid item and when it is hovered.  I've managed to add the following custom CSS to update the current grid item to white, but I have not been able to change the "hover" to white.  I can make only the icon or the post-title change to white when hovered, but as shown in the screen shot attached, when the grid item is hovered in a corner, it doesn't work.

    My CSS: 

    .tm-page-feature.style-01 .grid-item.current .icon {color: #ffft;}

    .tm-page-feature.style-01 .grid-item.current .post-title {color: #fff ;}

    BTW, I am building on a local server, it is inaccessible from the Internet.

    Thanks,

    Ryan

    Attached files:  Screen Shot 2019-07-14 at 8.32.03 AM.png

  •  875
    Linh replied

    Hello

    Can you provide the page url so i can help you check it?

    The sidebar grid was built via visual element. Please edit the sidebar to see the element shortcode and copy that shortcode to a temp page to set up style again.

    Thanks

  • ryanteixeira replied

    Hi Linh,

    I am building the site on a "local server" and unable to provide a url.

    I created the "page feature" from  WPBakery element. Custom CSS can be added to it, but I can't seem to figure it out because there are no style options to change the text and icon colors inside the page feature. 

    I just can't figure out the custom CSS to make it work.

    Thanks

    Attached files:  Screen Shot 2019-07-16 at 12.14.27 PM.png
      Screen Shot 2019-07-16 at 12.16.09 PM.png
      Screen Shot 2019-07-16 at 12.17.07 PM.png

  •  875
    Linh replied

    Hi,

    This code will help you change the hover background color:

    .tm-page-feature.style-01 .grid-item:hover .post-item-wrap {background-color: #FEBC35 !important;}
    

    Thanks

  • ryanteixeira replied

    Hi Linh,

    Thanks for the help here.  That was what I was missing to figure out how to change the text and icon colors in the page feature. In the end, this is the code that gave the results I was looking for. 

    .tm-page-feature.style-01 .grid-item:hover .icon {color: #fff !important;}
    .tm-page-feature.style-01 .grid-item:hover .post-title {color: #fff !important;}
    .tm-page-feature.style-01 .grid-item.current .icon {color: #fff;}
    .tm-page-feature.style-01 .grid-item.current .post-title {color: #fff ;}

    Thanks for all the help and patience!

    Ryan

    Attached files:  Screen Shot 2019-07-23 at 6.33.48 AM.png

  •  875
    Linh replied

    You are welcome.

  • NUROPRINTING replied

    I am trying to change the color of these icon to orange but cannot find out where? see attached

    Attached files:  Screen Shot 2019-08-19 at 6.33.00 PM.png

  • NUROPRINTING replied

    Also these

    Attached files:  Screen Shot 2019-08-19 at 6.34.22 PM.png

  •  875
    Linh replied

    Hi NUROPRINTING,

    Can you create your own ticket and provide your site url so i can help you check it?

    Thanks