محتاج تحويل سكربت من ازرار الى قائمة

هذا الاسكربت هو مغير ستايل العيب انه الازرار لا تيجى مظبوط ولهذا السبب انا محتاج مساعدة فى تحويلة الى قائمة مندلسة عوضا على الازرار والتى لا تاتى بمكانها الصحيح

الكود:: <div class="MjanyFolatRight Color"> <map id="Color" name="Color"> <area alt="" coords="126, 18, 142, 35" href="javascript:chooseStyle('BdCo1',60)" shape="rect" target="_self" title="الأحمر" /> <area alt="" coords="105, 19, 123, 35" href="javascript:chooseStyle('BdCo2',60)" shape="rect" target="_self" title="الأزرق" /> <area alt="" coords="87, 19, 103, 35" href="javascript:chooseStyle('BdCo3',60)" shape="rect" target="_self" title="الموف" /> <area alt="" coords="68, 19, 85, 36" href="javascript:chooseStyle('BdCo4',60)" shape="rect" target="_self" title="الفيروزي" /> <area alt="" coords="47, 19, 65, 34" href="javascript:chooseStyle('BdCo5',60)" shape="rect" target="_self" title="الأخضر" /> <area alt="" coords="26, 19, 50, 35" href="javascript:chooseStyle('BdCo6',60)" shape="rect" target="_self" title="البرتقالي" /> </map> <img alt="" class="Color" src="vx_soft/Co1/img/spacer.gif" usemap="#Color" /></div> <link rel="stylesheet" type="text/css" href="http://micsoft.ga/vx_soft/Co2/Css.css" /> <link href="vx_soft/Co1/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo1" /> <link href="vx_soft/Co3/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo3" /> <link href="vx_soft/Co4/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo4" /> <link href="vx_soft/Co5/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo5" /> <link href="vx_soft/Co6/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo6" />

عذرا ارجو نقلة الى قسمة الصحيح
مشاكل التصميم او مشاكل اخرى
يبدو انه الصفحة علقت معى لانى بالرغم انى ضغط على قسم مشاكل المظهر والتصميم الا انى بعد كتابتى للموضوع وجدته داخل قسم دعم النطاقات
كيف هذا لا اعرف
I love you

ينقل الى قسم التومبلايت والاكواد

+

رابط المنتدى لمعاينة مباشره اخي

لكن استعمل هذا الوكد فى منتدى لاحلى منتدى ولكنى فاقد الرابط فى الوقت الحالى
على كلا الكود مستخدم حاليا على منتدى اخر
http://micsoft.ga
لقد لاحظت انه الجزىء الاساسى فى الكود هو الرابط
javascript:chooseStyle('BdCo1',60)" shape="rect" target="_self" title="عنوان" />
اى هذه الروابط

الكود:: javascript:chooseStyle('BdCo1',60)" shape="rect" target="_self" title="عنوان" /> javascript:chooseStyle('BdCo2',60)" shape="rect" target="_self" title="عنوان" /> javascript:chooseStyle('BdCo3',60)" shape="rect" target="_self" title="عنوان" /> javascript:chooseStyle('BdCo4',60)" shape="rect" target="_self" title="عنوان" /> javascript:chooseStyle('BdCo5',60)" shape="rect" target="_self" title="عنوان" /> javascript:chooseStyle('BdCo6',60)" shape="rect" target="_self" title="عنوان" />

هى المسؤله عن الوظيفة المطلوبة فى استبدال الاستايل وهى التى احتاج الى اضافتها فى فى قائمة مندلسة عوضا عن الازرار حيث انه الازرار لا تظهر بمكانها الصحيح
انا ما يحيرنى كيفية جعل القائمة بطريقة صحيحه

وضاح ان هناك نقص في اكواد الجافاسكربت والCSS يا عزيزي وكما ان موقعك غير مدعوم لخدمه احلى منتدى فليس لي خلفيه حول تشغيله على منتداك بأمكانك التوجه الى مواقع تطوير النسخه خاصتك لمساعدتك في تشغيلها لا أدري

انا محظوظ جدا
Mad

وصلتنى رسالة من المنتدى المفقود للتو بتسجيل عضو جديد
http://micsoft-test.forummotion.com
خانة لونك المفضل هى ما اتكلم عنه اريد ان اجعل الخانة لونك المفضل قائمة مندلسة تعمل بنفس وضع الازرار الملونة تلك
هذا هو المطلوب وبكل اختصار
لقد حاولت محاولة ولكنها لم تنجح باستخدام محرر CKEditor
قالب الهيدر الخاص بهذا المنتدى اذا كان مطلوب لتحويل هذه الازرار الى قائمة

