استایل دادن به تگ pre و تگ code در html و وردپرس
access_time1396/06/30
perm_identity ارسال شده توسط شمشاد امیری خراسانی
folder_open آموزش ساخت پوسته وردپرس
visibility 26 بازدید
شما میدانید برای پیشنمایش کد های خود html و در وردپرس به صورت پیشفرض از دو تگ زیر استفاده کنید : pre tags
به جای براکت [] () بگذارید !
[pre] [code] .........کد خود را اینجا وارد کنید......... [/code] [/pre]
از طریق css نمایش دو تگ pre tags را تغیر می دهیم : – ( به فایل style.css قالب بیفزایید )
pre { direction: ltr; width: 100%; padding: 0; margin: 0; overflow: auto; overflow-y: hidden; font-size: 12px; line-height: 20px; background: #efefef; border: 1px solid #777; background: url(lines.png) repeat 0 0; } pre code { padding: 10px; color: #333; }
وحالا چیزی که ما داریم :
کد های شما راستچین و بهم ریخته نمی شوند
عرض دو تگ pre
صد در صد است
پیمایش افقی نمایش داده می شود اگر محتوای بیش از پیش عریض باشد
اسکرول عمودی نمایش داده نمی شود (پیش جعبه به صورت خودکار اندازه می شود تا متناسب با تمام ارتفاع محتوی بسته باشد)
رنگ پس زمینه به رنگ خاکستری روشن نمایش داده می شود
جعبه پیش نمایش یک مرز نازک دارد
10 پیکسل حاشیه در اطراف محتوای pre وجود دارد.

مطالب زیر را حتما بخوانید
آموزش ساخت پوسته وردپرس به صورت قدم به قدم (در حال تکمیل)
52 بازدید
بهترین روش پیشنمایش قالب های وردپرس برای توسعه دهندگان
68 بازدید
فیلم آموزش طراحی و ساخت سایت وردپرسی در هاست اشتراکی cpanel
38 بازدید
اضافه کردن یک هشدار یا اطلاعیه در داشبورد وردپرس
41 بازدید
امکانات وردپرس فارسی جدید 4.9.2
35 بازدید
دیدگاه بگذارید