گذاشتن آیکون دلخواه کنار اطلاعات نوشته و همچنین نوشته های داخل مطالب

Y-a--s--e-R · تیر 93

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

1- چگونه کنار اطلاعات نوشته میتونم آیکون دلخواه قرار بدم ؟ شبیه به عکس زیر :

2- چگونه میتونم کنار نوشته ها در داخل مطالب آیکون دلخواه بزارم ؟ شبیه به عکس زیر :

Y-a--s--e-R · تیر 93

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

alireza1375 · تیر 93

برای مورد یک شما می توانید با مراجعه به فایل صفحه مورد نظر یک div جدید در محلی قبل از اطلاعات نوشته ایجاد کنید و با استفاده از css عکس مورد نظر را قرار دهید.اگر آدرس بدهید بهتر می توانم راهنمایی کنم.

برای مورد دو هم می توانید از دستور زیر استفاده کنید :


ul {
list-style-image:url("/images/blueball.gif");
list-style-type:square;
}

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

ویرایش شده تیر 93 توسط alireza1375

alivazirinia · تیر 93

برای این کار میتونی به تگ هایی که دارن کلاس بدی مثلا تگ اسپن هست بهش یه کلاس میدی بعد margin - padding میدی بهشون تا درست بشن


http://alivazirinia.ir/blog/1393/02/%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%D8%B4%D8%BA%D9%84-%D8%B7%D8%B1%D8%A7%D8%AD-%D9%88%D8%A8/

این قسمت رو نگاه کن

من اومدم به تگ اسپنم کلاس دادم

<span class="cat">دسته : <a href="#" title="نمایش ‌همه‌ی نوشته‌ها در مقالات" rel="category tag">مقالات</a> </span>

بعد توی سی اس اس