الكود:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}> <head> <title>{SITENAME_TITLE}{PAGE_TITLE}</title> <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" />  <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />  {META_FAVICO} {META} {META_FB_LIKE} <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" /> {T_HEAD_STYLESHEET} {CSS} <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" /> <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" /> <script src="{JQUERY_PATH}" type="text/javascript"></script> <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script> <script src="https://cdn.adf.ly/js/link-converter.js"></script>  <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script> <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" /> <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>    <script type="text/javascript">//<![CDATA[ $(document).ready(function(){  pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); if(pm != null) { pm.focus(); }   report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}'); if(report != null) { report.focus(); }   ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});  });  var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;   $(document).ready( function() { $(window).resize(function() { var windowWidth = document.documentElement.clientWidth; var popupWidth = $("#login_popup").width(); var mypopup = $("#login_popup"); $("#login_popup").css({ "left": windowWidth/2 - popupWidth/2 }); }); });  //]]> </script> {GREETING_POPUP}  <style> .jcarousel-skin-tango .jcarousel-item { text-align:center; width: 10px; } .jcarousel-skin-tango .jcarousel-item-horizontal { margin-right: {switch_ticker.SPACING}px; } .jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: {switch_ticker.SPACING}px; } </style>  {HOSTING_JS}  <script type="text/javascript"> //<![CDATA[ var _gaq = _gaq || []; _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']); _gaq.push(['_trackPageview']); _gaq.push(['_trackPageLoadTime']);  _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']); _gaq.push(['b._trackPageview']);  (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); //]]> </script>  </head> <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">  <div id="hitskin_preview" style="display: block;"> <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1> <div class="content"> <p> {hitskin_preview.L_THEME_SITE_PREVIEW} <br /> <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span> </p> </div> </div>   <div id="login_popup"> <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0"> <tr height="25"> <td class="catLeft"> <span class="genmed module-title">{SITENAME}</span> </td> </tr> <tr height="{LOGIN_POPUP_MSG_HEIGHT}"> <td class="row1" align="left" valign="top"> <div id="login_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="mainoption" value="{L_LOGIN}" /> <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" /> <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" /> </form> </div> <span class="genmed">{LOGIN_POPUP_MSG}</span> </td> </tr> </table> </div>  <a name="top"></a> {JAVASCRIPT}  <link rel="stylesheet" type="text/css" href="http://micsoft.ga/vx_soft/Co2/Css.css" /> <link href="http://micsoft.ga/vx_soft/Co1/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo1" /> <link href="http://micsoft.ga/vx_soft/Co3/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo3" /> <link href="http://micsoft.ga/vx_soft/Co4/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo4" /> <link href="http://micsoft.ga/vx_soft/Co5/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo5" /> <link href="http://micsoft.ga/vx_soft/Co6/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo6" /> <link rel="stylesheet" href="http://micsoft.ga/vx_soft/css/owl.carousel.css" type="text/css" /> <script src="http://micsoft.ga/vx_soft/js/BdCssSwitchColor.js" type="text/javascript"></script> <script src="http://micsoft.ga/vx_soft/js/owl.carousel.js" type="text/javascript"></script>    <div class="Content">  <div class="MjanyW3 MjanyMarginAuto Header"> <div class="HeaderTop"> <div class="HeaderTopRight MjanyFolatRight"> <a title="الرئيسية" href="/"> <img alt="" src="http://micsoft.ga/vx_soft/Co1/img/logo.png" /></a> </div> <div class="MjanyFolatLeft HeaderTopLeft"> <IFRAME FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=728 HEIGHT=90 SRC="http://tag.tlvmedia.com/?id=103009_144091&ad_type=banner&ad_size=728x90&referrer=$REFURL$"></IFRAME> </div> </div> <div class="HeaderCenter"> <div class="HeaderCenterRight MjanyFolatRight"> <div class="HeaderLogin">   <div>  <form action="/login.forum?redirect=/" method="post" name="form_login">  <div class="HeaderLoignTop"> <div class="UserBox"> <input id="post" name="username" onblur="if(this.value=='')this.value='اسم العضو' " onfocus="if(this.value=='اسم العضو')this.value=''" type="text" value="اسم العضو" /> </div> <div class="PassBox"> <input id="post" name="password" tabindex="102" type="password" /> </div> <div class="EnterBut MjanyFolatRight"> <input accesskey="s" class="EnterBut" src="http://micsoft.ga/vx_soft/Co1/img/spacer.gif" tabindex="104" title="ادخل اسم العضو وكلمة المرور الخاصة بك في الحقول المجاورة لتسجيل الدخول, أو اضغط على رابط 'التسجيل' لإنشاء حساب خاص بك." name="login" type="submit" type="image" value="تسجيل الدخول" /> </div> </div> <div class="HeaderLoignBottom"> <label class="MjanyFolatRight" for="cb_cookieuser_navbar"> <input id="post" accesskey="c" name="autologin" tabindex="103" type="checkbox" value="1" /> تذكرنى ؟ </label> <div class="HeaderLoignLinks MjanyFolatRight"> <ul> <li><a href="/register">عضوية جديدة</a> </li> <li><a>|</a></li> <li><a href="/profile?mode=sendpassword">نسيت كلمة المرور ؟</a> </li> </ul> </div> </div>  </form>  </div>   <div class="HeaderLogin"> <div align="center" class="smallfont"> <strong><span style="color: Red;">{LOGGED_AS}</span></strong> <div>{LAST_VISIT_DATE}</div> <a href="/search?search_id=newposts"><font color="#000080">مشاركات جديده</font></a><font color="#000080"> <span lang="ar-sa">|</span>  </font> <a href="/search?search_id=egosearch"> <font color="#000080">مشاركاتي</font></a><span lang="ar-sa"><font color="#000080">  |  </font></span> <a href="/search?search_id=unanswered"> <span style="text-decoration: none"><font color="#000080">مواضيع لم يتم الرد عليها</font></span></a> </div> </div>   </div> </div> <div class="MjanyFolatLeft SearchBody"> <div class="SearchBodyInputBg">  <form action="/search.forum" method="post"> <div class="SearchBox"> <input name="search_keywords" onblur="if(this.value==''){this.value='ادخل كلمات البحث...'};" onfocus="if(this.value=='ادخل كلمات البحث...'){this.value=''};" tabindex="1001" type="text" value="ادخل كلمات البحث..." /> </div> <div class="SearchEnterBut MjanyFolatRight"> <input accesskey="s" class="SearchEnterBut" src="http://micsoft.ga/vx_soft/Co1/img/spacer.gif" tabindex="104" title="ادخل اسم العضو وكلمة المرور الخاصة بك في الحقول المجاورة لتسجيل الدخول, أو اضغط على رابط 'التسجيل' لإنشاء حساب خاص بك." type="image" value="تسجيل الدخول" /> </div> </form> </div> <div class="MjanyTextRight"> | <a href="/search">البحث المتقدم </a></div> </div> </div> <div class="HeaderBottom"> <div class="MjanyFolatRight HeaderBottomRight"> <ul> <li><a href="/">الرئيسية</a></li> <li class="select"><a href="/forum">المنتدي</a></li> <li><a href="/register">التسجيل</a></li> <li><a href="/contact">اتصل بنا</a></li> <li><a href="http://www.عمالقةالتطوير.com/">اعلن معنا</a></li> </ul> </div> <div class="MjanyFolatRight Color"> <map id="Color" name="Color"> <area alt="" coords="146, 18, 162, 35" href="javascript:chooseStyle('BdCo1',60)" shape="rect" target="_self" title="الأحمر" /> <area alt="" coords="125, 19, 143, 35" href="javascript:chooseStyle('BdCo2',60)" shape="rect" target="_self" title="الأزرق" /> <area alt="" coords="107, 19, 123, 35" href="javascript:chooseStyle('BdCo3',60)" shape="rect" target="_self" title="الموف" /> <area alt="" coords="88, 19, 105, 36" href="javascript:chooseStyle('BdCo4',60)" shape="rect" target="_self" title="الفيروزي" /> <area alt="" coords="67, 19, 85, 34" href="javascript:chooseStyle('BdCo5',60)" shape="rect" target="_self" title="الأخضر" /> <area alt="" coords="46, 19, 66, 35" href="javascript:chooseStyle('BdCo6',60)" shape="rect" target="_self" title="البرتقالي" /> </map> <img alt="" class="Color" src="http://micsoft.ga/vx_soft/Co1/img/spacer.gif" usemap="#Color" /></div> </div> <div class="HeaderSlide"> <div class="MjanyFolatRight HeaderSlideRight"> <a href="#"> <img alt="" class="HeaderSlideRight" src="http://micsoft.ga/vx_soft/Co1/img/spacer.gif" /></a></div> <div class="MjanyFolatRight HeaderSlideCenter"> <div id="owl-demo" class="owl-carousel"> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> </div> </div> <div class="MjanyFolatLeft HeaderSlideLeft"> <a href="#"> <img alt="" class="HeaderSlideLeft" src="http://micsoft.ga/vx_soft/Co1/img/spacer.gif" /></a></div> </div> </div> <style> #owl-demo .item{ margin: 0px 7.5px; } #owl-demo .item img{ display: block; width: 100%; height: 150px; } </style> <script> $(document).ready(function() { $("#owl-demo").owlCarousel({ items : 4, autoPlay : 5000, lazyLoad : true, pagination:false, navigation : true }); }); </script>  <div class="MjanyW2 MjanyMarginAuto MjanyBody">  <div align="center"> <div class="page" style="width:100%; text-align:right"> <div style="padding:0px 0px 0px 0px" align="right"> <br />  <div class="Cat">  <div class="CatTop"> <div class="CatTop_Right"> <h1> انت الآن تتصفح {L_INDEX}</h1> </div> <div class="CatTop_Left"> </div> </div>  <div class="CatCenter_Right"> <div class="CatCenter_Left">  <div class="CatBody">  <table align="center" border="0" cellpadding="6" cellspacing="0" class="tborder" width="100%"> <tr> <td class="alt1" width="100%"> <div class="navbar" style="font-size:10pt"><strong> <div class="nav"><img src="http://i69.servimg.com/u/f69/18/14/50/08/navbit12.gif" class="inlineimg" alt="" border="0" height="15" width="15" /> <a class="nav" href="{U_INDEX}">{L_INDEX} </a>{NAV_CAT_DESC}</div> <font face="Tahoma"><span style="font-size: 10pt" font-weight="bold"><img src="http://i69.servimg.com/u/f69/18/14/50/08/navbit13.gif" height="15" width="30" /> {PAGE_TITLE}</span></font></strong></div> </td> </tr> </table>   <div class="tborder" style="padding:0px; border-top-width:0px"> <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center"> <tr align="center">  <td class="vbmenu_control"><a href="/register" rel="nofollow">التسجيل</a></td> <td class="vbmenu_control"><a href="/h2-ads" rel="nofollow">اعلن معنا</a></td> <td class="vbmenu_control"><a rel="help" href="/faq" accesskey="5">التعليمـــات</a></td> <td class="vbmenu_control"><a href="/search?search_id=unanswered">موآضـــيع لم يتم آلرد عليهآ</a></td> <td class="vbmenu_control"><a href="/search?search_id=newposts" accesskey="2">مشاركات اليوم</a></td> <td class="vbmenu_control"><a id="navbar_search" href="/search" accesskey="4" rel="nofollow">محرك البحث</a> </td>   <td class="vbmenu_control"><a href="/forum">الرئيسية</a></td> <td class="vbmenu_control"><a href="/profile?mode=editprofile">لوحة التحكم</a></td> <td class="vbmenu_control"><a href="/h2-ads" rel="nofollow">اعلن معنا</a></td> <td class="vbmenu_control"><a href="#" accesskey="5">قوانين المنتدى</a></td> <td class="vbmenu_control"><a href="/memberlist" accesskey="5">الاعضاء</a></td> <td class="vbmenu_control"><a href="/search?search_id=newposts" accesskey="2">المشاركات الجديدة</a></td> <td class="vbmenu_control"><a id="navbar_search" href="/search" accesskey="4" rel="nofollow">محرك البحث</a> <script type="text/javascript"> vbmenu_register("navbar_search"); </script></td> <td class="vbmenu_control"><a href="{U_PRIVATEMSGS}" rel="nofollow">{PRIVATE_MESSAGE_INFO}</a><script type="text/javascript"> vbmenu_register("usercptools"); </script></td> <td class="vbmenu_control"><a rel="nofollow" href="{U_LOGIN_LOGOUT}" onclick="return log_out('هل أنت متأكد برغبتك في الخروج من المنتدى؟')">{L_LOGIN_LOGOUT}</a></td>  </tr> </table> </div>  </div> </div> </div>  <div class="CatBottom"> <div class="CatBottom_Right"> </div> <div class="CatBottom_Left"> </div> </div> </div>  <div style="clear: both;"></div>  <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline"> <tr> <td align="left" class="row1"> <div id="fa_ticker_container"> <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">  <li>{switch_ticker.ticker_row.ELEMENT}</li>  </ul> </div> </td> </tr> </table> </div>   <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline"> <tr> <td align="left" class="row1"> <div id="fa_ticker_container"> <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;"> <div class="fa_ticker_content">  <div>{switch_ticker.ticker_row.ELEMENT}</div>  </div> </div> </div> </td> </tr> </table> </div>  <div id="page-body"> <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}> <table cellpadding="0" cellspacing="0" width="100%" class="three-col"> <tbody> <tr> <td valign="top" width="100%"> <div id="center">  {giefmod_index1.MODVAR}  <div style="height:{SPACE_ROW}px"></div>   </div> </td> </tr> <tr> <td valign="top" width="100%">  </td> </tr> </tbody> </table> </div> </div> </body> </html>

