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

[jafar1374 15]

سلام

تو سایتهای مختلف وردپرسی می بینم که ی متن رو داخل کادر نوشتن که بهش استایل دادن مثل این عکس زیر ، چطور اینکارو باید کرد ؟

با سپاس

[Farid 2281]

سلام ، با استفاده از سه خصوصیت css :

border:1px solid #000;
background:#ccc;
padding:3px;

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

[jafar1374 15]

ن منظور ک همه نوشته ها عادی باشه و مثلا ی نکته یا یاداروری رو داخل کادر باشه از داخل ادیتور پوردپرس باید تنظیم بشه یا چجوریه ؟

[RedPlus 1585]

شما به وسيله شورت كد ميتونيد اين كار انجام بدين !‌افزونه هاي شورت كد زيادي موجود هست !‌ اگه هم ميخواين ميتونيد خودتون يكي درست كنيد و بهش استايل بدين!

[Black_Sky 6349]

بسیاری از این ها به صورت ثابت میباشند و محل قرارگیری کدها داخل single.php میباشد

در ضمن افزونه هایی هم وجود دارنددسترسی ندارم مگه نه اسم میدادم)

[Farid 2281]

ن منظور ک همه نوشته ها عادی باشه و مثلا ی نکته یا یاداروری رو داخل کادر باشه از داخل ادیتور پوردپرس باید تنظیم بشه یا چجوریه ؟

منظورتون نقل قول هست //

شما باید در استایل به تگ blockquote خصیصه های مورد نظر ( مثل کادر ، بکگراند و ... ) رو بدید ، بعد در ادیتور هر متنی که نقل قول کنید این استایل رو میگیره ، مثلا :

blockquote{
border:1px solid #000;
background:#ccc;
padding:3px;
}

[jafar1374 15]

چیزی بود فرید عزیز گفتن - همون نقل قول

مرسی از همه

[::AmiR:: 258]

حالا اگه بخوایم گوشه های border رو گرد کنیم چیکار باید بکنیم؟ اگه بخوایم فونت اون هم مثلا ایتالیک باشه؟

[I..R 1485]

درود.

برای گرد کردن از خاصیت border-radius باید استفاده کنید برای سهولت کار می توانید از ژنراتور استاد فخار استفاده کنید :

http://wpu.ir/3g56j

برای تغییر فونت نیز ار خاصیت font-family استفاده نمایید

http://www.w3schools.com/cssref/pr_font_font-family.asp

[::AmiR:: 258]

خیلی عالی و خوب

ممنون از راهنمایی بسیار خوبتون

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

متن داخل این کادر تقریبا چسبیده به خط

اگه بخوام فاصله ی متن رو با کناره ها بیشتر کنم باید چیکار کنم؟

[I..R 1485]

ار خاصیت padding در css استفاده نمایید

http://www.w3schools.com/css/css_padding.asp

به عنوان مثال :

.yourclass {
padding: 5px;
}

[::AmiR:: 258]

آقا واقعا ممنون

کارم رو به راحتی راه انداختید.

من در حال حاضر با راهنمایی های شما از کد زیر استفاده میکنم

blockquote{
border-radius:10px;
border:1px solid #C0C0C0;
margin:10px 0 0 0;
background:#FFFFCC;
padding-top:5px;
padding-bottom:5px;
padding-right:25px;
padding-left:25px;
box-shadow: -3px 3px 1px #A5A5A5;
}

اما تو مرورگرهای دیگه نشون داده نمیشه و فقط تو موزیلا این قابلیت نشون داده میشه !

باید این کد رو چیکار کنم که بشه تو مرورگرهای دیگه هم دیده بشه؟

ویرایش شده اسفند 92 توسط ::AmiR::

[I..R 1485]

اگر گرد شدن گوشه ها در مرورگر های دیگه مشکل داره باید به این صورت کد خود را تغییر بدید :

blockquote{
-moz-border-radius:10px ;
-webkit-border-radius:10px;
border-radius:10px;
-khtml-border-radius:10px;
border:1px solid #C0C0C0;
margin:10px 0 0 0;
background:#FFFFCC;
padding:16px;
box-shadow: -3px 3px 1px #A5A5A5;
}

[::AmiR:: 258]

طبق دستورتون کد رو جایگزین کردم اما متاسفانه همچنان توی مرورگر IE نشون داده نمیشه.

به عنوان مثال این پست رو با موزیلا و IE چک بفرمائید.

[I..R 1485]

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

کش مرورگر خود را خالی کنید (ctrl+f5)