انجمن

انجمن وردپرس فارسی » پوسته‌ها


مشکل اساسی با برگه ها !!  (۱۰ نوشته)

  • mehdiweblog

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

    پوسته Vibrant
    http://demo.wp-persian.com/?preview_theme=Vibrant
    همینطور که می بینید برگه ها رو نشون نمیده! و مثلا برگه ی "درباره" رو سمت راست پایین و به سورت ابزارک نشون میده. اگه بخواسم برگه ها به صورت خودگار به هدر این قالب اضافه شه طوریکه با رفتن موس روی اون رنگ کادر نام برگه عوض شه باید چکار کرد؟
    کد ها همون کدهای پیش فرض قالب هستند.

    کلا یه سوال کلی:
    کدی که برگه ها رو خودش اتوماتیک وار اضافه می کنه چی هست؟

  • Mostafa

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

    سلام,
    جواب کلی:
    <?php wp_list_pages(); ?>

    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    mehdiweblog

  • mehdiweblog

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

    و جواب جزیی؟‌ :D
    کد قالب که موجوده، CSS اش رو هم خودم درست می کنم.
    ولی دقیقا نمیدونم این کد رو کجا بزارم؟

  • mehdiweblog

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

    این کد css من برای منوی برگه ها در بالای صفحه هست.
    ببینید درست میگم یا نه ؟!

    کد:

    #menubar {
	min-width : 980px;
	float: right;
	height: 24px;
	padding: 0;
	margin:0 15px 5px 0;
	display: inline;
	background: transparent;
	font-size: 13px;
}

#menubar li {
	margin-right: 2px;
	float: right;
	display: block;
	height: 24px;
}

#menubar li ul li {
	height: 24px;
	border-bottom: 1px solid #ddd;
	width: 100%;
}

#menubar li a {
	display: block;
	background: #707070;
	margin-top: 1px;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: bold;
	font-size: 0.75em;
	text-transform: lowercase;
	line-height: 24px;
	color: #f7f7f7;
}

#menubar li a:hover {
	margin-top: -1px;
	padding-bottom: 2px;
	background: #5CA9FF;
	color: #fff;
}

#menubar li.current_page_item a {
	margin-top: -1px;
	padding-bottom: 2px;
	background: #5CA9FF;
	color: #fff;
}

#menubar li.current_page_item a:hover {
	background: #0078FF;
	color: #fff;
}

#menubar ul {
	display: none;
	z-index: 99;
	position: absolute;
}

#menubar ul li a {
	display: block;
	background: #FFF;
}

#menubar li ul a:hover {
	display: block;
	background: #FFF;
}

#menubar ul a {
	display: block;
}

#menubar ul ul {
	margin-top: -25px;
	display: none;
	margin-left: 199px;
	position: absolute;
}

#menubar li:hover ul ul {
	display: none;
}
#menubar li:hover ul {
	display: block;
}
#menubar ul li:hover ul {
	display: block;
}
#menubar li ul li {
	display: block;
	width: 100%;
}

#menubar li.page_item ul {
	border-top: 1px solid #ddd;
	min-width: 20px;
	margin-right: -30px;
}

#menubar li.page_item a {
	display: block;
}

#menubar li.page_item a:hover {
	display: block;
}

#menubar li.page_item ul li a {
	display: block;
	text-align: right;
	height: 24px;
	line-height: 24px;
	background: #ecebeb;
	padding-left: 10px;
	padding-right: 10px;
	text-transform: lowercase;
	font-size: 0.7em;
	font-weight: bold;
	color: #666;
	border-right: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
	border-top: 1px solid #dcdcdc;
	border-left: 1px solid #dcdcdc;
}

#menubar li.page_item ul li a:hover {
	padding-top: 2px;
	display: block;
	text-align: right;
	height: 24px;
	line-height: 24px;
	background: #FFF;
	padding-left: 10px;
	padding-right: 10px;
	text-transform: lowercase;
	font-size: 0.7em;
	font-weight: bold;
	color: #393939;
	border-right: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
	border-left: 1px solid #dcdcdc;
}

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

    کد
    <?php wp_list_pages(); ?>

    فقط برگه ها رو به صورن نوشته و لینک نشون میده و نه بر اساس این استایل و رنگ و کادری که در css هست و اینجا ذکر کردم.

    از روی این Css مربوط به نمایش برگه ها به صورت منو در بالای صفحه چه جوری میشه کدی رو که باید در هدر قرار بدم رو بدست بیارم؟؟؟

    ممنون :)

  • Mostafa

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

    <div class="menubar"><?php
echo str_replace('<br />',' | ',
wp_list_categories('style=&echo=0&title_li='));
?></div>
    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    mehdiweblog

  • mehdiweblog

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

    مرسی مصطفی جان
    اما این دسته ها روُ اون هم به صورت نوشته نه با استایلی که تعریف شده (با بردن موس روی لینک رنک کادر لینک تغییر کنه)
    به این صورت نشون میده‌(متن ساده)‌:
    دسته شماره یک | دسته‌بندی نشده |

    اولا اینکه من برگه ها رو میخواستم نه دسته ها رو (PAGE)

    بالایی مگه css برگه ها (پیج) نبود؟
    قسمتی از کد بالا!

    #menubar li.page_item ul {
	border-top: 1px solid #ddd;
	min-width: 20px;
	margin-right: -30px;

    تو رو خدا یه کسی کمک کنه.
    یه چیز دیگه:
    با قرار دادن این کد:

    <li class="page_item page-item-1"><a href="http://domain.com/jomalat/" title="جملات">جملات</a>
<li class="page_item page-item-2"><a href="http://domain.com/photo/" title="عکس">عکس</a>

    با قرار دادن کد بالا به صورت دستی، منوی برگه ها با استایلی که مد نظرم هست میاد!
    اما من میخوام کدی رو قرار بدم که خودکار برگه ها رو بزاره توی منو. و لازم نباشه دستی وارد کنم.

    تورو خدا یکی کمک کنه. هر کار می کنم نمیشه :(

    ممنووووووووون

  • Mostafa

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

    <div id="menubar">
<ul>
<li><a href=”<?php echo get_settings(‘home’); ?>”>HOME</a></li>
<?php wp_page_menu(); ?>
</ul>
</div>

    css

    #menubar {
    min-width : 980px;
    float: right;
    height: 24px;
    padding: 0;
    margin:0 15px 5px 0;
    display: inline;
    background: transparent;
    font-size: 13px;
}

#menubar li {
    margin-right: 2px;
    float: right;
    display: block;
    height: 24px;
}

#menubar li ul li {
    height: 24px;
    border-bottom: 1px solid #ddd;
    width: 100%;
}

#menubar li a {
    display: block;
    background: #707070;
    margin-top: 1px;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
    font-size: 0.75em;
    text-transform: lowercase;
    line-height: 24px;
    color: #f7f7f7;
}

#menubar li a:hover {
    margin-top: -1px;
    padding-bottom: 2px;
    background: #5CA9FF;
    color: #fff;
}

#menubar li.current_page_item a {
    margin-top: -1px;
    padding-bottom: 2px;
    background: #5CA9FF;
    color: #fff;
}

#menubar li.current_page_item a:hover {
    background: #0078FF;
    color: #fff;
}

#menubar ul {
    display: none;
    z-index: 99;
    position: absolute;
}

#menubar ul li a {
    display: block;
    background: #FFF;
}

#menubar li ul a:hover {
    display: block;
    background: #FFF;
}

#menubar ul a {
    display: block;
}

#menubar ul ul {
    margin-top: -25px;
    display: none;
    margin-left: 199px;
    position: absolute;
}

#menubar li:hover ul ul {
    display: none;
}
#menubar li:hover ul {
    display: block;
}
#menubar ul li:hover ul {
    display: block;
}
#menubar li ul li {
    display: block;
    width: 100%;
}

#menubar li.page_item ul {
    border-top: 1px solid #ddd;
    min-width: 20px;
    margin-right: -30px;
}

#menubar li.page_item a {
    display: block;
}

#menubar li.page_item a:hover {
    display: block;
}

#menubar li.page_item ul li a {
    display: block;
    text-align: right;
    height: 24px;
    line-height: 24px;
    background: #ecebeb;
    padding-left: 10px;
    padding-right: 10px;
    text-transform: lowercase;
    font-size: 0.7em;
    font-weight: bold;
    color: #666;
    border-right: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    border-top: 1px solid #dcdcdc;
    border-left: 1px solid #dcdcdc;
}

#menubar li.page_item ul li a:hover {
    padding-top: 2px;
    display: block;
    text-align: right;
    height: 24px;
    line-height: 24px;
    background: #FFF;
    padding-left: 10px;
    padding-right: 10px;
    text-transform: lowercase;
    font-size: 0.7em;
    font-weight: bold;
    color: #393939;
    border-right: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    border-left: 1px solid #dcdcdc;
}

    یا:

    #menubar ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }
#menubar li {display: inline; }
#menubar ul li a {text-decoration:none;  margin: 4px; padding: 5px 20px 5px 20px; color: blue; background: pink;}
#menubar ul li a:hover {color: purple; background: yellow; }
    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    mehdiweblog

  • mehdiweblog

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

    ممنون مصطفی جان بابت کمکت
    اما درست نشد :(
    کد CSS اول که اصلا چیزی رو نشون نداد و دومی این جوری شد:

    http://www.20upload.com/files/w1/12834383181.png

    همین کد که دادید با CSS خودم که هیچی نشون نمیده!
    در حالی که وقتی من کد CSS خودم رو قرار میدم :css :

    #menubar {
	min-width : 980px;
	float: right;
	height: 24px;
	padding: 0;
	margin:0 15px 5px 0;
	display: inline;
	background: transparent;
	font-size: 13px;
}

#menubar li {
	margin-right: 2px;
	float: right;
	display: block;
	height: 24px;
}

#menubar li ul li {
	height: 24px;
	border-bottom: 1px solid #ddd;
	width: 100%;
}

#menubar li a {
	display: block;
	background: #707070;
	margin-top: 1px;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: bold;
	font-size: 0.75em;
	text-transform: lowercase;
	line-height: 24px;
	color: #f7f7f7;
}

#menubar li a:hover {
	margin-top: -1px;
	padding-bottom: 2px;
	background: #5CA9FF;
	color: #fff;
}

#menubar li.current_page_item a {
	margin-top: -1px;
	padding-bottom: 2px;
	background: #5CA9FF;
	color: #fff;
}

#menubar li.current_page_item a:hover {
	background: #0078FF;
	color: #fff;
}

#menubar ul {
	display: none;
	z-index: 99;
	position: absolute;
}

#menubar ul li a {
	display: block;
	background: #FFF;
}

#menubar li ul a:hover {
	display: block;
	background: #FFF;
}

#menubar ul a {
	display: block;
}

#menubar ul ul {
	margin-top: -25px;
	display: none;
	margin-left: 199px;
	position: absolute;
}

#menubar li:hover ul ul {
	display: none;
}
#menubar li:hover ul {
	display: block;
}
#menubar ul li:hover ul {
	display: block;
}
#menubar li ul li {
	display: block;
	width: 100%;
}

#menubar li.page_item ul {
	border-top: 1px solid #ddd;
	min-width: 20px;
	margin-right: -30px;
}

#menubar li.page_item a {
	display: block;
}

#menubar li.page_item a:hover {
	display: block;
}

#menubar li.page_item ul li a {
	display: block;
	text-align: right;
	height: 24px;
	line-height: 24px;
	background: #ecebeb;
	padding-left: 10px;
	padding-right: 10px;
	text-transform: lowercase;
	font-size: 0.7em;
	font-weight: bold;
	color: #666;
	border-right: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
	border-top: 1px solid #dcdcdc;
	border-left: 1px solid #dcdcdc;
}

#menubar li.page_item ul li a:hover {
	padding-top: 2px;
	display: block;
	text-align: right;
	height: 24px;
	line-height: 24px;
	background: #FFF;
	padding-left: 10px;
	padding-right: 10px;
	text-transform: lowercase;
	font-size: 0.7em;
	font-weight: bold;
	color: #393939;
	border-right: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
	border-left: 1px solid #dcdcdc;
}

    و در زیر هدر این لینک ها رو میزارم:

    <div id="top">
<ul id="menubar">
			<li></li>

<li class="page_item page-item-1770"><a href="http://domain.ir/1/" title="1">برگه1</a></li>
<li class="page_item page-item-177"><a href="http://domain.ir/2/" title="2">برگه2</a></li>
<li class="page_item page-item-98"><a href="http://domain.ir/3/" title="3 …">برگه3 ;</a></li>
<li class="page_item page-item-43"><a href="http://domain.ir/4/" title="4">برگه4</a></li>
<li class="page_item page-item-378"><a href="http://domain.ir/5/" title="5">برگه5</a></li>
<li class="page_item page-item-228"><a href="http://domain.ir/6/" title="6">برگه6</a></li>
<li class="page_item page-item-163"><a href="http://domain.ir/7/" title="7">برگه7</a></li>

</ul>
</div>

    قرار میدم، این شکلی میشه:

    http://www.20upload.com/files/w1/12834379971.png

    حالا من میخوام من های برگه ها درست مثل شکل بالا بشه. اما نیازی نباشه دسته ها رو دستی وارد کنم.
    یعنی با همین CSS خودم، کدی رو که این برگه را خودکار بیاره و البته با دستورات CSS ای که دارم تبدیل به شکل بالا کنه رو بدبد.

    ممون دوستم :)

  • Mostafa

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

    <div id="menubar">
<ul>
<li><a href=”<?php echo get_settings(‘home’); ?>”>HOME</a></li>
<?php wp_page_menu(); ?>
</ul>
</div>
    #menubar {
    margin: 0px;
    padding: 0px;
  margin-bottom: 15px
}

#menubar ul {
    float: right;
    list-style: none;
    margin: 0px;
    padding: 0px;
  text-align: right;
}

#menubar li {
    float: right;
    list-style: none;
    margin: 0px;
}

#menubar li a, #menubar li a:visited {
    background: #FF0033;
    color: #8E8E8E;
    display: block;
  font: Tahoma, sans-serif
    font-size: 11px;
    font-weight: normal;
    margin: 1px 2px 0px;
    padding: 8px 10px 8px 10px;
    text-decoration: none;
}

#menubar li a:hover {
    color: #666;
  background: #FF0033;
}

#menubar li li a, #menubar li li a:visited {
    background: #FF0033;
    width: 170px;
    color: #666;
    float: right;
    margin: 0px 0px 0px -1px;
    }

#menubar li li a:hover, #menubar li li a:active {
    background: #F7F7F7;
    color: #666;
    padding: 7px 10px 7px 10px;
}

#menubar li ul {

    z-index: 9999;
    position: fixed;
    left: -999em;
    height: auto;
    margin: 0px;
    padding: 0px;
  width: 180px;

}

#menubar li li {
}

#menubar li ul a {
    width: 150px;
}

#menubar li ul a:hover, #menubar li ul a:active {
}

#menubar li ul ul {
    margin: auto;
  direction: rtl;
  background: #DDDDDD
}

#menubar li:hover ul ul, #menubar li:hover ul ul ul, #menubar li.sfhover ul ul, #menubar li.sfhover ul ul ul {
    left: -999em;
}

#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul {
    left: auto;
  margin-right: -20px;
  margin-left: 20px
}

#menubar li:hover, #menubar li.sfhover {
    position: static;
  padding: 0px;
}

#menubar .current_page_item a, #menubar .current_page_item a:visited {
    background: #FFFFFF;
    color: #666;
    }

#menubar .current_page_item a:hover {
    background: #f1f1f1;
    color: #666;
    }

#menubar .current_page_item ul li a, #menubar .current_page_item ul li a:visited{
    background: #FFFFFF;
    color: #666;
    }

#menubar .current_page_item ul li a:hover {

    background: #f1f1f1;
    color: #666;
}

  • mehdiweblog

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

    ممنون دوست من اما درست نشد.
    میخواستم با CSS خودم، کد پی اچ پی رو که باید در هدر قرار بدم رو یادم بدید.
    اگخ کسی بازم کمک کنه ممنون میشم :)
    بد جوری کارم گیره.

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



برچسب‌ها

هیچ برچسبی نیست.