خانة لونك المفضل هى ما اتكلم عنه اريد ان اجعل الخانة لونك المفضل قائمة مندلسة تعمل بنفس وضع الازرار الملونة تلك

يعني تقصد ان تجعل المرور بالماوس عليها تنزل قائمه بهذه الخيارات الألوان ؟

يمكنك تغير

الكود:: <area alt="" coords="146, 18, 162, 35" href="javascript:chooseStyle('BdCo1',60)" shape="rect" target="_self" title="الأحمر" />

لتغيرها على شكل صورة

الكود:: <a href="javascript:chooseStyle('BdCo4',60);" title="الاحمر"><img src="http://2img.net/i/fa/prosilver/icon_user_profile.png"></a>

او على شكل كتابة

الكود:: <a href="javascript:chooseStyle('BdCo2',60);">الأحمر</a>

كما تم تركيبهم على الهيدر يمكنك معاينة الشكل

الكود:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}> <head> <title>{SITENAME_TITLE}{PAGE_TITLE}</title> <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" />  <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />  {META_FAVICO} {META} {META_FB_LIKE} <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" /> {T_HEAD_STYLESHEET} {CSS} <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" /> <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" /> <script src="{JQUERY_PATH}" type="text/javascript"></script> <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script> <script src="https://cdn.adf.ly/js/link-converter.js"></script>  <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script> <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" /> <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>    <script type="text/javascript">//<![CDATA[ $(document).ready(function(){  pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); if(pm != null) { pm.focus(); }   report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}'); if(report != null) { report.focus(); }   ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});  });  var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;   $(document).ready( function() { $(window).resize(function() { var windowWidth = document.documentElement.clientWidth; var popupWidth = $("#login_popup").width(); var mypopup = $("#login_popup"); $("#login_popup").css({ "left": windowWidth/2 - popupWidth/2 }); }); });  //]]> </script> {GREETING_POPUP}  <style> .jcarousel-skin-tango .jcarousel-item { text-align:center; width: 10px; } .jcarousel-skin-tango .jcarousel-item-horizontal { margin-right: {switch_ticker.SPACING}px; } .jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: {switch_ticker.SPACING}px; } </style>  {HOSTING_JS}  <script type="text/javascript"> //<![CDATA[ var _gaq = _gaq || []; _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']); _gaq.push(['_trackPageview']); _gaq.push(['_trackPageLoadTime']);  _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']); _gaq.push(['b._trackPageview']);  (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); //]]> </script>  </head> <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">  <div id="hitskin_preview" style="display: block;"> <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1> <div class="content"> <p> {hitskin_preview.L_THEME_SITE_PREVIEW} <br /> <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span> </p> </div> </div>   <div id="login_popup"> <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0"> <tr height="25"> <td class="catLeft"> <span class="genmed module-title">{SITENAME}</span> </td> </tr> <tr height="{LOGIN_POPUP_MSG_HEIGHT}"> <td class="row1" align="left" valign="top"> <div id="login_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="mainoption" value="{L_LOGIN}" /> <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" /> <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" /> </form> </div> <span class="genmed">{LOGIN_POPUP_MSG}</span> </td> </tr> </table> </div>  <a name="top"></a> {JAVASCRIPT}  <link rel="stylesheet" type="text/css" href="http://micsoft.ga/vx_soft/Co2/Css.css" /> <link href="http://micsoft.ga/vx_soft/Co1/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo1" /> <link href="http://micsoft.ga/vx_soft/Co3/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo3" /> <link href="http://micsoft.ga/vx_soft/Co4/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo4" /> <link href="http://micsoft.ga/vx_soft/Co5/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo5" /> <link href="http://micsoft.ga/vx_soft/Co6/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo6" /> <link rel="stylesheet" href="http://micsoft.ga/vx_soft/css/owl.carousel.css" type="text/css" /> <script src="http://micsoft.ga/vx_soft/js/BdCssSwitchColor.js" type="text/javascript"></script> <script src="http://micsoft.ga/vx_soft/js/owl.carousel.js" type="text/javascript"></script>    <div class="Content">  <div class="MjanyW3 MjanyMarginAuto Header"> <div class="HeaderTop"> <div class="HeaderTopRight MjanyFolatRight"> <a title="الرئيسية" href="/"> <img alt="" src="http://micsoft.ga/vx_soft/Co1/img/logo.png" /></a> </div> <div class="MjanyFolatLeft HeaderTopLeft"> <IFRAME FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=728 HEIGHT=90 SRC="http://tag.tlvmedia.com/?id=103009_144091&ad_type=banner&ad_size=728x90&referrer=$REFURL$"></IFRAME> </div> </div> <div class="HeaderCenter"> <div class="HeaderCenterRight MjanyFolatRight"> <div class="HeaderLogin">   <div>  <form action="/login.forum?redirect=/" method="post" name="form_login">  <div class="HeaderLoignTop"> <div class="UserBox"> <input id="post" name="username" onblur="if(this.value=='')this.value='اسم العضو' " onfocus="if(this.value=='اسم العضو')this.value=''" type="text" value="اسم العضو" /> </div> <div class="PassBox"> <input id="post" name="password" tabindex="102" type="password" /> </div> <div class="EnterBut MjanyFolatRight"> <input accesskey="s" class="EnterBut" src="http://micsoft.ga/vx_soft/Co1/img/spacer.gif" tabindex="104" title="ادخل اسم العضو وكلمة المرور الخاصة بك في الحقول المجاورة لتسجيل الدخول, أو اضغط على رابط 'التسجيل' لإنشاء حساب خاص بك." name="login" type="submit" type="image" value="تسجيل الدخول" /> </div> </div> <div class="HeaderLoignBottom"> <label class="MjanyFolatRight" for="cb_cookieuser_navbar"> <input id="post" accesskey="c" name="autologin" tabindex="103" type="checkbox" value="1" /> تذكرنى ؟ </label> <div class="HeaderLoignLinks MjanyFolatRight"> <ul> <li><a href="/register">عضوية جديدة</a> </li> <li><a>|</a></li> <li><a href="/profile?mode=sendpassword">نسيت كلمة المرور ؟</a> </li> </ul> </div> </div>  </form>  </div>   <div class="HeaderLogin"> <div align="center" class="smallfont"> <strong><span style="color: Red;">{LOGGED_AS}</span></strong> <div>{LAST_VISIT_DATE}</div> <a href="/search?search_id=newposts"><font color="#000080">مشاركات جديده</font></a><font color="#000080"> <span lang="ar-sa">|</span>  </font> <a href="/search?search_id=egosearch"> <font color="#000080">مشاركاتي</font></a><span lang="ar-sa"><font color="#000080">  |  </font></span> <a href="/search?search_id=unanswered"> <span style="text-decoration: none"><font color="#000080">مواضيع لم يتم الرد عليها</font></span></a> </div> </div>   </div> </div> <div class="MjanyFolatLeft SearchBody"> <div class="SearchBodyInputBg">  <form action="/search.forum" method="post"> <div class="SearchBox"> <input name="search_keywords" onblur="if(this.value==''){this.value='ادخل كلمات البحث...'};" onfocus="if(this.value=='ادخل كلمات البحث...'){this.value=''};" tabindex="1001" type="text" value="ادخل كلمات البحث..." /> </div> <div class="SearchEnterBut MjanyFolatRight"> <input accesskey="s" class="SearchEnterBut" src="http://micsoft.ga/vx_soft/Co1/img/spacer.gif" tabindex="104" title="ادخل اسم العضو وكلمة المرور الخاصة بك في الحقول المجاورة لتسجيل الدخول, أو اضغط على رابط 'التسجيل' لإنشاء حساب خاص بك." type="image" value="تسجيل الدخول" /> </div> </form> </div> <div class="MjanyTextRight"> | <a href="/search">البحث المتقدم </a></div> </div> </div> <div class="HeaderBottom"> <div class="MjanyFolatRight HeaderBottomRight"> <ul> <li><a href="/">الرئيسية</a></li> <li class="select"><a href="/forum">المنتدي</a></li> <li><a href="/register">التسجيل</a></li> <li><a href="/contact">اتصل بنا</a></li> <li><a href="http://www.عمالقةالتطوير.com/">اعلن معنا</a></li> </ul> </div> <div class="MjanyFolatRight Color"> <style type="text/css"> #cnmudrdown{ width:100%; height:40px; display:block; padding:0; margin:0 0 22px 0; background:#222222; } #cnmudmenu,#drop{ list-style:none; direction:rtl; padding:0; margin:0; } #cnmudmenu li { float:right; } #cnmudmenu li a { display:block; padding:11px 15px; color:#fff; text-decoration:none; font:15px Tahoma, Geneva, sans-serif; font-weight:bold; } #cnmudmenu li a:hover { background:#ccc; color:#000; transition:all .7s ease 0s; } #drop { position:absolute; display:none; list-style:none; z-index:60; } #drop li { float:none; } #drop li a { background:#000; border-bottom:1px solid #bbb; padding:5px 10px; width:150px; } #sub:hover #drop { display:block; } #drop2:hover #cnmudmenu3 { display:block; } #cnmudmenu3 { position:absolute; display:none; margin-right:131px; margin-top:-28px; } #cnmudmenu3 li{ list-style:none; margin-left:100px; } #cnmudmenu3 li a { width:150px; } </style> <div id='cnmudrdown'> <ul id="cnmudmenu"> <li id="sub"> <a href="#">لونك المفضل</a> <ul id="drop"> <li> <a href="javascript:chooseStyle('BdCo2',60);" title="الازرق"><img src="http://2img.net/i/fa/prosilver/icon_user_profile.png"></a></li> <li> <a href="javascript:chooseStyle('BdCo1',60);">الأحمر</a> </li> </ul> </li> </ul> </div> <img alt="" class="Color" src="http://micsoft.ga/vx_soft/Co1/img/spacer.gif" usemap="#Color" /></div> </div> <div class="HeaderSlide"> <div class="MjanyFolatRight HeaderSlideRight"> <a href="#"> <img alt="" class="HeaderSlideRight" src="http://micsoft.ga/vx_soft/Co1/img/spacer.gif" /></a></div> <div class="MjanyFolatRight HeaderSlideCenter"> <div id="owl-demo" class="owl-carousel"> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> </div> </div> <div class="MjanyFolatLeft HeaderSlideLeft"> <a href="#"> <img alt="" class="HeaderSlideLeft" src="http://micsoft.ga/vx_soft/Co1/img/spacer.gif" /></a></div> </div> </div> <style> #owl-demo .item{ margin: 0px 7.5px; } #owl-demo .item img{ display: block; width: 100%; height: 150px; } </style> <script> $(document).ready(function() { $("#owl-demo").owlCarousel({ items : 4, autoPlay : 5000, lazyLoad : true, pagination:false, navigation : true }); }); </script>  <div class="MjanyW2 MjanyMarginAuto MjanyBody">  <div align="center"> <div class="page" style="width:100%; text-align:right"> <div style="padding:0px 0px 0px 0px" align="right"> <br />  <div class="Cat">  <div class="CatTop"> <div class="CatTop_Right"> <h1> انت الآن تتصفح {L_INDEX}</h1> </div> <div class="CatTop_Left"> </div> </div>  <div class="CatCenter_Right"> <div class="CatCenter_Left">  <div class="CatBody">  <table align="center" border="0" cellpadding="6" cellspacing="0" class="tborder" width="100%"> <tr> <td class="alt1" width="100%"> <div class="navbar" style="font-size:10pt"><strong> <div class="nav"><img src="http://i69.servimg.com/u/f69/18/14/50/08/navbit12.gif" class="inlineimg" alt="" border="0" height="15" width="15" /> <a class="nav" href="{U_INDEX}">{L_INDEX} </a>{NAV_CAT_DESC}</div> <font face="Tahoma"><span style="font-size: 10pt" font-weight="bold"><img src="http://i69.servimg.com/u/f69/18/14/50/08/navbit13.gif" height="15" width="30" /> {PAGE_TITLE}</span></font></strong></div> </td> </tr> </table>   <div class="tborder" style="padding:0px; border-top-width:0px"> <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center"> <tr align="center">  <td class="vbmenu_control"><a href="/register" rel="nofollow">التسجيل</a></td> <td class="vbmenu_control"><a href="/h2-ads" rel="nofollow">اعلن معنا</a></td> <td class="vbmenu_control"><a rel="help" href="/faq" accesskey="5">التعليمـــات</a></td> <td class="vbmenu_control"><a href="/search?search_id=unanswered">موآضـــيع لم يتم آلرد عليهآ</a></td> <td class="vbmenu_control"><a href="/search?search_id=newposts" accesskey="2">مشاركات اليوم</a></td> <td class="vbmenu_control"><a id="navbar_search" href="/search" accesskey="4" rel="nofollow">محرك البحث</a> </td>   <td class="vbmenu_control"><a href="/forum">الرئيسية</a></td> <td class="vbmenu_control"><a href="/profile?mode=editprofile">لوحة التحكم</a></td> <td class="vbmenu_control"><a href="/h2-ads" rel="nofollow">اعلن معنا</a></td> <td class="vbmenu_control"><a href="#" accesskey="5">قوانين المنتدى</a></td> <td class="vbmenu_control"><a href="/memberlist" accesskey="5">الاعضاء</a></td> <td class="vbmenu_control"><a href="/search?search_id=newposts" accesskey="2">المشاركات الجديدة</a></td> <td class="vbmenu_control"><a id="navbar_search" href="/search" accesskey="4" rel="nofollow">محرك البحث</a> <script type="text/javascript"> vbmenu_register("navbar_search"); </script></td> <td class="vbmenu_control"><a href="{U_PRIVATEMSGS}" rel="nofollow">{PRIVATE_MESSAGE_INFO}</a><script type="text/javascript"> vbmenu_register("usercptools"); </script></td> <td class="vbmenu_control"><a rel="nofollow" href="{U_LOGIN_LOGOUT}" onclick="return log_out('هل أنت متأكد برغبتك في الخروج من المنتدى؟')">{L_LOGIN_LOGOUT}</a></td>  </tr> </table> </div>  </div> </div> </div>  <div class="CatBottom"> <div class="CatBottom_Right"> </div> <div class="CatBottom_Left"> </div> </div> </div>  <div style="clear: both;"></div>  <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline"> <tr> <td align="left" class="row1"> <div id="fa_ticker_container"> <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">  <li>{switch_ticker.ticker_row.ELEMENT}</li>  </ul> </div> </td> </tr> </table> </div>   <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline"> <tr> <td align="left" class="row1"> <div id="fa_ticker_container"> <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;"> <div class="fa_ticker_content">  <div>{switch_ticker.ticker_row.ELEMENT}</div>  </div> </div> </div> </td> </tr> </table> </div>  <div id="page-body"> <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}> <table cellpadding="0" cellspacing="0" width="100%" class="three-col"> <tbody> <tr> <td valign="top" width="100%"> <div id="center">  {giefmod_index1.MODVAR}  <div style="height:{SPACE_ROW}px"></div>   </div> </td> </tr> <tr> <td valign="top" width="100%">  </td> </tr> </tbody> </table> </div> </div> </body> </html>

