reassign default button to one of the colors?

[vtheme]

HI

Wanted to know if there is an easy way to just assign btn-default to be the green buttons…

In my slider, the colors are grey/white (they use btn-default) but I’d like to have the default buttons be green instead and could not see an obvious way to do this without redefining btn-default in the custom css.

Thanks in advance!

Topic

[Jason Bobich]

Hello,

Yeah, you’d just do this with CSS from your child theme’s style.css. Here’s an example just copying the green button’s style and applying to the default:

.tb-btn-gradient .btn-default {
	background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5cb85c), to(#419641));
	background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
	background-image: -moz-linear-gradient(top, #5cb85c 0%, #419641 100%);
	background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
	background-repeat: repeat-x;
	border-color: #3e8f3e;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.tb-btn-gradient .btn-defaulthover,
.tb-btn-gradient .btn-default:focus {
	background-color: #419641;
	background-position: 0 -15px;
}
.tb-btn-gradient .btn-default:active {
	background-color: #419641;
	border-color: #3e8f3e;
}

Just FYI the standard stuff —

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme‘s style.css or in the “Custom CSS” option on your theme options page.

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[Jason Bobich]

Specifically for sliders, there’s a also a filter in there you could use to change the default color.

function my_standard_slider_button( $args ) {
	$args['color'] = 'success'; // The bootstrap green colored button
	return $args;
}
add_filter( 'themeblvd_standard_slider_button', 'my_standard_slider_button' );

Here’s what you’re actually filtering with the above code:

https://github.com/themeblvd/theme-blvd-sliders/blob/master/includes/sliders-helpers.php#L382

[vtheme]

Ahh, the filter is what I was seeking!

Thanks for all of the advice on the css and firebug (can’t live without it!) – I did know that we could do it the hard way, but I suspected that you had some hook into the slider for us.

Thanks again!

[Author]

Replies