كود css اشكال مختلفه لعارضة المنتدى

  افضل مساهمة1
كود css اشكال مختلفه لعارضة المنتدى
كود css اشكال مختلفه لعارضة المنتدى
السلام عليكم ورحمة الله وبركاته
اقدم لكم اكواد css توضع بورقة css من خلال لوحة الادارة. مظهر المنتدى.
صور والوان. الوان. ورقة css
وضع الكود مناسب الذي تريدة لشكل عارضة نبدا بسم الله اول شكل

https://i.servimg.com/u/f39/16/63/75/54/result21.jpg
الكود
الكود:

/*** BARRA DE FERRAMENTAS COREDANCE - FÓRUM DOS TEMAS HTTP://temas.forumeiros.net ***/
div#fa_toolbar {
background-color: #359AFF;
border-radius: 0 0 30px 45px;
box-shadow: 0 0 4px #000;
margin: auto;
width: 98%;
}

div#fa_toolbar div, div#fa_toolbar span {
    margin: 0 15px;
}

#fa_notifications, #fa_welcome {
transition-duration: 1s !important;
-webkit-transition-duration: 1s !important;
}

#fa_notifications:hover, #fa_welcome:hover {
background-color: #FFF;
color: #359AFF !important;
transition-duration: 1s !important;
-webkit-transition-duration: 1s !important;
}

ul#fa_menulist {
border-radius: 4px !important;
border-bottom: 1px solid #359AFF !important;
border-left: 1px solid #359AFF !important;
border-right: 1px solid #359AFF !important;
background-image: url(http://illiweb.com/fa/optimisation_fdf/fr/bg_pannel.png);
background-position: center bottom;
background-repeat: repeat-x;
background-color: #E7F3FA !important;
}

.see_all {
  background-color: #0085FF !important;
}
/*** BARRA DE FERRAMENTAS COREDANCE - FÓRUM DOS TEMAS HTTP://temas.forumeiros.net ***/

الشكل الثاني ..

https://i.servimg.com/u/f58/15/88/72/83/result78.jpg
الكود
الكود:

/* BARRA DE FERRAMENTAS PRATA */
#fa_toolbar {
left: 0px;
height: 30px;
background-color: #333333;
color: #FFFFFF;
font-family: Helvetica, Verdana, Arial;
font-size: 16px;
z-index: 999;
}
#fa_toolbar {
background-color: rgba(0,0,0,0)!important;
background-image: url(http://i57.servimg.com/u/f57/11/95/30/70/toolba10.png);
color: #000!important;
font-family: Helvetica,Verdana,Arial;
font-size: 16px;
height: 58px!important;
left: 0;
z-index: 999;
}
.fa_fix {
position: fixed !important;
position: absolute;
top: 0;
right: 0;
}
.fa_toolbar_XL_Sized {
min-width: 980px;
width: 100%;
}

#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome, #fa_share_text, #fa_service {
color: black !important;
}

#fa_welcome, #fa_right #fa_notifications {
line-height: 30px;
padding: 0px 5px;
color: black !important;
}

#fa_menulist {
margin-top: 8px !important;
}
/* BARRA DE FERRAMENTAS PRATA FIM */
الشكل الثالث

https://i.imgur.com/XZrC1Nr.png
الكود css
الكود:

div#fa_toolbar {
  -webkit-box-shadow: 0 2px 2px -2px rgba(0,0,0,.52);
  background-color: #3a5795;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAqCAMAAABFoMFOAAAAWlBMV…8/UxBxQDQuFwlpqgBZBq6+P+unVY1GnDgwqbD2zGz5e1lBdwvGGPE6OgAAAABJRU5ErkJggg==);
  background-position: 0 0;
  background-repeat: repeat-x;
  background-size: auto;
  border: 0;
  border-bottom: 1px solid #133783;
  min-width: 981px;
  z-index: 300;
  padding: 3px;
}
input#fa_textarea {
  margin-right: 0!important;
  margin-left: 12pc!important;
}
span#fa_share {
  display: none!important;
}
a#fa_welcome {
  display: none!important;
}
a#fa_notifications {
  position: relative;
  left: -8pc;
}

#fa_notifications{margin-right: 0px;width: 110px;text-align: right;position: relative;left: -6pc;background-image: url(https://fbstatic-a.akamaihd.net/rsrc.php/v2/yA/r/k_lAKDHNA3E.png);background-size: auto;background-position: -2px -640px;padding-right: 130px!important;z-index: 999;background-repeat: no-repeat;font-weight: 700;border-right: none!important;font-family:'helvetica neue', helvetica, arial, 'lucida grande', sans-serif!important;-webkit-font-smoothing: antialiased!important;margin-left: 2px!important;font-style: normal!important;text-transform: initial!important;text-decoration: initial!important;}
a#fa_magnifier {
  background-image: url(https://fbstatic-a.akamaihd.net/rsrc.php/v2/yM/r/nD48zLxSt0n.png)!important;
  background-position: 0 -354px!important;
  background-repeat: no-repeat!important;
  background-size: auto!important;
  height: 18px!important;
  top: 8px!important;
  width: 19px!important;
  margin-right: 0!important;
  margin-left: 0!important;
  left: 41pc!important;
  right: 0!important;
}
a#fa_hide {
  display: none!important;
}
span#fa_left {
  position: relative;
  left: 12pc;
}
input#fa_textarea {
  width: 22pc!important;
  padding: 1px!important;
  margin-top: 1px!important;
}
الشكل الرابع

http://image.prntscr.com/image/f321f22bccc54a39afbc5ee585afc8b3.png

الكود
الكود:


#fa_search #fa_magnifier:hover {
background-color: #EBEBEB!important;
}  
#fa_right a.rightHeaderLink {
margin-left: 10px;
vertical-align: top;
line-height: 30px;
color: #FFFFFF;
border: 1px solid #1b7fcc;
padding: 0px 5px 0px 5px;
background: #1b7fcc;
color: #fff;
margin-top: 10px;
font-weight: bold;
font-size: 11px;  
}
#fa_right {
float: right;
font-size: 14px;
margin-right: 30px;
}
#fa_toolbar #fa_right #notif_list {
font-size: 11px;
display: none;
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
background: #fff!important;
border: 2px solid #dbdbdb!important;
border-top: 0px solid #FFFFFF !important;  
z-index: 999;
margin-top: 8px !important;
}
#fa_toolbar #fa_right #notif_list li.see_all {
color: #666;
background-color: #dbdbdb !important;
padding: 0.7em !important;
text-align: left;
}
#fa_toolbar #fa_right #notif_list li.see_all a {
background-image: url(http://i.imgur.com/q8KOgBu.png);
background-position: 0% 50%;
background-repeat: no-repeat;
padding-left: 10px;
color: #666!important;
width: 140px !important;
}
#fa_toolbar #fa_right #fa_notifications.unread #notif_unread {
background-image: url(http://i.imgur.com/YgXineA.png);
background-position: 15px 0px;
background-repeat: no-repeat;
display: inline;
padding: 7px 20px 7px 0;
color: #666;
}
#fa_menulist {
display: none;
position: absolute;
list-style-type: none;
margin: 0px;
padding: 0px 10px;
min-width: 175px;
width: auto;
line-height: 32px;
z-index: 999;
margin-top: 8px !important;
border-top: 0px solid #FFFFFF !important;  
background: #fff !important;
border: 2px solid #dbdbdb !important;
}
#fa_toolbar #fa_hide {
display: none !important;
}  
#fa_icon, #fa_toolbar #fa_service {
color: #666 !important;
}
#fa_search #fa_magnifier {
background: #f0f0f0 !important;
background-image: url(http://i.imgur.com/fC96pEG.png) !important;
background-repeat: no-repeat !important;
background-position: 40% 40% !important;
border: 1px solid #c6c6c6 !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.10) !important;
position: absolute !important;
height: 24px !important;
margin-top: 8px !important;
width: 50px !important;
margin-left: 300px !important;
}
 
#fa_share {
margin-left: 20px;
font-size: 16px;
line-height: 30px !important;
display: none !important;
}
#fa_right #fa_notifications, #fa_welcome {
background: #f8f8f8;
border: 1px solid #d3d3d3;
box-shadow: 0 1px 0 rgba(0,0,0,0.05);
color: #333!important;
margin-top: 10px;
font-size: 11px;
font-weight: 700;
}
#fa_right #fa_menu #fa_welcome, #fa_right.notification #fa_menu #fa_welcome {
background: #f8f8f8;
border: 1px solid #d3d3d3;
box-shadow: 0 1px 0 rgba(0,0,0,0.05);
color: #333!important;
margin-top: 10px;
background-image: url(http://i.imgur.com/6vtRpv0.png);
background-repeat: no-repeat;
background-position: 100% 40%;
padding-right: 30px;
font-weight: bold;
font-size: 11px;
}
 
#fa_search #fa_textarea {
text-indent: 10px !important;  
border: 1px solid #ccc!important;
box-shadow: inset 0 1px 2px #eee!important;
height: 24px!important;
line-height: 24px!important;
margin-top: 8px!important;
padding: 0!important;
width: 300px!important;
border-radius: 0 !important;
}
#fa_left {
display: inline-block !important;
visibility: visible !important;
width: auto !important;
height: auto !important;
line-height: 30px !important;
margin-top: 10px;
}
#fa_toolbar {
left: 0px;
height: 50px !important;
color: #666 !important;
font-family: Helvetica, Verdana, Arial;
font-size: 16px !important;
z-index: 999;
background: #fff !important;
border-bottom: 2px solid #e8e8e8 !important;
}


m13
  افضل مساهمة2
نكمل الاشكال
الشكل الخامس للعارضة


http://image.prntscr.com/image/f321f22bccc54a39afbc5ee585afc8b3.png
الكود:


div#fa_toolbar        {background-color: transparent !important;}
div#fa_toolbar a      {
color:#616161 !important;
display: inline;
list-style-type: none;
width: auto;
}
div#fa_toolbar span#fa_left a#fa_service {color:#000 !important;}
div#fa_toolbar span#fa_left  {
margin-right: 0px !important;
background-image: -webkit-linear-gradient( rgba(242, 242, 242, 0.9), rgba(222, 222, 222, 0.9));
background-color: rgb(231, 231, 231);
border-bottom: 1px solid #333;
padding-top: 3px;  
}
div#fa_toolbar div#fa_right  {
background-image: -webkit-linear-gradient( rgba(242, 242, 242, 0.9), rgba(222, 222, 222, 0.9));
background-color: rgb(231, 231, 231);
border-bottom: 1px solid #333;
border-left: 1px solid #333;
border-bottom-left-radius: 11px;
}
div#fa_toolbar span#fa_share {
background-image: -webkit-linear-gradient( rgba(242, 242, 242, 0.9), rgba(222, 222, 222, 0.9));
background-color: rgb(231, 231, 231);
border-bottom: 1px solid #333;
border-right: 1px solid #333;
border-bottom-right-radius: 11px;
padding-right: 4px;
padding-top: 3px;
margin-left: 0px !important;
}
div#fa_toolbar span#fa_share_text {display: none !important;}
div#fa_toolbar div#fa_search    {display: none !important;}
#fa_toolbar #fa_right.notification #notif_list {
margin-left: -50px;
min-width: 200px;
left: auto !important;
right: 0px !important;
margin-right: -1px !important;
}
#fa_right #fa_notifications{
padding-top: 2px !important;
padding-bottom: 1px !important;
}
#fa_usermenu {text-align: left !important;}
#fa_menulist {
  margin-left: -1px !important;
  min-width: 300px !important;
  padding-left: 110px !important;
}
#fa_toolbar #fa_right #notif_list li.see_all {background-color: #fff !important;}
#fa_menulist a:link, #fa_menulist a:visited, #fa_menulist a {
display: block;
height: 26px;
line-height: 26px;
padding: 0px;
color: #616161 !important;
text-decoration: none;
text-shadow: none;
}
#fa_menulist li {padding:0px 10px !important;}
#fa_menulist li:hover {
  color:#fff;
  text-shadow:0 1px 0 #000;
  padding:0 10px;
  background-color: rgb(231, 231, 231);}
الشكل السادس

https://i.servimg.com/u/f76/16/76/93/88/tlbr10.png
الكود:

/* -- تغيير صور و تصميم عارضة المنتدى By M!Z0 PR0 -- */

