رفتن به مطلب

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


Blood

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

با سلام

در منوی سایتم میخوام یکی از منوهام که نه فعال نه کلیکی شده روش رنگش با بقیه فرق داشته باشه به چه صورت این کار رو انجام بدم این هم کد css منوهام هستش


/* =NAVIGATION
----------------------------------------------- */
nav li > ul,
nav li > ol {
margin:0;
list-style: none;

}
.main-navigation {
}
.main-navigation li {
float:right;
font-family: 'Lato', sans-serif;
}
.main-navigation ul li a {
font-size: 15px;
text-align:center;
color: #fff;
background: transparent url(images/Menu-Image.png);
background-color:#89D2FD;
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-ms-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;
}
.main-navigation li.default-menu,
li.default-menu {
}
.main-navigation a {
width:189px;
float: right;
line-height:70px

}
.main-navigation a:hover,
.main-navigation ul li.current-menu-item a,
.main-navigation ul li.current_page_ancestor a,
.main-navigation ul li.current-menu-ancestor a,
.main-navigation ul li.current_page_item a,
.main-navigation ul li:hover > a {

background:#248FCA;
border-left:0.1em solid #B8E4FE;
width:188px;
}


nav {
margin:0 auto;
text-align: center;
}
nav ul ul {
display: none;
height:30px;
line-height:30px;
}
nav ul li:hover > ul {
display: block;
}
nav ul {

list-style: none;
position: relative;
display: inline-table;
height:70px;
line-height:70px;
}
nav ul:after {
}
nav ul li {
float: right;
background: transparent url(images/Menu-Image.png);
background-color:#89D2FD;
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-ms-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;

}
nav ul li:hover {
background:#248FCA;
border-left:0.1em solid #B8E4FE;
width:188px;
}
nav ul li:hover a {
color: #fff;
}

nav ul li a {
display: block;
text-decoration: none;
font-size: 16px;
text-align:center;
color: #fff;
width:189px;

}


nav ul ul {
width:188px;
position: absolute;
border-top: 1px solid #BFE7FE;

}
nav ul ul li{
float: none;
background:#248FCA;
position: relative;
z-index: 999;
}
nav ul ul li a {
font-size: 14px;
color: #fff;
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-ms-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;
}
nav ul ul li a:hover
{
background: #78CCFD;
width:189px;
}

nav ul ul ul {
position: absolute; left: 100%; top:0;
}
.current-cat , .current_page_item , .current-cat-parent{
background:#248FCA;
border-left:0.1em solid #B8E4FE;
width:188px;
}
ul.children li.current-cat {
background:#78CCFD !important;
}
ul li.current-cat ,li li.current_page_item ,li li.current-cat-parent{
background:#78CCFD;
width:188px;
}

لینک به ارسال

به طور کل:

ul li:nth-child(3) {
color: red;
}

اون 3 یعنی سومین المنت رو انتخاب کرده...

لینک به ارسال

تغییری ایجاد نشد ؟

سلام

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

لینک به ارسال

www.rahboord.com

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


class="page_item page-item-6 page_item_has_children"
class="page_item page-item-2 page_item_has_children"

ویرایش شده توسط hamidwi
لینک به ارسال

از کجا اعمال کنم ؟ بخوام css رو اعمال کنم به چه صورت این کار رو انجام بدم من کد رو قرار دادم اما نشون نداد ؟

لینک به ارسال

این استایل رو به آخر فایل style.css قالبتون اضافه کنید.


.page-item-14{
background-color: #1173B2;
}

برای تغییر منو کلاس li مورد نظر رو جایگزین کنید برای تغییر رنگ هم کد رنگ رو جایگزین کنید.

کد رنگ = #1173B2

کلاس page-item-14 = li

ویرایش شده توسط hamidwi
لینک به ارسال

باز رنگ منو عوض نشد

یعنی واقعا اینقدر کار سختیه؟؟؟؟؟؟

یکی از منو هام میخوام رنگش با بقیه فرق کنه همین

لینک به ارسال

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

لینک به ارسال

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

http://codepen.io/m-nazari/pen/xhLAH/?editors=110#0

لینک به ارسال

من از عکس و رنگ در منو هام استفاده کردم این هم فایل css من هست

تمام کارهایی که فرمودید رو انجام دادم اما...

ملاحضه بفرمایید؟


nav li > ul,
nav li > ol {
margin:0;
list-style: none;

}
.main-navigation {
}
.main-navigation li {
float:right;
font-family: 'Lato', sans-serif;
}
.main-navigation ul li a {
font-size: 15px;
text-align:center;
color: #fff;
background: transparent url(images/Menu-Image.png);
background-color:#89D2FD;
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-ms-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;
}
.main-navigation li.default-menu,
li.default-menu {
}
.main-navigation a {
width:189px;
float: right;
line-height:70px

}
.main-navigation a:hover,
.main-navigation ul li.current-menu-item a,
.main-navigation ul li.current_page_ancestor a,
.main-navigation ul li.current-menu-ancestor a,
.main-navigation ul li.current_page_item a,
.main-navigation ul li:hover > a {

background:#248FCA;
border-left:0.1em solid #B8E4FE;
width:188px;
}


nav {
margin:0 auto;
text-align: center;
}
nav ul ul {
display: none;
height:30px;
line-height:30px;
}
nav ul li:hover > ul {
display: block;
}
nav ul {

list-style: none;
position: relative;
display: inline-table;
height:70px;
line-height:70px;
}
nav ul:after {
}
nav ul li {
float: right;
background: transparent url(images/Menu-Image.png);
background-color:#89D2FD;
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-ms-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;

}
nav ul li:hover {
background:#248FCA;
border-left:0.1em solid #B8E4FE;
width:188px;
}
nav ul li:hover a {
color: #fff;
}

nav ul li a {
display: block;
text-decoration: none;
font-size: 16px;
text-align:center;
color: #fff;
width:189px;

}


nav ul ul {
width:188px;
position: absolute;
border-top: 1px solid #BFE7FE;

}
nav ul ul li{
float: none;
background:#248FCA;
position: relative;
z-index: 999;
}
nav ul ul li a {
font-size: 14px;
color: #fff;
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-ms-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;
}
nav ul ul li a:hover
{
background: #78CCFD;
width:189px;
}

nav ul ul ul {
position: absolute; left: 100%; top:0;
}
.current-cat , .current_page_item , .current-cat-parent{
background:#248FCA;
border-left:0.1em solid #B8E4FE;
width:188px;
}
ul.children li.current-cat {
background:#78CCFD !important;
}
ul li.current-cat ,li li.current_page_item ,li li.current-cat-parent{
background:#78CCFD;
width:188px;
}

لینک به ارسال

کدی که شما باید قرار بدید(فرق نداره کجای فایل استایل قرار میدید.) اینه:


nav .menu ul li:nth-child(3) {
background:red;
}

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

لینک به ارسال

اگر مثال آقای نظری رو به اینصورت بنویسید مشکلتون حل میشه.


.page-item-6 {
background:red;
}

لینک به ارسال

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

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

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...