Jump to content


Photo
- - - - -

Different color Callout Action Text buttons


  • Please log in to reply
11 replies to this topic

#1 uwmltc

uwmltc

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 17 May 2012 - 02:49 PM

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

Please Login or Register to see this Hidden Content

). 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.

#2 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 17 May 2012 - 03:10 PM

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):

Please Login or Register to see this Hidden Content


Add to custom code -> custom css.

#3 uwmltc

uwmltc

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 22 May 2012 - 03:16 PM

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!

#4 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 22 May 2012 - 03:30 PM

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:

Please Login or Register to see this Hidden Content


So you can write CSS for the first one as:

Please Login or Register to see this Hidden Content


And for the second one as:

Please Login or Register to see this Hidden Content


Hope that helps :)

#5 uwmltc

uwmltc

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 22 May 2012 - 04:15 PM

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!

#6 uwmltc

uwmltc

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 22 May 2012 - 05:12 PM

I think I figured it out. Here is what I used:

Please Login or Register to see this Hidden Content



#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 22 May 2012 - 06:44 PM

Glad you were able to resolve that!

#8 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 23 May 2012 - 02:43 PM

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

#9 uwmltc

uwmltc

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 24 May 2012 - 02:29 PM

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!

#10 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 24 May 2012 - 02:34 PM

Try adding a :hover after each one, like:

Please Login or Register to see this Hidden Content

I'm not sure if it will work but it's worth a try. :)

#11 bnapoli

bnapoli

    Advanced Member

  • Members
  • 32 posts
  • Framework Version:2.2

Posted 19 June 2012 - 10:07 PM

Awesome, thanks!

#12 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 19 June 2012 - 10:13 PM

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