منتدى الدعم العربي لمنتديات أحلى منتدى
مرحبا بك في منتدى دعم منتديات AhlaMontada

لتتمكن من الإستمتاع بكافة ما يوفره لك هذا المنتدى من خصائص, يجب عليك أن تسجل الدخول الى حسابك في المنتدى. إن لم يكن لديك حساب بعد, نتشرف بدعوتك لإنشائه.

انشاء منتدى مجاني شبيه بهذا المنتدى

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

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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

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

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

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

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


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



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

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

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

Anas 1657
 
 

ذكر
عدد المساهمات : 242
معدل النشاط : 876

http://www.anas16572.com/

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


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

مُساهمة من طرف 0marp0p23 في الأحد 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 -->

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

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

0marp0p23
أحلى مساعدة
أحلى  مساعدة

ذكر
عدد المساهمات : 735
معدل النشاط : 2439

http://cocss.arab.st

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

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

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

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




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

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


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

Anas 1657
 
 

ذكر
عدد المساهمات : 242
معدل النشاط : 876

http://www.anas16572.com/

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

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

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

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


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

Anas 1657
 
 

ذكر
عدد المساهمات : 242
معدل النشاط : 876

http://www.anas16572.com/

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

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

مُساهمة من طرف 0marp0p23 في الأحد 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

0marp0p23
أحلى مساعدة
أحلى  مساعدة

ذكر
عدد المساهمات : 735
معدل النشاط : 2439

http://cocss.arab.st

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

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

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

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

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




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


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

Anas 1657
 
 

ذكر
عدد المساهمات : 242
معدل النشاط : 876

http://www.anas16572.com/

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

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

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

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

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

Anas 1657
 
 

ذكر
عدد المساهمات : 242
معدل النشاط : 876

http://www.anas16572.com/

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

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

مُساهمة من طرف 0marp0p23 في الأحد 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>
واحذفة

سجل و انشر

0marp0p23
أحلى مساعدة
أحلى  مساعدة

ذكر
عدد المساهمات : 735
معدل النشاط : 2439

http://cocss.arab.st

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

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

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

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

مع التحية

Anas 1657
 
 

ذكر
عدد المساهمات : 242
معدل النشاط : 876

http://www.anas16572.com/

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

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

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

يغلق (تم الحل)

Anas 1657
 
 

ذكر
عدد المساهمات : 242
معدل النشاط : 876

http://www.anas16572.com/

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

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

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة


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