التصنيف: دعم عام
التصنيف: دعم عام
  • إضافة schema سكيما للصورة البارزة itemprop
  • الالوان في ستايل اضافة News-Ticker-Benaceur لا تعمل
  • اريد كود جعل الصور متساوية في الرئيسية

إضافة schema سكيما للصورة البارزة itemprop

مرحبا أخي ، لقد قمت بتثبيت كود ولاكن أواجه مشكلةإنه يعمل بشكل جيد هناht...
mansor2020 |24 ديسمبر 2020 |5

الالوان في ستايل اضافة News-Ticker-Benaceur لا تعمل

مرحبا الالوان في ستايل اضافة News-Ticker-Benaceur لا تعمل و شريط الاخبار معدل ع...
soufien |4 ديسمبر 2020 |1

اريد كود جعل الصور متساوية في الرئيسية

السلام عليكملديا مشكلة في موقعي الشريط الجانبي يعمل داخل المقالات جيداو...
mansor2020 |8 نوفمبر 2020 |8

  • كيف اجعل عناوين المواضع على الصورة

2017/12/19

السلام عليكم

كي اجعل عناوين المواضيع داخل الصورة

 

مثل هذ الموقع  http://www.alqemanews.com/?noc=4786173151

 

صورة تبين ذالك


شارك هذا الموضوع على:

رابط الموضوع للنسخ

أضف تعليقك | سجّل دخولك