.cat {
background: url(image/cat.png) right center no-repeat;
margin-right: 5px;
margin-left: 20px;
margin-top: -5px;
padding-right: 23px;
padding-top: 5px;

اینو دادم بهش

Y-a--s--e-R · تیر 93

برای مورد یک شما می توانید با مراجعه به فایل صفحه مورد نظر یک div جدید در محلی قبل از اطلاعات نوشته ایجاد کنید و با استفاده از css عکس مورد نظر را قرار دهید.اگر آدرس بدهید بهتر می توانم راهنمایی کنم.

خصوصی شد واستون .

برای مورد دو هم می توانید از دستور زیر استفاده کنید :
ul {
list-style-image:url("/images/blueball.gif");
list-style-type:square;
}
خط دوم می تواند عکس برای آن ها تعریف کنم . خط سوم می توانم برای آن ها از شکل های پیشفرض مثلا دایره یا مربع و.. تعریف کند.

حقیقت کامل متوجه نشدم که چه جوری باید اعمالش کنم و در نوشته ها چه جوری فراخوانیش کنم ؟ ( امیدوارم از طریق آدرسی که واستون خصوصی کردم بتونید این مورد رو هم حل کنید ایشالله . )

برای این کار میتونی به تگ هایی که دارن کلاس بدی مثلا تگ اسپن هست بهش یه کلاس میدی بعد margin - padding میدی بهشون تا درست بشن
http://alivazirinia.ir/blog/1393/02/%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%D8%B4%D8%BA%D9%84-%D8%B7%D8%B1%D8%A7%D8%AD-%D9%88%D8%A8/
این قسمت رو نگاه کن
من اومدم به تگ اسپنم کلاس دادم
<span class="cat">دسته : <a href="#" title="نمایش ‌همه‌ی نوشته‌ها در مقالات" rel="category tag">مقالات</a> </span>
بعد توی سی اس اس
.cat {
background: url(image/cat.png) right center no-repeat;
margin-right: 5px;
margin-left: 20px;
margin-top: -5px;
padding-right: 23px;
padding-top: 5px;
اینو دادم بهش

خوب من از کجا میتونم اسم تگ ها رو پیدا کنم ؟ مثلا تگ " زمان انتشار " رو از کجا باید پیدا کنم که بعد بهش استایل بدم ؟

ویرایش شده تیر 93 توسط Y-a--s--e-R

alivazirinia · مرداد 93

برای این کار روی اون قسمت کلیک راست کن و گزینه inspect element بزن و کلاس مورد نظر رو پیدا کن

Y-a--s--e-R · مرداد 93

برای این کار روی اون قسمت کلیک راست کن و گزینه inspect element بزن و کلاس مورد نظر رو پیدا کن

این کار رو کردم ، ولی کل اون قسمت ( اعم از : زمان انتشار ، دسته بندی ، تعداد نظرات و ... ) دارای یک کلاس هستند و این در حالیه که شما میگید هر کدوم باید یک کلاس داشته باشند تا بشه به هرکدوم یک آیکون اختصاص داد .

یعنی هیچ راهی نداره که با داشتن یک کلاس برای همه ، هر کدوم از اون قسمت ها مثل : زمان انتشار ، دسته بندی ، تعداد نظرات و ... دارای یک آیکون مخصوص به خود باشند ؟ ( دقیقا یک چیزی شبیه به همون عکس ابتدای تاپیک :

یعنی این عکس :

SM-Mahdavi · مرداد 93

خب شما جداگونه به هر کدوم یه کلاس بدید

Y-a--s--e-R · مرداد 93

خب شما جداگونه به هر کدوم یه کلاس بدید

یعنی تنها راهش اینه که به صورت جداگانه به هر کدوم کلاس بدم ؟

اگه تنها راهش همینه ، میشه راهنمایی کنید که چه جوری میشه این کارو کرد ؟ ( چون پوسته سایت من فقط یک کلاس واسه کل اون قسمت در نظر گرفته و در CSS هم فقط به همون کلاس مقدار داده و بنده یاد ندارم که واسه هر کدوم یک کلاس جداگانه تعریف کنم . )

ویرایش شده مرداد 93 توسط Y-a--s--e-R

SM-Mahdavi · مرداد 93

کدهای اون قسمت رو بزارید تا راهنمایی کنیم

Y-a--s--e-R · مرداد 93

کدهای اون قسمت رو بزارید تا راهنمایی کنیم

بفرمایید :

این کدهای اطلاعات نوشته در فایل Single.php


<div class="meta">

<?php _e('Written by', 'framework') ?> <?php the_author_posts_link(); ?> <?php _e('on', 'framework') ?> <?php the_time( get_option('date_format') ); ?> <?php _e('in', 'framework'); ?> <?php the_category(', '); ?> - <?php comments_popup_link(__('No comments', 'framework'), __('1 Comment', 'framework'), __('% Comments', 'framework')); ?>

</div><!--meta-->

اینم کدهای Style.Css


.meta{
float:left;
width:610px;
font-size:11px; font-family:Georgia, "Tahoma", Times, serif;
font-style:none;
color:#999;
margin:0 0 18px 0;
}
.meta a{
color:#999;
}
.meta a:hover{
color:#444444;
}

SM-Mahdavi · مرداد 93


<div class="meta">

<div class="au">
<?php _e('Written by', 'framework') ?> <?php the_author_posts_link(); ?>
</div>
<div class="time">
<?php _e('on', 'framework') ?> <?php the_time( get_option('date_format') ); ?>
</div>
<div class="cat">
<?php _e('in', 'framework'); ?> <?php the_category(', '); ?> - <?php comments_popup_link(__('No comments', 'framework'), __('1 Comment', 'framework'), __('% Comments', 'framework')); ?>
</div>

</div>

Y-a--s--e-R · مرداد 93


<div class="meta">

<div class="au">
<?php _e('Written by', 'framework') ?> <?php the_author_posts_link(); ?>
</div>
<div class="time">
<?php _e('on', 'framework') ?> <?php the_time( get_option('date_format') ); ?>
</div>
<div class="cat">
<?php _e('in', 'framework'); ?> <?php the_category(', '); ?> - <?php comments_popup_link(__('No comments', 'framework'), __('1 Comment', 'framework'), __('% Comments', 'framework')); ?>
</div>

</div>

تشکر . فقط الان طبق کدهای بالا که دادید ، کدهای Style.Css به چه شکل باید کدنویسی بشه ؟


.meta{
float:left;
width:610px;
font-size:11px; font-family:Georgia, "Tahoma", Times, serif;
font-style:none;
color:#999;
margin:0 0 18px 0;
}
.meta a{
color:#999;
}
.meta a:hover{
color:#444444;
}

SM-Mahdavi · مرداد 93

مگه background نمی خواستید بزارید؟ داخل css برای هر کلاس جداگونه background بزارید

Y-a--s--e-R · مرداد 93

مگه background نمی خواستید بزارید؟ داخل css برای هر کلاس جداگونه background بزارید

الان به کد زیر نگاه کنید :


.meta{
float:left;
width:610px;
font-size:11px; font-family:Georgia, "Tahoma", Times, serif;
font-style:none;
color:#999;
margin:0 0 18px 0;
}
.meta a{
color:#999;
}
.meta a:hover{
color:#444444;
}

کد بالا ، کدی هست که واسه استایل دادن به قسمت اطلاعات نوشته هست .

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

که شما کد مربوط به single.php رو دادید .

حالا کد مربوط به style.css رو باید چه جوری کدنویسی کنم که هم استایل قبلی حفظ بشه و هم واسه هر قسمت ، یک آیکون مخصوص به خودش داشته باشه ؟

کد استایل رو هم که در بالا دادم بهتون . اگه لطف کنید مثله فایل سینگل ، رو استایل هم تغییرات رو بگید که کجا اعمال کنم خیلی ممنون میشم .

چون از کدنویسی چیزی نمیدونم .

Y-a--s--e-R · مرداد 93

Y-a--s--e-R · مرداد 93

majid1889 · مرداد 93

الان واقعا شما انتظار داشتی ساعت 4 صبح کسی به شما جواب بده ؟

شما بیداری لزومی نداره بقیه بیدار باشن !

لطفا اسپم ندید ...

----------------------------

با توجه به کدی که داده شد ، برای بخش نویسنده ، کلاس au ، برای بخش زمان ، کلاس time و برای بخش دسته بندی کلاس cat در نظر گرفته شده !

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

مثلا برای بخش دسته بندی :


.cat {
  background: url(image/cat.png) right center no-repeat;
}

Y-a--s--e-R · مرداد 93

الان واقعا شما انتظار داشتی ساعت 4 صبح کسی به شما جواب بده ؟
شما بیداری لزومی نداره بقیه بیدار باشن !
لطفا اسپم ندید ...
----------------------------

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

همونطور که میبینید ارسال قبلی در تاریخ : 4 مرداد بوده

ارسالی
۴ مرداد ۱۳۹۳, ۰۴:۵۵

و ارسال بعدی در تاریخ 6 مرداد ( یعنی چیزی بیشتر از 48 ساعت بعد )

ارسالی
امروز, ۰۶ مرداد ۹۳, ۰۶:۰۶

و صرفا به این جهت بروز کردم که بالا بیاد و دیده بشه ، چون در صفحات بعدی انجمن رفته بود .

با توجه به کدی که داده شد ، برای بخش نویسنده ، کلاس au ، برای بخش زمان ، کلاس time و برای بخش دسته بندی کلاس cat در نظر گرفته شده !
حالا برای هر کلاس باید با توجه به آیکونی که میخواید براش در نظر بگیرید جداگونه کد بزنید .
مثلا برای بخش دسته بندی :
.cat {
background: url(image/cat.png) right center no-repeat;
}

بابت راهنمایی تشکر . تست میکنم ایشالله که حل شه مشکل .

ویرایش شده مرداد 93 توسط Y-a--s--e-R

Y-a--s--e-R · مرداد 93

به کمک دوستان مشکل نمایش آیکون ، کنار اطلاعات نوشته حل شد ولی کد زیر :


<div class="meta">

<div class="au">
<?php _e('Written by', 'framework') ?> <?php the_author_posts_link(); ?>
</div>
<div class="time">
<?php _e('on', 'framework') ?> <?php the_time( get_option('date_format') ); ?>
</div>
<div class="cat">
<?php _e('in', 'framework'); ?> <?php the_category(', '); ?> - <?php comments_popup_link(__('No comments', 'framework'), __('1 Comment', 'framework'), __('% Comments', 'framework')); ?>
</div>

</div>

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

چه طوری این مشکل رو حل کنم ؟

SM-Mahdavi · مرداد 93

float بهش بده حل میشه.

Y-a--s--e-R · مرداد 93

کجا بهش float بدم ؟

کد نهایی به چه شکل باید باشه ؟

Y-a--s--e-R · مرداد 93

خواهشا قطره چکونی پاسخ ندید . اینطوری باید 2 ماه واسه یک مشکل صبر کرد تا شاید حل بشه یا نشه !!!

اگه کسی میدونه float رو کجا باید بزارم و کد نهایی باید چه شکلی بشه ممنون میشم راهنمایی کنه .

تازه وارد · مرداد 93

کجا بهش float بدم ؟
کد نهایی به چه شکل باید باشه ؟

ببینید خاصیت float فقط در CSS میتونه باشه و دو مقدار Right و Left رو میگیره که شما متناسب با نیازتون ، میتونید مقدار دهی کنید .

کدهای نهایی شما به شکل زیر میشه :

به جای کد زیر که در فایل Single.php قالبتون بوده :


<div class="meta">

<?php _e('Written by', 'framework') ?> <?php the_author_posts_link(); ?> <?php _e('on', 'framework') ?> <?php the_time( get_option('date_format') ); ?> <?php _e('in', 'framework'); ?> <?php the_category(', '); ?> - <?php comments_popup_link(__('No comments', 'framework'), __('1 Comment', 'framework'), __('% Comments', 'framework')); ?>

</div><!--meta-->

باید کدی که دوستان هم اشاره کردند رو بزارید . یعنی کد زیر :


<div class="meta">

<div class="au">
<?php _e('Written by', 'framework') ?> <?php the_author_posts_link(); ?>
</div>
<div class="time">
<?php _e('on', 'framework') ?> <?php the_time( get_option('date_format') ); ?>
</div>
<div class="cat">
<?php _e('in', 'framework'); ?> <?php the_category(', '); ?> - <?php comments_popup_link(__('No comments', 'framework'), __('1 Comment', 'framework'), __('% Comments', 'framework')); ?>
</div>

</div><!--meta-->

و متناسب با تغییر در کد سینگل قالبتون ، استایل هم باید تغییر کنه و از کد زیر :


.meta{
float:left;
width:610px;
font-size:11px; font-family:Georgia, "Tahoma", Times, serif;
font-style:none;
color:#999;
margin:0 0 18px 0;
}
.meta a{
color:#999;
}
.meta a:hover{
color:#444444;
}

به کد زیر مبدل بشه :


.meta{
float:left;
width:610px;
font-size:11px; font-family:Georgia, "Tahoma", Times, serif;
font-style:none;
color:#999;
margin:0 0 18px 0;
}
.meta a{
color:#999;
}
.meta a:hover{
color:#444444;
}
.au {
background: url(images/YourIcone.jpg) right center no-repeat;
float:right;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.time {
background: url(images/YourIcone.jpg) right center no-repeat;
float:right;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.cat {
background: url(images/YourIcone.jpg) right center no-repeat;
float:right;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

و اما 2 نکته :

1- کلاس های au و time و cat رو به دلخواه میتونید تغییر بدید ، ولی این نکته رو در نظر داشته باشید که هر تغییری در سینگل دادید ، در استایل هم اعمال کنید .

2- تکه کدهای :


margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;

صرفا برای تکمیل کردن کدهای ارائه شده بود و همونطور که میدونید باید بسته به قالبتون و محل قرارگیری اطلاعات نوشته ، مقدار px رو تغییر بدید تا نمایش درست و صحیحی در سایتتون داشته باشید .

موفق باشید و یا علی .

Y-a--s--e-R · مرداد 93

ببینید خاصیت float فقط در CSS میتونه باشه و دو مقدار Right و Left رو میگیره که شما متناسب با نیازتون ، میتونید مقدار دهی کنید .
کدهای نهایی شما به شکل زیر میشه :
به جای کد زیر که در فایل Single.php قالبتون بوده :
<div class="meta">

<?php _e('Written by', 'framework') ?> <?php the_author_posts_link(); ?> <?php _e('on', 'framework') ?> <?php the_time( get_option('date_format') ); ?> <?php _e('in', 'framework'); ?> <?php the_category(', '); ?> - <?php comments_popup_link(__('No comments', 'framework'), __('1 Comment', 'framework'), __('% Comments', 'framework')); ?>

</div>
باید کدی که دوستان هم اشاره کردند رو بزارید . یعنی کد زیر :
<div class="meta">

<div class="au">
<?php _e('Written by', 'framework') ?> <?php the_author_posts_link(); ?>
</div>
<div class="time">
<?php _e('on', 'framework') ?> <?php the_time( get_option('date_format') ); ?>
</div>
<div class="cat">
<?php _e('in', 'framework'); ?> <?php the_category(', '); ?> - <?php comments_popup_link(__('No comments', 'framework'), __('1 Comment', 'framework'), __('% Comments', 'framework')); ?>
</div>

</div>
و متناسب با تغییر در کد سینگل قالبتون ، استایل هم باید تغییر کنه و از کد زیر :
.meta{
float:left;
width:610px;
font-size:11px; font-family:Georgia, "Tahoma", Times, serif;
font-style:none;
color:#999;
margin:0 0 18px 0;
}
.meta a{
color:#999;
}
.meta a:hover{
color:#444444;
}
به کد زیر مبدل بشه :
.meta{
float:left;
width:610px;
font-size:11px; font-family:Georgia, "Tahoma", Times, serif;
font-style:none;
color:#999;
margin:0 0 18px 0;
}
.meta a{
color:#999;
}
.meta a:hover{
color:#444444;
}
.au {
background: url(images/YourIcone.jpg) right center no-repeat;
float:right;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.time {
background: url(images/YourIcone.jpg) right center no-repeat;
float:right;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.cat {
background: url(images/YourIcone.jpg) right center no-repeat;
float:right;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
و اما 2 نکته :
1- کلاس های au و time و cat رو به دلخواه میتونید تغییر بدید ، ولی این نکته رو در نظر داشته باشید که هر تغییری در سینگل دادید ، در استایل هم اعمال کنید .
2- تکه کدهای :
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
صرفا برای تکمیل کردن کدهای ارائه شده بود و همونطور که میدونید باید بسته به قالبتون و محل قرارگیری اطلاعات نوشته ، مقدار px رو تغییر بدید تا نمایش درست و صحیحی در سایتتون داشته باشید .
موفق باشید و یا علی .

تشکر بابت توضیح کامل و واضحی که دادید . خداروشکر مشکل 1 حل شد ولی هنوز مشکل 2 وجود داره و نتونستم حلش کنم .

منظورم این مشکله :

2- چگونه میتونم کنار نوشته ها در داخل مطالب آیکون دلخواه بزارم ؟ شبیه به عکس زیر :

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

گذاشتن آیکون دلخواه کنار اطلاعات نوشته و همچنین نوشته های داخل مطالب

پست های پیشنهاد شده

Y-a--s--e-R 31

لینک به ارسال

Y-a--s--e-R 31

لینک به ارسال

alireza1375 892

لینک به ارسال

alivazirinia 219

لینک به ارسال

Y-a--s--e-R 31

لینک به ارسال

alivazirinia 219

لینک به ارسال

Y-a--s--e-R 31

لینک به ارسال

SM-Mahdavi 5427

لینک به ارسال

Y-a--s--e-R 31

لینک به ارسال

SM-Mahdavi 5427

لینک به ارسال

Y-a--s--e-R 31

لینک به ارسال

SM-Mahdavi 5427

لینک به ارسال

Y-a--s--e-R 31

لینک به ارسال

SM-Mahdavi 5427

لینک به ارسال

Y-a--s--e-R 31

لینک به ارسال

Y-a--s--e-R 31

لینک به ارسال

Y-a--s--e-R 31

لینک به ارسال

majid1889 733

لینک به ارسال

Y-a--s--e-R 31

لینک به ارسال

Y-a--s--e-R 31

لینک به ارسال

SM-Mahdavi 5427

لینک به ارسال

Y-a--s--e-R 31

لینک به ارسال

Y-a--s--e-R 31

لینک به ارسال

تازه وارد 165

لینک به ارسال

Y-a--s--e-R 31

لینک به ارسال

به گفتگو بپیوندید