استایل دادن به دسته ساید بار با تصویر شاخص

[javad abbasi 502]

من از پلاگین category-posts برای نمایش دسته ها در ساید بار استفاده می کنم. همانطور که در سایت زیر می بینید در دسته مقالات سایدبار که همراه با تصویر شاخص ارائه شده است تیتر بالای تصویر شاخص هست . من می خوام مثل سایت تابناک تیتر کنار تصویر شاخص نوشته شود تا منظم تر و زیباتر دیده شود.

http://fa.ibforums.net

[Morteza 34190]

این رو تست کنید:

.cat-post-item img{ float: right;}

البته احتمال میدم کمی بهم بریزه فعلا تست کنید.

[javad abbasi 502]

این رو تست کنید:

.cat-post-item img{ float: right;}

البته احتمال میدم کمی بهم بریزه فعلا تست کنید.

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

.cat-post-item img{ float: right;}
li.cat-post-item img {
    float: right;
    margin-right: 13px;
    height: 50px;
    width: 60px;
    margin-top: -10px;
margin-right: 8px;
margin-bottom: 10px;
margin-left: 20px;
}

[Morteza 34190]

برای المان li مقدار زیر رو ست کنید. :

list-style: none;

بعد باید مقادیر padding و margin رو تنظیم کنید.

[javad abbasi 502]

برای المان li مقدار زیر رو ست کنید. :

list-style: none;

بعد باید مقادیر padding و margin رو تنظیم کنید.

آقا مرتضی نتونستم درست کنم. آیتم اول مثب بقیه نمیاد کنار نوشته. بالای عکس هست.

[imanfakhar 26231]

برای اینکه آیتم اول بیاد کنار نوشته باید عکس که float شده قبل از نوشته اش قرار بگیره یعنی در کد افزونه از آخر هرli به اولش بیاد برای منظم شدن لایه ها هم به li خاصیت clear:both بدهید

اگر در کدهای افزونه عکس را خارج از li تعریف کرده بود آنرا به ترتیبی که عرض شد به داخل li منتقل کنید

[javad abbasi 502]

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

حال باز هم به هم ریختگی را دارم. عرض و ارتفاع هم دادم درست نشد. لطفا کد پایینی را کاملتر کنید تا مشکل ما و شاید خیلی از دوستان حل بشه.

<?php
query_posts('cat=1&showpoats=10');
while ( have_posts() ) : the_post(); ?>
<div class="gn_static_1">
<center>
<a href="<?php the_permalink(); ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>">
<div style="float:right;margin:2px;border:solid; border-width:1px; padding: 0px;" alt="تصویر">
<?php the_post_thumbnail(array(45,55)); ?>
</div></a>
</center>
<a target="_blank" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
<?php endwhile;
wp_reset_query();
?>

[isk 4447]

الان سایتتونو دیدم - سایدبار مورد نظر یه دایو داره که به جای اینکه از gn_static_1 (احتمالاً استایل افزونه) تبعیت کنه، از استایل قالب تبعیت می کنه

خودتون دستکاریش کردید؟

به هرحال تصویر زیر براتون مناسبه؟

[javad abbasi 502]

الان سایتتونو دیدم - سایدبار مورد نظر یه دایو داره که به جای اینکه از gn_static_1 (احتمالاً استایل افزونه) تبعیت کنه، از استایل قالب تبعیت می کنه

خودتون دستکاریش کردید؟

به هرحال تصویر زیر براتون مناسبه؟

بله. عالی میشه اینجوری بشه . بعضی جاهای قالب را دست زدم اما خودم هم بعضی ها وقتها یادم میره چیکار کردم و کدها را گذاشتم بدون اینکه از نقش کامل آنها باخبر بشوم

[isk 4447]

لینک افزونه رو در سایت اصلی وردپرس بدید

[javad abbasi 502]

لینک افزونه رو در سایت اصلی وردپرس بدید

http://wordpress.org/extend/plugins/category-posts/

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

[isk 4447]

افزونه زیر رو نصب کنید - بعد در استایلتون برای li مقدار vertical-align رو top قرار بدید (البته اگر از قبل نبود)

advanced-most-recent-posts-mod.zip

[javad abbasi 502]

افزونه زیر رو نصب کنید - بعد در استایلتون برای li مقدار vertical-align رو top قرار بدید (البته اگر از قبل نبود)

advanced-most-recent-posts-mod.zip

عجب افزونه توپی هستش. الان از این افزونه استفاده کردم و در فوتر سایت دسته تصاویر را قرار دادم. اونجوری که شما در تصویر نشون دادین نشد. من از پوسته twentyten استفاده می کنم. دو جا vertical-align داشت که مقادیر آن را به top تغییر دادم. فقط خط اول را بالا برد و بقیه همان پایین موند. مثل تصویر زیر

[isk 4447]

بله - حالا کد زیر رو در rtl.css قرار دهید

ul.advanced-recent-posts { list-style:none; line-height:1.35em; margin:0;}
ul.advanced-recent-posts li { clear:both;width:100%;margin: 0 0 15px;}
ul.advanced-recent-posts a { font-weight:bold; }
ul.advanced-recent-posts img { float:right; margin:0 10px 10px 10px; padding:2px;border:none; }

[javad abbasi 502]

بله - حالا کد زیر رو در rtl.css قرار دهید

ul.advanced-recent-posts { list-style:none; line-height:1.35em; margin:0;}
ul.advanced-recent-posts li { clear:both;width:100%;margin: 0 0 15px;}
ul.advanced-recent-posts a { font-weight:bold; }
ul.advanced-recent-posts img { float:right; margin:0 10px 10px 10px; padding:2px;border:none; }

ممنون . درست شد دوست عزیز. :wub: