Updating to Framework v2.4

Plugins

After you’ve updated your theme, make sure to also update all of our major plugins:

1. Theme Blvd Layout Builder
2. Theme Blvd Sliders
3. Theme Blvd Widget Areas
4. Theme Blvd Shortcodes
5. Theme Blvd Widget Pack

[divider]

Bootstrap 3

With the update to Bootstrap 3, comes a lot of style adjustments in our frontend elements. Below are some things to be aware of with this.

The responsive tablet viewport cutoff size is now 992, when previously it was 979. So, if you’ve made any responsive CSS customizations be aware that you’ll want to find any instances of the following within your code:

Tablet viewport size

@media (max-width: 979px) {

And change it so that’s it 992:

@media (max-width: 992px) {

Button gradients

In Bootstrap 3, buttons now come with a simplified style. However, for Alyeska, Akita, and Barely Corporate themes, we’ve put in a special filter to apply button gradients in the way previous versions of Bootstrap did.

For Swagger users, if you want button gradients turned back on — From your child theme’s functions.php, you’d set it up like this:

function my_btn_gradient( $class ) {
	$class[] = 'tb-btn-gradient';
	return $class;
}
add_filter( 'body_class', 'my_btn_gradient' );

And the opposite goes for Alyeska, Akita, and Barely Corporate users; if you want button gradients turned off. — From your child theme’s functions.php, you’d set it up like this:

remove_filter( 'body_class', 'akita_btn_gradient' );

remove_filter( 'body_class', 'alyeska_btn_gradient' );

remove_filter( 'body_class', 'barelycorporate_btn_gradient' );

Tabs options are now simplified

We always hate stripping away features, but unfortunately Bootstrap has dramatically simplified how their tabs works. And so our [tabs] shortcode (provided with Theme Blvd Shortcodes plugin) no longer has many of the navigation options that previously existed.

You can no longer set tab navigation to display to the right, left or below the tab content.

[divider]

FontAwesome 4

Be aware that the theme now includes FontAwesome 4. View all current icons in the FontAwesome documentation:

http://fortawesome.github.io/Font-Awesome/icons/

Note that many icon names have changed in FontAwesome 4. Checkout this FontAwesome update guide to see what many icon names have been changed to.

In FontAwesome 4, they’ve made a lot of internal changes to how their CSS works. If you’ve manually coded any HTML in your website to use these icons like this:

<i class="icon-example"></i>

You’ll need to change these to they reflect the updated CSS class usage:

<i class="fa fa-example"></i>