نحوه ی ایجاد کادر با گوشه های گرد در وردپرس

Mohsen

آفلاین
عضو
تعداد نوشته‌ها: ۹۷
تشکر شده: ۵۶ بار
# نوشته شده: ۱۳ سال پیش
۶ تیر ۱۳۹۰ - ۱۵:۱۲

میخواستم یک کادر رو در وردپرس ایجاد کنم که گوشه هاش گرد باشه و بشه توش مطلب گذاشت. لطفا راهنماییم کنید.
Mostafa

آفلاین
ناظم
تعداد نوشته‌ها: ۵۲۷۶
تشکر شده: ۵۷۷۷ بار
# نوشته شده: ۱۳ سال پیش
۶ تیر ۱۳۹۰ - ۱۶:۰۳

می‌تونید با css3 یا تصویر این کار رو انجام بدین
http://www.css3maker.com/
http://forum.wp-persian.com/search.php?q=%DA%AF%D9%88%D8%B4%D9%87+%DA%AF%D8%B1%D8%AF

کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
Saeed Fard - Morteza - محسن غیاثی - Mohsen - Omid Sh - ثاني عشر - silvercover - Farshad MC
Saeed Fard

آفلاین
ناظم
تعداد نوشته‌ها: ۹۸۲
تشکر شده: ۱۶۱۵ بار
# نوشته شده: ۱۳ سال پیش
۶ تیر ۱۳۹۰ - ۱۶:۵۸
با احترام ;

بفرما دوست عزیز :
```
.menu_Saeed{
width:488px;
background:#fff;
border:1px solid #C9C9C9;
min-height:20px;
-moz-border-radius:25px 5px 25px 5px;
-khtml-border-radius:25px 5px 25px 5px;
-webkit-border-radius:25px 5px 25px 5px;
color:#fff;
direction:rtl;
color:#000000;
}
```
من دو طرف مجاورش رو واست گرد کردم ، به همون صورت 2 طرف دیگه ش رو خودتون گرد کنید ،، اندازه و رنگ کادر رو هم خودتون با تغییر مقادیر میتونید تغییر بدید ..

موفق باشید ../.
کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
محسن غیاثی - Mohsen - Omid Sh - ثاني عشر - Farshad MC - Mostafa - حسین - S-ARM - babakps
Morteza

آفلاین
ناظم
تعداد نوشته‌ها: ۳۴۰۲
تشکر شده: ۳۱۲۸ بار
# نوشته شده: ۱۳ سال پیش
۶ تیر ۱۳۹۰ - ۱۷:۴۰

سلام
با تشکر از دوستان
فقط خواستم این نکته رو بگم که با توجه به بروز شدن مرورگرها الان با کد border-radius در اکثر مرورگرها میتونید گوشه گرد رو ایجاد کنید.
دیگه نیازی به قرار دادن پسوند moz , -o و... نیست.

کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
Saeed Fard - محسن غیاثی - Mohsen - Omid Sh - ثاني عشر - Farshad MC - Mostafa
Saeed Fard

آفلاین
ناظم
تعداد نوشته‌ها: ۹۸۲
تشکر شده: ۱۶۱۵ بار
# نوشته شده: ۱۳ سال پیش
۶ تیر ۱۳۹۰ - ۱۷:۵۳

درسته استاد عزیز ،، ممنون که متذکر شدید ..

محسن جان یه نکته ی دیگه رو هم بگم که مرورگرهای قدیمی از CSS3 پشتیبانی نمیکنن و گوشه های گرد رو به صورت ساده نشون میدن ..

هم آقا مصطفی گل و هم آقای man4toman عزیز از استادان بنده هستند که انصافا خیلی چیزها ازشون یاد گرفتم .. چون هر 2 تاییتون حضور داشتین گفتم یه تشکر و قدر دانی بکنم .. واقعا متشکرم ازتون ، ممنون ..
با تشکر .. موفق باشید ../.

پ.ن : به به ، آقا محسن هم تشریف آوردن ، همچنین ایشون ، که انصافا به گردن من خیلی حق دارید ،، ممنون از همه تون ..
ببخشید ..

کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
محسن غیاثی - Mohsen - Omid Sh - Farshad MC - Morteza - Mostafa
Mohsen

آفلاین
عضو
تعداد نوشته‌ها: ۹۷
تشکر شده: ۵۶ بار
# نوشته شده: ۱۳ سال پیش
۷ تیر ۱۳۹۰ - ۱۶:۰۶

از همه ممنونم که خیلی خوب به سوالم جواب دادن. حالا یه سوال دیگه :
من چطوری می تونم همین کد مستطیل گوشه گرد رو در قالبم قرار بدم با این شرط که هر مطلبی که در more (ادامه مطلب) نوشته شده رو داخل اون قرار بده؟؟؟؟
در ضمن نتونستم از کد آقای Saeed Fard استفاده کنم و هر جا که اون رو قرار دادم فقط خودِ کد نوشته شد.(البته می دونم که مشکل از منه) . لطفا راهنماییم کنید.
Saeed Fard

