CSS Tweak For Registration Buttons

Hi there. It seems like our website has some button issues with Event Booking. On the event details page, the register buttons are coming through as white. However, once you move over toward the registration page with inputs, the buttons look to be a lot more readable. Can you recommend a tweak to the CSS which can help?

Event Link

Hey mparks,
From tweaking my own website, I've learned that EventBooking uses the standard Joomla "btn" class on it's buttons. Looking at your site, your template does not redefine the style, so you're just getting the default bookstrap look.

Matching a style to your site's nav bar, I think the something like this would look good.
Note: This will restyle ALL the class="btn" buttons SITEWIDE (eg. the ReadMore links). To change just change the EventBooking buttons, define the styles as "#eb-event-page a.btn" and "#eb-event-page a.btn:hover" instead.

Sample:

Sorry, a bit of a novice on this. If I'm following your method of editing just the styles for EB, am I doing that in the main template.css, or in one of the EB css files?

If just changing it for your EB event pages, I would edit \com_eventbooking\assets\css\custom.css and add it there. Here is the code you'll want to use then.
I think this code should work -- sometime CSS still gets the better of me when I start narrowing down style to a more limited definition

Added those to the custom.css file, but it doesn't seem like it's working. If we went back the other way, and changed buttons throughout the site, would that be editing template.css file? The buttons section looks like this:

/* BUTTONS

---

*/



.button, button, .btn, p.readmore a, .readon, .readon_grey, .readon_white, div.catItemReadMore, .userItemReadMore, div.catItemCommentsLink, .userItemCommentsLink, a.readmore-link, a.comments-link, div.itemCommentsForm form input#submitCommentButton {

-webkit-transition: all 300ms ease-out;

-moz-transition: all 300ms ease-out;

-o-transition: all 300ms ease-out;

transition: all 300ms ease-out;

padding:7px;

padding-left:12px;

padding-right:12px;

margin-top:14px;

margin-bottom:0px;

border:none;

color:#FFFFFF;

display:inline-block;

text-decoration: none;

font-size:0.9em;}

p.readmore a, p.readmore a.btn {

margin-top:28px !important;

margin-bottom:0px !important;

font-size:1em;

}



p.readmore a span {

display:none;

}



.button {

margin:0px;

margin-top:0px;

margin-right:8px;

color:#ffffff;}



#s5_component_wrap .button, #s5_component_wrap .btn {

line-height:200%;

margin-top:14px;

margin-bottom:14px;

}



.btn-primary, .pager a, .readon, .readon_white, p.readmore a {

color:#FFFFFF !important;

}



.btn-primary:hover, .pager a:hover {

color:#FFFFFF !important;

}



.button:hover, .btn:hover, buton:hover {

border:none;

}



#submitCommentButton {

margin-top:14px;}



.readon, .readon_grey, p.readmore a, .readon_white, div.catItemReadMore, .userItemReadMore, div.catItemCommentsLink, .userItemCommentsLink, a.readmore-link, a.comments-link {

padding-left:16px;

padding-right:17px;}



#s5_loginreg ul {

list-style:none;

margin:0px;

}



.readon_white {

background:#FFFFFF;

}



.readon_grey {

background:#FFFFFF;

color:#676767 !important;

border:solid 1px #EBEBEB;

}



.readon_grey:hover {

color:#FFFFFF !important;

background:#555555;

text-decoration:none;

}



.readon:hover, .readon_grey:hover {

text-decoration:none !important;

cursor:pointer;

}



#searchForm .btn, #searchForm .btn:hover {

color:#000000;

margin:0px;

background:none;

-webkit-box-shadow: none;

-moz-box-shadow: none;

box-shadow: none;

margin-top:2px;

}

Hmmm... I can just see what's happening from the public front end of your site, and... The EB custom.css file *IS* loading but something else is loading after it and causing it to be overridden...

Let's see...

Ahhh... /templates/corpway/css/bootstrap/bootstrap-default.css (css file line 5039) is overriding the text color, and /templates/corpway/css/template.css (css file line 135) is overriding the background. The template.css loads last, so making changes there that will have the effect we are after. Add my previous code to the bottom of the button section in your template.css, and THAT should work (fingers crossed!!)

There are also a lot of hard-coded styles in the head of your template that end up overriding some of your template.css styles (eg. your ReadMores are being defined there and not via your template.css), but it looks like our code should pass through added to the end of template.css.

Thanks for this information. That's really great and helped me to style my registration buttons on the "details" page.

However, the registration buttons on my initial "category timeline layout" remain the original style. So what code do I use in my template's custom.css to style these buttons?

So, currently the following is what I've got to correct the "details" page. I'm guessing I need to have another instance of the code again but change the #eb-event-page to something else?

#eb-event-page a.btn {
background-color: #c41188;
color: #FFF !important;
}
#eb-event-page a.btn:hover{
background-color: #c41188;
}

If you're running this css through EB's custom.css, then try just droping the #eb-event-page tag off the front of both css lines and it should change every".btn" button that EB displays.
If you're running this in your template's custom.css file, then do this any ways for site-wide restyling and consistency.

Thanks James for helping with the answer. In case Peter need help, you can submit a support ticket sending us super admin account of your site and tell us what you want to change. I will then ask my template developer to work on it and make the change for you

Regards,

Tuan

Thanks James and Tuan!

I got it to work by putting the following code in the media/com_eventbooking/assets/css/custom.css file:

a.btn {
background-color: #c41188;
color: #FFFFFF !important;
}
a.btn:hover{
background-color: #c41188;
color: #FFFFFF !important;
}

However, it only partially worked. The backgrounds changed to my new color and the font color also changed to white, but only on hover.

So, using the Google Inspect feature on the page, I discovered this code:

a.btn {
color:#333333; !important;
}

in the "/css/bootstrap/bootstrap-default.css" file

was overriding the text color.

I removed the !important call and everything now works!

Thanks again. I hope this helps someone else!