Jump to content
Sign in to follow this  
PeriniNero

How to protect Buttons behaviour when styling a and a:hover in CSS

Recommended Posts

PeriniNero

We styled a and a:hover in a way we prefer on this demo website (we would like to launch soon as redesign of courtesymasters.com). We use a child theme. Unfortunately we do not succeed in not affecting the behaviour of buttons in content/widget areas; see for example page http://masters.unitedcourtesymasters.com/jobs/ the widget on the right with Apply via LinkedIn. The ones looking and behaving well do not function :-( At the same page and other pages you will find how we styled a and a:hover in content areas. Do you know how we can use the "regular" buttons provided by the framework, without them addepting the a and a:hover styles we would like to use? Thank you.

Share this post


Link to post
Share on other sites
Jenny

These are the default values for the hover and should help point you in the right direction:

.widget-pad a.btn:hover {
	    color: #FFFFFF;
	}
	.widget-pad a:hover {
	    background: none repeat scroll 0 0 #EDF4F9;
	}
	a.btn:hover {
	    text-decoration: none;
	}
	.btn-primary, .btn-primary:hover, .btn-warning, .btn-warning:hover, .btn-important, .btn-important:hover, .btn-success, .btn-success:hover, .btn-info, .btn-info:hover, .btn-inverse, .btn-inverse:hover {
	    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	}


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
PeriniNero

@simple_mama thanks, did not succeed yet, I'll take a better look tomorrow

Share this post


Link to post
Share on other sites
PeriniNero

@catrina @simple_mama Thanks but sorry, I really don't get it :-( Lack of experience in CSS I guess. We tried to reduce the unwanted effects of styling our a and a:hover, by defining these in CSS to #postloop div. So, all buttons and links in other sections are not affected. No we come across buttons with links in the postloop (content and widgets areas). We think, the only way to style these buttons in these postloop areas properly (styling of buttons like the buttons provided by the framework), is to add all default buttons CSS of PageLines (or your provider) to our custom CSS of the child theme, and add #postloop to it all??? Sorry for the lack of knowledge and thank you for your help, again!! (off topic: we provided to you all 800+ missing translations to the Dutch language in your translation center 2 days ago; any idea of the process regarding to approving of submitted translations?)

Share this post


Link to post
Share on other sites
PeriniNero

@catrina @simple_mama issues solved via CSS! your suggestions directed me to another approach; thanks a lot! topic can be closed at this time thanks!!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×