طلب عمل استايل لنسخة الجوال

  افضل مساهمة1
السلام عليكم انا اريد استايل لنسخة الجوال بس يكون بلون الاحمر ويكون احترافي ومطور بحقوق موقع محمد نبينا

دمتم بخير


  افضل مساهمة2
جاري التصميم والتكويد


m13
  افضل مساهمة3
جاري تكويد استايل نسخة الجوال المطورة


m13
  افضل مساهمة4
تم تكويد استايل نسخة الجوال المطورة
صورة للاستايل

https://i.servimg.com/u/f35/16/46/77/76/uo_ouo27.png

القوالب هي
overall_footer
الكود:

<!-- BEGIN html_validation -->
<!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">
<body>
    <div>
        <main>
<!-- END html_validation -->
        {PROTECT_FOOTER}
        <div class="application_footer_spacer"></div>
        </main>
    </div>
<script type="text/javascript">
//<![CDATA[
    fa_endpage();
//]]>
</script>
<script src="http://illiweb.com/rs3/29/frm/jquery/touch-swipe/jquery.touchSwipe.min.js" type="text/javascript"></script>
<script type="text/javascript">
            $(document).ready(function(){
                $(".forum-section").each(function() {
                    var forumName = $(this).find("h3");
                    var statsWidth = $(this).find(".forum-statistics").outerWidth();
                    var forumNamePadding = statsWidth + 8;

                    if ($("body").css("direction").toLowerCase() == "rtl") {
                        $(forumName).css("padding-left", forumNamePadding);
                    } else {
                        $(forumName).css("padding-right", forumNamePadding);
                    }
                });

                $(".forum-icon, .post-icon").each(function() {
                    var image = $(this).find("img");

                    image.error(function() {
                        $(this).parent('a').remove();
                        $(this).remove();
                    });
                });

                setTimeout(floatingButtonPosition, 2000);
                alterMenuIcons();
            });

            $(function() {
                var backLink = $('.mobile_prev_button.block').attr('href');
                var nextLink = $('.mobile_next_button.block').attr('href');

                if (backLink || nextLink) {

                    if (backLink) {
                        var swipeBackArrow = $('<div>', {
                            id: 'swipe_back_arrow',
                            css: {
                                opacity: 0
                            },
                            text: ''
                        });
                        $('body').append(swipeBackArrow);
                        var swipeBackArrow = $('#swipe_back_arrow');
                    }

                    if (nextLink) {
                        var swipeNextArrow = $('<div>', {
                            id: 'swipe_next_arrow',
                            css: {
                                opacity: 0
                            },
                            text: ''
                        });
                        $('body').append(swipeNextArrow);
                        var swipeNextArrow = $('#swipe_next_arrow');
                    }

                    $(window).swipe( {
                        swipeStatus:function(event, phase, direction, distance)
                        {
                            var arrowPos = 0;
                            var arrowOpacity = 0;

                            if (backLink) {
                                swipeBackArrow.removeAttr('style');
                            }

                            if (nextLink) {
                                swipeNextArrow.removeAttr('style');
                            }

                            if ($("body").css("direction").toLowerCase() == "rtl") {
                                if ((phase=="move") && (direction=="right") && nextLink) {
                                    var arrowPos = (distance / 200) * 40;
                                    var arrowOpacity = distance / 200;
                                    swipeNextArrow.css('left', arrowPos);
                                    swipeNextArrow.css('opacity', arrowOpacity);
                                    destLink = nextLink;
                                } else if ((phase=="move") && (direction=="left") && backLink) {
                                    var arrowPos = (distance / 200) * 40;
                                    var arrowOpacity = distance / 200;
                                    swipeBackArrow.css('right', arrowPos);
                                    swipeBackArrow.css('opacity', arrowOpacity);
                                    destLink = backLink;
                                } else if ((phase=="end") && (direction=="right") && nextLink) {
                                    swipeNextArrow.css('left', arrowPos);
                                    swipeNextArrow.css('opacity', 0);
                                    window.location.href = destLink;
                                } else if ((phase=="end") && (direction=="left") && backLink) {
                                    swipeBackArrow.css('right', arrowPos);
                                    swipeBackArrow.css('opacity', 0);
                                    window.location.href = destLink;
                                }
                            } else {
                                if ((phase=="move") && (direction=="left") && nextLink) {
                                    var arrowPos = (distance / 200) * 40;
                                    var arrowOpacity = distance / 200;
                                    swipeNextArrow.css('right', arrowPos);
                                    swipeNextArrow.css('opacity', arrowOpacity);
                                    destLink = nextLink;
                                } else if ((phase=="move") && (direction=="right") && backLink) {
                                    var arrowPos = (distance / 200) * 40;
                                    var arrowOpacity = distance / 200;
                                    swipeBackArrow.css('left', arrowPos);
                                    swipeBackArrow.css('opacity', arrowOpacity);
                                    destLink = backLink;
                                } else if ((phase=="end") && (direction=="left") && nextLink) {
                                    swipeNextArrow.css('right', arrowPos);
                                    swipeNextArrow.css('opacity', 0);
                                    window.location.href = destLink;
                                } else if ((phase=="end") && (direction=="right") && backLink) {
                                    swipeBackArrow.css('left', arrowPos);
                                    swipeBackArrow.css('opacity', 0);
                                    window.location.href = destLink;
                                }
                            }
                        },
                        triggerOnTouchEnd: true,
                        triggerOnTouchLeave: false,
                        threshold: 200,
                        allowPageScroll: "vertical"
                    });
                }
            });

            function floatingButtonPosition() {
                if ($("#at-share-dock").length) {
                    $(".btn-floating").css("bottom", "60px");
                };
            };

            function alterMenuIcons() {
                $('#mNavbar').find('.navBtnIcon').each(function() {
                    switch ($(this).css('backgroundPosition')) {
                        case '-32px 0px':
                            $(this).html('<i class="material-icons"></i>');
                            break;
                        case '-64px 0px':
                            $(this).html('<i class="material-icons"></i>');
                            break;
                        case '0px 0px':
                            $(this).html('<i class="material-icons"></i>');
                            break;
                        case '-96px 0px':
                            $(this).html('<i class="material-icons"></i>');
                            break;
                    }
                });
            };