تعليقاتك تحتاج في هذا الموضوع إلى المراجعة قبل النشر



  1. سيرة الذاتية
    ---------------------------
    لم يقم بكتابة سيرته بعد
  2. kora24 من الجزائر ← علّقَ : 56 تعليقا
    عضو

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



  3. سيرة الذاتية
    ---------------------------
    أقوم بتطوير وإنشاء المواقع خاصة الووردبريس وما يتعلق به كالإضافات حيث ساهمت بخمس إضافات من تطويري, ولذلك فموقعي هذا جعلته يهتم بالدرجة الأولى بتطوير ودعم الووردبريس, ثم الأنترنت والمواقع الإلكترونية بصفة عامة ...
  4. BENACEUR ← علّقَ : 262 تعليقا
    إدارة الموقع

    عذرا, تم إصلاح الرابط.



  5. سيرة الذاتية
    ---------------------------
    لم يقم بكتابة سيرته بعد
  6. kora24 من الجزائر ← علّقَ : 56 تعليقا
    عضو

    اهلا اخي بن ناصر

    لا يمكن راية المحتوى الصورة من موقعك
    [محتوى مخفي]



  7. سيرة الذاتية
    ---------------------------
    أقوم بتطوير وإنشاء المواقع خاصة الووردبريس وما يتعلق به كالإضافات حيث ساهمت بخمس إضافات من تطويري, ولذلك فموقعي هذا جعلته يهتم بالدرجة الأولى بتطوير ودعم الووردبريس, ثم الأنترنت والمواقع الإلكترونية بصفة عامة ...
  8. BENACEUR ← علّقَ : 262 تعليقا
    إدارة الموقع

    تفضل استبدل ملف functions.php بهذا:
    [محتوى مخفي]
    ثم أسفل “تنسيقات (CSS) إضافية” تماما ضع التالي:

    .post-image29 img {width:100%;height: 160.7px !important;}
    @media (max-width: 776px){.post-image29 img {height: 140px !important;}}
    @media (max-width: 615px){.post-image29 img {height: 120px !important;}}

    انتهى.



  9. سيرة الذاتية
    ---------------------------
    لم يقم بكتابة سيرته بعد
  10. kora24 من الجزائر ← علّقَ : 56 تعليقا
    عضو

    المشكلة بالهاتف جيدة فقط بالكمبيوتر

    تظهر المشكة بالصورة التالية
    هنا في هذا المقال
    [محتوى مخفي]



  11. سيرة الذاتية
    ---------------------------
    أقوم بتطوير وإنشاء المواقع خاصة الووردبريس وما يتعلق به كالإضافات حيث ساهمت بخمس إضافات من تطويري, ولذلك فموقعي هذا جعلته يهتم بالدرجة الأولى بتطوير ودعم الووردبريس, ثم الأنترنت والمواقع الإلكترونية بصفة عامة ...
  12. BENACEUR ← علّقَ : 262 تعليقا
    إدارة الموقع

    تقصد “اقرأ أيضا”؟ الصور تظهر لي متساوية وليس بها أي مشكلة!



  13. سيرة الذاتية
    ---------------------------
    لم يقم بكتابة سيرته بعد
  14. kora24 من الجزائر ← علّقَ : 56 تعليقا
    عضو

    والله اشكرك اخي بن ناصر انحلت المشكلة
    جزاك الله كل خير اصبح كل شيء جيد

    فقط نقطة صغيرة هي مواضيع ذات صلة الصورة حجمها غير متساوي

    فقط هذا المقال
    [محتوى مخفي]



  15. سيرة الذاتية
    ---------------------------
    أقوم بتطوير وإنشاء المواقع خاصة الووردبريس وما يتعلق به كالإضافات حيث ساهمت بخمس إضافات من تطويري, ولذلك فموقعي هذا جعلته يهتم بالدرجة الأولى بتطوير ودعم الووردبريس, ثم الأنترنت والمواقع الإلكترونية بصفة عامة ...
  16. BENACEUR ← علّقَ : 262 تعليقا
    إدارة الموقع

    مشكلة الصور الغير متساوية موجودة أصلا في قالبك وليست من الكود الذي أعطيته إياك والسبب هو أن أصل الصور غير متساوية
    ولحل هذه المشكلة + مشكلة تمدد خلفية العنوان من الجانبين استبدل ملف content.php بهذا:
    [محتوى مخفي]
    ثم ضع التالي أسفل الأكواد الأكواد تماما أي أسفل “تنسيقات (CSS) إضافية” لا تحذف الأكواد الأول:

    .post-image28 img {	width:100%;height: 255px !important;}
    @media (max-width: 1100px){.post-image28 img {height: 230px !important;}}
    @media (max-width: 900px){.post-image28 img {height: 190px !important;}}
    @media (max-width: 740px){.post-image28 img {height: 160px !important;}}
    @media (max-width: 650px){.post-image28 img {height: 150px !important;}}
    .post-image2.home.single img {min-width:100% !important}

    انتهى



  17. سيرة الذاتية
    ---------------------------
    لم يقم بكتابة سيرته بعد
  18. kora24 من الجزائر ← علّقَ : 56 تعليقا
    عضو

    السلام عليكم

    اقصد التمدد اخفائه من الجانبين حتى لايظهر
    كما انه ظهرت مشكلة اخرى وهي الصور اصبحت غير متساوية
    مثل هنا في الرئيسية
    [محتوى مخفي]



  19. سيرة الذاتية
    ---------------------------
    أقوم بتطوير وإنشاء المواقع خاصة الووردبريس وما يتعلق به كالإضافات حيث ساهمت بخمس إضافات من تطويري, ولذلك فموقعي هذا جعلته يهتم بالدرجة الأولى بتطوير ودعم الووردبريس, ثم الأنترنت والمواقع الإلكترونية بصفة عامة ...
  20. BENACEUR ← علّقَ : 262 تعليقا
    إدارة الموقع

    تمدد خلفية العنوان من الجانبين فهمتها فماذا تقصد بالكتابة من اليمين؟



  21. سيرة الذاتية
    ---------------------------
    لم يقم بكتابة سيرته بعد
  22. kora24 من الجزائر ← علّقَ : 56 تعليقا
    عضو

    جزيت خيرا اخي بن ناصر
    تم وضع الكود بنجاح ولاكن شاهد كيف اصبح يظهر

    من داخل المقالة
    الكتابة باليمين مع ظهور حواش ابيض من اليمين واليسار للصورة
    [محتوى مخفي]



  23. سيرة الذاتية
    ---------------------------
    أقوم بتطوير وإنشاء المواقع خاصة الووردبريس وما يتعلق به كالإضافات حيث ساهمت بخمس إضافات من تطويري, ولذلك فموقعي هذا جعلته يهتم بالدرجة الأولى بتطوير ودعم الووردبريس, ثم الأنترنت والمواقع الإلكترونية بصفة عامة ...
  24. BENACEUR ← علّقَ : 262 تعليقا
    إدارة الموقع

    تفضل استبدل ملف single.php بهذا:
    [محتوى مخفي]
    ثم ضع التالي أسفل الأول في “تنسيقات (CSS) إضافية”:

    .post-image2.home.single{max-width:816px;position:relative;margin-bottom:40px}@media (min-width: 761px){.post-title2.home a{font-size:18px}}@media (max-width: 760px){.post-title2.home a{font-size:16px}}.post-title2.home a{font-weight:400;margin:0 auto;right:0;left:0;bottom:3px;position:absolute;color:#fff;padding:24px 10px 14px;moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s;text-shadow:1px 1px 1px #000,1px -1px 1px #000,-1px 1px 1px #000,-1px -1px 1px #000;-webkit-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;transition:all .1s ease-in-out;background:linear-gradient(to bottom,rgba(255,0,0,0.0) 0%,rgba(255,0,0,0.4) 90%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#000000',GradientType=0)}.post-title-a2.home-a:hover + .post-title2.home a{padding-bottom:18px;text-decoration:none}.post-title2.home a:hover{padding-bottom:18px;text-decoration:none;color:#fff}

    انتهى



  25. سيرة الذاتية
    ---------------------------
    لم يقم بكتابة سيرته بعد
  26. kora24 من الجزائر ← علّقَ : 56 تعليقا
    عضو

    اهلا اخي
    تفضل القالب

    [محتوى مخفي]



  27. سيرة الذاتية
    ---------------------------
    لم يقم بكتابة سيرته بعد
  28. kora24 من الجزائر ← علّقَ : 56 تعليقا
    عضو

    هل من طريقة لتطبيقه داخل المقالات ربح بعض المساحة



  29. سيرة الذاتية
    ---------------------------
    لم يقم بكتابة سيرته بعد
  30. kora24 من الجزائر ← علّقَ : 56 تعليقا
    عضو

    واو ماشاء الله ابداع في ابداع والله اندهشت لشكل الرابط اقسم بالله اخي بن ناصر
    لك كل الدعاء من قلبي لك يااخي الكريم
    فقط هناك نقطة اخيرة مادامت الروابط شغاة وكل شيء تمام كيف احذف كما في الصورة
    [محتوى مخفي]

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



  31. سيرة الذاتية
    ---------------------------
    أقوم بتطوير وإنشاء المواقع خاصة الووردبريس وما يتعلق به كالإضافات حيث ساهمت بخمس إضافات من تطويري, ولذلك فموقعي هذا جعلته يهتم بالدرجة الأولى بتطوير ودعم الووردبريس, ثم الأنترنت والمواقع الإلكترونية بصفة عامة ...
  32. BENACEUR ← علّقَ : 262 تعليقا
    إدارة الموقع

    استبدله بهذا:
    [محتوى مخفي]
    بعد ذلك حرر ملف style.css وضع في أسفله التالي أو ضعه في “تنسيقات (CSS) إضافية”:

    /* Title post on post-image -------------------------------------- */
    .post-image.home {
    	position: relative;
    }
    .post-title.home a {
    	font-size:16px;
    	font-weight: normal;
    	bottom: 0;
    	left: 0;
    	right:0;
    	position: absolute;
    	color: white;
    	padding: 10px;
        moz-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        text-shadow: 1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000;
        -webkit-transition: all 0.1s ease-in-out;
        -o-transition: all 0.1s ease-in-out;
        -ms-transition: all 0.1s ease-in-out;
        transition: all 0.1s ease-in-out;
        background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 90%);
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 90%);
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 90%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
    }
    .post-title-a.home-a:hover + .post-title.home a {
    	padding-bottom:13px;
    	text-decoration: none;
    }
    .post-title.home a:hover {
    	padding-bottom:13px;
    	text-decoration: none;
    }
    /* Title post on post-image -------------------------------------- */

    أضف كذلك إمكانية رؤية اسم التصنيف أو التصنيفات التي تنتمي إليها المقالة عند الوقوف بالماوس على الصورة.
    انتهى.



  33. سيرة الذاتية
    ---------------------------
    أقوم بتطوير وإنشاء المواقع خاصة الووردبريس وما يتعلق به كالإضافات حيث ساهمت بخمس إضافات من تطويري, ولذلك فموقعي هذا جعلته يهتم بالدرجة الأولى بتطوير ودعم الووردبريس, ثم الأنترنت والمواقع الإلكترونية بصفة عامة ...
  34. BENACEUR ← علّقَ : 262 تعليقا
    إدارة الموقع

    ارفع ملف content.php وضع رابطه هنا في رد
    حدد الرابط واضغط على أيقونة “إخفاء” حتى يظهر لإدارة الموقع فقط وليس للجميع



  35. سيرة الذاتية
    ---------------------------
    لم يقم بكتابة سيرته بعد
  36. kora24 من الجزائر ← علّقَ : 56 تعليقا
    عضو

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



  37. سيرة
    use
    الذاتية
    ---------------------------
    السيرة الذاتية للمسجلين في الموقع
  38. use من الوطن العربي ← علّقَ : 28 تعليقا
    زائر

    في القالب ابحث عن:

    the_post_thumbnail()

    فهو المسؤول عن إظهار الصورة البارزة
    وابحث عن:

    the_title()

    فهو الذي يظهر العنوان المقالة ثم عدل ما يجب تعديله فيجب أن تعرف كيف تعدل على موقعك لأنك تملك موقعا وتديره ودائما ستحتاج للتعديل فيجب أن تعرف قالبك جيدا وكيفية التعديل.
    ————–
    هذا مثال آخر عن إظهار نص فوق صورة بشكل جميل عن تمرير الفأرة فوقها:
    html:

    <div class="image-frame">
    	<img src="4.jpg"/>
    	<div class="image-caption">
    	  <h2>Slide1</h2>
    	  Mouse over Slide 1 to view the caption.
    	</div>
    </div>
    <div class="image-frame">
    	<img src="2.jpg"/>
    	<div class="image-caption">
    	  <h2>Slide2</h2>
    	  Mouse over Slide 2 to view the caption.
    	</div>
    </div>

    css:

    .image-frame {
    	float: left;
    	position: relative;
    	margin: 5px;
    	color: #333;
    }
    .image-frame .image-caption {
    	display: none;
    	opacity: 0.8;
    	background:#cae5c1;
    	width: 290px;
    	position: absolute;
    	bottom: 0px;
    	padding: 5px;
    }

    jQuery:

    jQuery(document).ready(function($) {
        $('.image-frame').hover(function(){
    		$('.image-caption',this).slideToggle('slow');
    	}, function(){
    		$('.image-caption',this).slideToggle('slow');
        });
    });

    بالتوفيق حبيبي



  39. سيرة
    use
    الذاتية
    ---------------------------
    السيرة الذاتية للمسجلين في الموقع
  40. use من الوطن العربي ← علّقَ : 28 تعليقا
    زائر

    هذه طريقتين لجعل العنوان أو نص على الصورة وأنت طبق على موقعك:
    الأولى:
    كود html:

    <div class="module top">
      <h2>Skyscrapers</h2>
    </div>
    
    <div class="module mid">
      <h2>Skyscrapers</h2>
    </div>
    
    <br style="clear: both;">
    
    <div class="module cap">
      <p>Skyscraper are really neat and stuff because they are tall.</p>
    </div>
    
    <div class="module lr">
      <p>Skyscrapers sometimes have nicknames like jim or shim.</p>
    </div>

    كود css

    @import url(https://fonts.googleapis.com/css?family=Roboto:400,900);
    
    .module {
      background: 
        linear-gradient(
          rgba(0, 0, 0, 0.6),
          rgba(0, 0, 0, 0.6)
        ),
        url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
      background-size: cover;
      width: 300px;
      height: 200px;
      margin: 10px 0 0 10px;
      position: relative;
      float: left;
    }
    
    .top h2 {
      color: white;
      margin: 0;
      padding: 20px;
    }
    
    .lr p {
      font-family: 'Roboto', sans-serif;
      position: absolute;
      bottom: 20px;
      left: 20px;
      color: white;
      margin: 0;
    }
    
    .mid h2 {
      font-family: 'Roboto', sans-serif;
      font-weight: 900;
      color: white;
      text-transform: uppercase;
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 2rem;
      transform: translate(-50%, -50%);
    }
    
    .cap p {
      padding: 20px;
      color: white;
      font: 12px Monaco, Mono-Space;
      margin: 0;
    }

    الثانية:
    كود html:

    <div class="container">
      <img src="img_fjords_wide.jpg" alt="Norway" style="width:100%;">
      <div class="bottom-left">Bottom Left</div>
      <div class="top-left">Top Left</div>
      <div class="top-right">Top Right</div>
      <div class="bottom-right">Bottom Right</div>
      <div class="centered">Centered</div>
    </div>

    كود css

    /* Container holding the image and the text */
    .container {
        position: relative;
        text-align: center;
        color: white;
    }
    
    /* Bottom left text */
    .bottom-left {
        position: absolute;
        bottom: 8px;
        left: 16px;
    }
    
    /* Top left text */
    .top-left {
        position: absolute;
        top: 8px;
        left: 16px;
    }
    
    /* Top right text */
    .top-right {
        position: absolute;
        top: 8px;
        right: 16px;
    }
    
    /* Bottom right text */
    .bottom-right {
        position: absolute;
        bottom: 8px;
        right: 16px;
    }
    
    /* Centered text */
    .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }


  41. سيرة الذاتية
    ---------------------------
    لم يقم بكتابة سيرته بعد
  42. kora24 من الجزائر ← علّقَ : 56 تعليقا
    عضو

    كنت اعرف موقع ولاكن لا اعرف رابطه دخلته بالصدفة … وانا ابحث على هذه الميزة موجودة في مواقع ووردبريس ولا زلت ابحث لاعطيكم مثال



  43. سيرة
    use
    الذاتية
    ---------------------------
    السيرة الذاتية للمسجلين في الموقع
  44. use من الوطن العربي ← علّقَ : 28 تعليقا
    زائر

    الموقع الذي وضعته كمثال ليس ووردبريس
    ممكن تعطينا مثال في موقع يكون يستخدم الووردبريس حتى نرى كيف يتم استعمال العنوان فوق الصورة؟