-
Posts
-
Hi! Is there a way to add the caption box around the “caption text” ? I think it’s called .caption_framed. I am trying to do this in the “Image” settings, under the “Caption” options. I would like the slightly transparent box to display behind my text caption so the text is readable when placed over top the image. This effect is easily done on the sliders, but I can’t see how to apply this affect to caption text, within the Image element. The code I found in the inspect tool (which is the style I’m using on the main slder) is:
background: #000;
filter: alpha(opacity = 80);
background: rgba(0, 0, 0, 0.5);
display: inline-block;
margin: 0 0 1px 0;
padding: 10px 15px;
}I just need to know how to apply this styling to the text that says “Example Data”, shown in the screenshot attached. Again, this is within the Image Element, under the tab “Caption.” Thanks in advance for your help!
Hey webdesign,
Please link to the page in your screenshot so we can examine it closer.Best regards,
MikeSure… see the private link below It currently is dark because I needed the text to pop out, but if I can get the box behind the text, I will turn off the hover opacity.
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
CSS Snippet:
/* CSS - */ #top .av-image-caption-overlay-center { background: #000; filter: alpha(opacity = 80); background: rgba(0, 0, 0, 0.5); }Best regards,
VinayInteresting. That is getting close, but that box behind the text covers over the entire image. I would like it to look like the standard caption box, like the sliders have. It’s just a box behind the text with some equal space/padding to fill in behind the text. Maybe this code just needs padding, or margins added to it? Thanks!!
Hi,
Thanks for the update.
Did you remove the text or “example-data/” page? It’s no longer accessible. Please re-create the test page so that we can check the elements.
Best regards,
IsmaelHi Ismael,
Yes, that page is no longer accessible. It was a page on a testing site and the actual site is now complete and live. I wasn’t able to wait for a resolution on this element, so just went ahead and redesigned how that caption is formatted and displayed. My apologies for not letting you know. Thanks for checking in!Actually, I can give you credentials on a new site I just started today to see if I can get it to work on this site. I’m not sure if it’s easier to apply your code for a caption box to an ‘image with a caption’ or if it’s easier to apply the code to a ‘special heading’ (when placed over a color section). Either way, it would be nice to have the ability to make the text pop away from the background image, just like the text on the enfold sliders (where you can set the color of caption box, and opacity). I’ve included into below… you will see my text, on the site, where I am asking for help with the caption box (I made it easy :) ). Thanks!
Hi,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:#top #av_section_1 .av-special-heading-tag,#top #av_section_1 .av-subheading, #top .av-image-caption-overlay-center p { filter: alpha(opacity = 80); background: rgba(0, 0, 0, 0.5); padding: 20px !important; }Please clear your browser cache and check.
Best regards,
MikeHi Mike,
That’s interesting. When I put the code in my enfold child css, it didn’t do anything. Then I tried putting it where you said (under the customize) and it worked! I’ve never added css with the “customize” before.. What is the difference between adding code to the child editor and adding it to this “customize” option?
Also, can I add a custom class so that it only applies to the text I want it to apply to? If I just added something like “.my-custom-name” somewhere before the curly bracket, then added my-custom-name in the css options for that element, would that work?
One more thing. Is is possible to have the caption box fit the length of the text, like the slider caption boxes, instead of having both boxes be equal length? I sent you a screen shot below as an example. Thank you!!Oops… I missed this. It looks like the css pushed the whole image and captions over to the right, and left the blue background showing to the left (basically a big margin to the left). Have a look at the screenshot:
Hi,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:#top.home #av_section_1 { background-size: cover !important; }The WordPress > Customize > Additional CSS has been given priority over all css in WordPress, so it is a good place to check if some css is working. If you are adding your css to the child theme style.css and you are using the Enfold Theme Options > Performance > JS & CSS file merging and compression you will need to resave the Theme options, the big blue “save all changes” button for the child theme css to be re-built. Sometimes the button is not active so you can’t click it, in this case please add a blank space to the Quick CSS and then save and clear your cache.
You can add your own custom class, in the code above you can replace #av_section_1 with your custom class.
For the width of the background you will need to manually adjust because the with is automatically set to 100%, please try this css:#top #av_section_1 .av-special-heading-tag { width: 90% !important; } #top #av_section_1 .av-subheading { width: 36% !important; }Best regards,
MikeHi Mike! Thank you for your help… we are just about there. I was able to get it all to work by using the “Customize” option for that page (yay). It does, however, apply the effect to all the same elements on that page. So If I don’t want a caption box behind text further down on the page, it puts it there anyway. It seems using the custom css class/ID per element is what I need to do (so I can put it ONLY where I want it). So, I would like to like to keep all css in my child theme, and tweak it with custom class names as needed. But, when I put the css in the child theme, it didn’t work. I added a custom name, as you suggested, and added it to the css developer ID under the element. It still had no effect (tried in different browsers). Usually the code works in the child theme so I’m still not clear why it’s not working there. Below is what I have pasted in my child theme:
Hi,
Glad to hear that it’s mostly working, typically when css is added to the child theme style.css and the css merging is on in the Enfold Theme Options > Performance > JS & CSS file merging and compression the merged file needs to be re-built by saving the theme options again. Sometimes the big blue button “save all changes” is not available to click, so try adding a blank space to the Quick CSS to active the button.
I recommend not using any merging or caching plugins while building your site.
Please try this, and if you still need some help, Please include an admin login in the Private Content area so we can examine.Best regards,
MikeWell, I’m not sure what’s going on. These caption boxes seem to be more work than I expected. The blue margin is also back again (on the left). I’ve got my custom class name in the develop id at the bottom of the element and it doesn’t add the caption boxes. But in the image element below the main image, I DO NOT have my custom class name, and the caption box is behind the text. It’s reverse. Below are my logins. css is in my child style sheet. Could you please have a look?
Hi,
I’m happy to help, I believe your blue margin was back because I didn’t find the css to correct:#top.home #av_section_1 { background-size: cover !important; }I added it for you :)
I then removed the custom class from your color section and added it to your special heading, then I adjusted you css to this:#top.home .dm-caption-box-behind-text .av-special-heading-tag, #top .dm-caption-box-behind-text .av-subheading, #top .av-image-caption-overlay-center p { background: rgba(0, 0, 0, 0.5); padding: 20px !important; } #top.home .dm-caption-box-behind-text .av-special-heading-tag { width: 70% !important; } #top.home .dm-caption-box-behind-text .av-subheading { width: 36% !important; } #top.home .dm-caption-box-behind-text { background-size: cover !important; } #top.home #av_section_1 { background-size: cover !important; }Please clear your browser cache and check.
Best regards,
MikeWow Mike,you are quick and so very helpful! Thank you….It looks great, and making the change to the Special Heading makes total sense. Ooooone more thing though… why is the caption box still showing in the image element, below the main color section? I was originally using that as another example where I might want a caption box. But I don’t have the custom class added in the developer ID below that image element, and the caption boxes are still there? They should only be there if I add the class name, like above. Sorry to keep this thread going so long ;)
Hi,
Oh, sorry that was some css I put in the first version way back and didn’t remove it, now it’s gone, Please clear your browser cache and check.Best regards,
MikeSuper Duper! You’re hired! heehee Thanks again for all your help! Hopefully this thread can be considered closed! :)
CheersHi webdesign,
Glad we could help :)
If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.
Thanks!
Best regards,
Victoria
- You must be logged in to reply to this topic.