يك مشكل در استايل دادن به ابزارك

[pary_daryayi 181]

سلام دوستان. بخشي از كد css مربوط به سايد بار , عنوان و نوشته هاي ابزارك من به اين صورته :

#side{
width:100%;
min-height:150px;
background-color:#fff;
border-radius:10px;
direction:rtl;
}
#side-title{
width:95%;
height:20px;
border-bottom:1px #e8e8e8 solid;
}
#side-text{
width:95%;
min-height:100px;
}

function رو هم تنظيم كردم.

register_sidebar( array (
  'name' => __( 'line1' ),
  'id' => 'line1',
  'before_widget' => '<div id="side-text">',
  'after_widget' => '</div>',
  'before_title' => '<div id="side-title"><h4>',
  'after_title' => '</h4></div>',
) );

مشكلي كه وجود داره اينه كه همشون پشت سر هم قرار ميگيرند و مثلا بين " موضوعات " و " دسته ها " فاصله اي نيست.

علت هم به خاطر كد CSS نيست , چون خارج وردپرس درست كار ميكنه . علت اين كد هست كه با يك خط كل مطالب در دايو side-text فراخواني ميشه.

<div id="side">
<?php if ( is_active_sidebar( 'line1' ) ) : dynamic_sidebar( 'line1'); endif; ?>
</div>

اين رو چطور حل كنم؟

-----------------------------------

مرسي

ویرایش شده بهمن 91 توسط pary_daryayi

[Morteza 34190]

سلام

الان روی سایتتون هست تا در عمل کدها رو ببینیم؟

[pary_daryayi 181]

نه هنوز ؛ بازم امتحان ميكنم , اگر نشد يه عكس نمونه ازش ميزارم . مرسي

[kasra 4929]

سلام

چرا دیگه دوست عزیز ایراد از css هست

شما باید بین 2 ابزارک رو در css بهش مثلن margin-bottom بدین تا فاصله ایجاد کنه

اینکه میگید خارج از وردپرس درسته میتونه به دلایل مختلفی باشه

شما الآن هم در آیدی side و هم در کلاسی که در فانکشن دادین میتونید با استفاده از margin بینشون فاصله بدید

[pary_daryayi 181]

مرسي . من هم قبل از اينكه اين كد رو بزارم از margin-bottom استفاده كرده بودم ولي نتيجه نميده .فكر ميكنم به اين علت كه درون يك حلقه نيست كه بعد از اجراي اولي , فاصله اي ايجاد بشه و حلقه ي بعد اجرا بشه . همشون پشت سر هم قرار ميگيرند . من ميخوام به اين شكل بشه :

--------------------

پ . ن : از پيوست فايل استفاده ميكنم ولي عكس ضميمه نميشه . از كدوم آيتم بايد استفاده بشه ؟

ویرایش شده بهمن 91 توسط pary_daryayi

[isk 4447]

من ميخوام به اين شكل بشه :

--------------------

پ . ن : از پيوست فايل استفاده ميكنم ولي عكس ضميمه نميشه . از كدوم آيتم بايد استفاده بشه ؟

مثل کدوم؟

بعد از پیوست فایل، افزودن به متن رو هم میزنید؟

[pary_daryayi 181]

مثل عكس اول ميخوام بشه.(از سمت راست )

ولي مثل عكس دومي ميشه !

در كد css هم margin-bootom هم در side و هم در side-text گذاشتم.

مرسي

ویرایش شده بهمن 91 توسط pary_daryayi

[سعید شعبانی 2047]

شما آدرس آنلاینش رو بدید چک می کنم اینجوری سخته ممکن هست کد های دیگه ای روی سایدبار هم اثر بگذارند

[pary_daryayi 181]

حق با شماست . فعلا در حال يادگيري هستم , آپ كه كردم آدرس رو ميزارم.

[imanfakhar 26231]

استدلالتون در مورد اینکه داخل وردپرس ایراد داره پس از css نیست اشتباهه

کد در قالب شما از جای دیگه ای هم داره استایل می گیره مثلا از ul یا li به صورت عمومی

شما این کد را به کدهای css اضافه کنید و تست بگیرید

در ضمن در کد php بهتره هر دو id را به class تبدیل کنید تا بعدا به مشکل نخورید اگر تبدیل کردید در استایل بجای

#side-text

باید

.side-text

قرار بدید (همینطور در مورد css های خودتون

#side-text
{ margin-top:10px;
margin-bottom:10px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-khtml-border-radius:12px;
}
#side-title
{padding:3px}

[pary_daryayi 181]

مرسي آقاي استاد . حل شد ؛ يه كم دقتي ديگه هم در يه جاي كد داشتم كه برطرف شد .

[pary_daryayi 181]

دوستان مشكل قبلي حل شد ؛ از همه ممنون . يه سوال ديگه در اين قسمت دارم :

اين كد رو ببينيد :

register_sidebar( array (
  'name' => __( 'line1' ),
  'id' => 'line1',
  'before_widget' => '<div id="side-text">',
  'after_widget' => '</div>',
  'before_title' => '<div id="side-title"><h4>',
  'after_title' => '</h4></div>',
) );

بصورت پيش فرض before_title و after_title درون دايو before_widget و after_widget قرار ميگيرند .

يعني در اجرا دايو ها به اين صورت چيدمان شدند :

<div class="side-text">
<div  class="side-title"></div>
</div>

ولي من ميخوام به اين صورت باشه

<div  class="side-title"></div>
<div class="side-text"></div>

اين چيدمان رو چطور ميتونم تو function تغيير بدم ؟

مرسي

[imanfakhar 26231]

register_sidebar( array (
'name' => __( 'line1' ),
'id' => 'line1',
'before_widget' => '<div class="side-text">',
'after_widget' => '</div></div>',
'before_title' => '<div class="side-title"><h4>',
'after_title' => '</h4></div><div class="side-body">',
) );

یعنی

<div class="side-text">
<div class="side-title">
<h3>عنوان </h3></div>
<div class="side-body">
آیتم ها
</div>
</div>

سئوال جدید تایپیک جدید لطفا