تغيير استايل الجوال

صفحة 2 من اصل 2 الصفحة السابقة  1, 2

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

تغيير استايل الجوال

مُساهمة من طرف Anas 1657 في الثلاثاء 21 يونيو 2016 - 17:31

تذكير بمساهمة فاتح الموضوع :

اريد تغير استايل نسخة الجوال (النسخة المتطورة)
من الاستايل العادي , الموجود بكل المنتديات


إلى هذا الشكل:



لقد قمت انا بصنع الاستايل ولكن به بعض الاخطاء , لان (خبرتي بسيطه في التكويد)
لذلك اريد من الخبراء تكويد مثله تماما , وياليت تكون الاكواد تركب في CSS فقط

رابط المنتتدى الذي عليه الاستايل:
http://778816572.forumarabia.com/

الصور المستخدمة(الهيدر + الخلفيه):
http://i68.servimg.com/u/f68/19/23/51/91/oia_o_12.png
http://i84.servimg.com/u/f84/19/23/51/91/img_1410.jpg
avatar
Anas 1657
 
 

ذكر
عدد المساهمات : 245
معدل النشاط : 1320
السُمعة : -1

http://www.anas16572.com/

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


رد: تغيير استايل الجوال

مُساهمة من طرف omarpop23 في الأحد 3 يوليو 2016 - 2:35

احذف جميع القوالب الخاصة بنسخة الجوال
اضف قالب 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}
  <script type="text/javascript" src="http://cocss.arab.st/43497.js"></script>
  <style>
  #wrap {
     min-width: 0px; !important
}
  #wrap {
    background: url(http://i84.servimg.com/u/f84/19/23/51/91/img_1410.jpg);
}
  main, #header {
    opacity: 0.9;
}
    #old-topic {
    float: left;
    }
  </style>
</head>
<body>
 <div id="wrap">
 <div id="header" class="mobile_title">
 {NAV_CAT_DESC}
 </div>
          <div id="logo"><a href="/"><img src="http://i68.servimg.com/u/f68/19/23/51/91/oia_o_12.png"/></a></div>
 <main>
 <!-- BEGIN html_validation -->
 </main>
 </div>
  </body>
</html>
<!-- END html_validation -->
و قالب viewtopic_body
الكود:
<script type="text/javascript">
//<![CDATA[
var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
        
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
 {
 if( $(this).is(":visible") )
 {
 $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
 }
 else
 {
 $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
 }
 });
        }
    }
    catch(e) { }
    
 return false;
};

//]]>
</script>

<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
{POLL_DISPLAY}

