Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 21, 2020 at 10:07 pm #1186871
    bri2k

    I am looking to make the previous/next blog post (or in my case portfolio page) buttons more discoverable by styling colors, size or opacity.

    February 23, 2020 at 8:09 am #1187074
    Rikard

    Hey bri2k,

    Could you post a link to where we can see the elements in question please? Also please try to explain your intentions a bit further, or post a screenshot highlighting the changes you would like to make.

    Best regards,
    Rikard

    February 24, 2020 at 4:47 pm #1187396
    bri2k

    https://snipboard.io/26DnIa.jpg
    https://snipboard.io/bFjSOH.jpg

    I’d like to style the inactive version. Keep the hover action. I feel like the transparent grey next/previous button box indicating you can navigate through blog or portfolio pages could be more discoverable. I’d like to know how to restyle this element (transparency, color, size, placement). I had a hard time finding it in inspect mode.

    I’d also like to explore the possibility of surfacing the hover state permanantly, but probably just below the content.

    • This reply was modified 4 years, 2 months ago by bri2k.
    February 24, 2020 at 6:13 pm #1187451
    Jordan Shannon

    Hi,

    Provide a link to the site/page in question so we can work out the css.

    Best regards,
    Jordan Shannon

    February 24, 2020 at 6:25 pm #1187460
    bri2k
    This reply has been marked as private.
    February 25, 2020 at 2:18 pm #1187691
    Mike

    Hi,
    Thanks for the link, to change the color & opacity please try this css:

    #top a.avia-post-prev,#top a.avia-post-next {
	background-color: #F95020 !important;
	opacity: .5;
}

    This color is from your logo, but you can adjust to suit.
    I didn’t find a working solution to moving the next / previous buttons into the end of the content.

    Best regards,
    Mike

    February 25, 2020 at 3:49 pm #1187731
    bri2k

    Great. How do I isolate and control the background color on hover? (Keep the inactive state orange and the hover state black)

    February 25, 2020 at 4:57 pm #1187766
    Jordan Shannon

    Hi,

    Add this to quick css:

    #top a.avia-post-prev:hover, #top a.avia-post-next:hover{
background:#000!important;
color:#fff!important;
}

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.