Problem with boostrap slider caption after theme upgrade

I’ve modified the CSS on my own to my satisfaction… so I’ve removed the screenshots … but I’m not particularly happy that I needed to spend all day repairing an issue on the home page of a live site.

From looking at the changes to underlying CSS, it is obvious that the new caption placement was intentional. While it may represent an improvement in the eyes of the developers– it’s a major inconvenience to users who have developed sites with the old caption placement in mind– including decisions about choices of web banner images.

You are correct.
The author changed the bootstrap slider design.
Don’t know why?….

I’m facing a similar problem actually…
Menu and banner are completly messed up after the update, specially while using mobiles (can’t see titles of the banner anymore or the menu + website title are over the banner).

It’s a huge mess. I’ll got a hard time fixing that through css I guess!

Moreover, the button on the banner is totally different. From a sober grey/black to a light grey white… Dafuq happened with this theme! ><

Yes, the buttons are entirely different. Also there’s a problem with coding because the button is specified within an a class but not its own block level element– which makes it trickier to control placement.

I printed out both the old and the new style sheets for comparison. I actually ended up liking the new style better on my site, but it was about 6 hours of work to get it right.

Here are screenshots showing before & after:
https://imgur.com/amkQxr6

I’m happy to share the CSS if anyone wants to mimic that display. Basic specs are for the ID #bootstrap-slider

class for everything but the buttons is .carousel-caption — the button class is a.button

You’ll also want to be alert to changes to the display properties of home page widget elements. The banner was such a disaster that I didn’t notice that widget changes until after I fixed the banner.

This isn’t the first time I’ve run into this issue with an Evolve theme upgrade… I’m going to have to remember to run all theme changes on a development site first.

I would love to have your CSS – I have 2 sites which did the same thing and I don’t want to spend all day figuring it out since both are complimentary.
Do you know which style sheet covers the slider – I have a backup, but afraid if i replace all something will break with the updated theme. Tx

All the styles were in the theme’s main style.css file.

The css is actually quite simple — once I figured out what I needed to tweak. Here’s the CSS I amusing to create the effect seen in the “after” photo at the link posted above (with the rounded edge):

#bootstrap-slider .carousel-caption { background: rgba(147, 182, 201, 0.5); }
#bootstrap-slider .carousel-caption h2
		{ background: rgba(147, 182, 201, 0.4); border-radius: 50px 50px 0 0; text-align:center;}
#bootstrap-slider .carousel-caption p { background: rgba(28, 45, 78, 0.7); text-align:center; }
#bootstrap-slider .carousel-caption
	{ bottom: 0; left: 20px; right: 45%; padding-bottom: 10px; border-radius: 50px;}
#bootstrap-slider a.button {float: right; margin-right:30px; margin-bottom: 20px; }

The color of the Green “Learn More” button is currently set with the Theme Options (short codes/ buttons) – so it isn’t shown in the CSS.

Obviously my CSS is designed to reflect my themes colors — so you’d want to modify the colors specified to fit your own theme.

well done Abigailm.
you saved me!

merry xmas
:X

Great job indeed Abigailm!

Aren’t the Evolve’s shortcode premium though?

hi,

https://themeshaper.com/2014/08/19/why-bootstrap-is-a-bad-fit-for-wordpress-themes/

Sorry but if I understand the article, BootStrap not good to make a theme for WordPress, if this is true why the author of Evolve continues to do so?

Abigailm, if I want to use the css you kindly gave us, should I do it directly on the ccs style or should I create a child theme so that future upgrades do not affect it?
Or perhaps you think they will fix this? (They should, i think)
Awaiting your response
Many thanks in advance
Esther

@bobbutterfly – the upgraded Evolve (free) includes the “Button” shortcode in Theme Options — but all other shortcodes are still premium.

@esthercoach — I always use a child theme -so yes, that code is in my child style.css file. But you could try it in the “Custom CSS” section of Theme Options. That shouldn’t be overwritten with an upgrades.

@noaneo — This discussion concerns the Bootstrap slider — Evolve gives you a choice of three sliders. The article you cite presents one point of view; some of us feel otherwise. Here’s an article that lays out the pros & cons: https://code.tutsplus.com/tutorials/when-to-use-bootstrap-for-your-wordpress-theme-and-when-not-to–cms-23561

However, my CSS example above doesn’t use any bootstrap specific specifications. It’s standard CSS.

Many thanks for prompt response, Abigailm.
Will consider creating child theme.

@abigailm Thank you for your answer ??

Custom CSS are indeed not overwritten through the updates (but deleted when you change your theme though you can take it back through the saves). I had it for months since I couldn’t create an Evolve’s Child Theme (weird things happened).

By the way, I saw that Evolve was quite heavy (the folder’s 11MO) and I have quite a slow website for various.
I saw that many other themes were around 1-3MO so, do you thing that Evolve could be one of the reasons? I’m planning to change as this theme comes with a lot of features I don’t/can’t use but that take place and memory anyway

@bobbutterfly – there’s a free plugin called P3 (Plugin Performance Profiler) that you can use to get a sense of what is impacting performance on your site.
It gives you a timeline that shows how long it takes for things to load — it shows all elements — WP Core, Theme, Plugins. My site runs a lot slower than I would like– but its mostly from the plugins. In my case the plugins are essential to the site function.