</script>
  <br>
  <div id="foot-">
<ul class="f-lnk">
<li><a href="index.php">الرئيسية</a>|</li>
<li><a href="#">من نحن</a>|</li>
<li><a href="#">سياسه الموقع</a>|</li>
<li><a href="http://www.t3qnyiat.com/">برمجة JAR7</a></li>
</ul>
<span class="clr"><!--  --></span>
</div>
</body>
</html>

قالب overall_header
الكود:

<!DOCTYPE HTML>
<html lang="{L_LANG_HTML}">
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META}
   {META_FAVICO}
   {T_HEAD_STYLESHEET}
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="{GG_THEME_COLOR}" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,400italic,500,700,700italic,900&subset=greek,greek-ext,latin,vietnamese,cyrillic-ext,latin-ext,cyrillic" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
   <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="//code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (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>
   <!-- END google_analytics_code -->
   {HOSTING_JS}
  <style>
  #wrap {
    background-color: #F0EEEE;
    color: rgb(89, 73, 44);
    font-family: NeoSans,"droid Arabic Kufi";
    font-size: 15px;
    line-height: 26px;
}
 #top--bar {
    background-color:#202020;
    border-bottom: 1px solid #FB4040;
    padding: 0;
    height: 50px;
    position: relative;
}
    .rightlnks- {
    float: right;
      list-style-type: none;
    margin: 0;
    padding: 0;
}
.rightlnks- li {
    border-left: 1px solid #B61114;
    float: right;
    line-height: 45px;
}
    .rightlnks- li:last-child {
    border: 0 none;
}
.rightlnks- li a {
    color: rgb(255, 255, 255);
    display: block;
    float: right;
    padding: 0 10px;
}
    .forum h2 {
        background-color:#B61114;
    border-radius: 6px 6px 0 0;
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-weight: normal;
    line-height: 33px;
    margin: 0;
    padding: 5px;
    text-align: center;
}
   
.hd-logo    {
    background: rgba(0, 0, 0, 0) url("http://i35.servimg.com/u/f35/16/46/77/76/crezem13.png") no-repeat scroll left top;
    display: block;
    float: right;
    height: 110px;
    width: 196px;
}
 .socila- {
    float: left;
    margin: 5px 0 0 5px;
          list-style-type: none;
}
.socila- li {
    float: right;
    margin-right: 3px;
}
.socila- li a {
    background-image: url("http://i35.servimg.com/u/f35/16/46/77/76/img_0210.png");
    background-position: -35px top;
    background-repeat: no-repeat;
    display: block;
    height: 34px;
    width: 32px;
}
.socila- li:last-child a {
    background-position: right top;
}
.socila- li:first-child a {
    background-position: left top;
}
.socila- li:last-child {
    margin-left: 0;
}
  . mobile_title{
    margin: 30px;
    }
    #header {
    background-color: #F0EEEE;
    color: transparent;
    }
