-
AuthorPosts
-
February 25, 2021 at 9:33 am #1283609
hello, the title in the slider keeps on being black.
nevertheless my attempt to change it/* titel slideshow homepage*/ .avia-slideshow .avia-caption .avia-caption-title { color: white !important; }
.avia-caption-title { color: white !important; }
none of them worked.
how can i put it in white?best regards jelle
ps somewhat later ive discovered this one;
.template-page .entry-content-wrapper h1 {color: white;}
this works, but this seems to affect all the h1 on the entire site, not only the easy slider on the homepage….of course not what i want…
- This topic was modified 3 years, 9 months ago by yampieters.
February 25, 2021 at 3:52 pm #1283698sorry , i got it:
there was this h1 tag in the title textfield….<h1> title text </h1>
so that part is sloved.but on my mobile ive seen tat the text of the slider, caption title and text, is not totally visible if you look at it holding the mobile phone
upright. is there a solution for this?.best regards, jelle
- This reply was modified 3 years, 9 months ago by yampieters.
February 27, 2021 at 3:05 pm #1284119Hi yampieters,
There is not enough space in the portrait mode for that slider, it should probably be hidden, and another element added in its place.
Best regards,
VictoriaMarch 1, 2021 at 10:20 am #1284348ok, i will think about that.
but if i decide to do so, it will be this way again?@media only screen and (max-width: 767px) { .anotherelement { <img src="yourpic.jpg" alt=""> } }
best regards, jelle
March 2, 2021 at 6:25 am #1284629Hi jelle,
That CSS doesn’t look complete, please don’t use that. Could you try to explain your intentions a bit further please? If you need an identifier for the slider, then please try adding a class, then target it using that.
Best regards,
RikardMarch 2, 2021 at 10:46 am #1284645Rikards way is the best – give a custom-class to your slider and let it be part of the selector to the heading you like to change
the custom-class will be on the slider itself (.custom-class .avia-caption-title { color: red; }
(maybe an !important is neccessary)
btw: there is no class : avia-caption on the tree there is : slideshow_caption
Edit: sorry on easy slider there is avia-caption class !
___________
next if you like to influence it in dependency to the slide you had to insert slide class ( slide-1, slide-2 etc.).custom-class .slide-1 .avia-caption-title { color: red; }
_____________
BUT: there is the way in the slider ALB Element itself to change the font-color:
On Styling Tab you got:
Edit: sorry on easy slider there is this option missing – only for full-screen or full-width slider
_________
offtopic:
well this is not the right way.
There are attribute selctors that could be used. – You find a good list f.e. here https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
but even those selectors are outside the curly brackets f.e.:.anotherelement img[src*="yourpic"] { your css code here … }
that littel asterisk means : contains at least one occurrence of value (yourpic) within the string
the list is big see link above ( *, $, ^, ~, |, etc. pp )March 2, 2021 at 11:01 am #1284649but :
.avia-slideshow .avia-caption .avia-caption-title { color: white !important; }
That should work on easy slider – maybe it is a caching problem? Refresh the merged files etc.
March 3, 2021 at 8:34 am #1284967Hi,
Thanks for helping out @guenni007 :-)
Did you have any luck with the suggestions above @yampieters?
Best regards,
RikardMarch 4, 2021 at 2:47 pm #1285409Hello and thanks Rikard en Guenni007,
im on the way but not there yet.two questions left: how to repair the height so the text will, for all images in the slider, fit in the container on a mobile and how to put the textcontainer in the middle?
this is what i did in the quick css, see code.
the class i gave is ‘mobiel’`
/*make slider text fit for mobile title*/
@media only screen and (max-width: 767px)
{
.mobiel .avia-caption-title
{width: 100% !important;
height: 100% !important;
font-size: 14px;
}
}/*make slider text fit for mobile text*/
@media only screen and (max-width: 767px)
{
.mobiel .avia-caption
{width: 100% !important;
height: 100% !important;
}
}best regards, jelle
- This reply was modified 3 years, 8 months ago by yampieters.
March 11, 2021 at 10:19 am #1287351Hi,
I’m sorry for the very late reply. Please try this CSS as well:
@media only screen and (max-width: 767px) { .avia-caption { bottom: 0; left: 0; } .avia-caption-content p { font-size: 12px !important; line-height: 12px; } }
Best regards,
RikardMarch 11, 2021 at 4:25 pm #1287477Hello Rikard
Thanks, i can see some improvements now, like it is in the middle and on the most pictures all text is to be seen.
Ive made all pictures equal size now , and only nr 1 and nr 2 dont show the total text.
Some lines at the bottom are missing.
Is there a solution for tis?
Ive tried to play with “bottom: 0px” but …no result…best regards, jelle
- This reply was modified 3 years, 8 months ago by yampieters.
March 13, 2021 at 9:14 am #1287924You can close this one Rikard.
Ive changed the proportions of the images, now its oke.
thanks anyway for your help.
best regards, jelle- This reply was modified 3 years, 8 months ago by yampieters.
March 15, 2021 at 12:27 pm #1288256 -
AuthorPosts
- The topic ‘change color caption title on slider’ is closed to new replies.