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

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

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

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

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

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

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

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

نعم صحيح , هذا لان ورقة css لايوجد بها أي أكواد , غير الاكواد الخاصه بنسخة الجوال
لان المنتدى للتجربه

ولكن عن اضافة ورقة css الخاصة بمنتداي الاصلي ( الذي يتحوي على اكواد كثيره)
واضافة ايضا التومبلايتات , يحدث مشكله بالتصميم في نسخة الجوال:

الان اضفت ورقة css التابعه (لمنتداي الاصلي)
www.anas16572.com

الى ورقة css (المنتدى التجريبي)
http://778816572.forumarabia.com/
واضفت أيضا التومبلايتات

ستجد اختلاف كبير عن السابق
ومشاكل كثيرة

في انتظار تفاعلكم Sad

ابحث بقالب الهيدر لنسخة الجوال عن الاتي
</header>
وضع اعلاة الاتي
<style>
هنا اكواد css لنسخة الجوال
</style>
واضيف بينهما اكواد css التابعه لنسخة الجوال وسجل وانشر

اين مشكلتك بالتحديد
تغيير استايل الجوال 161ykqf

ان كانت ان وجهة المنتدي تظهر اسفل الاعلانات فهذا خطأ بسيط في كود الcss
قم بالتعديل علي كود ال css التالي الموجود في منتداك

الكود:: .banniere, #m_dcontentglobal_ad_id1 {
background: url(http://i68.servimg.com/u/f68/19/23/51/91/oia_o_12.png) no-repeat scroll center;
height:200px;
max-width: 100%
}

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

الكود:: .banniere:before {
background: url(http://i68.servimg.com/u/f68/19/23/51/91/oia_o_12.png) no-repeat scroll center;
height:200px;
max-width: 100%
}

JAR7 كتب:: ابحث بقالب الهيدر لنسخة الجوال عن الاتي
</header>
وضع اعلاة الاتي
<style>
هنا اكواد css لنسخة الجوال
</style>
واضيف بينهما اكواد css التابعه لنسخة الجوال وسجل وانشر

لقد بحث في قالب الهيدر الخاص بنسخة الجوال
ولم أجد :
</header>

هذا قالب (overall_header) الخاص بنسخة الجوال أخي @JAR7

الكود:: <!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}" />

<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />

{META}
{META_FAVICO}
{T_HEAD_STYLESHEET}
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1" />
<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 type="text/javascript">
//<![CDATA[
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
   _gaq.push(['_trackPageview']);


_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>

{HOSTING_JS}
</head>
<body>

<div id="mpage-body">
   <div id="top">
      <div class="mobile_title application_header">
      {NAV_CAT_DESC}
</div> <div class="navbar"><a href="/"> </a>    <a href="/privmsg?folder=inbox"> </a>    <a href="/register"> </a>    <a href="/index.forum?mobile&redirect=%2F"> </a>    <a href="/login?logout"> </a>
</div><div class="head"></div><a class="navc" href="javascript:history.go(-1)"> </a>
   <div style="padding-top:33px;">


   </div>
   </div>
</div>
</body>
</html>


<center><script type="text/javascript">
google_ad_client = "ca-pub-2118468146748282";
google_ad_slot = "9539024858";
google_ad_width = 320;
google_ad_height = 50;
</script>

<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>

أين أنتم

هذا هو مظهر المنتدى قبل تفعيل التومبلايتات + وقبل إضافة ورقة CSS الخاصة بي

وهذا مظهر المنتدى بعد تفعيل التومبلايتات + وبعد إضافة ورقة CSS الخاصة بي

كما تلاحظون:
هناك مشاكل عند اضافة أكواد ورقة CSS الخاصة بي
و تفعيل التومبلايتات.

عارضة المنتدى إختفت . وصورة الهيدر غير مرتبه
وعند فتح الموضوع , لا يمكنك قرائه المحتوى بوضوح , وعدة مشاكل

السلام عليكم

جرب هذا القالب ورد علي :

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}" />

<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />

{META}
{META_FAVICO}
{T_HEAD_STYLESHEET}
<style>
#wrap {
background: url("http://i84.servimg.com/u/f84/19/23/51/91/img_1410.jpg");
background-size: cover;
}
#assemDz img {
min-width: 100px;
}
</style>
<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>

<script type="text/javascript">
//<![CDATA[
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
   _gaq.push(['_trackPageview']);


_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>

{HOSTING_JS}
</head>
<body>
<div id="wrap">
   <div id="header" class="mobile_title">
      {NAV_CAT_DESC}
   </div>
<section id="assemDz">
<img src="http://i68.servimg.com/u/f68/19/23/51/91/oia_o_12.png">
</section>
   <main>

   </main>
</div>
</body>
</html>

assemDz كتب:

السلام عليكم

جرب هذا القالب ورد علي :

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}" />

<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />

{META}
{META_FAVICO}
{T_HEAD_STYLESHEET}
  <style>
   #wrap {
   background: url("http://i84.servimg.com/u/f84/19/23/51/91/img_1410.jpg");
   background-size: cover;
}
   #assemDz img {
   min-width: 100px;
}
  </style>
<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>

<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
_gaq.push(['_trackPageview']);


_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>

{HOSTING_JS}
</head>
<body>
<div id="wrap">
<div id="header" class="mobile_title">
{NAV_CAT_DESC}
</div>
   <section id="assemDz">
  <img src="http://i68.servimg.com/u/f68/19/23/51/91/oia_o_12.png">
  </section>
<main>

</main>
</div>
</body>
</html>

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

ممكن رابط المنتدى اللي ركبت عليه الاستايل ..

assemDz كتب:: ممكن رابط المنتدى اللي ركبت عليه الاستايل ..

الرابط:
http://778816572.forumarabia.com/
ملاحظة: لقد أرجعت الاكواد السابقة كما كانت
اذا اردت أن اضيف قالب overall_header مرة أخرى ف أخبرني

1- قم بأضافة اكواد ال CSS الاصلية للمنتدى
2- يبدو ان القوالب التي قمت بتركيبها جميعها توجد بها اخطاء من فضلك قم بحذفها واخبرنا بالتعديلات التي تريدها في نسخة الجوال
و سوف نقوم بالتعديل علي القوالب الأصلية لنسخة المنتدي لتظهر بالشكل الذي تريده.

0marp0p23 كتب:: 1- قم بأضافة اكواد ال CSS الاصلية للمنتدى
2- يبدو ان القوالب التي قمت بتركيبها جميعها توجد بها اخطاء من فضلك قم بحذفها واخبرنا بالتعديلات التي تريدها في نسخة الجوال
و سوف نقوم بالتعديل علي القوالب الأصلية لنسخة المنتدي لتظهر بالشكل الذي تريده.

أخي العزيز @0marp0p23
1- هذا هو الشكل الذي أرغب أن يكون عليه:

2- هذه ورقة CSS الخاصة بالمنتدى :
https://drive.google.com/open?id=0B7xCbZ7xVvp8cTF1TlEzS3FIWXM

3- هذا قالب 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>


{PAGINATION}

{POLL_DISPLAY}


<div id="{postrow.U_POST_ID}">

<div class="post {postrow.hidden.ROW_CLASS}" style="{postrow.displayed.DISPLAYABLE_STATE}">
<p style="text-align:center">{postrow.hidden.MESSAGE}</p>
</div>


<div id="p{postrow.displayed.U_POST_ID}" class="style2 post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
<div class="postbody">
<div class="post_header">{L_TOPIC_BY} {postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</div>
<div class="content">
<div>{postrow.displayed.MESSAGE}</div>

<div class="attachbox">
<p class="title">{postrow.displayed.switch_attachments.L_ATTACHMENTS}</p>
<dl class="attachments">

<dt>

<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}


{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}

</dt>
<dd>

<p>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</p>


<p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>

<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>

</dl>
</div>

</div>
{postrow.displayed.EDITED_MESSAGE}
</div>
</div>

<hr id="first-post-br" />


</div>


{PAGINATION}

{INLINE_MESSAGE}
{QUICK_REPLY_FORM}

<div id="mobileActionBar">
   <a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="navbar">
   <div class="mobileActionLabel">{L_POST_REPLY_TOPIC}</div>
   </a>
</div>


<div class="smallfont" align="center">
   <a href="{U_VIEW_NEWER_TOPIC}" rel="nofollow"><img alt="الموضوع السابق" src="http://i68.servimg.com/u/f68/19/23/51/91/oi11.png" style="float: right;" border="0" /></a> <a href="{U_VIEW_OLDER_TOPIC}" rel="nofollow"><img alt="الموضوع التالي" src="http://i68.servimg.com/u/f68/19/23/51/91/ooa10.png" style="float: left;" border="0" /></a>
</div>

<p>
</p>

<br>
  <br>
   <br>
   <br>

ويظهر بهذا الشكل:

باختصار:

المطلوب نسخة جوال متطورة بهذا الشكل ^__^ , مع إضافة ( التالي + السابق ) في أسفل الموضوع:
وهذه هي الصور المستخدمة : ( الهيدر + الخلفيه)
https://i.servimg.com/u/f68/19/23/51/91/oia_o_12.png
https://i.servimg.com/u/f84/19/23/51/91/img_1410.jpg
(الموضوع التالي + الموضوع السابق)
https://i.servimg.com/u/f68/19/23/51/91/ooa10.png
https://i.servimg.com/u/f68/19/23/51/91/oi11.png

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

@JAR7
@0marp0p23

اخي اولاً بعد اذن زملائي المساعدين
ركز جيداً ابحث في اكواد الـcss عن الكود التالي: الذي وضعه لك عمر

الكود:: .banniere, #m_dcontentglobal_ad_id1 {
background: url(http://i68.servimg.com/u/f68/19/23/51/91/oia_o_12.png) no-repeat scroll center;
height:200px;
max-width: 100%
}

