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;}

Views: 347

Reply to This

Replies to This Discussion

hmm thats very odd i will have to look at that

i did some module rounding  on 2 corners anyway i had to do 1 corner on the head w=er 1 on footer

if u explain exactly what u want i can figure it out but is thecode active on your site ill take a look

It actually does highlight the event date Im sorry pal! I had to view it in mozilla or chrome...IE sucks ass lol thanks my man! and please get back to me regarding rounding the module corners of my site...I hate the default look lol the edges are sharper enough to cut something lol so id like to round em out! Thanks again Eagle..

ok played with your ci=ode  and came up with 2 versions

div.xg_module_head h2 {padding:10px;}

div.xg_module_head h2 {padding-left:15px;}

try both see which u like

cant see events without joining

oops my memory must suck haha (tryu=ing to write code by what i think is there instead of looking to se whats actualy there) change the h3 to h2

to round out the modules was kinda not perfect the way i did it however it looked ok so i left it

i only rounded 2 of the 4 corners  and therfore i had to di o 1 cornrr of the footer 1 of the header

i also slightly enlarged the no title header like u got on the description module just to make it look better

this includes everything the music player too

div.xg_module {border-radius: 25px 0 25px 0;-moz-border-radius: 25px 0 25px 0;-webkit-border-radius: 25px 0 25px 0;}
div.xg_module_head {border-radius: 25px 0 0 0;-moz-border-radius: 25px 0 0 0;-webkit-border-radius: 25px 0 0 0;}
div.xg_module_foot {border-radius:0 0 25px 0;-moz-border-radius:0 0 25px 0;-webkit-border-radius:0 0 25px 0; padding:2px 25px;}
div.xg_user_generated, div.account-links, div.xj_sidebar_content div.xg_module div.xg_module_body, div.musicplayer_visible .xj_music_embed, div.xg_module_with_dialog {border-radius:0 0 25px 0;-moz-border-radius:0 0 25px 0;-webkit-border-radius:0 0 25px 0;}
div.xg_module_body {border-radius:25px 0 25px 0;-moz-border-radius:25px 0 25px 0;-webkit-border-radius:25px 0 25px 0;}
div.notitle {height:8px;}

u can try with and without the xg_module_body i think i added that cause the sharp corner stuck thru the rounded corner or womething

you are the man bro! lol the code worked only thing is now the text that are in the header of the modules look a little off....go to my site and see what I mean wellkunnected.com but it would be awesome if I could round all the corners, the look you created is awesome but I want all the edges round if you can do it...i'll use it! lol lets give it a whirl ;)

add

div.xg_module_head {padding-left:10px;}

to round other corners change the 0's to 25px's but not all because u dont want all the module head borders round only top 2

so  u see theres 4 sets of numbers thats top left top right  bottom right bottom left it goes clockwise from top left  so now u know which ones to change for which corners

yea its weird its just the placement of certain things ning has on the network thats throwing off how it looks when I rounded them but its pretty much exactly what I was looking for its just that I want to be able to round every corner but it looks as though the way ning has it set up if I do this its going to cut off some of the titles of the modules so I need you man! lol 

or now that i think about it u might need div.xg_module_head h3 instead

jut add the padding   i think this should do it

div.xg_module_head hs {padding-left:10px;}  try 14 if 10s not enough then adjust as needed

ok Eagle now im confused! lol I dont see H2 or H3 in any of the code...can you send me the code again i suppose with everything I need in it

RSS

Latest Activity

Fire-Tech replied to Alex's discussion 'More styling in the Design Studio'
"Good job! I would suggest a check box to move the ningbar to the bottom of the page when…"
4 hours ago
Allison Leahy replied to Allison Leahy's discussion 'What is your Ning 3.0 URL?' in the group The Sandbox
"Hi Peggy! Sorry for the slow response here. The designers used Eagle for the headlines and Gotham…"
4 hours ago
Liliana Parra replied to John Bizley's discussion 'Show Your Ning 3.0 Sites'
"Mine is here... Disaster Risk Management (Spanish) http://gestiondelriesgo.ning.com/"
5 hours ago
Allison Leahy replied to Jen's discussion 'Menu on Mobile Device Difficult'
"Absolutely! Thanks for bringing it to my attention, and for your patience as always."
5 hours ago
Allison Leahy replied to Dw Alternatio's discussion 'Any way to change to a 3.0 network?'
"Hey Dw, So glad to hear you're interested in checking out the redesign! Make sure that after…"
5 hours ago

NC for Hire
Jen replied to Jen's discussion 'Menu on Mobile Device Difficult'
"Thanks Allison. I have spent hours trying to fix this. That's great news!"
6 hours ago
Allison Leahy replied to Jen's discussion 'Menu on Mobile Device Difficult'
"Just got the word that the release had no impact the mobile menu and a feature improvement has…"
6 hours ago
Allison Leahy replied to Jen's discussion 'Menu on Mobile Device Difficult'
"Interesting quirk. Thanks for the note."
6 hours ago

© 2013   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service