#fa_toolbar,#fa_toolbar_hidden {
background:#0AC url(http://i39.servimg.com/u/f39/16/76/93/88/th-x10.png) repeat-x!important;}
#fa_toolbar,#fa_right,#fa_left,#fa_share {font:11px Tahoma!important;}
#fa_notifications,#fa_welcome,#fa_left,#fa_share_text {
font:bold 12px Tahoma!important;line-height:30px!important;text-shadow:1px 1px 0 #06A;}
#fa_right.welcome #fa_welcome,#fa_right.notification #fa_notifications {text-shadow:none;}
#fa_toolbar #fa_magnifier,#fa_toolbar #fa_hide,#fa_toolbar_hidden #fa_show,#fa_toolbar #fa_rss
{background-image:url('http://i39.servimg.com/u/f39/16/76/93/88/toolba10.png')!important;}
#fa_toolbar #fa_fb,#fa_toolbar #fa_twitter,#fa_toolbar #fa_gp,#fa_toolbar #fa_mail,#fa_toolbar #fa_rss
{background-image:url('http://i39.servimg.com/u/f39/16/76/93/88/toolba10.png')!important;}
#fa_toolbar #fa_rss {background-size:auto!important;background-position:0 0;}
/* -- M!Z0 PR0 --*/

شكل السابع


الكود
باللون الاخضر
الكود:

#fa_right #fa_menu #fa_welcome:hover, #fa_right #fa_notifications:hover, #fa_right a.rightHeaderLink:hover, #fa_right.welcome #fa_menu #fa_welcome, #fa_toolbar > #fa_right.notification > #fa_notifications {
    background-color: #88BA56!important;
    border-color: #88BA56!important;
    color: #FFF!important;
}
#notif_list li.see_all {
    background: #88BA56!important;
}
#fa_right #notif_list {
    background: #FFF!important;
    border: 1px solid #DDD!important;
    border-radius: 3px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    margin-top: 18px!important;
}
#notif_list:before {
    content: url('http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png');
    position: absolute;
    right: 10%;
    top: -10px;
}
#fa_menulist {
    display: none;
    position: absolute;
    list-style-type: none;
    margin: 0px;
    padding: 0px 10px;
    background-color: #FFFFFF;
    min-width: 175px;
    width: auto;
    border: 1px solid #333333;
    line-height: 32px;
    border-top: 0px solid #FFFFFF;
    z-index: 999;
}
#fa_menulist, #fa_toolbar #fa_right #notif_list {
    background: #FFF!important;
    border: 1px solid #DDD!important;
    border-radius: 3px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    margin-top: 18px!important;
}
#fa_toolbar {
    border-bottom: 1px solid #CCC;
}
#fa_menulist:before, #fa_toolbar #fa_right #notif_list:before {
    content: url('http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png');
    position: absolute;
    right: 10%;
    top: -10px;
}
#fa_toolbar #live_notif .fa_notification {
    background: #FFF!important;
    border: 1px solid #DDD;
    border-bottom-width: 2px;
    border-radius: 3px!important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.175);
    margin-top: 5px;
    opacity: 1!important;
}
#fa_toolbar #live_notif .fa_notification .content {
    padding-left: 40px;
    display: inline-block;
    background-image: url('http://www.illiweb.com/fa/notifications/notifications.png');
    background-repeat: no-repeat;
    height: 32px;
    font-size: 11px;
    color: #fff;
    overflow: hidden;
}
#fa_toolbar #live_notif .fa_notification .content {
    background-image: url(http://i18.servimg.com/u/f18/16/89/96/68/notifi10.png)!important;
    color: #555!important;
}
#fa_toolbar :link, #fa_toolbar :visited {
    color: #88BB55;
}
#fa_hide, #fa_show {
    background: url(http://i21.servimg.com/u/f21/19/34/58/13/untitl12.png) no-repeat 0 0 transparent!important;
}
#fa_right #fa_hide {
    background-color: transparent!important;
    border: none!important;
    margin-top: 0!important;
    padding: 0!important;
    transition: none!important;
}
#fa_hide:hover {
    background-position: -30px 0!important;
}
#fa_show {
    background-position: -60px 0!important;
}
#fa_show:hover {
    background-position: -90px 0!important;
}
#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_right a.rightHeaderLink {
    background-color: transparent!important;
    border: 1px solid #88BA56!important;
    border-radius: 3px!important;
    color: #88BA56!important;
    font-size: 11px!important;
    font-weight: 700!important;
    line-height: 22px!important;
    margin-top: 3px!important;
    padding: 0 6px!important;
    text-decoration: none!important;
    transition: 200ms;
}

/* search bar */
#fa_search { position:relative }

#fa_search #fa_magnifier {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/search10.png') no-repeat 50% 50% #1860DB !important;
  border:1px solid #88BA56;
  border-left:none;
  border-radius:0 3px 3px 0;
  height:22px !important;
  width:22px !important;
  top:3px;
  right:0px;
}

#fa_search #fa_textarea {
    background: #88BA56!important;
    border: 1px solid #88BA56!important;
    border-radius: 3px 0 0 3px!important;
    color: #88BA56!important;
    cursor: text;
    font-size: 12px!important;
    height: 16px!important;
    line-height: 12px!important;
    margin-right: 23px!important;
    padding: 3px 0 3px 1px !important;
    transition: 300ms;
    width: 0!important;
}
#fa_search:hover #fa_textarea, #fa_search #fa_textarea:hover, #fa_search #fa_textarea:focus {
  color:#FFF !important;
  background: #FFF!important
  width:150px !important;
  padding:3px !important;
  outline:none;
}
#fa_search #fa_magnifier {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/search10.png) no-repeat 50% 50% #88BA56!important;
    border: 1px solid #88BA56;
    border-left: none;
    border-radius: 0 3px 3px 0;
    height: 22px!important;
    right: 0;
    top: 3px;
    width: 22px!important;
}
#fa_share a {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/fa_sha10.png) no-repeat 0 0 transparent!important;
    border-radius: 25px;
    height: 25px!important;
    margin: -2px 3px 0!important;
    width: 25px!important;
}
a#fa_fb {
    background-position: -50px 0!important;
}
a#fa_fb:hover {
    background-position: -75px 0!important;
}
a#fa_twitter {
    background-position: 0 0!important;
}
a#fa_twitter:hover {
    background-position: -25px 0!important;
}
a#fa_gp {
    background-position: -98px 0!important;
}
a#fa_gp:hover {
    background-position: -123px 0!important;
}
a#fa_mail {
    background-position: -150px 0!important;
}
a#fa_mail:hover {
    background-position: -175px 0!important;
}
a#fa_rss {
    background-position: -199px 0!important;
}
a#fa_rss:hover {
    background-position: -224px 0!important;
}
#fa_share a:hover:after {
    background: #88BA56;
    height: 25px;
    margin-left: 0;
    margin-top: 0;
    width: 25px;
}
#fa_share a:after {
    background: transparent;
    border-radius: 30px;
    content: ".";
    display: block;
    font-size: 0;
    height: 35px;
    margin-left: -5px;
    margin-top: -5px;
    position: absolute;
    transition: 250ms;
    width: 35px;
    z-index: -1;
}
شكل الثامن

وهنا باللون الابيض

الكود:

#fa_right #fa_menu #fa_welcome:hover, #fa_right #fa_notifications:hover, #fa_right a.rightHeaderLink:hover, #fa_right.welcome #fa_menu #fa_welcome, #fa_toolbar > #fa_right.notification > #fa_notifications {
    background-color: #88BA56!important;
    border-color: #88BA56!important;
    color: #FFF!important;
}
#notif_list li.see_all {
    background: #88BA56!important;
}
#fa_right #notif_list {
    background: #FFF!important;
    border: 1px solid #DDD!important;
    border-radius: 3px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    margin-top: 18px!important;
}
#notif_list:before {
    content: url('http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png');
    position: absolute;
    right: 10%;
    top: -10px;
}
#fa_menulist {
    display: none;
    position: absolute;
    list-style-type: none;
    margin: 0px;
    padding: 0px 10px;
    background-color: #FFFFFF;
    min-width: 175px;
    width: auto;
    border: 1px solid #333333;
    line-height: 32px;
    border-top: 0px solid #FFFFFF;
    z-index: 999;
}
#fa_menulist, #fa_toolbar #fa_right #notif_list {
    background: #FFF!important;
    border: 1px solid #DDD!important;
    border-radius: 3px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    margin-top: 18px!important;
}
#fa_toolbar {
    border-bottom: 1px solid #CCC;
}
#fa_menulist:before, #fa_toolbar #fa_right #notif_list:before {
    content: url('http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png');
    position: absolute;
    right: 10%;
    top: -10px;
}
#fa_toolbar #live_notif .fa_notification {
    background: #FFF!important;
    border: 1px solid #DDD;
    border-bottom-width: 2px;
    border-radius: 3px!important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.175);
    margin-top: 5px;
    opacity: 1!important;
}
#fa_toolbar #live_notif .fa_notification .content {
    padding-left: 40px;
    display: inline-block;
    background-image: url('http://www.illiweb.com/fa/notifications/notifications.png');
    background-repeat: no-repeat;
    height: 32px;
    font-size: 11px;
    color: #fff;
    overflow: hidden;
}
#fa_toolbar #live_notif .fa_notification .content {
    background-image: url(http://i18.servimg.com/u/f18/16/89/96/68/notifi10.png)!important;
    color: #555!important;
}
#fa_toolbar :link, #fa_toolbar :visited {
    color: #88BB55;
}
#fa_hide, #fa_show {
    background: url(http://i21.servimg.com/u/f21/19/34/58/13/untitl12.png) no-repeat 0 0 transparent!important;
}
#fa_right #fa_hide {
    background-color: transparent!important;
    border: none!important;
    margin-top: 0!important;
    padding: 0!important;
    transition: none!important;
}
#fa_hide:hover {
    background-position: -30px 0!important;
}
#fa_show {
    background-position: -60px 0!important;
}
#fa_show:hover {
    background-position: -90px 0!important;
}
#fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_right a.rightHeaderLink {
    background-color: transparent!important;
    border: 1px solid #FFF!important;
    border-radius: 3px!important;
    color: #FFF!important;
    font-size: 11px!important;
    font-weight: 700!important;
    line-height: 22px!important;
    margin-top: 3px!important;
    padding: 0 6px!important;
    text-decoration: none!important;
    transition: 200ms;
}

