Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #297756

    Hi, I want red to be my hyperlink colour and Blue as the headings colour.

    On the website in advanced styling I changed the H1 to H6 to blue but it has also changed the Caption Title on the Full Width Easy Slider on the homepage.
    How can I change this back to white?

    Also is there a way to darken the opacity on the caption backgrounds in the Full Width Easy Slider?

    Further down the homepage the Post Slider is now displaying the clickable post titles in blue, how can I change those to red as well?

    Lastly the button elements, mouse over causes a very faint change, any way to make this hover more noticeable?

    Thanks

    #298256

    I have since fixed two of the requests but two I still need help with;

    Firstly these may help other readers…

    I fixed the query
    “On the website in advanced styling I changed the H1 to H6 to blue but it has also changed the Caption Title on the Full Width Easy Slider on the homepage. How can I change this back to white?”
    with
    .avia-caption-title
    {
    color: #ffffff!important;
    }

    and I removed captions completely from mobile devices with
    @media only screen and (max-width: 767px) {
    .avia-caption-content
    {
    display: none;
    }
    }

    @media only screen and (max-width: 767px) {
    .avia-caption-title
    {
    display: none!important;
    }
    }

    I fixed the query
    “Further down the homepage the Post Slider is now displaying the clickable post titles in blue, how can I change those to red as well?”
    with
    #top h1 a, #top h2 a, #top h3 a, #top h4 a, #top h5 a, #top h6 a {
    color: #c33402!important;
    }

    but I still need to know;

    Also is there a way to darken the opacity on the caption backgrounds in the Full Width Easy Slider?

    Lastly the button elements, mouse over causes a very faint change, any way to make this hover more noticeable?

    Thanks, Denis

    #299278

    Hey!

    Yes, use this css code to darken the opacity on the caption backgrounds – you can add it to the quick css field:

    
    .caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-content p, .avia-caption .avia-caption-title {
    filter: alpha(opacity = 90);
    background: rgba(0, 0, 0, 0.9);
    }
    

    Replace 0.9 with any value between 0 and 1 and 90 with any value between 0 and 100. I.e. if you want 80% opacity use:

    
    .caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-content p, .avia-caption .avia-caption-title {
    filter: alpha(opacity = 80);
    background: rgba(0, 0, 0, 0.8);
    }
    

    2) Yes, use this code:

    
    #top .main_color .button:hover, #top .main_color .big_button:hover, #top .main_color #submit:hover, #top .main_color input[type='submit']:hover {
    background-color: #eb3b3b;
    border-color: #c91919;
    }
    

    and replace the background and border color values with a darker/lighter color.

    Regards,
    Peter

    #300198

    Hi Dude,

    your first code worked and changed the opacity on the Slider caption backgrounds, thank you

    The code you supplied to change the button hover on the Avia Button element did not work.

    I added !important but it has not had an effect.

    Should the class be .avia-button ?

    #top .main_color .button:hover, #top .main_color .big_button:hover, #top .main_color #submit:hover, #top .main_color input[type=’submit’]:hover {
    background-color: #ffffff!important;
    color:d1202f!important;
    border-color: #d1202f!important;
    }

    #302270

    Hi!

    The button class should be .avia-button. So:

    
    #top .main_color .avia-button:hover, #top .main_color .big_button:hover, #top .main_color #submit:hover, #top .main_color input[type='submit']:hover {
    background-color: #ffffff!important;
    color:d1202f!important;
    border-color: #d1202f!important;
    }
    

    Regards,
    Devin

    #302650
    This reply has been marked as private.
    #302772

    Hey!

    If I set the following in Chrome and FF, the complete button turns to green on hover. Replace the colors as you like:

    
    #top .main_color .avia-button:hover{
    background-color: green !important;
    border-color: green !important;
    }
    
    

    Cheers!
    Günter

    #302835

    Hi Gunter,

    applied it as you said but now it is back to default, no change

    #top .main_color .avia-button:hover, {
    background-color: #white!important;
    color: d1202f!important;
    border-color: #d1202f!important;
    }

    #303166

    Hi!

    Please try as following

    #top .main_color .avia-button:hover {
    background-color: white !important;
    color: #d1202f !important;
    border-color: #d1202f !important;
    }

    You have few typos in your code

    Best regards,
    Yigit

    #303354

    Hi Yigit, my mistake, working now, thank you, you may close this thread

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Styling changes’ is closed to new replies.