رفتن به مطلب

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


پست های پیشنهاد شده

سلام

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

post-2192-0-69758800-1382283536_thumb.jp

با سپاس

لینک به ارسال

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


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

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

لینک به ارسال

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

لینک به ارسال

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

لینک به ارسال

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

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

لینک به ارسال

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

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

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


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

لینک به ارسال
  • 4 ماه بعد...

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

لینک به ارسال

درود.

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


http://wpu.ir/3g56j

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


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

لینک به ارسال

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

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

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

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

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

post-854-0-00668700-1394746683_thumb.gif

لینک به ارسال

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

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

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


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

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

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

ویرایش شده توسط ::AmiR::
لینک به ارسال

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


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

لینک به ارسال

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

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

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...