ثم اكمل على ما يناسب طلبك Wink

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

new.moon كتب:يمكنك تغير
الكود:
<area alt="" coords="146, 18, 162, 35" href="javascript:chooseStyle('BdCo1',60)" shape="rect" target="_self" title="الأحمر" />

لتغيرها على شكل صورة
الكود:
<a href="javascript:chooseStyle('BdCo4',60);" title="الاحمر"><img src="http://2img.net/i/fa/prosilver/icon_user_profile.png"></a>

او على شكل كتابة
الكود:
<a href="javascript:chooseStyle('BdCo2',60);">الأحمر</a>

وهل تريده قائمه منسدلة ؟

نعم والافضل ان تكون قائمة بشكل عادى اذا كان ممكن او نفس القائمة التى صممتها ودمجتها بالقالب
واسف جدا انى تاعبك معاى

شوف القالب ده ركبو وعاين على اللون لما تمرر الماوس تنزل القائمه فيها 1 زر على شكل صوره 2 زر على شكل كتابه فاي واحد منهم تريده ؟
كما اللون المحدد اسود اي لون تريده اخر استطيع تغيره لك

الكود:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}> <head> <title>{SITENAME_TITLE}{PAGE_TITLE}</title> <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" />  <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />  {META_FAVICO} {META} {META_FB_LIKE} <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" /> {T_HEAD_STYLESHEET} {CSS} <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" /> <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" /> <script src="{JQUERY_PATH}" type="text/javascript"></script> <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script> <script src="https://cdn.adf.ly/js/link-converter.js"></script>  <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script> <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" /> <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>    <script type="text/javascript">//<![CDATA[ $(document).ready(function(){  pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); if(pm != null) { pm.focus(); }   report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}'); if(report != null) { report.focus(); }   ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});  });  var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;   $(document).ready( function() { $(window).resize(function() { var windowWidth = document.documentElement.clientWidth; var popupWidth = $("#login_popup").width(); var mypopup = $("#login_popup"); $("#login_popup").css({ "left": windowWidth/2 - popupWidth/2 }); }); });  //]]> </script> {GREETING_POPUP}  <style> .jcarousel-skin-tango .jcarousel-item { text-align:center; width: 10px; } .jcarousel-skin-tango .jcarousel-item-horizontal { margin-right: {switch_ticker.SPACING}px; } .jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: {switch_ticker.SPACING}px; } </style>  {HOSTING_JS}  <script type="text/javascript"> //<![CDATA[ var _gaq = _gaq || []; _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']); _gaq.push(['_trackPageview']); _gaq.push(['_trackPageLoadTime']);  _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']); _gaq.push(['b._trackPageview']);  (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); //]]> </script>  </head> <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">  <div id="hitskin_preview" style="display: block;"> <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1> <div class="content"> <p> {hitskin_preview.L_THEME_SITE_PREVIEW} <br /> <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span> </p> </div> </div>   <div id="login_popup"> <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0"> <tr height="25"> <td class="catLeft"> <span class="genmed module-title">{SITENAME}</span> </td> </tr> <tr height="{LOGIN_POPUP_MSG_HEIGHT}"> <td class="row1" align="left" valign="top"> <div id="login_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="mainoption" value="{L_LOGIN}" /> <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" /> <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" /> </form> </div> <span class="genmed">{LOGIN_POPUP_MSG}</span> </td> </tr> </table> </div>  <a name="top"></a> {JAVASCRIPT}  <link rel="stylesheet" type="text/css" href="http://micsoft.ga/vx_soft/Co2/Css.css" /> <link href="http://micsoft.ga/vx_soft/Co1/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo1" /> <link href="http://micsoft.ga/vx_soft/Co3/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo3" /> <link href="http://micsoft.ga/vx_soft/Co4/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo4" /> <link href="http://micsoft.ga/vx_soft/Co5/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo5" /> <link href="http://micsoft.ga/vx_soft/Co6/Css.css" media="screen" rel="alternate stylesheet" type="text/css" title="BdCo6" /> <link rel="stylesheet" href="http://micsoft.ga/vx_soft/css/owl.carousel.css" type="text/css" /> <script src="http://micsoft.ga/vx_soft/js/BdCssSwitchColor.js" type="text/javascript"></script> <script src="http://micsoft.ga/vx_soft/js/owl.carousel.js" type="text/javascript"></script>    <div class="Content">  <div class="MjanyW3 MjanyMarginAuto Header"> <div class="HeaderTop"> <div class="HeaderTopRight MjanyFolatRight"> <a title="الرئيسية" href="/"> <img alt="" src="http://micsoft.ga/vx_soft/Co1/img/logo.png" /></a> </div> <div class="MjanyFolatLeft HeaderTopLeft"> <IFRAME FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=728 HEIGHT=90 SRC="http://tag.tlvmedia.com/?id=103009_144091&ad_type=banner&ad_size=728x90&referrer=$REFURL$"></IFRAME> </div> </div> <div class="HeaderCenter"> <div class="HeaderCenterRight MjanyFolatRight"> <div class="HeaderLogin">   <div>  <form action="/login.forum?redirect=/" method="post" name="form_login">  <div class="HeaderLoignTop"> <div class="UserBox"> <input id="post" name="username" onblur="if(this.value=='')this.value='اسم العضو' " onfocus="if(this.value=='اسم العضو')this.value=''" type="text" value="اسم العضو" /> </div> <div class="PassBox"> <input id="post" name="password" tabindex="102" type="password" /> </div> <div class="EnterBut MjanyFolatRight"> <input accesskey="s" class="EnterBut" src="http://micsoft.ga/vx_soft/Co1/img/spacer.gif" tabindex="104" title="ادخل اسم العضو وكلمة المرور الخاصة بك في الحقول المجاورة لتسجيل الدخول, أو اضغط على رابط 'التسجيل' لإنشاء حساب خاص بك." name="login" type="submit" type="image" value="تسجيل الدخول" /> </div> </div> <div class="HeaderLoignBottom"> <label class="MjanyFolatRight" for="cb_cookieuser_navbar"> <input id="post" accesskey="c" name="autologin" tabindex="103" type="checkbox" value="1" /> تذكرنى ؟ </label> <div class="HeaderLoignLinks MjanyFolatRight"> <ul> <li><a href="/register">عضوية جديدة</a> </li> <li><a>|</a></li> <li><a href="/profile?mode=sendpassword">نسيت كلمة المرور ؟</a> </li> </ul> </div> </div>  </form>  </div>   <div class="HeaderLogin"> <div align="center" class="smallfont"> <strong><span style="color: Red;">{LOGGED_AS}</span></strong> <div>{LAST_VISIT_DATE}</div> <a href="/search?search_id=newposts"><font color="#000080">مشاركات جديده</font></a><font color="#000080"> <span lang="ar-sa">|</span>  </font> <a href="/search?search_id=egosearch"> <font color="#000080">مشاركاتي</font></a><span lang="ar-sa"><font color="#000080">  |  </font></span> <a href="/search?search_id=unanswered"> <span style="text-decoration: none"><font color="#000080">مواضيع لم يتم الرد عليها</font></span></a> </div> </div>   </div> </div> <div class="MjanyFolatLeft SearchBody"> <div class="SearchBodyInputBg">  <form action="/search.forum" method="post"> <div class="SearchBox"> <input name="search_keywords" onblur="if(this.value==''){this.value='ادخل كلمات البحث...'};" onfocus="if(this.value=='ادخل كلمات البحث...'){this.value=''};" tabindex="1001" type="text" value="ادخل كلمات البحث..." /> </div> <div class="SearchEnterBut MjanyFolatRight"> <input accesskey="s" class="SearchEnterBut" src="http://micsoft.ga/vx_soft/Co1/img/spacer.gif" tabindex="104" title="ادخل اسم العضو وكلمة المرور الخاصة بك في الحقول المجاورة لتسجيل الدخول, أو اضغط على رابط 'التسجيل' لإنشاء حساب خاص بك." type="image" value="تسجيل الدخول" /> </div> </form> </div> <div class="MjanyTextRight"> | <a href="/search">البحث المتقدم </a></div> </div> </div> <div class="HeaderBottom"> <div class="MjanyFolatRight HeaderBottomRight"> <ul> <li><a href="/">الرئيسية</a></li> <li class="select"><a href="/forum">المنتدي</a></li> <li><a href="/register">التسجيل</a></li> <li><a href="/contact">اتصل بنا</a></li> <li><a href="http://www.عمالقةالتطوير.com/">اعلن معنا</a></li> </ul> </div> <div class="MjanyFolatRight Color"> <style type="text/css"> #cnmudrdown{ width:100%; height:40px; display:block; padding:0; margin:0 0 22px 0; background:#222222; } #cnmudmenu,#drop{ list-style:none; direction:rtl; padding:0; margin:0; } #cnmudmenu li { float:right; } #cnmudmenu li a { display:block; padding:11px 15px; color:#fff; text-decoration:none; font:15px Tahoma, Geneva, sans-serif; font-weight:bold; } #cnmudmenu li a:hover { background:#ccc; color:#000; transition:all .7s ease 0s; } #drop { position:absolute; display:none; list-style:none; z-index:60; } #drop li { float:none; } #drop li a { background:#000; border-bottom:1px solid #bbb; padding:5px 10px; width:150px; } #sub:hover #drop { display:block; } #drop2:hover #cnmudmenu3 { display:block; } #cnmudmenu3 { position:absolute; display:none; margin-right:131px; margin-top:-28px; } #cnmudmenu3 li{ list-style:none; margin-left:100px; } #cnmudmenu3 li a { width:150px; } </style> <div id='cnmudrdown'> <ul id="cnmudmenu"> <li id="sub"> <a href="#">لونك المفضل</a> <ul id="drop"> <li> <a href="javascript:chooseStyle('BdCo2',60);" title="الازرق"><img src="http://2img.net/i/fa/prosilver/icon_user_profile.png"></a></li> <li> <a href="javascript:chooseStyle('BdCo1',60);">الأحمر</a> </li> </ul> </li> </ul> </div> <img alt="" class="Color" src="http://micsoft.ga/vx_soft/Co1/img/spacer.gif" usemap="#Color" /></div> </div> <div class="HeaderSlide"> <div class="MjanyFolatRight HeaderSlideRight"> <a href="#"> <img alt="" class="HeaderSlideRight" src="http://micsoft.ga/vx_soft/Co1/img/spacer.gif" /></a></div> <div class="MjanyFolatRight HeaderSlideCenter"> <div id="owl-demo" class="owl-carousel"> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> <div class="item"><a target="_blank" href="http://www.shbkat.com/"><img src="http://micsoft.ga/vx_soft/Co1/img/img.png" /></a></div> </div> </div> <div class="MjanyFolatLeft HeaderSlideLeft"> <a href="#"> <img alt="" class="HeaderSlideLeft" src="http://micsoft.ga/vx_soft/Co1/img/spacer.gif" /></a></div> </div> </div> <style> #owl-demo .item{ margin: 0px 7.5px; } #owl-demo .item img{ display: block; width: 100%; height: 150px; } </style> <script> $(document).ready(function() { $("#owl-demo").owlCarousel({ items : 4, autoPlay : 5000, lazyLoad : true, pagination:false, navigation : true }); }); </script>  <div class="MjanyW2 MjanyMarginAuto MjanyBody">  <div align="center"> <div class="page" style="width:100%; text-align:right"> <div style="padding:0px 0px 0px 0px" align="right"> <br />  <div class="Cat">  <div class="CatTop"> <div class="CatTop_Right"> <h1> انت الآن تتصفح {L_INDEX}</h1> </div> <div class="CatTop_Left"> </div> </div>  <div class="CatCenter_Right"> <div class="CatCenter_Left">  <div class="CatBody">  <table align="center" border="0" cellpadding="6" cellspacing="0" class="tborder" width="100%"> <tr> <td class="alt1" width="100%"> <div class="navbar" style="font-size:10pt"><strong> <div class="nav"><img src="http://i69.servimg.com/u/f69/18/14/50/08/navbit12.gif" class="inlineimg" alt="" border="0" height="15" width="15" /> <a class="nav" href="{U_INDEX}">{L_INDEX} </a>{NAV_CAT_DESC}</div> <font face="Tahoma"><span style="font-size: 10pt" font-weight="bold"><img src="http://i69.servimg.com/u/f69/18/14/50/08/navbit13.gif" height="15" width="30" /> {PAGE_TITLE}</span></font></strong></div> </td> </tr> </table>   <div class="tborder" style="padding:0px; border-top-width:0px"> <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center"> <tr align="center">  <td class="vbmenu_control"><a href="/register" rel="nofollow">التسجيل</a></td> <td class="vbmenu_control"><a href="/h2-ads" rel="nofollow">اعلن معنا</a></td> <td class="vbmenu_control"><a rel="help" href="/faq" accesskey="5">التعليمـــات</a></td> <td class="vbmenu_control"><a href="/search?search_id=unanswered">موآضـــيع لم يتم آلرد عليهآ</a></td> <td class="vbmenu_control"><a href="/search?search_id=newposts" accesskey="2">مشاركات اليوم</a></td> <td class="vbmenu_control"><a id="navbar_search" href="/search" accesskey="4" rel="nofollow">محرك البحث</a> </td>   <td class="vbmenu_control"><a href="/forum">الرئيسية</a></td> <td class="vbmenu_control"><a href="/profile?mode=editprofile">لوحة التحكم</a></td> <td class="vbmenu_control"><a href="/h2-ads" rel="nofollow">اعلن معنا</a></td> <td class="vbmenu_control"><a href="#" accesskey="5">قوانين المنتدى</a></td> <td class="vbmenu_control"><a href="/memberlist" accesskey="5">الاعضاء</a></td> <td class="vbmenu_control"><a href="/search?search_id=newposts" accesskey="2">المشاركات الجديدة</a></td> <td class="vbmenu_control"><a id="navbar_search" href="/search" accesskey="4" rel="nofollow">محرك البحث</a> <script type="text/javascript"> vbmenu_register("navbar_search"); </script></td> <td class="vbmenu_control"><a href="{U_PRIVATEMSGS}" rel="nofollow">{PRIVATE_MESSAGE_INFO}</a><script type="text/javascript"> vbmenu_register("usercptools"); </script></td> <td class="vbmenu_control"><a rel="nofollow" href="{U_LOGIN_LOGOUT}" onclick="return log_out('هل أنت متأكد برغبتك في الخروج من المنتدى؟')">{L_LOGIN_LOGOUT}</a></td>  </tr> </table> </div>  </div> </div> </div>  <div class="CatBottom"> <div class="CatBottom_Right"> </div> <div class="CatBottom_Left"> </div> </div> </div>  <div style="clear: both;"></div>  <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline"> <tr> <td align="left" class="row1"> <div id="fa_ticker_container"> <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">  <li>{switch_ticker.ticker_row.ELEMENT}</li>  </ul> </div> </td> </tr> </table> </div>   <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline"> <tr> <td align="left" class="row1"> <div id="fa_ticker_container"> <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;"> <div class="fa_ticker_content">  <div>{switch_ticker.ticker_row.ELEMENT}</div>  </div> </div> </div> </td> </tr> </table> </div>  <div id="page-body"> <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}> <table cellpadding="0" cellspacing="0" width="100%" class="three-col"> <tbody> <tr> <td valign="top" width="100%"> <div id="center">  {giefmod_index1.MODVAR}  <div style="height:{SPACE_ROW}px"></div>   </div> </td> </tr> <tr> <td valign="top" width="100%">  </td> </tr> </tbody> </table> </div> </div> </body> </html>

