Adjusting the Slider Size

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

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!

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

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!

@cardened and @lupusconnection

I went through this list of subjects to find the slider size code below.
https://www.ads-software.com/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

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

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

Great!! Thx

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

Thank you…

Guessing you just add a width to your style;

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

Great!! Thx!!

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.

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

@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