Tara Theme: Change size of slider.

By jecepede on Tue, 08/11/2020 - 15:47
Forums: 
Free Themes Support

Aloha !

For a website I am creating I choose Drupal and the Tara-Free theme.
So far it is doing more or less what I want it to do. I do however have a question :

How do I make the slider a fixed height ? For example 250px ?
I tried diggin' in the CSS but I can't seem to overrule it with the additional CSS/styling options.

Cheeeeeeeeers,

Jecepede

Comments

user
Submitted by admin on Tue, 08/11/2020 - 15:58

Height of slider in Tara theme is not fixed. It depends on height of screen.

Height of slider = Full screen height - Header Height

To modify height of slider, you need to edit this file:
/tara/templates/layout/page--front.html.twig

Find this code:

$('#slider').css({ height: $(window).height() - headerheight });

Change this to:

$('#slider').css('height', '250px');

Save file and clear Drupal cache.

Regards:
Ravi

user
Submitted by jecepede on Wed, 08/12/2020 - 16:36

Aloha !

Oh wow, thank you for the lightning fast reply Ravi.

I did as you suggested and found the code and changed it. My slider is now a fixed 300px heigh.
There is however one thing that bugs me a bit. What if the Slider gets updated ?
Will I need to do this trick again ?

Is there no way to do this via "Apperance" -> "Tara Settings" -> "Additional CSS / Styling" ?

Cheeeeeeeeeeeeers,

Jecepede

user
Submitted by laisabeck on Mon, 04/05/2021 - 05:40

Please recommend me theme like "Divi" which is a premium WordPress theme.

user
Submitted by laisabeck on Mon, 04/05/2021 - 05:43

I usually buy WP themes through MOJO Marketplace coupons at discount rates. Please guide me on this?

user
Submitted by jecepede on Wed, 07/07/2021 - 17:57

Aloha !

I have been happy with my 250px slider but after updating the Tara Theme to version v8.3.3
The trick of replacing :

$('#slider').css({ height: $(window).height() - headerheight });

with :

$('#slider').css('height', '250px');

Does not work anymore.

Anyone know what to do now ???

Cheeeeeeeeers

Jecepede

user
Submitted by jecepede on Wed, 07/07/2021 - 18:30

Aloha !

Never mind,
You can find the settings in :

../themes/tara/css/style.css

Cheeeeeeeeeers

Jecepede

user
Submitted by jiangzhongbing on Wed, 03/02/2022 - 06:38

I can't find the code below in /tara/templates/layout/page--front.html.twig
$('#slider').css({ height: $(window).height() - headerheight });
tara 8.3.3