How to change slideshow next & previous "dots" shapes & change colors?

[pause4paws]

PrestaShop 1.6.1.7

 

How can I change the colors of the dots and can I change them to something more intuitive like the "less than" and "greater than" symbols? I mean these: < and >

[razaro]

This depends on your theme, and that slider you use.

 

Generally sliders have JavaScript options to show/hide pagination (usually dots)

and/or to display navigation (usually arrows), 

 

So first try maybe slider module configuration, and if no option then some code is needed

to change is .js or .tpl file.

 

Also link to your site would help.

[pause4paws]

My site is in maintenance mode but here is the template. 

 

http://www.templatemonster.com/prestashop-themes/50521.html - much easier to see those dots on that homeslider. I have a white background and light blue text on the left side of each slide.

 

Thank you!

Edited October 21, 2016 by pause4paws (see edit history)

[razaro]

OK try this first. Open and edit file in your theme folder /js/modules/homeslider/js/homeslider.js

and make two changes 

			pager: false,

			controls: true,

So it looks like

$('#homeslider').bxSlider({
			mode:'fade',
			useCSS: false,
			maxSlides: 1,
			slideWidth: homeslider_width,
			infiniteLoop: homeslider_loop,
			hideControlOnEnd: true,
			pager: false,
			autoHover: true,
			autoControls: true,
			auto: homeslider_loop,
			speed: homeslider_speed,
			pause: homeslider_pause,
			controls: true,
			startText:'',
			stopText:'',
     		onSliderLoad: function() {
				$('.homeslider-description').animate({left:'6.8%'}, 400, 'swing');
			}, 
			onSlideBefore: function(){
				$('.homeslider-description').stop().animate({left:'-400px'}, 400, 'swing');

				
			},
			onSlideAfter: function(){
				$('.homeslider-description').stop().animate({'left':'6.8%'}, 400, 'swing');
			}

		 
		});

That should hide pagination and show arrows. Do not forget to clear PrestaShop cache if changes are not visible.

[pause4paws]

I edited the file, cleared cache, recompiled templates if updated, then forced compilation and cleared cache again. No change.

 

I have three slides. Should maxSlides: 1,  be 1 or 3?

 

Should I post my entire homeslider.js or attach it?

 

Thank you!

Edited October 22, 2016 by pause4paws (see edit history)

[razaro]

Hmm please check that you edit homeslider.js it theme folder.

Then confirm changes in code after loading full URL in browser

http://static.livedemo00.template-help.com/prestashop_50521/themes/theme998/js/modules/homeslider/js/homeslider.js

is for example demo one.

 

Also if you maybe have some caching module clear cache there or disable it.

 

Code changes should work btw :-)

 

And for maxSlides it is number of visable slides in one moment so if you change to 3  all 3 will be displayed like carousel.

Here yo ucan see all options explanation http://bxslider.com/options

[pause4paws]

Hi, Razaro,

 

Here are screenshots showing where I got the homeslider.js file and date/time edited. Also the contents of the edited homeslider.js file. I cleared the cache, forced compilation, recompiled and cleared cache.

 

I took another screenshot and left the date and time in the filename. The dots are still there. We can only see one gray dot and not the white dots because of the white background. Anything that doesn't match the original theme besides what we're talking about are fixes previously done.

 

I loaded the full URL in my browser:

 

https://www.mysite.com/themes/theme998/js/modules/homeslider/js/homeslider.js

and attached the screenshot of that code.

 

I attached screenshot of where I clear the cache and recompile, etc.

 

I hope you can see what is wrong.

 

Thank you for the explanations for the maxslides and other options!

Edited October 22, 2016 by pause4paws (see edit history)

[pause4paws]

Instead of trying to change the dots to arrows, how can I just change their color, please?

[razaro]

For changing colors you need to edit themes/theme998/css/modules/homeslider/homeslider.css file

line 167 

#homepage-slider .bx-wrapper .bx-pager.bx-default-pager a {
    background: #ffffff;
    text-indent: -9999px;
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 4px 0 5px;
    outline: 0;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

Change  background: #ffffff;  to color you want. Also if needed change hover color, line 184

#homepage-slider .bx-wrapper .bx-pager.bx-default-pager a:hover, #homepage-slider .bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #7d7d7d;
}

[pause4paws]

Success! Thank you so much, Razaro. Now they match my site text and favicon colors.

[razaro]

You welcome and glad it worked. Nice colors also :-)

 

Still not sure why changing js file did not work but it is  OK.

[pause4paws]

I'm grateful for small blessings! Thank you for saying my colors look nice. Can't wait for my site to go live!

Edited October 28, 2016 by pause4paws (see edit history)