آفلاین
ناظم
تعداد نوشته‌ها: ۹۸۲
تشکر شده: ۱۶۱۵ بار
# نوشته شده: ۱۳ سال پیش
۷ تیر ۱۳۹۰ - ۱۶:۴۴
من چطوری می تونم همین کد مستطیل گوشه گرد رو در قالبم قرار بدم با این شرط که هر مطلبی که در more (ادامه مطلب) نوشته شده رو داخل اون قرار بده؟؟؟؟

دوست عزیز شما باید ابتدا این کد رو داخل Style.css قرار بدی ، بعد کلاس تعریف شده برای پست ها رو در حلقه و در فایل single.php به کلاس این کد تغییر بدی تا هر پستت در ادامه ی مطلب از این کد استفاده کنه ..

در ضمن نتونستم از کد آقای Saeed Fard استفاده کنم و هر جا که اون رو قرار دادم فقط خودِ کد نوشته شد.(البته می دونم که مشکل از منه) . لطفا راهنماییم کنید.

:D دوست من شما این کد رو که نباید مستقیم هر جا قرا بدی !!
همون طور که گفتم باید این کد رو در Style.css قرار بدی و بعد هر جا که میخوای ازش استفاده کنی با یه div کلاس تعریف کنی ..
مثلا برای همین کدی که خودم قرار دادم ، کد بالا رو در استایل قرار میدی ، کلاسش menu_Saeed هستش و به این صورت تعریف میکنی ..
```
<div class="menu_Saeed" >
محل کد یا تابع یا هر چیز مورد نظر...
</dive>
```
و این کد رو هر جا که قراره ظاهر بشه قرار میدی (ایندکس ، فوتر ، هدر یا ... )

حالا شما باید کلاس پست هاتون رو در فایل single.php به کلاسی که خودتون تعریف کردین و در استایل قرار دادین تغییر بدید .. به ساده ترین شیوه توضیح دادم ، امیدوارم متوجه شده باشین ..

موفق باشید ../.
کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
Farshad MC - ثاني عشر - Omid Sh - Morteza - Mohsen - Mostafa - babakps
Mostafa

آفلاین
ناظم
تعداد نوشته‌ها: ۵۲۷۶
تشکر شده: ۵۷۷۷ بار
# نوشته شده: ۱۳ سال پیش
۸ تیر ۱۳۹۰ - ۱۸:۱۱

نظر لطف شماست سعید جان :)

کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
Saeed Fard - Morteza

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

border:dotted 3px #00c8eb;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;

این کد استایل هست

p{margin:10px 0;padding:0}
ul{list-style:none;margin:0;padding:0}
blockquote{  border: solid 1px #D4CCAA;
  margin: 10px 10px 10px 50px;
  padding: 5px 5px 5px 41px;
  background-color: #d8feff;
  background-image: url('images/postquote.png');
  background-position: left top;
  background-repeat: no-repeat;}
code,pre{color:#444;font-size:1.2em}
pre{background-color:#F4F5F3;border:#E2E4E0 1px dotted;clear:both;display:block;margin:15px 0;padding:0.2em 0.5em}
small{font-size:0.8em}
big{font-size:1.2em;font-weight:700}
sup{bottom:0.3em;position:relative;vertical-align:baseline}
sub{bottom:-0.2em;position:relative;vertical-align:baseline}
acronym,abbr{border-bottom:1px dashed;cursor:help;letter-spacing:1px}
hr{border-bottom:1px solid #FFF;border-left:none;border-right:none;border-top:1px dotted #BEC1B5;clear:both;display:block;margin:5px 0}

اینم کد قسمت نقل قول توی استایل قالب

Mostafa

آفلاین
ناظم
تعداد نوشته‌ها: ۵۲۷۶
تشکر شده: ۵۷۷۷ بار
# نوشته شده: ۱۳ سال پیش
۱۱ تیر ۱۳۹۰ - ۱۳:۱۶

شما به همین مقدار بدین.
البته با درج (.)
.blockquote
alireza12113

آفلاین
عضو
تعداد نوشته‌ها: ۲۵۵
تشکر شده: ۱۳۰ بار
# نوشته شده: ۱۳ سال پیش
۱۲ تیر ۱۳۹۰ - ۰۰:۵۱

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

.blockquote{  border: solid 1px #D4CCAA;
  margin: 10px 10px 10px 50px;
  padding: 5px 5px 5px 41px;
  background-color: #d8feff;
  background-image: url('images/postquote.png');
  background-position: left top;
  background-repeat: no-repeat;}

وردپرس فارسی

انجمن

نحوه ی ایجاد کادر با گوشه های گرد در وردپرس (۱۲ نوشته)

درباره‌ی این موضوع

برچسب‌ها