WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Adjusting the Slider Size (37 posts)

  1. lupusconnection
    Member
    Posted 1 year ago #

    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!

  2. nikeo
    Member
    Theme Author

    Posted 1 year ago #

    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

  3. lupusconnection
    Member
    Posted 1 year ago #

    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!

  4. lupusconnection
    Member
    Posted 1 year ago #

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

  5. nikeo
    Member
    Theme Author

    Posted 1 year ago #

    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

  6. cardened
    Member
    Posted 1 year ago #

    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!

  7. designfood
    Member
    Posted 1 year ago #

    @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

  8. drummerjoecostello
    Member
    Posted 12 months ago #

    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

  9. Andrew
    Forum Moderator
    Posted 12 months ago #

    Put your CSS modifications into the "Custom CSS" part of the dashboard.

  10. drummerjoecostello
    Member
    Posted 12 months ago #

    Great!! Thx

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

    Thank you...

  11. Andrew
    Forum Moderator
    Posted 12 months ago #

    Guessing you just add a width to your style;

    .carousel .item {
     line-height: 250px;
     overflow: hidden;
     min-height: 250px;
     width: 200px;
    }
  12. drummerjoecostello
    Member
    Posted 12 months ago #

    Great!! Thx!!

  13. Danforth2000
    Member
    Posted 12 months ago #

    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 1170x500. 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.

  14. Andrew
    Forum Moderator
    Posted 12 months ago #

    @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.

  15. cardened
    Member
    Posted 11 months ago #

    @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!!

  16. gogela
    Member
    Posted 11 months ago #

    doublepost sry

  17. cari.h.cayton
    Member
    Posted 10 months ago #

    LOVE customizr! Is it possible to define the header, slider, and footer to be the same dimensions as the page content? Then to add a background so the sides aren't plain white? Here is an example that I'm referring to:
    http://www.thegooddog.net

    Thanks!!!

  18. nikeo
    Member
    Theme Author

    Posted 10 months ago #

    Hi Cari, can you please open a new thread for that to keep the forum as clear as possible?
    Thanks

  19. thehunters123
    Member
    Posted 10 months ago #

    Thanks for the code to change the height and width of the slider, now the images are on the far left side of the screen, is there any way to center them on the page? Thanks a lot! Great theme btw.

  20. aacat
    Member
    Posted 10 months ago #

    Love this theme too!!

    Can I increase the height of the slider to something over 500px (default setting). Where can I change that in CSS? Are there any other files I should modify?

    I noticed if I put a value bigger than 500px for min-height, some images can stretch to the height that I defined, some still stayed as 500px tall.

    Thanks!

  21. AartB
    Member
    Posted 10 months ago #

    @ thehunters123

    To centre the slider use this code:

    /*Slider size*/
    .carousel .item {
    line-height: 250px;
    overflow: hidden;
    margin-left:auto;
    margin-right:auto;
    min-height: 250px;
    }
  22. ElectricFeet
    Member
    Posted 10 months ago #

    Alternatively, I'm now using this for sizes greater than 1200:

    @media (min-width: 1200px) {
        /*Stop the slider growing crazily*/
        #customizr-slider {
            max-width: 1170px;
            margin-left:auto;
            margin-right:auto;
            }
        }
  23. bikeur62
    Member
    Posted 9 months ago #

    Hello,

    I have a problem with the code you gave to resize the slider. Now the size of the slider changes according to the different images.

    Is it possible to spot this ?

    Thanks

  24. XStella
    Member
    Posted 9 months ago #

    Hey all,

    Thank you for these tips! They worked for me.
    But I have an additional question: I have a few pages with slider as well (next to the main slider on the home page). Is it possible to change the size of only certain sliders? And not all at the same time?

    Thanks in advance!

  25. rdellconsulting
    Member
    Posted 9 months ago #

    Start a new Topic & include a link to your site please

  26. jpite
    Member
    Posted 8 months ago #

    would there be some code something like this:
    margin-top:top;

    that could be added to:
    .carousel .item {
    line-height: 288px;
    overflow: hidden;
    min-height: 288px;

    that would keep the slider image to the top (just below the grey line) no matter the size of browser window or device? I realize if I change "line-height: 100%" it works, but it also move my text to the top of the image and the forward & reverse buttons to the bottom...

  27. DoctorBuffer
    Member
    Posted 8 months ago #

    Hi everyone,

    I have the same question as XStella, however I wasn't able to find any other topic concerning various sizes for different sliders... Am I blind?

  28. snounez
    Member
    Posted 7 months ago #

    Hello,
    Like "cardened" Member , I just add the code
    /*Slider size*/
    .carousel .item {
    line-height: 250px;
    overflow: hidden;
    min-height: 250px;
    }
    to the "CUSTOM CSS.

    Now height size of slider it's ok
    but image is cut on botton !

    It's possible to heigth rezise smaller with keeping entire ?

    Thanck you very much for your help !

  29. snounez
    Member
    Posted 7 months ago #

    Perhaps it's possible to have a smaller setting of the layout of the slider : full width, boxed and smaller (970 x 300) ?

    Great theme !

  30. rdellconsulting
    Member
    Posted 7 months ago #

    Designed to work with 1170px x 500px images for best performance.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic