Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • June 24, 2014 at 1:47 am #282778
    collinssafety

    I can’t believe its come to this for what should be a simple adjustment within the theme itself but here it goes…

    Where are the options for changing the “caption” style?? Example: You have the option to include a caption with your video slide but the text is small, color white, and it automatically puts a transparent background behind. That’s not a problem IF we can change these options. (i.e. transparency, font color, size etc.). I would like to be able to enlarge (or adjust) the text size and font (without effecting other areas), have the transparency enlarge to fit the adjustment (or not have it at all). There of course many other issues I need help with but I’ll leave it that for now. Can you help with this?

    Thanks
    Joe

    June 24, 2014 at 1:51 am #282779
    collinssafety

    Oh… by the way, the caption in question is the main video slider here: http://collinssafety.ca/wp/

    June 24, 2014 at 7:44 am #282841
    Ismael

    Hi!

    Thank you for visiting the support forum!

    I’m sorry but that’s all the available options for the sliders right now. If you want to request for more added features, you can visit the Feature Requests page. Anyway, if you can provide us with a screenshot of what you want to accomplish with the slider captions, we might be able to help.

    Cheers!
    Ismael

    June 24, 2014 at 8:50 am #282869
    collinssafety

    Well I thought explaining what I wanted to accomplish as well as providing you with a link to the video slider and caption in question would be sufficient…but apparently that was not clear enough and you now need a picture too? Forgive me but I’m confused about what more I could possibly provide. Not sure what you want to see in a picture (screenshot) since I CANNOT make the necessary changes to illustrate what I need…so I created a screenshot (as per your request) with a big red circle around the said “caption” and more text that I hope will finally make the request more clear. However, we have a little problem…

    Perhaps you could help me by providing details on just HOW I’m supposed to provide you with screenshot when there is no provision for attachments?

    Thank you?
    Joe

    June 24, 2014 at 10:27 am #282912
    Ismael

    Hey!

    Thank you for the update.

    Alright. I thought you’re asking for additional options on the slider panel. Anyway, if you want to change the transparency, font size, font color etc. You can use this on Quick CSS or custom.css:

    Caption Title:

    .caption_framed .slideshow_caption .avia-caption-title {
background: rgba(0,0,0,.8);
font-size: 50px !important;
color: blue;
}

    Caption Text:

    .caption_framed .slideshow_caption .avia-caption-content {
background: rgba(0,0,0,.8);
font-size: 20px !important;
color: red;
}

    You can use imgur, dropbox etc. if you need to post a screenshot. Thank you.

    Best regards,
    Ismael

    June 24, 2014 at 5:27 pm #283138
    collinssafety

    Hi Ismael,
    Thank you for the quick response. So just to be sure that you know what I’m talking about…. here’s the link to the screenshot. https://dl.dropboxusercontent.com/u/5826806/screenshot1.jpg

    After seeing it… can you confirm that what you provided me in code will work for what I’m needing to accomplish?
    Will this same code work for all other slider captions (more than one)? If so how do I differentiate the code to use on other slider captions?
    That is… If I have more than one slider with captions and want to enlarge the caption and text differently for each, who do I accomplish this?
    Thanks

    June 24, 2014 at 5:38 pm #283145
    Yigit

    Hi!

    Yes, the code Ismael provided will make the changes you have shown in your screenshot. If you would like to apply the code differently on same of your pages, you can add page ID in front of the code as following

    .page-id-8128 .caption_framed .slideshow_caption .avia-caption-content {
background: rgba(0,0,0,.8);
font-size: 20px !important;
color: red;
}

    You can right click on Chrome or Firefox to inspect elements to find page ID’s http://i.imgur.com/HyPTCRg.jpg

    Cheers!
    Yigit

    June 24, 2014 at 7:50 pm #283201
    collinssafety

    Yigit, Thank you!

    Finally we’re getting somewhere. Couple things though.

    1. It seems when the text is larger it automatically makes a paragraph (two lines). I want to be able to keep each separate caption on one line. Here’s what it does currently: https://dl.dropboxusercontent.com/u/5826806/screenshot1.jpg
    This is what I’m trying to do…
    “Your Safety… Is Our Business”
    “We take the pressure off…so you can focus on your business”
    2. How do I create more separation (space) between the two captions? Currently they’re almost touching and I’d like to get a little more gap there.

    Thanks for your help!!
    Joe

    June 24, 2014 at 9:32 pm #283251
    Yigit

    Hi!

    Please add following code to Quick CSS as well
    1-

    .slideshow_caption { width: 70%; }

    2-

    .caption_framed .slideshow_caption .avia-caption-content { margin-top: 10px; }

    Best regards,
    Yigit

    June 24, 2014 at 11:30 pm #283302
    collinssafety

    Hi Ygit,

    Almost got it!
    I added the code as two separate lines and this is what I got: https://dl.dropboxusercontent.com/u/5826806/screenshot1.jpg

    Now I have the second caption shaded area with excess background. Do we need to code this separate the two?

    If I can fix this…I think that’s got it!

    Thanks
    Joe

    June 24, 2014 at 11:43 pm #283306
    Josue

    Hey Joe!

    Try adding this code too:

    .avia-caption-content {
    display: inherit !important;
}

    Result:

    Cheers! 
    Josue

    June 25, 2014 at 12:08 am #283322
    collinssafety

    Josue,

    Thanks that’s what I got too…great!
    But now it closed the gap back up that we just fixed using this code: ( .caption_framed .slideshow_caption .avia-caption-content { margin-top: 10px; } ).

    How do I get this back? … We’re sooo close.

    June 25, 2014 at 12:11 am #283324
    Josue

    Replace that code for this:

    .avia-caption-title {
    margin-bottom: 10px !important;
}

    Regards,
    Josue

    June 25, 2014 at 12:17 am #283326
    collinssafety

    AWESOME !

    Thanks a lot guy’s.

    June 25, 2014 at 12:46 am #283339
    Josue

    You are welcome, always glad to help :)

    Regards,
    Josue

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘“Caption” styling??’ is closed to new replies.