ممكن حد يساعدني ازاي اعمل التأثيرات اللي في عارضة المنتدي

اذهب الى الأسفل

ممكن حد يساعدني ازاي اعمل التأثيرات اللي في عارضة المنتدي

مُساهمة من طرف hassan elmasry 22 في الأربعاء 3 أغسطس 2016 - 2:33

ممكن حد يقدر يعطيني  كود زي اللي في احلي منتدي لاايقونات المشاطره وخانة البحث الزووم  اكون شاكرا ليكم انا عايزها زي اللي في الصوره اللي انا رافعها دي  بس تكون بنفس الشكل وبها نفس التاثيرات اللي في عارضه احلي منتدي
انا عايز كود التاثير  والحركات اللي فيها يعني بمرور الماوس بيقي فيها تاثير انا عايز الكود ده بقي


منتظر منكم الردود


عدل سابقا من قبل hassan elmasry 22 في الأربعاء 3 أغسطس 2016 - 4:13 عدل 4 مرات
avatar
hassan elmasry 22
 
 

ذكر
عدد المساهمات : 72
معدل النشاط : 956
السُمعة : 0

http://sha3byat.forumotion.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: ممكن حد يساعدني ازاي اعمل التأثيرات اللي في عارضة المنتدي

مُساهمة من طرف hassan elmasry 22 في الأربعاء 3 أغسطس 2016 - 2:40

ممكن حد يدلني ازاي افعلها عندي علي منتداي

avatar
hassan elmasry 22
 
 

ذكر
عدد المساهمات : 72
معدل النشاط : 956
السُمعة : 0

http://sha3byat.forumotion.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: ممكن حد يساعدني ازاي اعمل التأثيرات اللي في عارضة المنتدي

مُساهمة من طرف DeLeTe في الأربعاء 3 أغسطس 2016 - 7:39

السلام عليكم.. اهلاً بك
ضع الكود التالي في ورقة تصميم الـcss: (لوحة الإدارة >> مظهر المنتدى >> ألوان >> ورقة تصميم css)
الكود:
 
#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;
}
avatar
DeLeTe
 
 

ذكر
عدد المساهمات : 3161
معدل النشاط : 7260
السُمعة : 73

https://help.ahlamontada.com#

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: ممكن حد يساعدني ازاي اعمل التأثيرات اللي في عارضة المنتدي

مُساهمة من طرف JoryAbdallah في الأربعاء 3 أغسطس 2016 - 15:48

@hassan elmasry 22 كتب:

ممكن حد يدلني ازاي افعلها عندي علي منتداي


الكود تم وضعه من المساعد برد تضعها بورقة css
وهنا يتم تفعيل العارضة شرح مصور 
help.ahlamontada.com/t1036704-topic
دمت بخير
avatar
JoryAbdallah
 
 

انثى
عدد المساهمات : 4212
معدل النشاط : 6115
السُمعة : 292

http://taqnyiat.ahlamontada.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: ممكن حد يساعدني ازاي اعمل التأثيرات اللي في عارضة المنتدي

مُساهمة من طرف hassan elmasry 22 في الأربعاء 3 أغسطس 2016 - 17:07

حضرتك تمام تم وضعها بس  في مشكله في زر البحث  لما بكتب اي حاجه مش بتظهر ليه  وعدسة البحث لاتعمل فما هي المشكله
avatar
hassan elmasry 22
 
 

ذكر
عدد المساهمات : 72
معدل النشاط : 956
السُمعة : 0

http://sha3byat.forumotion.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: ممكن حد يساعدني ازاي اعمل التأثيرات اللي في عارضة المنتدي

مُساهمة من طرف omarpop23 في الخميس 4 أغسطس 2016 - 4:11

الكود:

#fa_service {
    color: #39C!important;
    font-family: "Trebuchet MS", Arial, Verdana, Sans-serif;
    font-size: 16px;
    font-weight: 700;
}
    #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% #39C!important;
    border: 1px solid #39C;
    border-left: none;
    border-radius: 0 3px 3px 0;
    height: 22px!important;
    right: 0;
    top: 3px;
    width: 22px!important;
}
    #fa_search #fa_textarea:focus, #fa_search #fa_textarea:hover, #fa_search:hover #fa_textarea {
    background: #FFF!important;
    color: #444!important;
    outline: none;
    padding: 3px!important;
    width: 150px!important;
}
#fa_search #fa_textarea {
    background: #39C!important;
    border: 1px solid #39C!important;
    border-radius: 3px 0 0 3px!important;
    color: #39C!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_share a:hover:after {
    background: #39C;
    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_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:hover {
    background-position: -25px 0!important;
}
a#fa_twitter {
    background-position: 0 0!important;
}
    a#fa_gp:hover {
    background-position: -123px 0!important;
}
a#fa_gp {
    background-position: -98px 0!important;
}
a#fa_mail:hover {
    background-position: -175px 0!important;
}
    a#fa_mail {
    background-position: -150px 0!important;
}
 a#fa_rss {
    background-position: -199px 0!important;
}
#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 {
    background-image: url(http://i18.servimg.com/u/f18/16/89/96/68/notifi10.png)!important;
    color: #555!important;
  font-size: 11px!important;
}
    #fa_toolbar #live_notif .fa_notification a {
    color: #39C!important;
}
    #fa_hide, #fa_show {
    background: url(http://i21.servimg.com/u/f21/18/21/41/30/fa_arr10.png) no-repeat 0 0 transparent!important;
}
#fa_hide:hover {
    background-position: -30px 0!important;
}
#fa_show {
    background-position: -60px 0!important;
}
#fa_show:hover {
    background-position: -90px 0!important;
}
   
#notif_unread {
    color: #F93;
    font-weight: 700;
}
 #fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_right a.rightHeaderLink {
    background-color: transparent!important;
    border: 1px solid #39C!important;
    border-radius: 3px!important;
    color: #39C!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;
}
    #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: #39C!important;
    border-color: #39C!important;
    color: #FFF!important;
}
    #fa_right #fa_hide {
    background-color: transparent!important;
    border: none!important;
    margin-top: 0!important;
    padding: 0!important;
    transition: none!important;
}
    #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_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 #fa_right #notif_list li.see_all {
    background: #39C!important;
}
    #fa_toolbar #fa_right #notif_list li.see_all a {
    color: #fff;
    width: 100%;
}
جرب هذا الكود عزيزي
avatar
omarpop23
 
 

ذكر
عدد المساهمات : 1171
معدل النشاط : 3584
السُمعة : 123

http://www.best-devs.net

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: ممكن حد يساعدني ازاي اعمل التأثيرات اللي في عارضة المنتدي

مُساهمة من طرف hassan elmasry 22 في الأحد 7 أغسطس 2016 - 2:11

تمام شكرا لك اخي ( [b]0marp0p23 ) والشكر ايضا  للاخ ( DeLeTe )  والشكر لجميع الفريق تم الحل برجاء غلق الموضوع[/b]
avatar
hassan elmasry 22
 
 

ذكر
عدد المساهمات : 72
معدل النشاط : 956
السُمعة : 0

http://sha3byat.forumotion.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى