Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • December 16, 2014 at 12:49 am #368710
    codemode

    How can I style the Previous and Next arrows and slide-out overlays that appear on single posts? For example, I want to change the black background behind the circular image to a blue and toggle the opacity. I also want to increase the image, text, and entire container size.

    • This topic was modified 10 years ago by codemode.
    December 16, 2014 at 1:38 am #368727
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    /* Dimensions */
#top .avia-post-nav{
    height: 150px;
}
#top .avia-post-nav .entry-image, #top .avia-post-nav .entry-image img{
    width: 120px;
    height: 120px;
}
#top .avia-post-nav .entry-info{
    width: 320px;
}
#top .avia-post-nav:hover .entry-info-wrap{
    width:340px;
}

/* Font Size */
#top .avia-post-nav .entry-title{
    font-size: 18px;
}

/* Background Color & Opacity */
#top .avia-post-nav:hover{
    background: rgba(0,120,215,0.5);
}

    Change as needed.

    Cheers! 
    Josue

    December 16, 2014 at 3:52 am #368754
    codemode

    Very helpful. Thanks Josue!

    And what about changing the default color behind the arrows?

    • This reply was modified 10 years ago by codemode.
    December 16, 2014 at 5:48 pm #369032
    Yigit

    Hi!

    Please add following code to Quick CSS and adjust as needed

    #top .avia-post-nav {
background: rgba(255,0,255,0.1);
}

    255,0,255 is the RGB value of the color and 0.1 is opacity level

    Regards,
    Yigit

    December 16, 2014 at 9:31 pm #369174
    codemode

    Thank you!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Styling the Previous and Next Arrows’ is closed to new replies.