/* search bar */
#fa_search { position:relative }

#fa_search #fa_magnifier {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/search10.png') no-repeat 50% 50% #1860DB !important;
  border:1px solid #88BA56;
  border-left:none;
  border-radius:0 3px 3px 0;
  height:22px !important;
  width:22px !important;
  top:3px;
  right:0px;
}

#fa_search #fa_textarea {
    background: #88BA56!important;
    border: 1px solid #88BA56!important;
    border-radius: 3px 0 0 3px!important;
    color: #88BA56!important;
    cursor: text;
    font-size: 12px!important;
    height: 16px!important;
    line-height: 12px!important;
    margin-right: 23px!important;
    padding: 3px 0 3px 1px !important;
    transition: 300ms;
    width: 0!important;
}
#fa_search:hover #fa_textarea, #fa_search #fa_textarea:hover, #fa_search #fa_textarea:focus {
  color:#FFF !important;
  background: #FFF!important
  width:150px !important;
  padding:3px !important;
  outline:none;
}
#fa_search #fa_magnifier {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/search10.png) no-repeat 50% 50% #88BA56!important;
    border: 1px solid #88BA56;
    border-left: none;
    border-radius: 0 3px 3px 0;
    height: 22px!important;
    right: 0;
    top: 3px;
    width: 22px!important;
}
#fa_share a {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/fa_sha10.png) no-repeat 0 0 transparent!important;
    border-radius: 25px;
    height: 25px!important;
    margin: -2px 3px 0!important;
    width: 25px!important;
}
a#fa_fb {
    background-position: -50px 0!important;
}
a#fa_fb:hover {
    background-position: -75px 0!important;
}
a#fa_twitter {
    background-position: 0 0!important;
}
a#fa_twitter:hover {
    background-position: -25px 0!important;
}
a#fa_gp {
    background-position: -98px 0!important;
}
a#fa_gp:hover {
    background-position: -123px 0!important;
}
a#fa_mail {
    background-position: -150px 0!important;
}
a#fa_mail:hover {
    background-position: -175px 0!important;
}
a#fa_rss {
    background-position: -199px 0!important;
}
a#fa_rss:hover {
    background-position: -224px 0!important;
}
#fa_share a:hover:after {
    background: #88BA56;
    height: 25px;
    margin-left: 0;
    margin-top: 0;
    width: 25px;
}
#fa_share a:after {
    background: transparent;
    border-radius: 30px;
    content: ".";
    display: block;
    font-size: 0;
    height: 35px;
    margin-left: -5px;
    margin-top: -5px;
    position: absolute;
    transition: 250ms;
    width: 35px;
    z-index: -1;
}


دمتم بخير


m13
  افضل مساهمة3
تسلم ايدك راااائع
  افضل مساهمة4
اشكال غاية في الجمال تسلم ايدك يا مبدعه شكرا
  افضل مساهمة5
رائع جدا ممتاز
  افضل مساهمة6
السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك
تحياتــي
لاتستطيع الرد على المواضيع في هذا المنتدى