javad abbasi

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

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

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

http://fa.ibforums.net

0

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


لینک به پست

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

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

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

4

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


لینک به پست
این رو تست کنید:
.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;
}

0

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


لینک به پست

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

list-style: none;

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

4

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


لینک به پست

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

list-style: none;

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

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

0

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


لینک به پست

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

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

3

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


لینک به پست

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

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

<?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();
?>

0

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


لینک به پست

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

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

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

post-865-0-06982000-1359229948_thumb.png

1

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


لینک به پست

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

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

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

post-865-0-06982000-1359229948_thumb.png

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

0

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


لینک به پست

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

1

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


لینک به پست

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

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

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

0

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


لینک به پست

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

advanced-most-recent-posts-mod.zip

3

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


لینک به پست

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

advanced-most-recent-posts-mod.zip

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

post-139-0-45647900-1359268656_thumb.png

0

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


لینک به پست

بله - حالا کد زیر رو در 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; }

1

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


لینک به پست

بله - حالا کد زیر رو در 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: :wub: :wub:

0

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


لینک به پست

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

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

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

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


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

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

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


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