#header #mToggleArrow {
            background-color: #CA2A2F;
}
    #header #mToggleArrow:hover {
    background-color: #FF6561;
}
    #header .navElement {
  background-color:#CA2A2F;
}
        #header .navElement:hover {
  background-color: #FF6561;
}
    #header .mobile_prev_button {
            background-color: #CA2A2F;
}
      #header .mobile_prev_button:hover {
  background-color: #FF6561;
}
.post-head {
            background-color: #CA2A2F;
    border-radius: 6px 6px 0 0;
    color: rgb(255, 255, 255);
  margin: 0;
    padding: 5px; 
}
    .post-content {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(231, 231, 231);
    border-radius: 3px;
    list-style-type: none;
    margin: 0 0 4px;
    padding: 11px;
    text-align: right;
}
    .topic h2 {
        color: rgb(255, 255, 255);
    }
    .post-details {
        color: rgb(255, 255, 255);
    }
    .login-box {
    background-color: #DB4F4C;
    border-radius: 6px;
    margin: 0 0 12px;
    padding: 12px;
}
.login-box input[type="text"], .login-box input[type="password"] {
    background-color: rgb(255, 255, 255);
    background-image: none;
    border: 0 none;
    border-radius: 4px;
    box-shadow: 0 0 0 rgb(255, 255, 255);
}
.nav_box {
    padding: 11px 0 0;
}
.login-box input[type="submit"] {
    border-radius: 4px;
    float: left;
    height: 36px;
    width: 90px;
}
.rmmbr- {
    color: rgb(190, 237, 235);
    float: right;
    margin-top: 12px;
}
    input[type="text"], input[type="password"], textarea, select {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgb(245, 245, 245) 0%, rgb(255, 255, 255) 100%) repeat scroll 0 0;
    border: 1px solid rgb(204, 204, 204);
    border-radius: 0;
    box-shadow: 0 1px 0 rgb(255, 255, 255) inset;
    color: rgb(102, 102, 102);
    font-family: NeoSans,"droid Arabic Kufi";
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    padding: 9px 12px;
}
input[type="submit"] {
    background-color: #FF6561;
    border-width: 0;
    color: rgb(255, 255, 255);
    cursor: pointer;
    font-family: NeoSans,"droid Arabic Kufi";
    font-size: 15px;
    font-weight: normal;
    padding: 6px 19px;
}
input[type="submit"]:hover {
    opacity: 0.7;
}
#qrform textarea {
    display: block;
    margin: 0 auto 20px;
    width: 97% !important;
}
.usr-log-info {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #FF6561;
    border-color: #CA2A2F;
    border-image: none;
    border-radius: 6px;
    border-style: solid;
    border-width: 2px 0;
    display: none;
    margin: 0 0 12px;
    padding: 7px;
}
body div .usr-log-info ul li {
    line-height: 20px;
    margin: 0 0 4px;
    padding: 0;
}
#us-pic img {
    border: 1px solid rgb(221, 221, 221);
    float: right;
    height: 64px;
    margin: 5px 0 0;
    padding: 2px;
    width: 64px;
}
.usr-log-info-in {
    margin-right: 77px;
}
.usr-log-info-in h2 {
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
}
.usr-log-info-in ul {
    padding: 0;
}
ul.smallllink {
    padding: 0 !important;
    text-align: center;
}
ul.smallllink li {
    float: right;
    margin: 0 0 5px 5px !important;
}
ul.smallllink li a {
    background-color: rgb(30, 162, 156);
    border-radius: 3px;
    color: rgb(255, 255, 255);
    display: block;
    line-height: 24px;
    padding: 3px 12px;
}
.usr-it {
    float: left;
    margin: -20px 0 0 4px;
}
.usr-it li {
    float: left;
    margin: 0 5px 0 0;
}
.usr-it li a {
    background-color: rgb(25, 157, 152);
    background-image: url("http://i35.servimg.com/u/f35/16/46/77/76/img_1610.png");
    background-position: 10px center;
    background-repeat: no-repeat;
    border-radius: 3px;
    display: block;
    height: 36px;
    width: 36px;
}
.usr-it li:last-child a {
    background-position: -30px center;
}
.usr-it li a.loginbutt_, .usr-it li a.lostpasswd- {
    background-image: url("http://i35.servimg.com/u/f35/16/46/77/76/img_1610.png");
    background-position: 56px center !important;
    background-repeat: no-repeat;
    color: rgb(255, 255, 255);
    line-height: 36px;
    padding: 0 22px 0 0;
    width: 60px;
}
.usr-it li a.lostpasswd- {
    background-image: url("http://i35.servimg.com/u/f35/16/46/77/76/img_2310.png");
    background-position: right center !important;
    width: 120px;
}
.usr-inpt {
    background-image: url("http://i35.servimg.com/u/f35/16/46/77/76/img_1810.png");
    background-position: right 3px;
    background-repeat: no-repeat;
    margin: 0 0 10px;
    padding: 0 44px 0 0;
}
div.pass-icon {
    background-position: right -48px;
}
.usr-inpt input {
    margin: 0;
}
    #foot- {
    background-color: #8F1517;
    border-bottom: 7px solid #D6353B;
    padding: 20px 0;
}
#foot- ul {
    margin: 0;
    padding: 0;
    text-align: center;
}
#foot- ul li {
    color: rgb(255, 255, 255);
    display: inline;
    text-align: center;
}
#foot- ul li a {
    color: rgb(255, 255, 255);
    font-size: 12px;
    padding: 0 10px;
}
  </style>
</head>
<body>
  <div id="top--bar">
<ul class="rightlnks-">
<li></li>
<li>
  <a href="/">الرئيسية</a>
</li>
<li>
<a href="#">المدونة</a>
</li>
  <li>
  <a href="/index.forum?mobile&redirect=%2F">النسخة الاصلية</a>
    </li>
</ul>
  <ul class="socila-">
<li>
<a title="تابعنا على انستقرام" href="#"></a>
</li>
<li>
<a title="تابعنا على تويتر" href="#"></a>
</li>
<li>
<a title="تابعنا على فيس بوك" href="#"></a>
</li>
</ul>
  </div>
   <div id="wrap">

          <div id="header" class="mobile_title">
                      <a class="hd-logo" title="الصفحة الرئيسية" href="/"></a>       
         {NAV_CAT_DESC}
      </div>
<br>
    <!-- BEGIN switch_user_logged_in -->
  <div class="nav_box">


<div class="login-box">
      <div align="center" class="smallfont">
    <div>
  <strong><span style="color: Red;">{LOGGED_AS}</span></strong>
 

        </div>
       
            <div>{LAST_VISIT_DATE}</div>
   
   
<a href="/search?search_id=newposts"><font color="#000080">مشاركات جديده</font></a><font color="#000080"> <span lang="ar-sa">|</span>&nbsp; </font>
<a href="/search?search_id=egosearch"> <font color="#000080">مشاركاتي</font></a><span lang="ar-sa"><font color="#000080">&nbsp; |&nbsp; </font></span>       
<a href="/search?search_id=unanswered"> <span style="text-decoration: none"><font color="#000080">مواضيع لم يتم الرد عليها</font></span></a>   
  <span class="clr"><!--  --></span>   
      </div>
  </div>
    </div>  </div></div>
    <!-- END switch_user_logged_in --> 
   <!-- BEGIN switch_user_logged_out -->
<div class="nav_box">
<div class="login-box">
   
<!-- login form -->
<form action="login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, 0)">
      <script type="text/javascript" src="clientscript/vbulletin_md5.js?v=387"></script>
      <div class="usr-inpt">      <input type="text" class="bginput" name="username" id="navbar_username" accesskey="u" tabindex="101" value="اسم العضو" onfocus="if (this.value == 'اسم العضو') this.value = '';" ></div>
<div class="usr-inpt pass-icon"><input type="password" class="bginput" name="password" id="navbar_password" tabindex="102" ></div>

      
      <label for="cb_cookieuser_navbar" class="rmmbr-"><input type="checkbox" name="autologin" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />حفظ البيانات؟</label>
      <input type="submit" name="login" class="button" value="دخول" tabindex="104" title="ادخل اسم العضو وكلمة المرور الخاصة بك في الحقول المجاورة لتسجيل الدخول, أو اضغط على رابط 'التسجيل' لإنشاء حساب خاص بك." accesskey="s" >
      </form>     </div></div>
                  <!-- END switch_user_logged_out --> 
  <br>

      <main>
   <!-- BEGIN html_validation -->
      </main>
   </div>
</body>
</html>
<!-- END html_validation -->


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