<!-- BEGIN postrow -->
<div id="{postrow.U_POST_ID}" class="topic">
 <!-- BEGIN hidden -->
 <div class="post {postrow.hidden.ROW_CLASS}" style="{postrow.displayed.DISPLAYABLE_STATE}">
 <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
 </div>
 <!-- END hidden -->
 <!-- BEGIN displayed -->
 <div id="p{postrow.displayed.U_POST_ID}" class="post-section {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}">
 <div class="post-head">
                          <div class="post-icon"><i class="material-icons">person</i>{postrow.displayed.POSTER_AVATAR}</div><h2>{postrow.displayed.POST_DATE_NEW}</h2>
 <div class="post-details">{L_TOPIC_BY} {postrow.displayed.POSTER_NAME}</div>
 </div>
 <div class="post-content">
 {postrow.displayed.MESSAGE}
 <!-- BEGIN switch_attachments -->
 <div class="attachbox">
 <p class="title">{postrow.displayed.switch_attachments.L_ATTACHMENTS}</p>
 <dl class="attachments">
 <!-- BEGIN switch_post_attachments -->
 <dt>
 <!-- BEGIN switch_dl_att -->
 <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
 <!-- END switch_dl_att -->
 <!-- BEGIN switch_no_dl_att -->
 {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
 <!-- END switch_no_dl_att -->
 </dt>
 <dd>
 <!-- BEGIN switch_no_comment -->
 <p>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</p>
 <!-- END switch_no_comment -->
 <!-- BEGIN switch_no_dl_att -->
 <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>
 <!-- END switch_no_dl_att -->
 <p>(<span class="ltr">{postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}</span>) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</p>
 </dd>
 <!-- END switch_post_attachments -->
 </dl>
 </div>
 <!-- END switch_attachments -->
                          
 </div>
                  <br />
                  <a class="btn" href="{U_VIEW_NEWER_TOPIC}" rel="nofollow">الموضوع التالي</a>
                  <a class="btn" id="old-topic" href="{U_VIEW_OLDER_TOPIC}" rel="nofollow">الموضوع السابق</a>
                  <br />
                  {postrow.displayed.EDITED_MESSAGE}
 </div>
 <!-- BEGIN first_post_br -->
 <hr id="first-post-br" />
 <!-- END first_post_br -->
 <!-- END displayed -->
  
</div>
<!-- END postrow -->

<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
{INLINE_MESSAGE}
{QUICK_REPLY_FORM}

<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="btn-floating">
 <i class="material-icons"></i>
</a>
<!-- END switch_user_authreply -->

مع العلم انه يمكن تغير الوان اعلي الفئات و المواضيع من لوحة الأدارة

جرب و اخبرني بالنتيجة
avatar
omarpop23
 
 

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

http://www.best-devs.net

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

رد: تغيير استايل الجوال

مُساهمة من طرف Anas 1657 في الأحد 3 يوليو 2016 - 3:04

@0marp0p23
جزاك الله خيرا
خطوة متقدمة أخي العزيز , وهذه هي النتيجة:




ولكن المتبقي:
1- عند الضغط على الزر الخاص بي (الرئيسية + دخول + النسخة الاصلية)
يظهر بهذا الشكل :

حيث تظهر الاعلانات فوق الازرار , أريد اصلاح المشكله


عدل سابقا من قبل Anas 1657 في الأحد 3 يوليو 2016 - 3:38 عدل 1 مرات
avatar
Anas 1657
 
 

ذكر
عدد المساهمات : 245
معدل النشاط : 1320
السُمعة : -1

http://www.anas16572.com/

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

رد: تغيير استايل الجوال

مُساهمة من طرف Anas 1657 في الأحد 3 يوليو 2016 - 3:34

أيضا لاحظت الان وجود مشكلة بسيطة أخرى أخي العزيز @0marp0p23
بالنسبة لازرار (الموضوع التالي & الموضوع السابق)
فهي تظهر في أسفل كل مساهمه عضو:


المفترض أن تظهر في نهايه الموضوع , وليس المساهامات
بهذا الشكل:
avatar
Anas 1657
 
 

ذكر
عدد المساهمات : 245
معدل النشاط : 1320
السُمعة : -1

http://www.anas16572.com/

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

رد: تغيير استايل الجوال

مُساهمة من طرف omarpop23 في الأحد 3 يوليو 2016 - 4:04

استبدل قالب الـ 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}
  <script type="text/javascript" src="http://cocss.arab.st/43497.js"></script>
  <style>
  #wrap {
    min-width: 0px; !important
}
  #wrap {
    background: url(http://i84.servimg.com/u/f84/19/23/51/91/img_1410.jpg);
}
main, #header {
    opacity: 0.9;
    z-index: 9999;
}
    #new-topic {
    float: left;
    }
    #prv-btns {
    padding-bottom: 30px;
}
  </style>
</head>
<body>
   <div id="wrap">
      <div id="header" class="mobile_title">
         {NAV_CAT_DESC}
      </div>
          <div id="logo"><a href="/"><img src="http://i68.servimg.com/u/f68/19/23/51/91/oia_o_12.png"/></a></div>
      <main>
   <!-- BEGIN html_validation -->
      </main>
   </div>
  </body>
</html>
<!-- END html_validation -->
استبدل قالب viewtopic_body بالقالب التالي
الكود:
<script type="text/javascript">
//<![CDATA[
var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
       
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
         {
            if( $(this).is(":visible") )
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            }
            else
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
         });
        }
    }
    catch(e) { }
   
   return false;
};

//]]>
</script>

<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
{POLL_DISPLAY}