اللى بصورة حتى استطيع تشخيص ايقونة لكل اختيار باللون
بالاضافة اخى الحبيب انا طالب الكود منفصلا عن القالب
حتى استطيع استخدامة بمكان اخر لانى قلق من محاولة استخراج الكود بنفسى من القالب بعدما تدمجة انت فافقد سطر او حرف فاتوه واصبح حائرا
لانه بصراحة موضوع القائمة ده جديد عليا
عشان كده سألت على كيفية تصميمة

تم تعدل

ابحث في القالب على الكود التالي

الكود:: <map id="Color" name="Color"> <area alt="" coords="146, 18, 162, 35" href="javascript:chooseStyle('BdCo1',60)" shape="rect" target="_self" title="الأحمر" /> <area alt="" coords="125, 19, 143, 35" href="javascript:chooseStyle('BdCo2',60)" shape="rect" target="_self" title="الأزرق" /> <area alt="" coords="107, 19, 123, 35" href="javascript:chooseStyle('BdCo3',60)" shape="rect" target="_self" title="الموف" /> <area alt="" coords="88, 19, 105, 36" href="javascript:chooseStyle('BdCo4',60)" shape="rect" target="_self" title="الفيروزي" /> <area alt="" coords="67, 19, 85, 34" href="javascript:chooseStyle('BdCo5',60)" shape="rect" target="_self" title="الأخضر" /> <area alt="" coords="46, 19, 66, 35" href="javascript:chooseStyle('BdCo6',60)" shape="rect" target="_self" title="البرتقالي" /> </map> <img alt="" class="Color" src="http://micsoft.ga/vx_soft/Co1/img/spacer.gif" usemap="#Color" /></div> </div> <div class="HeaderSlide">

