• 0
Sign in to follow this  
Followers 0

Different color Callout Action Text buttons

Question

Posted · Report post

Does anyone know how to make two different color buttons using [Callout Action Text]? Currently, we are using images as a work around, placing images of different color buttons on the page (as shown on the http://uwmd2l.org/). However, for accessibility reasons it would be ideal if we could use the [Callout Action Text] within PageLines rather than images. We just need to make the buttons different colors.

Share this post


Link to post
Share on other sites

11 answers to this question

  • 0

Posted · Report post

You will need to change the CSS for the callout buttons. Use this and change it to how you want it to look (this is a white #FFFFFF to grey #DCDCDC gradient): [code].section-callout .button { background: -moz-linear-gradient(center top , #FFFFFF 0%, #DCDCDC 100%) repeat scroll 0 0 transparent; }[/code] Add to custom code -> custom css.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks simple_mama. I've already been able to change the color of the callout buttons universally across the site using code similar to what you suggested. However, I need to make the buttons TWO DIFFERENT colors on the same page. For example, one button color is yellow and a second button on the same page is black. Any clue as to how to do this? Thanks for any help you can provide!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ahh.. gotcha. In order to get 2 callouts on the same page, as you've noticed, you have to clone the section. Your HTML shows: [code]
[/code] So you can write CSS for the first one as: [code].section-callout { }[/code] And for the second one as: [code].section-callout.clone_2 { }[/code] Hope that helps :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Awesome, Jenny! Thanks, that works on FireFox, but the colors aren't displaying in Chrome or IE. I'm sure this is a pretty common issue. Do you know how I can change the code (or find a resources) to ensure that the colors display on multiple browser? Thanks a ton!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I think I figured it out. Here is what I used: [code] .section-callout .button { background: #FFC20E; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFC20E'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFC20E)); /* for webkit browsers */ background: -moz-linear-gradient(top, #FFF, #FFC20E); /* for firefox 3.6+ */ } .section-callout.clone_2 .button { color: #FFFFFF; background: #000000; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#000000'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#000000)); /* for webkit browsers */ background: -moz-linear-gradient(top, #999999, #000000); /* for firefox 3.6+ */ } [/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Glad you were able to resolve that!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You're welcome, @uwmltc! If you consider this topic resolved, please "accept" an answer. Thanks!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

One more thing, how can I change the hover color or remove the hover color to be the same as the background color? Again, each callout is a separate color. Thanks!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Try adding a :hover after each one, like: [code].section-callout .button:hover { background: #FFC20E; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFC20E'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFC20E)); /* for webkit browsers */ background: -moz-linear-gradient(top, #FFF, #FFC20E); /* for firefox 3.6+ */ } [/code] I'm not sure if it will work but it's worth a try. :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Awesome, thanks!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem. I'll accept an answer for you.

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  
Followers 0