<!-- BEGIN postrow -->
<div id="{postrow.U_POST_ID}" class="topic">
   <!-- BEGIN hidden -->
      <div class="post {postrow.hidden.ROW_CLASS}" style="{postrow.displayed.DISPLAYABLE_STATE}">
         <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
      </div>
   <!-- END hidden -->
   <!-- BEGIN displayed -->
      <div id="p{postrow.displayed.U_POST_ID}" class="post-section {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}">
         <div class="post-head">
                          <div class="post-icon"><i class="material-icons">person</i>{postrow.displayed.POSTER_AVATAR}</div><h2>{postrow.displayed.POST_DATE_NEW}</h2>
            <div class="post-details">{L_TOPIC_BY} {postrow.displayed.POSTER_NAME}</div>
         </div>
         <div class="post-content">
            {postrow.displayed.MESSAGE}
                  <!-- BEGIN switch_attachments -->
                  <div class="attachbox">
                     <p class="title">{postrow.displayed.switch_attachments.L_ATTACHMENTS}</p>
                     <dl class="attachments">
                        <!-- BEGIN switch_post_attachments -->
                           <dt>
                              <!-- BEGIN switch_dl_att -->
                              <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                              <!-- END switch_dl_att -->
                              <!-- BEGIN switch_no_dl_att -->
                              {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                              <!-- END switch_no_dl_att -->
                           </dt>
                           <dd>
                              <!-- BEGIN switch_no_comment -->
                              <p>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</p>
                              <!-- END switch_no_comment -->
                              <!-- BEGIN switch_no_dl_att -->
                              <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>
                              <!-- END switch_no_dl_att -->
               <p>(<span class="ltr">{postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}</span>) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</p>
            </dd>
                  <!-- END switch_post_attachments -->
                     </dl>
                  </div>
                  <!-- END switch_attachments -->
                         
         </div>
                  {postrow.displayed.EDITED_MESSAGE}
      </div>
      <!-- BEGIN first_post_br -->
      <hr id="first-post-br" />
      <!-- END first_post_br -->
   <!-- END displayed -->
 
</div>
<!-- END postrow -->
<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
<div class="post-section" id="prv-btns">
  <a class="btn" href="{U_VIEW_OLDER_TOPIC}" rel="nofollow">الموضوع السابق</a>
  <a class="btn" id="new-topic" href="{U_VIEW_NEWER_TOPIC}" rel="nofollow">الموضوع التالي</a>
<br />
</div>

{INLINE_MESSAGE}
{QUICK_REPLY_FORM}

<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="btn-floating">
   <i class="material-icons"></i>
</a>
<!-- END switch_user_authreply -->
تحياتي لك tongue
avatar
omarpop23
 
 

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

http://www.best-devs.net

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

رد: تغيير استايل الجوال

مُساهمة من طرف Anas 1657 في الأحد 3 يوليو 2016 - 5:05

@0marp0p23 جزاك الله خيرا أخي , النتيجة جميلة
لاكن هل ممكن بتعديل بسيط جدا , لقالب الـ overall_header

أريد جعل خلفية تمدد
كما تلاحظ الخلفيه غير متناسقه:




ويحدث فيها تكرار مزعج.


وختاما أسال الله لك التوفيق دنيا وآخره أخي @0marp0p23
avatar
Anas 1657
 
 

ذكر
عدد المساهمات : 245
معدل النشاط : 1320
السُمعة : -1

http://www.anas16572.com/

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

رد: تغيير استايل الجوال

مُساهمة من طرف Anas 1657 في الأحد 3 يوليو 2016 - 6:22

ولقد لاحظت مشكلة , وهي عندما يريد شخص , إرسال مساهمه في أحد المواضيع
تظهر مشكلة :

هذا فديو توضيحي للمشكلة
https://drive.google.com/open?id=0B7xCbZ7xVvp8R19lZFJLa3Jpd0U
avatar
Anas 1657
 
 

ذكر
عدد المساهمات : 245
معدل النشاط : 1320
السُمعة : -1

http://www.anas16572.com/

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

رد: تغيير استايل الجوال

مُساهمة من طرف omarpop23 في الأحد 3 يوليو 2016 - 6:28

حل المشكلة الاولي

قم بالبحث في قالب ال overall_header عن
الكود:
#wrap {
    background: url(http://i84.servimg.com/u/f84/19/23/51/91/img_1410.jpg);
}
قم باضافة السطر التالي اليه
الكود:
background-size: cover;
ليصبح النتيجه هكذا


حل المشملة الثانية:

قم بالبحث في قالب ال overall_header عن
الكود:
<script type="text/javascript" src="http://cocss.arab.st/43497.js"></script>
واحذفة

سجل و انشر
avatar
omarpop23
 
 

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

http://www.best-devs.net

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

رد: تغيير استايل الجوال

مُساهمة من طرف Anas 1657 في الأحد 3 يوليو 2016 - 6:46

@0marp0p23
خدمة ممتازة + رد سريع + فهم سريع ماشاء الله
كلمات الإطراء تعجز عن وصفك , وفقك الله :وردة153:
شكرا جزيلا Cool

مع التحية
avatar
Anas 1657
 
 

ذكر
عدد المساهمات : 245
معدل النشاط : 1320
السُمعة : -1

http://www.anas16572.com/

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

رد: تغيير استايل الجوال

مُساهمة من طرف Anas 1657 في الأحد 3 يوليو 2016 - 6:54

يغلق (تم الحل)
avatar
Anas 1657
 
 

ذكر
عدد المساهمات : 245
معدل النشاط : 1320
السُمعة : -1

http://www.anas16572.com/

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

صفحة 2 من اصل 2 الصفحة السابقة  1, 2

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


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