آموزش فاصله انداختن بین دو ماژول در یک موقعیت

[رضاقاسمی 1,539]

سلام و خسته نباشید

یه سوال داشتم

شما حساب کنید توی طراحی قالب یه موقعیت داریم به نام Right که توی خیلی قالب ها هست.

حالا دو تا ماژول رو چطوری میشه توی این موقعیت قرار داد که معلوم نباشه توی یه موقعیت در اصل فاصله انداخت بینش

مثلا قالب bluespace رو ببینید

روی این سایت نصبه:

horam.ir

همونطور که میبیند بین دو ماژولی که در موقعیت right تعریف شده اند فاصله افتاد به صورتی که انگار دو div داریم که border-radius گرفتن.

بین ماژول گالری و بخش ورود رو ببینید.

ویرایش شده آبان 93 توسط رضا قاسمی

[m4mali 478]

سلام و خسته نباشید

یه سوال داشتم

شما حساب کنید توی طراحی قالب یه موقعیت داریم به نام Right که توی خیلی قالب ها هست.

حالا دو تا ماژول رو چطوری میشه توی این موقعیت قرار داد که معلوم نباشه توی یه موقعیت در اصل فاصله انداخت بینش

مثلا قالب bluespace رو ببینید

روی این سایت نصبه:

horam.ir

همونطور که میبیند بین دو ماژولی که در موقعیت right تعریف شده اند فاصله افتاد به صورتی که انگار دو div داریم که border-radius گرفتن.

بین ماژول گالری و بخش ورود رو ببینید.

 

خوب متوجه پرسش ات نشدم اما خوب چون به اون div رو margin:5px داده . توی پرونده template.css  رج 2453.

 

اگه میخواهید تنها اون ماژول فرم ورود رو margin:0 بدید باید پیشوند ماژول براش بگذارید که آموزش آن در فروم هست.

[رضاقاسمی 1,539]

منظورم اینه که چطوری میشه توی یه موقعیت ماژول هایی که قرار میگیره از هم جدا کرد و بهم چسبیده نباشند.

اصلا همین راه حلی که خودتون گفتید چطوری به اون دو موقعیت border-radius داده من موندم.

ویرایش شده آبان 93 توسط رضا قاسمی

[AmIn1412 220]

وقت بخیر

اول که به باکس ماژول های border-radius  داده نشده است

از تصویر برای بالا و پایین باکس ماژول استفاده شده است،

دوم برای اینکه به باکس ماژول هایتان می خواهید امکاناتی قرار بدهید کافی است وقتی موقعیت تعریف می کنید به موقعیت یک استایل هم اضافه کنید که قالبا به دو شکل است

style="rounded" , style="xhtml"

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

یک مثال هم برای موقعیت

 

<jdoc:include type="modules" name="content" style="rounded"/>

حالا وقتی ماژول شما در این موقعیت نمایش داده شود کلاسی می گیرد به عنوان

div.module

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

مثلا برای h3 ماژول که همان عنوان باشد می توانید به این شکل اطلاعات وارد نمایید

 

div.module h3{
    background: url(../images/تصویر) no-repeat top right;
    height: 33px;
    line-height: 27px;
    margin:0px;
    margin-right:-18px;
    ;
    padding: 0px 0px 0 0;
    padding-right:5px;
    color: #FFF;
    font-size:16px;
    font-family:'nassim-bold';
    font-weight:normal;
    text-align: center;
    overflow:hidden;
    text-shadow:none;border:none;box-shadow:none;
}
 

 

امیدوارم درست گفته باشم

موفق باشید

[رضاقاسمی 1,539]

ممنون فقط یه چیزی رو متوجه نشدم

rounded کجا استفاده میشه وقتی اینجا نوشته میشه توی فایل css چطوری باید تعریفش کنیم

[AmIn1412 220]

وقت بخیر

توضیح نگاه کنید موجود است این مربوط به استایل ماژول هایی است  که در آن پوزیشن فعال می شوند

نمونه کلاس هم که گفتم با div.module شروع می شود

[رضاقاسمی 1,539]

یه سوال و سوال آخر برای کد زیر باید چه جوری توی css تعریف بشه؟

<jdoc:include type="modules" name="content" style="rounded"/>

[AmIn1412 220]

وقت بخیر

شما وقتی این استایل رو اضافه کنید ، هر ماژولی که در ان پوزیشن فعال گردد تک تک در دایو به نام زیر قرار می گیرد

<div class="module">

اطلاعات ماژول

</div>

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

div.module

نمونه برای شما خصوصی ارسال شد

موفق باشید