|
Sean Collishaw
|
August 19, 2013 at 9:34 am
Hello EE support folk. I’m working through some quirks that have cropped up thanks to a new theme installed this weekend. Last year I was given some CSS to add to my custom CSS that would make the Register link more button-y. I’ve added that CSS back after the theme upgrade, but it doesn’t seem to be working quite right. :-/
The CSS elements I’ve updated are a.a_register_link, a.a_register_link:hover, and a.a_register_link:active These changes work on the event list (http://www.climbcrux.org/events/) but don’t work fully anywhere else. When I say fully, the Register Button / Link on the event post (http://www.climbcrux.org/2013/07/mole-mo-lay-mondays-climb-and-eat-3/) looks proper when hovered over, but not normally. And the submit button on the actual registration page (http://www.climbcrux.org/event-registration/?ee=191) is totally unaffected by anything I do.
Right now the CSS is back to the EE themeroller default (I’m using flick) but if necessary, I can add the CSS back so you guys can see better what I’m talking about.
I’m *trying* to get this all done through custom CSS so I don’t have to change any EE related files. As always, I **greatly** appreciate your help and support!!
|
|
Sean Collishaw
|
August 19, 2013 at 10:55 am
Okay, I was wrong. I do have CSS for a.a_register_link —
<pre class=”brush: css; gutter: true; first-line: 1; highlight: []; html-script: false”>
a.a_register_link {
border-top: 1px solid #96d1f8;
background: #65a9d7;
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
a.a_register_link:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
a.a_register_link:active {
border-top-color: #1b435e;
background: #1b435e;
}
|
|
Dean
|
August 20, 2013 at 12:11 am
Mike,
When you changed the CSS did you clear your cache before viewing it? It looks like you have some form of cacheing system in place.
If that isn’t an issue, then yes it would be great if you could revert so we can take a look for you. Also we can’t access the registration page without being logged in.
|
|
Sean Collishaw
|
August 20, 2013 at 9:11 am
Hi Dean… I did clear the cache. I’ll paste the CSS I’m using now down below and will send the login credentials through the credential page as well.
What I’m seeing is this:
1 – Event Post — http://www.climbcrux.org/2013/07/friday-night-climb-at-bkb-14/ — the button / link flashes when you hover. Not a huge deal at all, but kinda odd.
2 – Event Page — http://www.climbcrux.org/event-registration/?ee=186 — the “Submit” button isn’t following the CSS style at all; different colors, different everything. When you hover, the button turns white which makes “Submit” impossible to see… granted, by then you know you’re clicking submit, but still odd.
3 – Event List — http://www.climbcrux.org/events/ — The “Register” button is not a blue I’ve chosen in the CSS (below) but is blue… but when you hover over the button, *then* it does show the hover button color — 00a5e6
CSS:
<pre class=”brush: css; gutter: true; first-line: 1; highlight: []; html-script: false”>
/*
Prettier Register Buttons
/*
a.a_register_link {
border-top: 1px solid #737b7d;
background: #37b8eb;
background: -webkit-gradient(linear,left top,left bottom,from(#00a5e6),to(#37b8eb));
background: -webkit-linear-gradient(top,#00a5e6,#37b8eb);
background: -moz-linear-gradient(top,#00a5e6,#37b8eb);
background: -ms-linear-gradient(top,#00a5e6,#37b8eb);
background: -o-linear-gradient(top,#00a5e6,#37b8eb);
padding: 5px 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
a.a_register_link:hover {
border-top-color: #00a5e6;
background: #00a5e6;
color: #ffffff;
}
a.a_register_link :active {
border-top-color: #00a5e6;
background: #00a5e6;
}
|
|
Sidney Harrell
|
August 20, 2013 at 2:39 pm
1. The flashing is coming from this rule:
a.a_register_link:hover {
border-top-color: #00a5e6;
background: #00a5e6;
color: #fff;
}
when I disable the background in that rule, the flashing stops.
The other two I can’t see because I’m not logged in.
|
|
Sean Collishaw
|
August 21, 2013 at 8:29 am
Thanks Sidney, that did indeed fix the flashing issue. Woohoo!
I’ll send you credentials as well to log in as me. Incidentally, I’ve sent the credentials to Josh & Dean (Dean for this issue already).
|
|
Dean
|
August 22, 2013 at 1:28 am
Hi,
The following code should sort out the submit button size.
Regarding the colour, if you notice in the code below i have added !important after the tags, if you do the same for the code you pasted for the a.a_register_link code you posted, your gradient effect will kick in.
input[type="submit"] {
border-top: 1px solid #737b7d;
background: #37b8eb;
background: -webkit-gradient(linear,left top,left bottom,from(#00a5e6),to(#37b8eb)) !important;
background: -webkit-linear-gradient(top,#00a5e6,#37b8eb) !important;
background: -moz-linear-gradient(top,#00a5e6,#37b8eb) !important;
background: -ms-linear-gradient(top,#00a5e6,#37b8eb) !important;
background: -o-linear-gradient(top,#00a5e6,#37b8eb) !important;
padding: 0 4px 0 4px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
input[type="submit"]:hover {
border-top-color: #00a5e6;
background: #00a5e6;
color: #ffffff;
}
input[type="submit"]:active {
border-top-color: #00a5e6;
background: #00a5e6;
}
|
|
Sean Collishaw
|
August 22, 2013 at 9:15 am
You rock, Dean! Thanks for this, it cleaned everything up perfectly!!
|
