Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 6, 2015 at 8:18 pm #51209
    luismarioochoa
    Participant

    Hello,

    Can you please show me how to add opacity to the slider I am working on for http://www.bonvivanttravel.ca (catch theme pro) to achieve an effect similar to this one http://www.sejourgastronomique.ca/?

    Thank you in advance.

    Luis

    February 7, 2015 at 11:37 pm #51239
    Sakin
    Keymaster

    @luismarioochoa: It depends on where you want to add in. For transparent background, you need to use rgba color like below example. 

    #slider .featured-text {
background: rgba(0, 0, 0, 0.5);
}
    February 10, 2015 at 12:58 am #51398
    luismarioochoa
    Participant

    Thank you Sakin,

    I have placed the code above in the CSS, but it is showing at the bottom of the slider outside of the actual slider. However, I’d like to reproduce the same effect as in this website: http://www.sejourgastronomique.ca/
    In other words, I’d like to customize the default content box in Catch Theme, with Opacity and place the content box so that it will show about 214px width on the right and 320px high as it looks on the website sample I provided: (http://www.sejourgastronomique.ca/). I also would like its text to be white, but if I change it in the colors options, it will change in the whole website.

    Thank you so much in advance!
    Luis

    February 10, 2015 at 8:57 am #51420
    Sakin
    Keymaster

    @luismarioochoa: Sorry this theme is not designed that way. So, it might be complicated. Also this theme is responsive design while the reference site is fixed design. So, you might want to disable responsive design from your theme options panel.

    You might have to hire customizer to work on it. I will give you the reference css that you can work with. So, just play with the following css:

    #slider-wrap a {
    padding: 0;
}
#slider-wrap .featured-text {
    height: 88%;
    padding: 3%;
    position: absolute;
    right: 0;
    top: 0;
    width: 35%;
}
    February 10, 2015 at 10:51 pm #51453
    luismarioochoa
    Participant

    Thank you Sakin,

    I have insert it in the CSS. The results is no opacity but complete transparency and the fonts are still in red colors, not white bold for the title and white for the comment test box with opacity background. Can you please help me with the code to be able to modify these?

    Thank you
    PS:
    Definitively the “Notify me of follow-up replies via email” is not working as before, because I keep on selecting it without any notification being sent (I checked Spam and there are not there) so maybe you want to check up on that?

    February 10, 2015 at 10:57 pm #51454
    luismarioochoa
    Participant

    Hi Sakin,

    My Apologies, it is working and GOOD even reproduce good on my cell phone. Can you help me with the White Fonts (Bold for the Title and regular for the Comment box) without affecting the rest on the color I am using for links on the rest of the site?

    Thank you so VERY MUCH!

    February 10, 2015 at 11:36 pm #51460
    luismarioochoa
    Participant

    Sorry Sakin,

    I Figure Out that the Slider Color is in the Color Options! GREAT!

    But:

    1. How can I change the Title to show in Bold without a colon at the end and without the Text showing right beside but in a next paragraph?

    2. How can I change the Fonts for both the Title and Content Box in the Slider.

    Thank you I am getting close to finishing the site!

    February 12, 2015 at 9:55 am #51537
    luismarioochoa
    Participant

    3. How can I remove the Excerpt from the Slider without removing it from the rest of the site (Blogs)
    Thank you

    February 13, 2015 at 1:45 am #51607
    Sakin
    Keymaster

    @luismarioochoa:
    1. You can add the following css in “Appearance => Theme Options => Custom CSS” box:

    #slider .slider-title { font-weight: bold; }
#slider .sep { display: none; }
#slider .slider-excerpt { clear: both; display: inline-block; }

    2. Just change the font size in the following css as per your need and then add it in “Appearance => Theme Options => Custom CSS” box:
    #slider-wrap .featured-text { font-size: 14px; }

    3. If you want to remove the slider excerpt then please remove the following css from answer 1. That is
    #slider .slider-excerpt { clear: both; display: inline-block; }
    Then add the following css instead:
    #slider .slider-excerpt { display: none; }

    February 13, 2015 at 7:15 am #51623
    luismarioochoa
    Participant

    Dear Sakin,

    Thank you for your help. But perhaps I did not explain myself properly so I will try describing it the way you do it.

    1. The solution helped by only Bolding the Text and removing the Colon. However it did not remove the Appearance => Theme Options => Excerpt/More Tags = > More Tag Text (Continue Reading) which I need removed and replaced with Appearance => Theme Options => Featured Slider = > Featured Image Slider Options = > Content. I don’t wnat to remove the Excerpts from the Blog sections however.

    2. Only works for changing Font Size not Font Family. I need to change Font Family as well. I tried #slider-wrap .featured-text { font-family: Ubuntu Sans-Serif; } and several other fonts in the Default Theme Fonts but nothing changed.

    3. Neither solution worked (removing the Excerpt) it removed the content box text that I need to keep.

    Please help.
    Thank you so much in advance

    February 13, 2015 at 9:36 am #51629
    luismarioochoa
    Participant

    Sakin,

    I am going to keep the ‘Continue Reading’ excerpt on the slider. I have changed its color in the Color Options to white. However it changed the link on the rest of the pages which I rather keeping at Hex Color #783201. Is there a way to override the slider LINK excerpt (Continue Reading ONLY)to white while keeping the rest of the links at #783201? Please advice. I’ll also like to change the Slider Fond Family. Thank you

    February 13, 2015 at 9:59 pm #51680
    Sakin
    Keymaster

    @luismarioochoa:
    1. If you want to hide Continue Reading… from your slider then you can add the following css in “Appearance => Theme Options => Custom CSS” box:
    #slider-wrap a.more-link { display: none; }

    2. You cannot just add Ubuntu font family. As Ubuntu is a google font and you need to load that font first. So, just go to “Appearance => Theme Options => Font Family Options”, then select Ubuntu font. Maybe you can select for Headings Font Family. Then only you can add css as:
    #slider-wrap .featured-text { font-family: 'Ubuntu', sans-serif; }

    3. I don’t get it what you mean. If you want to remove the excerpt from the slider then you need to remove the following css from custom css box:
    #slider .slider-excerpt { clear: both; display: inline-block; }

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Opacity on Slider’ is closed to new replies.