وان لم تجده يكفيك ان تبحث عن رابط الصورة : https://i.servimg.com/u/f68/19/23/51/91/oia_o_12.png وحذف الكود حقه بالكامل

ثانياً عوضه بهذا الكود :

الكود:: #mpage-body {
background: url(http://i68.servimg.com/u/f68/19/23/51/91/oia_o_12.png) no-repeat scroll top center;
padding-top: 140px;
}

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

ثانياً اتمنى منك فصل اكواد CSS الخاصة بالجوال عن اكواد CSS حقت المنتدى وهذا بوضعه في قالب الهيدر فيما بعد

لكن الآن قم بفصلها بهذه الطريقة السهلة فصل الاكواد كالتالي :
استبدل ضع هنا الخ ... بجميع اكواد الـCSS حقت الجوال
ويمكنك وضع اكواد الجوال بالداخل :

الكود:: /*----- بداية اكواد الجوال -----*/
ضع هنا جميع اكواد الجوال
/*----- نهاية اكواد الجوال -----*/

ملاحظة*: نهاية هذا العمل كله يجب ان تنقل جميع الاكواد الى قالب الهيدر الخاص بالجوال وفيما بعد سنشرح لك هذا لكن الآن قم بالتعديلات التي قلت لك عليها وان شاء الله يصير خير

{عذآب} كتب:

اخي اولاً بعد اذن زملائي المساعدين
ركز جيداً ابحث في اكواد الـcss عن الكود التالي: الذي وضعه لك عمر

الكود:: .banniere, #m_dcontentglobal_ad_id1 {
background: url(http://i68.servimg.com/u/f68/19/23/51/91/oia_o_12.png) no-repeat scroll center;
height:200px;
max-width: 100%
}

وان لم تجده يكفيك ان تبحث عن رابط الصورة : https://i.servimg.com/u/f68/19/23/51/91/oia_o_12.png وحذف الكود حقه بالكامل

ثانياً عوضه بهذا الكود :

الكود:: #mpage-body {
background: url(http://i68.servimg.com/u/f68/19/23/51/91/oia_o_12.png) no-repeat scroll top center;
padding-top: 140px;
}

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

ثانياً اتمنى منك فصل اكواد CSS الخاصة بالجوال عن اكواد CSS حقت المنتدى وهذا بوضعه في قالب الهيدر فيما بعد

لكن الآن قم بفصلها بهذه الطريقة السهلة فصل الاكواد كالتالي :
استبدل ضع هنا الخ ... بجميع اكواد الـCSS حقت الجوال
ويمكنك وضع اكواد الجوال بالداخل :

الكود:: /*----- بداية اكواد الجوال -----*/
ضع هنا جميع اكواد الجوال
/*----- نهاية اكواد الجوال -----*/

ملاحظة*: نهاية هذا العمل كله يجب ان تنقل جميع الاكواد الى قالب الهيدر الخاص بالجوال وفيما بعد سنشرح لك هذا لكن الآن قم بالتعديلات التي قلت لك عليها وان شاء الله يصير خير

تم تنفيذ جميع الخطوات @{عذآب}
وهذه ورقة CSS الخاصة بي :
https://drive.google.com/open?id=0B7xCbZ7xVvp8VGFHSXZvb25wcEU

رابط المنتدى:
http://778816572.forumarabia.com/

جيد اخي قل لي ما رأيك في النتيجة؟

{عذآب} كتب:: جيد اخي قل لي ما رأيك في النتيجة؟

هذه هي النتيجة @{عذآب}

هذا مظهر المنتدى والمواضيع , عند تفعيل التومبيلاتات

هذا مظهر المنتدى والمواضيع , الغاء تفعيل التومبيلاتيات:

مازالت هناك بعض الاخطاء اخي @{عذآب}

اخي هذا بسبب تغير بعض الوسوم فمثلا : وسم class="row1" في نسخة الجوال اصبح :

الكود:: class="content"

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

لكن اعذرني حالياً سأخرج ويمكن ارجع لمكتبي الساعة 9:00 Cool

{عذآب} كتب:

اخي هذا بسبب تغير بعض الوسوم فمثلا : وسم class="row1" في نسخة الجوال اصبح :

الكود:: class="content"

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

لكن اعذرني حالياً سأخرج ويمكن ارجع لمكتبي الساعة 9:00 Cool

أخي @{عذآب}
إن كان يسهل عليك تعديل كل شي , إذا امتلكت عضويه المدير
فلامانع أن أرسل لك اسم العضويه وكلمة المرور.

فالمنتدى هو تجريبي , ويحتوي على جميع الاكواد , والتمبلايتات الموجودة بالمنتدى الأصلي.

لحظات و اكون وضعت لك الحل النهائي لهذه المشكلة

@{عذآب}
@0marp0p23

في انتظار مساعدتكم

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

صفحة 1 من اصل 2	انتقل الى الصفحة : 1, 2