جستجو برای:
سبد خرید 0
  • مجله آموزشی برنامه نویسی
  • دوره ها
    • حساب کاربری
    • سبد خرید
  • بلاگ
 

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت
  • ۰۹۱۳۶۵۲۳۵۹۵
  • support@ariapad.com
perm_identity
سبد خرید 0
  • مجله آموزشی برنامه نویسی
  • دوره ها
  • بلاگ
0
آریاپاد
  • مجله آموزشی برنامه نویسی
  • آموزش های متنی
    • آموزش زبان برنامه نویسی PHP
      • آموزش PHP از مبتدی تا پیشرفته
      • آموزش فریم ورک لاراول
    • وردپرس
      • آموزش ساخت پوسته وردپرس
      • افزونه های مورد نیاز و حرفه ای وردپرس
      • افزونه های وردپرس آریاپاد
      • بهینه سازی سایت های وردپرسی
    • سرور
      • آموزش هاست و سرور
      • امنیت سرور مجازی و اختصاصی لینوکس
    • سئو و مطالب آزاد
      • #ویدئوها
      • #پادکست(صوتی)
      • دوره آموزشی جامع سئو
      • نوشته های آزاد
  • دوره های آموزشی ویدئویی
  • منو کاربری
    • کیف پول من
    • فراموشی گذرواژه
    • جزئیات حساب
    • آدرس‌ها
    • دانلودها
    • علاقه مندی ها
    • دوره های خریداری شده
    • سفارش‌ها
    • حساب کاربری
    • سبد خرید
    • پرداخت
  • صفحات
    • درباره ما
    • جداول قیمت گذاری
    • اساتید
    • نمونه کارها
ورود و ثبت نام

وبلاگ

آریاپاد بلاگ وردپرس آموزش ساخت پوسته وردپرس استایل دادن به تگ pre و تگ code در html و وردپرس

استایل دادن به تگ 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 وجود دارد.


این تصویر یک پیشنمایش است !
این تصویر یک پیشنمایش است !
اشتراک گذاری:
برچسب ها: استایل دادن به تگ pre و تگ code در htmlاستایل دادن به تگ pre و تگ code در وردپرس

مطالب زیر را حتما بخوانید
  • آموزش ساخت پوسته وردپرس به صورت قدم به قدم (در حال تکمیل)

    52 بازدید

  • بهترین روش پیشنمایش قالب های وردپرس برای توسعه دهندگان

    68 بازدید

  • فیلم آموزش طراحی و ساخت سایت وردپرسی در هاست اشتراکی cpanel

    38 بازدید

  • اضافه کردن یک هشدار یا اطلاعیه در داشبورد وردپرس

    41 بازدید

  • امکانات وردپرس فارسی جدید 4.9.2

    35 بازدید

دیدگاه بگذارید

avatar
avatar
  اشتراک  
به من اطلاع بده
جستجو برای:
  • محبوب
  • جدید
  • دیدگاه ها
قبلی بعدی
جدیدترین نوشته ها
  • اولین کنفرانس PHP در جهان – آیا PHP 8 رونمایی می شود ؟ 1398/08/12
  • آموزش ٬ معرفی و دانلود فونت وزیر – وب و PC 1398/08/08
  • تست ارتباط ‍پایگاه داده mysql با لاراول 1398/06/17
  • گرفتن تمام مقادیر POST$ و یا GET$ در PHP و ذخیره کردن در یک فایل TEXT 1398/06/08
  • افزایش سرعت چهار تا ده برابری سایت وردپرسی شما (حذف علامت سوال از فایل) + ویدئو آموزشی 1398/05/24
سبد خرید
درباره آریاپاد

آریاپاد گروهی متشکل از برنامه نویسان Back-End است بر بستر زبان برنامه نویسی PHP و مدیریت سرور های لینوکسی – بخش عمده ای از کار ما فعالیت بر بستر حفظ امنیت سایت های پارسی است .

  • location_on
    کرمان شهرستان رفسنجان
  • phone_android
    ۰۹۱۳۶۵۲۳۵۹۵
  • email
    support@ariapad.com
دسترسی سریع
  • مجله آموزشی برنامه نویسی
  • بلاگ
  • دوره ها
  • حساب کاربری
  • سبد خرید
  • پرداخت
  • جداول قیمت گذاری
نماد اعتماد

تمامی حقوق برای گروه توسعه آٰریاپاد محفوظ می باشد.
keyboard_arrow_up wpDiscuz