Support

Home Forums Event Espresso Premium Buttons styling being overwritten

Buttons styling being overwritten

Posted: October 9, 2014 at 8:11 am


Harriette Schumacher

October 9, 2014 at 8:11 am

New to EE, having a problem with my theme overriding the EE styles, so my buttons are white text on a light background. In the fields where the user inputs their name, the text is white there also. The WP theme I have was custom made by our old dev from bootstrap, and I think it may be overriding EE. I tried putting in the following CSS to change the buttons with no luck.

.btn_event_form_submit {
background: #000000 ;
}

URL is http://dev.harrietteschumacher.com/events/test-event/

http://dev.harrietteschumacher.com/wp-content/uploads/2014/10/Screen-Shot-2014-10-09-at-10.54.47-AM.png
http://dev.harrietteschumacher.com/wp-content/uploads/2014/10/Screen-Shot-2014-10-09-at-10.55.10-AM.png
http://dev.harrietteschumacher.com/wp-content/uploads/2014/10/Screen-Shot-2014-10-09-at-10.55.02-AM.png

Maybe I’m going about this the wrong way… Any help or general direction is super appreciated!

Adam


Tony

  • Support Staff

October 9, 2014 at 8:37 am

Hi Adam,

Can you add this custom css:

.event-content input, 
.event-content select, 
.ee-attention,
.spco-step-dv input,
.espresso-ajax-notices
{
color: #000;
}

And see if that fixes the text color please.

We recommend using either the My Custom CSS or Reaktiv CSS Builder plugins to add custom styles such as these.


Harriette Schumacher

October 9, 2014 at 9:07 am

Worked like a charm. Thank you Tony!


Harriette Schumacher

October 9, 2014 at 9:32 am

So all the buttons are looking great (seen here:)
http://dev.harrietteschumacher.com/wp-content/uploads/2014/10/Screen-Shot-2014-10-09-at-12.25.03-PM.png

Except the ical button on my page with where the EE plugin lives (seen here), which is still white on white. Is there a way to get have that change carry over here? I wouldn’t wiping out that particular button in general either..

http://dev.harrietteschumacher.com/wp-content/uploads/2014/10/Screen-Shot-2014-10-09-at-12.25.09-PM.png


Tony

  • Support Staff

October 9, 2014 at 9:56 am

This thread was mark resolved so just wanted to check if the iCal issue is still there?

I can provide some more CSS to override the default styling, although I would need a link to the page the icon is on please.

However if you prefer to remove the iCal link altogether, you can add the code available here:

https://gist.github.com/joshfeck/1bc3731cd1c468916c7f

To either your themes functions.php file or within asite specific plugin to completely remove that icon.


Harriette Schumacher

October 9, 2014 at 10:24 am

Yes sorry, I hit the resolve to early.

the page is:
http://dev.harrietteschumacher.com/reconnect/#events-page

The reason we want it gone is simply due to to users who don’t have iCal, I just did some (very brief) research on .ics files and it doesn’t seem to work for everyone so maybe best we not have it. Nonetheless it would be great to know change the styling of it.

Thanks!


Harriette Schumacher

October 9, 2014 at 10:26 am

Also is there is a custom css to change that blue box for “Upcoming” ?

thanks!


Tony

  • Support Staff

October 9, 2014 at 10:29 am

Nice and easy this one ๐Ÿ™‚

.ee-ical-sbmt {
color: #000;
}

I wanted to check nothing else was overriding it.

You could also just add that selector to the other set from above, so the original rule becomes:

.event-content input, 
.event-content select, 
.ee-attention,
.spco-step-dv input,
.espresso-ajax-notices,
.ee-ical-sbmt
{
color: #000;
}

Saving you from applying the same fix in multiple locations.


Harriette Schumacher

October 9, 2014 at 11:13 am

Thanks Tony, that did the trick for the iCal buttons ๐Ÿ™‚
Any news as per editing the blue “upcoming” box color?


Tony

  • Support Staff

October 9, 2014 at 11:35 am

If you are using Google Chrome or Firebug you can right click on the elements within a page and choose ‘Inspect Element’ to display the HTML and CSS for that particular element.

So in this case right click on the blue box element, do inspect element, you’ll see something like this – http://take.ms/NECUl

The CSS rules on the right show you what styles are currently applied.

.ee-status.event-active-status-DTU {
background-color: #00B1CA;
}

So you can add those same rules to your custom styles but change the colour to whatever colour you prefer.

However if you are asking if you can change the contents of the button ‘Upcoming’ then not currently, Upcoming is one of our event status.

The support post ‘Buttons styling being overwritten’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso