Button Color

  • Dirk Stäber
  • Topic Author
  • Offline
  • New Member
  • New Member
More
10 years 1 month ago #61226 by Dirk Stäber
Button Color was created by Dirk Stäber
Hi @all!

I've the problem that I cannot find the settings to change the color of the buttons.
Please look here:
www.kochwerkstatt-ruhrgebiet.de/kochkurse/kochkurse
The buttons (and price ) are blue, I like to change it.

Any idea?
Many thanks in advence,
Dirk
:)

Please Log in or Create an account to join the conversation.

More
10 years 1 month ago - 10 years 1 month ago #61245 by James Riley
Replied by James Riley on topic Button Color
EventBooking uses the Joomla standard .btn classes to define their button styles. You'll have to add/edit some CSS in order to change this.

Currently, your .btn* styles are being defined GLOBALLY by /templates/yoo_tasty/css/bootstrap.css. If you want to change ALL buttons for your entire site (which, if you're not happy with the button color in EB, then you probably won't be happy with the color of any other buttons that appear on your site either) edit ALL styles in this file that have anything to do with setting a background-color or background-image for anything .btn (including .btn:hover. .btn:active, .btn-primary, .btn-inverse, etc). In the case if EB, you'll want to pay special attention to .btn-primary and it's selector classes (eg. .btn-primary:hover) as those are the classes applied to its buttons.

If you don't want to make a site-wide changes and only want to effect ONLY this view provided in your example, your can try to override the bootstrap.css styles by editing \com_eventbooking\assets\css\custom.css and including the following (tweak the colors to fit your need -- I've just picked values based off the red your site uses; Note the !important at the end of every line -- this tells CSS to override any attempts to override the styles later, unless the later style definition ALSO bears the !important tag):
Code:
#eb-events .btn-primary { background-color: #a32b40 !important; /* the red from your site */; background-image: -moz-linear-gradient(top, #a34d40, #a30940 ) !important; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#a34d40), to(#a30940 )) !important; background-image: -webkit-linear-gradient(top, #a34d40, #a30940 ) !important; background-image: -o-linear-gradient(top, #a34d40, #a30940 ) !important; background-image: linear-gradient(to bottom, #a34d40, #a30940 ) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa34d40', endColorstr='#ffa30940 ', GradientType=0) !important; border-color: #a30940 #a30940 #99073b !important; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25) !important; *background-color: #a30940 !important; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ color: #FFF !important; } #eb-events .btn-primary:hover{ background-color: #a30940 !important; *background-color: #94093a !important; }

*** no guarantees that my CSS code works -- I think it should, but it is untested ***

James Riley .: EventBooking user since 2014 ::: JoomDonation user since 2016 :.
.: grfx & web design / IT / AV @ St. Therese Institute of Faith and Mission, Bruno, SK, Canada :.
Last edit: 10 years 1 month ago by James Riley.
The following user(s) said Thank You: Tuan Pham Ngoc, Dirk Stäber

Please Log in or Create an account to join the conversation.

More
10 years 1 month ago #61247 by James Riley
Replied by James Riley on topic Button Color
And the price box is defined by .btn-primary as well -- forgot to mention that.

James Riley .: EventBooking user since 2014 ::: JoomDonation user since 2016 :.
.: grfx & web design / IT / AV @ St. Therese Institute of Faith and Mission, Bruno, SK, Canada :.
The following user(s) said Thank You: Tuan Pham Ngoc, Dirk Stäber

Please Log in or Create an account to join the conversation.

  • Dirk Stäber
  • Topic Author
  • Offline
  • New Member
  • New Member
More
10 years 1 month ago #61309 by Dirk Stäber
Replied by Dirk Stäber on topic Button Color
Hi!

many many thanks!!!
It works fine!
:whistle:
B)

Please Log in or Create an account to join the conversation.

Moderators: Tuan Pham Ngoc