• اطلاعیه ها

    • Morteza

      باهم بسازیم: اطلس ووکامرس و وردپرس   14/07/96

      تاپیک ایجاد شده برای بحث در جهت ایجاد یک منبع، ویکی، صفحات توضیحی و یا بخش آموزشی جامع برای وردپرس و متعلقات مختلف آن است. لطفا جهت مشارکت در این بحث، ارائه پیشنهاد و یا انتقاد به تاپیک فوق مراجعه کنید. باهم بسازیم: اطلس ووکامرس و وردپرس
nimait70

تنظیم پاراگراف عکس ها در قالب - css

37 پست در این موضوع قرار دارد

ارسال شده در (ویرایش شده)

سلام خدمت تمای دوستان عزیز

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

من یه قالبی دارم که وقتی عکسی رو در ویرایش گر وسط چین میکنم هنگام نمایش آن را راستچین میکند. فایل های css این قالب هم براتون ضمیمه میکنم...

البته خودم در فایل ضمیمه ی base.css به جای :


img.aligncenter{
margin: auto;
}

این کد رو قرار دادم :


img.aligncenter {
float:none;
display:block;
margin:5px auto;
}

اما توفیقی نکرد و تغییری مشاهده نکردم...من میخوام هر طوری که تو ویرایشگر تنظیم میکنم پاراگراف بندی بشه...ممنون میشم اگه راهنماییم کنید...

css.zip

ویرایش شده در توسط nimait70
0

به اشتراک گذاری این پست


لینک به پست

این کد ها رو هم به فایل base.css اضافه کردم :


img {
max-width: 100%
}
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.alignright {float:right; }
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto; text-align: center}

اما

اما بازم نشد که نشد...

0

به اشتراک گذاری این پست


لینک به پست

دوستان این کد رو هم امتحان کردم اما بازم حل نشد...لطفا کمک کنید :

.alignnone {

margin: 5px 20px 20px 0;

}

.aligncenter,

div.aligncenter {

display: block;

margin: 5px auto 5px auto;

}

.alignright {

float:right;

margin: 5px 0 20px 20px;

}

.alignleft {

float: left;

margin: 5px 20px 20px 0;

}

.aligncenter {

display: block;

margin: 5px auto 5px auto;

}

a img.alignright {

float: right;

margin: 5px 0 20px 20px;

}

a img.alignnone {

margin: 5px 20px 20px 0;

}

a img.alignleft {

float: left;

margin: 5px 20px 20px 0;

}

a img.aligncenter {

display: block;

margin-left: auto;

margin-right: auto

}

.wp-caption {

background: #fff;

border: 1px solid #f0f0f0;

max-width: 96%; /* Image does not overflow the content area */

padding: 5px 3px 10px;

text-align: center;

}

.wp-caption.alignnone {

margin: 5px 20px 20px 0;

}

.wp-caption.alignleft {

margin: 5px 20px 20px 0;

}

.wp-caption.alignright {

margin: 5px 0 20px 20px;

}

.wp-caption img {

border: 0 none;

height: auto;

margin: 0;

max-width: 98.5%;

padding: 0;

width: auto;

}

.wp-caption p.wp-caption-text {

font-size: 11px;

line-height: 17px;

margin: 0;

padding: 0 4px 5px;

}

0

به اشتراک گذاری این پست


لینک به پست

سلام

اینطوری استایل بدید:


p img.alignright {}

عکس هایی که داخل تگ p هستند.

1

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

سلام

اینطوری استایل بدید:


p img.alignright {}

عکس هایی که داخل تگ p هستند.

ممنون بابت پاسخ گویی، این طوری هم استایل دادم :

.alignnone {

margin: 5px 20px 20px 0;

}

.aligncenter,

div.aligncenter {

display: block;

margin: 5px auto 5px auto;

}

.alignright {

float:right;

margin: 5px 0 20px 20px;

}

.alignleft {

float: left;

margin: 5px 20px 20px 0;

}

.aligncenter {

display: block;

margin: 5px auto 5px auto;

}

p img.alignright {

float: right;

margin: 5px 0 20px 20px;

}

p img.alignnone {

margin: 5px 20px 20px 0;

}

p img.alignleft {

float: left;

margin: 5px 20px 20px 0;

}

p img.aligncenter {

display: block;

margin-left: auto;

margin-right: auto

}

.wp-caption {

background: #fff;

border: 1px solid #f0f0f0;

max-width: 96%; /* Image does not overflow the content area */

padding: 5px 3px 10px;

text-align: center;

}

.wp-caption.alignnone {

margin: 5px 20px 20px 0;

}

.wp-caption.alignleft {

margin: 5px 20px 20px 0;

}

.wp-caption.alignright {

margin: 5px 0 20px 20px;

}

.wp-caption img {

border: 0 none;

height: auto;

margin: 0;

max-width: 98.5%;

padding: 0;

width: auto;

}

.wp-caption p.wp-caption-text {

font-size: 11px;

line-height: 17px;

margin: 0;

padding: 0 4px 5px;

}

اما بازم نشد...یه جای قالب یه چنین چیزی نوشته :

Using 'class="alignright"' on an image will (who would've

thought?!) align the image to the right. And using 'class="centered',

will of course center the image. This is much better than using

align="center", being much more futureproof (and valid) */

اگه از


class="centered'

به جای


align="center"

استفاده بشه عکس وسط چین میشه اما تمامی مطالب قبلی من با align="center" نوشته شده و ادیتور (ckeditor 4)هم به عنوان پیش فرض از این استفاده میکنه و سخته هر دفعه کد رو دستکاری کنم...

لطفا اگه راه حلی به ذهنتون میرسه راهنماییم کنید...

ویرایش شده در توسط Morteza
0

به اشتراک گذاری این پست


لینک به پست

آدرس آنلاین بدید.

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

آدرس آنلاین بدید.

روی آدرس آنلاینم فعلا نصب نیست...دارم روی لوکال تستش میکنم...عکس میذارم واستون...

عکس شماره 1 با style="text-align: center نوشته شده که راستچین هست کلا اما عکس شماره 2 که با class="centered" دستکاریش کردم همانطور که ملاحضه میکنید کاملا وسط چین شده...

کجا میشه کد های css شو دست کاری کرد تا با style="text-align: center هم عکس ها رو وسط چین نشون بده؟

post-981-0-65687500-1381598483_thumb.jpg

post-981-0-99686600-1381598492_thumb.jpg

ویرایش شده در توسط nimait70
0

به اشتراک گذاری این پست


لینک به پست

روی آدرس آنلاینم فعلا نصب نیست...دارم روی لوکال تستش میکنم...

آنلاین گذاشتید در خدمتم.

0

به اشتراک گذاری این پست


لینک به پست

آنلاین گذاشتید در خدمتم.

خدمت شما :


http://vcbt.ir

البته آدرس سایت اصلی من این نیست...فقط واسه تست وردپرس و قالب رو نصب کردم و چند مطلب هم اضافه کردم...

1

به اشتراک گذاری این پست


لینک به پست

تست کنید :

p img.alignnone {
margin: 5px auto;
width: auto;
}

3

به اشتراک گذاری این پست


لینک به پست
تست کنید :
p img.alignnone { margin: 5px auto; width: auto; }

این کد رو هم به تنهایی به انتهای فایل base.css اضافه کردم اما تغییری مشاهده نشد...میتونید خودتون هم چک بکنید...

0

به اشتراک گذاری این پست


لینک به پست

این کد رو هم به تنهایی به انتهای فایل base.css اضافه کردم اما تغییری مشاهده نشد...میتونید خودتون هم چک بکنید...

به آخر این فایل اضافه کردید و درست هم نمایش میده من مشکلی نمیبینم.

کوکی + تمپ مرورگرتونو حذف کنید.

2

به اشتراک گذاری این پست


لینک به پست

به آخر این فایل اضافه کردید و درست هم نمایش میده من مشکلی نمیبینم.

کوکی + تمپ مرورگرتونو حذف کنید.

الان این پست عکس هاش برای شما وسط چین هست؟ کوکی و تمپ رو هم پاک کردم،با یک مرورگر دیگه تست کردم اما بازم راستچینه... :


http://vcbt.ir/%D9%81%DB%8C%D9%84%D9%85-hes-just-not-that-into-you/

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

یا مثلا این مطلب :


http://vcbt.ir/%D8%B3%D8%B1%DB%8C%D8%A7%D9%84-training-day-2001/

یه عکس IMDB داره که کاملا راستچینه اما عکس اصلی وسط چین شده....و همچنین یه مشکل دیگه ایجاد شده...در امتداد اون عکس imdb در مطلب هر جا از صفحه رو کلیک کنی حتی بخش خالی، به لینک مربوط به IMDB میره...

ویرایش شده در توسط nimait70
0

به اشتراک گذاری این پست


لینک به پست

برای تصاویرتون این کد رو به فایل rtl.css اضافه کنید:


.size-full {
margin:5px auto;
}

و برای imdb هم میتونید این کار رو انجام بدین:

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

این کد نمایش تصویر imdb هستش:


<a target="_blank" href="http://www.imdb.com/title/tt0139654/?ref_=sr_1"><img style="width: 45px; height: 22px; " src="http://ashowtime17.org/pic/imdb-logo.png" alt=""></a>

پاکش کنید و به جاش کد زیر رو بزارین.


<a target="_blank" href="http://www.imdb.com/title/tt0139654/?ref_=sr_1" style="position: absolute;"><img style="width: 45px; height: 22px; margin: 0px auto;" src="http://ashowtime17.org/pic/imdb-logo.png" alt=""></a>

درست باید بشه.

در آخر هم حتما کش مرورگرتون رو خالی کنید.

3

به اشتراک گذاری این پست


لینک به پست

برای تصاویرتون این کد رو به فایل rtl.css اضافه کنید:


.size-full {
margin:5px auto;
}

و برای imdb هم میتونید این کار رو انجام بدین:

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

این کد نمایش تصویر imdb هستش:


<a target="_blank" href="http://www.imdb.com/title/tt0139654/?ref_=sr_1"><img style="width: 45px; height: 22px; " src="http://ashowtime17.org/pic/imdb-logo.png" alt=""></a>

پاکش کنید و به جاش کد زیر رو بزارین.


<a target="_blank" href="http://www.imdb.com/title/tt0139654/?ref_=sr_1" style="position: absolute;"><img style="width: 45px; height: 22px; margin: 0px auto;" src="http://ashowtime17.org/pic/imdb-logo.png" alt=""></a>

درست باید بشه.

در آخر هم حتما کش مرورگرتون رو خالی کنید.

ممنون اشکان جان مورد عکس ها برطرف شد اما این مورد Imdb راه دیگه ای نداره؟ چون مطالبم بسیار زیادن و خیلی سخته که ویرایششون کرد...و این کد هم خود ویرایشگر به عنوان پیشفرض تولید میکنه و نویسنده های من که آشنایی با کدنویسی هم ندارند سخته واسشون که هر دفعه بخوان کد رو دستکاری کنن...ممنون

0

به اشتراک گذاری این پست


لینک به پست

خواهش میکنم.

با افزونه search & replace امتحان کنید.

3

به اشتراک گذاری این پست


لینک به پست

خواهش میکنم.

با افزونه search & replace امتحان کنید.

برای دفعات جدید چطور؟ نویسنده ها آشنایی با کدنویسی ندارند...

0

به اشتراک گذاری این پست


لینک به پست

باید دستی تغییر بدن

3

به اشتراک گذاری این پست


لینک به پست

خواهش میکنم.

با افزونه search & replace امتحان کنید.

این افزونه چنین کدی رو در پایگاه داده ی من پیدا نمیکنه :


><img style="width: 45px; height: 22px; " src="http://ashowtime17.org/pic/imdb-logo.png" alt=""></a>

0

به اشتراک گذاری این پست


لینک به پست

این افزونه چنین کدی رو در پایگاه داده ی من پیدا نمیکنه :


><img style="width: 45px; height: 22px; " src="http://ashowtime17.org/pic/imdb-logo.png" alt=""></a>

باید کاملا شبیه باشه با اونی که درون پست ها هست.

از توی پست ها کپی کنید توی افزونه پیدا میکنه.

2

به اشتراک گذاری این پست


لینک به پست

باید کاملا شبیه باشه با اونی که درون پست ها هست.

از توی پست ها کپی کنید توی افزونه پیدا میکنه.

در هر صورت بخشی از کد هست خوب، میبایست پیدا کنه دیگه...

کلش هم کپی کردم پیدا نکرد :


Sorry, <a target="_blank" href="http://www.imdb.com/title/tt0139654/?ref_=sr_1"><img style="width: 45px; height: 22px; " src="http://ashowtime17.org/pic/imdb-logo.png" alt=""></a> is not found in this Database(db)!

قسمت اول هم خوب هر دفعه فرق داره دیگه...هر مطلب با مطلب دیگه فرق داره آدرس IMDB یش :


<a target="_blank" href="http://www.imdb.com/title/tt0139654/?ref_=sr_1"

0

به اشتراک گذاری این پست


لینک به پست

انگار با "فاصله" مشکل داره یعنی برای Search کدی که "فاصله" یا "space" داشته باشه رو پیدا نمیکنه....

0

به اشتراک گذاری این پست


لینک به پست

بعضی از مطالب مثل این مطلب عکس هاش راستچین نمیشن :


http://vcbt.ir/%D9%81%DB%8C%D9%84%D9%85-batman/

ممنون میشم اگه کمک کنید...

0

به اشتراک گذاری این پست


لینک به پست

از فایل rtl.css هم این دو خاصیت را بیابید و حذف کنید


.footer .latest_news img, .latest_news img,
.footer .latest_news p,
.latest_news p,
.comments_list li img ,
.twitter-author img,
.widget ul.tweets li span,
ul.tweets li span,
p.cat-content{
float: right;
margin-right: 0px;
margin-left:10px;
}

.news_in_photo .news-photo {
float: right;
}

2

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری