Vick98
10-31-2012, 12:50 PM
I have tried to add this code to the additional.css template but with no luck. Could anyone help with this or create a mod for it. Thank you.
http://www.soullessknights.com/images/glow.png
To apply the look to your own site, use the code below, replacing the red colour values with something that matches your own theme.
The code:
.input-text input, .input-textarea textarea { transition: all 0.30s ease-in-out; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; border:#CC3030 1px solid; outline:none; padding: 2px; border-radius: 5px; margin: 2px; border:1px solid rgba(204,48,48, 0.5);
}
.input-text input:focus, .input-textarea textarea:focus { box-shadow: 0 0 5px 2px rgba(204, 48, 48, 0.8); -webkit-box-shadow: 0 0 5px 2px rgba(204, 48, 48, 0.8); -moz-box-shadow: 0 0 5px 2px rgba(204, 48, 48, 0.8); -o-box-shadow: 0 0 5px 2px rgba(204, 48, 48, 0.8); -ms-box-shadow: 0 0 5px 2px rgba(204, 48, 48, 0.8); transition: all 0.30s ease-in-out; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; border:1px solid rgba(204,48,48, 0.8);
}
.input-text, .input-textarea {background: none; border: 0;}
Notes:
I've used rgba(204,48,48, 0.8) for the border and shadow colour. This is my normal red, in RGB instead of Hex, with the last number representing the Alpha, or transparency. Alpha of 0.8 = 80% opaque/20% transparent.
There's a handy HEX to RGB converter here for those, like me, who know their site colours in HEX only.
This code will affect all text boxes and text areas on your site.
CSS Transitions
Transitions are very powerful, and you can do some pretty creative things with them. Or you can just apply them to the links on your site for a nice effect.
http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/
http://css3.bradshawenterprises.com/
http://www.soullessknights.com/images/glow.png
To apply the look to your own site, use the code below, replacing the red colour values with something that matches your own theme.
The code:
.input-text input, .input-textarea textarea { transition: all 0.30s ease-in-out; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; border:#CC3030 1px solid; outline:none; padding: 2px; border-radius: 5px; margin: 2px; border:1px solid rgba(204,48,48, 0.5);
}
.input-text input:focus, .input-textarea textarea:focus { box-shadow: 0 0 5px 2px rgba(204, 48, 48, 0.8); -webkit-box-shadow: 0 0 5px 2px rgba(204, 48, 48, 0.8); -moz-box-shadow: 0 0 5px 2px rgba(204, 48, 48, 0.8); -o-box-shadow: 0 0 5px 2px rgba(204, 48, 48, 0.8); -ms-box-shadow: 0 0 5px 2px rgba(204, 48, 48, 0.8); transition: all 0.30s ease-in-out; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; border:1px solid rgba(204,48,48, 0.8);
}
.input-text, .input-textarea {background: none; border: 0;}
Notes:
I've used rgba(204,48,48, 0.8) for the border and shadow colour. This is my normal red, in RGB instead of Hex, with the last number representing the Alpha, or transparency. Alpha of 0.8 = 80% opaque/20% transparent.
There's a handy HEX to RGB converter here for those, like me, who know their site colours in HEX only.
This code will affect all text boxes and text areas on your site.
CSS Transitions
Transitions are very powerful, and you can do some pretty creative things with them. Or you can just apply them to the links on your site for a nice effect.
http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/
http://css3.bradshawenterprises.com/