استبدله بالكود التالي

الكود:: <style type="text/css"> #cnmudrdown{ width:100%; height:40px; display:block; padding:0; margin:0 0 22px 0; background:#222222; } #cnmudmenu,#drop{ list-style:none; direction:rtl; padding:0; margin:0; } #cnmudmenu li { float:right; } #cnmudmenu li a { display:block; padding:11px 15px; color:#fff; text-decoration:none; font:15px Tahoma, Geneva, sans-serif; font-weight:bold; } #cnmudmenu li a:hover { background:#ccc; color:#000; transition:all .7s ease 0s; } #drop { position:absolute; display:none; list-style:none; z-index:60; } #drop li { float:none; } #drop li a { background:#000; border-bottom:1px solid #bbb; padding:5px 10px; width:150px; } #sub:hover #drop { display:block; } #drop2:hover #cnmudmenu3 { display:block; } #cnmudmenu3 { position:absolute; display:none; margin-right:131px; margin-top:-28px; } #cnmudmenu3 li{ list-style:none; margin-left:100px; } #cnmudmenu3 li a { width:150px; } </style> <div id='cnmudrdown'> <ul id="cnmudmenu"> <li id="sub"> <a href="#">لونك المفضل</a> <ul id="drop"> <li> <a href="javascript:chooseStyle('BdCo1',60);" title="الأحمر"><img src="http://2img.net/i/fa/prosilver/icon_user_profile.png"></a></li> <li> <a href="javascript:chooseStyle('BdCo2',60);" title="الأزرق"><img src="http://2img.net/i/fa/prosilver/icon_user_profile.png"></a></li> <li> <a href="javascript:chooseStyle('BdCo3',60);" title="الموف"><img src="http://2img.net/i/fa/prosilver/icon_user_profile.png"></a></li> <li> <a href="javascript:chooseStyle('BdCo4',60);" title="الفيروزي"><img src="http://2img.net/i/fa/prosilver/icon_user_profile.png"></a></li> <li> <a href="javascript:chooseStyle('BdCo5',60);" title="الأخضر"><img src="http://2img.net/i/fa/prosilver/icon_user_profile.png"></a></li> <li> <a href="javascript:chooseStyle('BdCo6',60);" title="البرتقالي"><img src="http://2img.net/i/fa/prosilver/icon_user_profile.png"></a></li> </ul> </li> </ul> </div> <img alt="" class="Color" src="http://micsoft.ga/vx_soft/Co1/img/spacer.gif" usemap="#Color" /></div> </div> <div class="HeaderSlide">