Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 6, 2015 at 9:02 pm #375839
    kimoribj

    Hello!

    I made some changes to the bullets of the content slider. Under the first text section of the testwebsite

    http://www.kilmo.de/k

    you see the bullets that only have a border now and a transparent background. I tried to achieve 3 things but got stuck. would be nice if someone could help me!

    1) the active bullet should be solid, the inactive ones should have a transparent background. On hover the inactive ones should be solid as well.
    2) I dont want that the inactive bullets get transparent. (I only want the effect that the active dot is filled and the inactive ones only have the border)
    3) how can I make a bigger space between the content of the slider and the dots? And the same for the arrows?

    Thank you!

    January 6, 2015 at 9:20 pm #375850
    begrafiks

    Hi kimoribj ;
    #1 and #2 I’ve no idea,
    but for #3 you can try to add these lines in your css file to have a space of 50px:
    for bullets #top .avia-smallarrow-slider .avia-slideshow-dots a {top: 50px !important;}
    for arrows #top .avia-smallarrow-slider .avia-slideshow-arrows a {top: 50px !important;}

    by the way nice your design with color sections

    • This reply was modified 10 years, 10 months ago by begrafiks.
    January 7, 2015 at 1:09 pm #376091
    kimoribj

    Thank you Begrafiks!

    Your code worked! I maybe missed the !important… Do you know how to adjust the space from the dots to the following content as well? I cant find the ‘container’ to which I can apply a margin…

    Thank you for kind words!!

    January 7, 2015 at 1:55 pm #376107
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    .avia-content-slider-element-container {
margin-bottom: 50px;
}

    Best regards,
    Yigit

    January 7, 2015 at 2:02 pm #376111
    kimoribj

    Great, it worked!
    Do you have an idea for my first 2 problems with the dots styling as well?

    January 7, 2015 at 2:05 pm #376114
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    a.goto-slide.active {
background-color: #b0925a !important;
}
a.goto-slide:hover {
background-color: #b0925a !important;
}


    @begrafiks     thanks for your help! :)

    Regards,
    Yigit

    January 7, 2015 at 2:10 pm #376118
    kimoribj

    it just works, thanks!!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Styling the content slider bullets’ is closed to new replies.