How To Apply These CSS Effects?

Community Forums Forums Design Tips and Tricks How To Apply These CSS Effects?

This topic is: resolved

This topic contains 4 replies, has 2 voices, and was last updated by  daniel123 1 year, 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #9930

    daniel123
    Participant
    Post count: 52

    I found these great CSS effects to apply to my 125×125 advertise blocks. I messed around with the CSS classes and ids and just couldn’t “link” it to the WP125 widget.

    Original CSS:

    /* ——————-Ads——————*/
    div.bsap_125 a{width:125px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;float:left;line-height:100%;margin:0 4px 10px 0;}
    div.bsap_125 img{border:2px solid #ddd;clear:right;padding:5px;}
    div.bsap_125 a.adhere{color:#666;font-weight:bold;font-size:12px;border:2px solid #ccc;background:#e7e7e7;text-align:center;width:125px;height:125px;line-height:1000%;}
    div.bsap_125 a.adhere:hover{border:2px solid #999;background:#ddd;color:#333;}
    html>

    body div.bsap_125 a.adhere{width:123px;height:123px;}
    div.bsap_468 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
    div.bsap_468 img{border:0;clear:right;}
    div.bsap_468 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:468px;height:60px;line-height:480%;}
    div.bsap_468 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
    html>

    body div.bsap_728 a.adhere{width:726px;height:90px;}
    div.bsap_728 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
    div.bsap_728 img{border:0;clear:right;}
    div.bsap_728 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:128px;height:90px;line-height:730%;}
    div.bsap_728 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
    html>

    body div.bsap_336 a.adhere{width:334px;height:280px;}
    div.bsap_336 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
    div.bsap_336 img{border:0;clear:right;}
    div.bsap_336 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:336px;height:280px;line-height:2200%;}
    div.bsap_336 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
    html>

    body div.bsap_468 a.adhere{width:466px;height:58px;}
    .bsap a{text-shadow:1px 1px 1px #111!important;color:#eee!important;overflow:visible!important;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;border:0 none!important;-webkit-border-top-left-radius:80px;-webkit-border-bottom-right-radius:80px;-moz-border-radius-topleft:80px;-moz-border-radius-bottomright:80px;border-top-left-radius:80px;border-bottom-right-radius:80px;margin:0 10px 10px 0 !important;padding:7px!important;}
    .bsap a:hover{-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;}
    .bsap a img{border:0 none!important;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px!important;}
    .bsap .even{margin-right:0!important;}
    .bsap .ad1{background:#e42b2b!important;}
    .bsap .ad2{background:#ff8400!important;}
    .bsap .ad3{background:#a800ff!important;}
    .bsap .ad4{background:#49a7f3!important;}
    .bsap .ad5{background:#41d05f!important;}
    .bsap .ad6{background:#B24700!important;}
    .bsap .ad7{background:#FFE500!important;}
    .bsap .ad8{background:#007D47!important;}
    .bsap .ad9{background:#330000!important;}
    .bsap .ad10{background:#990000!important;}
    .bsap .ad11{background:#f70000!important;}

    • This topic was modified 1 year, 6 months ago by  daniel123.
    • This topic was modified 1 year, 6 months ago by  daniel123.
    • This topic was modified 1 year, 6 months ago by  daniel123.
    • This topic was modified 1 year, 6 months ago by  daniel123.
    • This topic was modified 1 year, 6 months ago by  daniel123.
    • This topic was modified 1 year, 6 months ago by  daniel123.
    #9966

    daniel123
    Participant
    Post count: 52

    Anyone?

    #9972

    anitac
    Participant
    Post count: 7036

    You could use Firebug for Firebug and find the class id’s that way to each one.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #9974

    daniel123
    Participant
    Post count: 52

    Yes, I’ve already tried it and it doesn’t work. Is it because it’s a plugin or..?

    #9994

    daniel123
    Participant
    Post count: 52

    Nevermind I figured it out.

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘How To Apply These CSS Effects?’ is closed to new replies.