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 ;-)
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?
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; }
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 */ } }
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!
Comments
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.
I am not fan of it, but lets try:
Add this custom CSS: With kind regards.
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
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.
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?
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? :-)
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. Please try it and tell me does it work for you.
With kind regards.
No offense taken. :-) I realise I have been asking a lot. That's why I appreciate your reply even more.
So, thank you!
Hope it will work for you, if not, then don't be afraid to ask some more ;-)
With kind regards.
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?
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.
Thanks again!
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
With kind regards.
Do I use featured galleries or just image for that?