›
Before you ask please READ THIS

change color and line thickness of the featured galleries dots

vncntvncnt
in FatMoon Posts: 136
Hi Guys,
Is there any way I can change the color and line thickness of the featured galleries dots? see attach.
http://vincentdevries.com/blog/

Thx!

Comments

  • vncntvncnt
    Posts: 136
    and... can I place the dots underneath the image?
  • AirAir
    Posts: 10,970
    Hi there:-)

    Well it is possible, but if you will move icons below slider, they will disappear on white background, so you will have to change few colors of this dots. It sound like painful modification to write code on forum ;-)

    With kind regards.
  • vncntvncnt
    Posts: 136
    Haha Painfull, I hope not. :-) Is it very hard to make some custom css to create blue (thinner) circles with full blue dot for selected gallerie image, placed under the image?

  • vncntvncnt
    Posts: 136
    Or otherwise just a colour change?
  • AirAir
    Posts: 10,970
    It might be small element but modification that you ask require few changes and explanations if you are not able to do it on your own.
    I am not fan of it, but lets try:

    Add this custom CSS: 

    .slidesjs-pagination li a {
    /* thickness is combination of width, padding, border width, and border radius - that is if you want to keep it like circle. If not then just change 2px in border width */

        width: 7px;                              /* add for thickness change */
        padding-top: 7px;                   /* add for thickness change */
        -webkit-border-radius: 8px;    /* add for thickness change */
        border-radius: 8px;                /* add for thickness change */
        border: 2px solid blue;           /* thickness and color */
    }
    .slidesjs-pagination li a:hover, .slidesjs-pagination li a.active {
        background-color: blue;
    }

    /* put dots under */
    .slidesjs-pagination {
        margin: 20px 0 30px 40px;
        position: static;
    }
    With kind regards.
  • vncntvncnt
    edited December 2016 Posts: 136
    Hi Air,
    Thanks again for the input.

    it doesn't seem to work though? any thoughts? Oh... and the blue should be #136bfb

    Below is what I pasted into the custom css field 

    .slidesjs-pagination li a {
    width: 7px; /* add for thickness change */
    padding-top: 7px; /* add for thickness change */
    -webkit-border-radius: 8px; /* add for thickness change */
    border-radius: 8px; /* add for thickness change */
    border: 2px solid blue; /* thickness and color */
    }
    .slidesjs-pagination li a:hover, .slidesjs-pagination li a.active {
    background-color: #136bfb;
    }
    .slidesjs-pagination {
    margin: 20px 0 30px 40px;
    position: static;
    }
    Post edited by Air on
  • vncntvncnt
    Posts: 136
    Btw I have the "Featured Galleries" plugin installed. Does that matter?
  • AirAir
    Posts: 10,970
    vncnt said: Btw I have the "Featured Galleries" plugin installed. Does that matter?
    Well this plugin that makes it available at all, so it does matter ;-)

    Fix you custom CSS, cause I see you have inserted this into CSS for small screens lower then 600px. Insert outside, or at start of custom CSS field.

    With kind regards.
  • vncntvncnt
    Posts: 136
    Top, it works!

    to small small "nice to haves"

    One..
    In below pice of css, how do I change blue in #136bfb ?
    border: 2px solid blue; /* thickness and color */

    and...
    can I make the space in between dots and "category tags" a little smaller?
  • vncntvncnt
    Posts: 136
    Sorry to bug you again.

    I just had look on my iPhone ( in portrait mode) and the dots are not left aligned with the other elements.

    Any thoughts on this as well? :-)
  • vncntvncnt
    Posts: 136
    see attach
    IMG_1693.PNG
    750 x 1334 - 352K
  • AirAir
    edited December 2016 Posts: 10,970
    You are very nice person, but this modification is getting out of support scope pretty quickly. It is not that is not possible, but for simple dots, you started with color, next move them, changed space, now change appearance on mobiles.
    This is the job that you usually take coder for, or learn CSS by your self to tweak theme:-) I know you might be not aware of it, so this is why I write it. No offense, please:-)

    I will write you complete answer in below code(custom CSS), so remove previous code I gave you. 

    .slidesjs-pagination li {
        margin: 0 3px; /* bigger space between dots */
    }
    .slidesjs-pagination li a {
        border-color: #136bfb; /* dots color */
        border-width: 1px; /* thin border */
    }
    .slidesjs-pagination li a:hover, .slidesjs-pagination li a.active {
        background-color: #136bfb; /* dots color */
    }
    .slidesjs-pagination {
         position: static; /* dots under slider */
    }
    .bricks-frame .item-slider + .formatter{
        padding-top: 20px; /* smaller space from dots to categories */
    }
    @media only screen and (max-width: 400px) {
        .slidesjs-pagination {
            margin-left: 20px; /* small screens alignment */
        }
    }
    Please try it and tell me does it work for you.

    With kind regards.
    Post edited by Air on
  • vncntvncnt
    Posts: 136
    Hi Air,
    No offense taken. :-) I realise I have been asking a lot. That's why I appreciate your reply even more.

    So, thank you!

  • AirAir
    Posts: 10,970
    I love to help when I can, just had very busy day, and felt overwhelmed. Sorry :-)

    Hope it will work for you, if not, then don't be afraid to ask some more ;-)

    With kind regards.
  • vncntvncnt
    Posts: 136
    Cool!
  • vncntvncnt
    Posts: 136
    If it's okay... just one more question on the subject. :-)

    The only thing now is that I would like the outline to be thinner.

    I tried with below code
    .slidesjs-pagination li a {
    border: 1px;

    But it doesn't work.

    Any thoughts?



  • AirAir
    Posts: 10,970
    Hi:-)

    I have update CSS in my previous post so you can copy it from there with thin border.
    http://support.apollo13.eu/discussion/comment/18568/#Comment_18568

    With kind regards.
  • vncntvncnt
    Posts: 136
    Works!
    Thanks again!




  • vncntvncnt
    Posts: 136
    O... I just wanted to remind you that, if in the future you guys are able to let me load animated .gif images in place of the featured blog image, I would be very happy hear about it.

    I will probably not bug you again this year. So if we don't speak, I wish you guys a very good holiday and a brilliant new year!

    Greetz!
    Vincent
  • AirAir
    Posts: 10,970
    In latest update I have added option for animated GIFS in blog, try it :-)

    With kind regards.
  • vncntvncnt
    Posts: 136
    Wow Nice!

    Do I use featured galleries or just image for that?
  • AirAir
    Posts: 10,970
    Just featured image:-)
  • vncntvncnt
    Posts: 136
    Brilliant! Will check into it.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Register

Quick Links

Categories

In this Discussion