CSS override from jQuery Plugin (HomeSlider)

[Séane]

Hello,

 

I am trying to customise the homeslider module, which is calling a jQuery Plugin stored in:

ThirtyBees\js\jquery\plugins\bxslider\jquery.bxslider.css

 

Everything I type in the global.css or if I create a specific css file within the module, inside of the theme, I can't override the css from the jQuery plugin.

 

Basically I would like to remove the ::after tag in the CSS and change the width of the arrows, but the css from the plugin takes the lead.

 

Any idea?

Séane

[tommat]

Try !important rule.

example:

p {
    color: red !important;
}

 

[tommat]

This works for me for arrows :

#homepage-slider .bx-wrapper .bx-next, #homepage-slider .bx-wrapper .bx-prev{
	top: 50%;
	width: 30px;
	height: 30px;
}

You must do this in yourtheme/css/modules/homeslider/homeslider.css

Edited February 13, 2019 by tommat

[Séane]

Hello tommat,

Thank you for your kind help, the !important worked like a charm and I'll test the homeslider.css.

 

Thank you,

Séane