WordPress.org

Support

Support » Themes and Templates » Adjusting the Slider Size

Adjusting the Slider Size

  • lupusconnection
    Member

    @lupusconnection

    First I have to say I love your theme! It’s just what we were looking for! I do have a couple questions:

    1. Is it possible to make the slider smaller? If so, how?

    I’m also not familiar with this kind of CSS editing—I’m used to having a stylesheet and just tweaking it, I don’t really know much about entering my own info without a stylesheet to look at. So I thought I should just ask:

    How do I change the tagline color?
    how do I make the “read more” buttons a different color

    Thank you so much for your help!
    Again, loving the theme!

Viewing 15 replies - 1 through 15 (of 36 total)
  • Theme Author nikeo
    Participant

    @nikeo

    Hi, Many thanks for your great review, really happy that the Customizr is what you needed!
    1) It is possible to make it smaller but as of now, it is not that simple and you need to modify the code at ifferent places in the theme. Unfortunately it would be too long to explain there but I will make this option available in a future version.

    2) tagline color : use the custom CSS field in the customizer screen and add this code :

    .navbar-wrapper .navbar h2 {
    color :#yourcolor
    }
    h2.site-description {
    color: #yourcolor
    }

    3) read more button, here is the code that controls the color for the red skin:

    .btn-primary {
    color: #FFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #C30606;
    background-image: -moz-linear-gradient(top, #E10707, #970505);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E10707), to(#970505));
    background-image: -webkit-linear-gradient(top, #E10707, #970505);
    background-image: -o-linear-gradient(top, #E10707, #970505);
    background-image: linear-gradient(to bottom, #E10707, #970505);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe10707', endColorstr='#ff970505', GradientType=0);
    border-color: #970505 #970505 #4D0202;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    }

    Just replace the gradient colors with yours and copy the code in the custom CSS field.

    Hope this helps!
    Nicolas

    lupusconnection
    Member

    @lupusconnection

    thanks! I will give it a try.
    if you can just tell me what files to look in for the slider I can prob figure it out.
    I understand if you can’t but I just kinda want to get started on it because I know the client I’m making this for is going to want it smaller.
    Thanks again!

    lupusconnection
    Member

    @lupusconnection

    Sorry, one more question…. Is there a way to get a copy of the stylesheet?

    Theme Author nikeo
    Participant

    @nikeo

    Hi,
    Well, the theme is open source, you just have to look into the files directory and grab a copy of the stylesheet…Am I missing something?
    Regards,
    Nicolas

    Hi. I am also interested in making the slider smaller.

    I only found these files that have a reference to the slider and changed all the values for height from 500 to 200 (just testing), but nothing is happening:

    inc/tc_voila_slider.php
    functions.php

    Which are the other files that we need to edit to fix the slider height?

    Thank you very much!

    designfood
    Participant

    @designfood

    @cardened and @lupusconnection

    I went through this list of subjects to find the slider size code below.
    http://wordpress.org/support/theme/customizr


    /*Slider size*/
    .carousel .item {
    line-height: 250px;
    overflow: hidden;
    min-height: 250px;
    }

    hope this helps.

    @nikeo this theme is great. Sometime clean simplicity is the way forward. Thank you for your time.

    Ali

    drummerjoecostello
    Member

    @drummerjoecostello

    I’m not sure where to apply the code above. I too want the slider smaller but every time I put the above code in the class-header-slider.php, it causes an error.

    Am I putting it in the wrong place? Is there a line # it should go on?

    Thx

    Andrew Nevins
    Forum moderator

    @anevins

    Put your CSS modifications into the “Custom CSS” part of the dashboard.

    drummerjoecostello
    Member

    @drummerjoecostello

    Great!! Thx

    Would you be able to tell me how to reduce the width too?

    Thank you…

    Andrew Nevins
    Forum moderator

    @anevins

    Guessing you just add a width to your style;

    .carousel .item {
     line-height: 250px;
     overflow: hidden;
     min-height: 250px;
     width: 200px;
    }

    drummerjoecostello
    Member

    @drummerjoecostello

    Great!! Thx!!

    Danforth2000
    Member

    @danforth2000

    speaking of slider height……, and sorry if this was answered anywhere, but i have not seen it in all of my searching of the forums…

    im good with keeping my slider images consistent at 1170×500. however, is there a way to make sure the slider gets taller if someone is viewing in a browser wider than 1170? In that case, as the images gets wider, it cuts off at 500 px tall. How can i keep it expanding wider AND taller? I’m sure I’m missing something simple, but not figuring it out. Any help would be greatly appreciated.

    Andrew Nevins
    Forum moderator

    @anevins

    @danforth2000, Sounds like you need to do some JavaScript to check the height of your page & apply a min-height style to your slider; which may mean you need to use background images instead of the ‘img‘ elements in your slider.

    You need to create your own thread to discuss this.

    cardened
    Member

    @cardened

    @andrew Nevins + @designfood… THANK YOU VERY MUCH for your input.

    I did just add this code to the “CUSTOM CSS“:

    /*Slider size*/
    .carousel .item {
    line-height: 250px;
    overflow: hidden;
    min-height: 250px;
    }

    and was able to modify the min-height value to the value that best suited me.

    Again… THANK YOU!!

    doublepost sry

Viewing 15 replies - 1 through 15 (of 36 total)
  • The topic ‘Adjusting the Slider Size’ is closed to new replies.