[Sight Theme] Changing the hover color overlay in grid layout

  • cabinfeversounds

    (@cabinfeversounds)


    11 years ago

    Hi all,

    Hi All,

    Trying to find a way to change the hover-color that appears when users mouseover a post on my front page (http://cabinfeversounds.com/).

    I’m relatively new to this, so pretty well a novice with customising php. I’ve tried changing the background color in ‘.rollover background’ in the style sheet, but not having any effect for some reason.

    Am I completely off track?

    Thanks!
    Jon

    .rollover {opacity: 50; background: #8dffdd; width: 154px; height: 154px; padding: 18px; margin: 0; position: absolute; top: 0; left: 0; cursor: pointer;}
.rollover-title {margin-bottom: 5px;}
.rollover-title, .rollover-title a {color: #000; font-size: 16px; font-weight: normal; text-decoration: none;}
.rollover-title a:hover {text-decoration: underline;}
.rollover-content {color: #262626; font: 12px/1.5 Helvetica, Arial, sans-serif;}
.rollover-meta {font-size: 10px; font-style: italic; color: #656363;}
.rollover-meta span, .rollover-meta a {color: #000; text-decoration: none; font-family: Helvetica, Arial, sans-serif; font-style: normal;}
.rollover-author {text-transform: uppercase;}
.rollover-meta a:hover {text-decoration: none;}
Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter cabinfeversounds

    (@cabinfeversounds)

    11 years ago

    I’ve just noticed an example of where this has been done, if that helps – http://musicyouneed.net/.

    Michael

    (@alchymyth)

    11 years ago

    the css class .rollover is not used on any element in the front page;

    please describe in more detail what hover you want to change.
    try using a browser inspection tool to identify where the hover is defined in style.css or any other stylesheet of your theme, and which styles you need to edit.

    you might need to contact the theme’s developer for support, as this forum only fully supports themes from http://wordpress.org/extend/themes/

    Thread Starter cabinfeversounds

    (@cabinfeversounds)

    11 years ago

    Right, it looks to be part of .pagination. I want to change the background color of the text box that appears when you mouse over each post (i.e. the text showing Post Title, author, date, etc). The color I want it to be is #8dffdd.

    There are only two lines in .pagination that refer to ‘hover’:

    .pagination a:hover {text-decoration: none;}

    AND

    #pagination .nextpostslink:hover {background-color: #8dffdd; text-decoration: none; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

    The full .pagination:

    .pagination {padding: 20px 0 0 30px; color: #aaa9a9; font-size: 12px; clear: both; position: relative;}
.pagination a {color: #000; text-decoration: none;}
.pagination a:hover {text-decoration: none;}
.pagination .nextpostslink {position: absolute; right: 0; top: 17px; line-height: 21px; text-transform: uppercase; background: url("images/nextpostslink.png") 100% 0 no-repeat; padding-right: 36px;}
.pagination .previouspostslink {position: absolute; left: 30px; top: 17px; line-height: 21px; text-transform: uppercase; background: url("images/previouspostslink.png") 0 0 no-repeat; padding-left: 36px;}
#pagination {padding: 20px 0 0 30px;}
#pagination .nextpostslink {color: #000; text-decoration: none; display: block; padding: 9px 0; text-align: center; font-size: 14px;}
#pagination .nextpostslink:hover {background-color: #8dffdd; text-decoration: none; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
#pagination .loading {background: url("images/loading.gif") 240px 9px no-repeat; color: #555;}
#pagination .loading:hover {background-color: transparent !important; cursor: default;}

    Any ideas? 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Sight Theme] Changing the hover color overlay in grid layout’ is closed to new replies.