This topic contains 6 replies, has 2 voices, and was last updated by  Lene 1 year, 2 months ago.

Font settings on vertical carousel

  • Where do I set the font sizes and colors in the double carousel?

    I also posted a question earlier about the link button on the carousel (it is not showing, and I dont know where to find and style it :-)

    http://www.handywoman.dk

    :-) Lene

    Hello there,

    Thank you for asking.

    To set the font size and color globally, follow the following steps.

    1. Log in to your site admin area
    2. Go to Appearance > Theme Options > Custom CSS
    3. Paste the following code into the provided CSS code editor

    .team-members .left-side .item .team-title{
      color: #000000;
      font-size: 20px;
    }
    
    .team-members .left-side .item .info{
      color: #000000;
      cont-size: 14px;
    }
    

    4. Click “Save Changes”

    You can set the style of each slider item by applying a class name in the “Double Carousel Slide Settings” window. Then write your CSS code in the “Page Settings” menu of visual composer editor. For example, the slider item class name is “slide1”, your CSS code should be like the following.

    .team-members .left-side .item.slide1 .team-title{
      color: #000000;
      font-size: 20px;
    }
    
    .team-members .left-side .item.slide1 .info{
      color: #000000;
      cont-size: 14px;
    }
    

    Please see the enclosed GIF for the sake of visual.

    I also posted a question earlier about the link button on the carousel (it is not showing, and I dont know where to find and style it

    Could you please try to use this code? You should need to adjust the href value to your own.

    Let me know how it goes. I’ll wait to hear back from you regarding your stats.

    Warmest regards,
    Kharis

    Attachments:
    You must be logged in to view attached files.

    Hi again – regarding http://www.handywoman2woman.dk i put the code in in the CSS regarding each slide – i can control the color with it, but not the size. Actually I wish the exact settings you have on you demo slide http://demo.owwwlab.com/wp-toranj/#. I would like to be able to control also, that the text til left-aligned, and not centered, and also control size of the colored bar between the tittle and the bodytext.

    I also put in the code regarding the link, but again on your slide, there is a box around it – I would like that as well :-)

    could you copy me the CSS for your slides on the toranj demo slides, I linked to above?

    Thanks in advance :-)

    Lene

    Hello there,

    Could you please try to do the following?

    1. Open the “Double Carousel Slide Settings” window
    2. In the field that says “Content Type”, select “Let me do my own”
    3. In the “My own content” box your content should be like this
    4. In the “Extra class name” field put “mystyle” class name and “slide1” for the first slide; “slide2” for the second, and “slide3” for the third.
    5. In the “Page Settings” box (can be accessed through the gear icon), put the following CSS code.

    .my-custom-carousel{
        
    }
    .my-custom-carousel .vcarousel-counter,
    .my-custom-carousel .vcarousel-prev a,
    .my-custom-carousel .vcarousel-next a{
        color:#fff;    
    }
    
    .mystyle{
        padding:0 10%;
        text-align:left;    
    }
    .mystyle h2{
        font-size: 40px;
        margin-bottom: 20px;
    }
    .mystyle h2 span{
        font-size:18px;
    }
    .mystyle p{
        
    }
    
    .slide1 h2{
        font-size: 45px;
        color: #5E7D5F;
    }
    .slide1 h2 span{
       
    }
    .slide1 h2:after{
        background-color: #9A9A9A;
    }
    .slide1 p {
        color: #717173;
    }
    .slide1 btn{
        
    }
    .slide1 btn:hover{
        
    }
    
    .slide2 h2{
        font-size: 45px;
        color: #886656;
    }
    .slide2 h2 span{
       
    }
    .slide2 h2:after{
        background-color: #D5D2CE;
    }
    .slide2 p {
        color: #717173;
    }
    .slide2 .btn{
        color: #fff;
        background: #D6CAC3;
    }
    .slide2 .btn:hover{
        background: #A8A18E;
    }
    
    
    
    
    .slide3 h2{
        font-size: 60px;
        color: #aa303d;
    }
    .slide3 h2 span{
       
    }
    .slide3 h2:after{
        background-color: #f16070;
    }
    .slide3 p {
        color: #808080;
    }
    .slide3 .btn{
        color: #fff;
        background: #a72a38;
    }
    .slide3 .btn:hover{
        background: #cd4958;
    }
    
    @media (max-width: 480px) {
        .slide1 h2,
        .slide2 h2,
        .slide3 h2,
        .mystyle h2 {
            font-size: 30px;
            margin-bottom: 20px;
            color:#fff;
        }
        .slide1 p,
        .slide2 p,
        .slide3 p,
        .mystyle p{
            color:#fff;
        }
    
    }
    

    Please see the enclosed GIF for the sake of visual.

    Regards,
    Kharis

    Attachments:
    You must be logged in to view attached files.

    Great service – now it looks great, thanks a lot.

    Then I just have one more question – is the blog page http://demo.owwwlab.com/wp-toranj/blog/ also setup in a special way – can’t seem to get i right – I used the Post Grid CV element on the blogpage http://www.handywoman2woman.dk/handywoman-blog/

    :-) Lene

    Dear Lene,

    Regarding your new question. Could you please post it in a new topic? I’d be glad to assist you there.

    Regards,
    Kharis

    Sure thing :-)

The topic ‘Font settings on vertical carousel’ is closed to new replies.