I have a content slider where I am having a really hard time targeting the elements with CSS and was wondering what I’m missing. I have given the slide a classname “homepage-header-right-top”. Now, I am trying to target the H4 element in the slider (title) and the paragraph element (text) as well as the button. Lets take the easiest one - the h4/slide title where I’m trying to change the text color (currently white).
Using the selectors:
.homepage-header-right-top h4.fl-slide-title {
/* The first line of text needs to be black*/
color: black !important;
}
This does not work. And anything similar trying to target any other element inside the slider isn’t working either. In this particular example I tried the following variation:
.homepage-header-right-top .fl-slide-title {
/* The first line of text needs to be black*/
color: black !important;
}
This does not work either. So, I feel like I am missing something when it comes to using CSS for the sliders. No matter how specific I make the css it does not change the color of the text.
How do I override something like this? In the case of the content slider, I can’t adjust the bottom margin on anything I put in the slider main text/content area. For example I have an H2 element in the text/content area and it looks like the above core BB CSS makes it impossible to adjust the H2 element margins.
You’re targeting the correct element on your CSS, you just have an extra colon there. Check the screenshot below for reference. http://imgur.com/AVldOKQ
Also, just targeting .homepage-header-right-top .fl-slide-text h2 should do it.
Re the mobile view, the slider automatically creates a clone even if there’s just one slide. You can submit a feature request if you’d like to have an option to turn it off. Also, just curious, is there a reason you’re using the Content Slider module on that section? I believe it would have been easier if you used a Text Editor module unless I’m missing something.
Aw, shoot. I can’t believe I missed that. Ok, if you want to bill me for your time feel free to do that. That definitely falls under the realm of “consulting”.
I used a slider there because in the future I expect there to be more than one as the site increases the number of products being promoted simultaneously. So, best to use a slider now instead using a text editor module and then having to recreate the whole thing later when we add a second slide.
I do have another similar issue though. ON callouts, I am trying to change the color of the header. After assigning a classname I have tried the following (assuming H3 is the element used for the callout header):
.mycalloutclass h3.fl-callout-title {
color: white !important;
}
This, unfortunately, isn’t working. And this time it’s not an extra colon (lol). Is it possible to style the header inside of a callout?
The reason as to why your code isn’t working is because the Callout title is a link. So you will want to suffix your code with an a tag. Like the example below;
.my-callout-title .fl-callout-title a {
color: #F00;
}
Alternaitvely, you could target the a tags class name to:
And finally, an even more simpler option would be to use the Column Settings for that Callout module and choose a header color via the Header color option
I was wondering why there wasn’t a way to change the heading color. I was expecting to see it in the callout-module itself. I had no idea what the column header color meant but now I do. Thanks for the tip. I’ll use that instead of CSS!
Another question related to the sliders. Can I target individual slides? I can set a classname for the slider itself but I don’t see any way to set a classname or id for the individual slides which makes targeting elements in a single slide difficult. I feel like I may be missing something (similar to how I missed the whole column header color thing).
