event date highlighting

[soaringeagle]

this is alot simpler then the css animation tips i posted recently..in fact this is a really simple one

just wanted to highlight the dates on the events to make them stand out a lil more

so just added a border, box  shadow (but inside, not outside the box) and some padding (oh yea and a lil corner rounding)

real  simple

really simple code but really makes the daytes stand out more i think

u can leave or remove the hover part if you want..just added that as i'm writing this

div.module_events div.xg_module_body div.wrap div.dategroup {border:thin solid #999; box-shadow:inset #CCC 10px 10px 13px; padding:10px 2px 4px 0; border-radius:8px 2px 2px 6px; }
div.module_events div.xg_module_body div.wrap div.dategroup:hover {box-shadow:#CCC 4px 4px 4px;}

[Donna Mac]

Can you explain to me where I add this code?  Thanks!  I have CSS for my site but I don't do any changes to other areas.  

[soaringeagle]

add it to the advanced css box  under the rest at the bottom

[Hugh]

Doesn't work for me. I added it to CSS in Features, Advanced.

[soaringeagle]

weird what browser are u using and  are u using design studio or the old version

whats your site i'll take a look

[Hugh]

Thanks. Old version, Safari & Chrome + looked on my iphone, http://www.harringayonline.com

[soaringeagle]

ok i can see a few possible reasons why you have events in a small collumn  not the wide collumn you have it set to just title display not detail display chrome for some reason the box shadow inset wouldnt work anyway

but i believe its most likely do to the fact  you dont have detail display on

[Hugh]

Are you talking about the front page or the events page? I assumed your code was for the events page.

[soaringeagle]

was main page only but use this for both

div.module_events div.xg_module_body div.wrap div.dategroup, div.body_events_main h3.date  {border:thin solid #999; box-shadow:inset #CCC 10px 10px 13px; padding:10px 2px 4px 0; border-radius:8px 2px 2px 6px; }
div.module_events div.xg_module_body div.wrap div.dategroup:hover, div.body_events_main h3.date:hover  {box-shadow:#CCC 4px 4px 4px;transition:all 1s ease-out;-moz-transition:all 1s ease-out;-webkit-transition:all 1s ease-out;-ms-transition:all 1s ease-out;-o-transition:all 1s ease-out;}

[Hugh]

Great, that does the trick. Thank you. ("Soaringeagle"?)

[dave]

Hi soaringeagle i have a 3 column layout and have the events in the small column Main page, this works great in the large column Main page and on the events page,  but i can't seem to get it to function in the small column Main page as well,detailed view is on....now iv'e confused myself ha ha ha.

  

[soaringeagle]

i'll have to take a look ..give me your url again

[Armani Rouse]

Hey Soaringeagle! I added this code to my CSS but I dont see the changes like in your events and I have the design studio...more importantly I anted to ask you if there was code to round all the modules on my site? I'v seen other ning netwoks with it but I dont have the code...can you help me out? BTW my pops has dreads! I checked ALL OF YOUR SITES OUT! Im gonna have him make a profile on your dreadlock site this weekend! Any help you can provide is good. If you would like to see my site its wellkunnected.com im not sue how your going to see the events as you need to be a member bu I can tell you this, when I added the code you provided above, it looks as tho it put a box around the event date but theres no hover feature or anything else and you cant even click on the date that the box is around...kinda weird lol