تغییر رنگ بک گراند و فونت و هاور هر آیتم از یک منو

[The Godfather 10]

با درود و روز بخیر به شما استاد های گرامی

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

لینک قالب JSN Ares

لینک عکس از قسمتی که مد نظره

خیلی ممنون از شما

[The Godfather 10]

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

[ATTACH=CONFIG]8097[/ATTACH]

[Vahid Taheri 74]

با بررسی css های این قالب ، به این نتیجه رسیدم که برای رنگی کردن آیتم های منو از یک الگوی جالب استفاده کرده :

div.jsn-modulecontainer ul.menu-mainmenu > li:nth-child(7n+1) > a

این سلکتور مربوط به منوی home هست که با کد زیر کنارش یه خط قرمز گذاشته :

div.jsn-modulecontainer ul.menu-mainmenu > li:nth-child(7n+1) > a {
   border-left: 3px solid #ae0000;
}

برای آیتم های بعدی 7n+1 رو یکی یکی زیاد کرده.یعنی برای آبی 7n+2 ، برای زرد 7n+3 الی آخر ....

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

div.jsn-modulecontainer ul.menu-mainmenu > li:nth-child(7n+2) > ul {
   background: #5182c4;
}

یعنی از سلکتوری که گفتم کپی میگیریم ، به جای تگ a آخرش ul میزاریم و کد های دلخواهمون رو بهش انتساب میدیم.

سوالی بود در خدمتم

موفق باشید

ویرایش شده در اسفند 93 توسط Vahid Taheri

[The Godfather 10]

با بررسی css های این قالب ، به این نتیجه رسیدم که برای رنگی کردن آیتم های منو از یک الگوی جالب استفاده کرده :

div.jsn-modulecontainer ul.menu-mainmenu > li:nth-child(7n+1) > a

این سلکتور مربوط به منوی home هست که با کد زیر کنارش یه خط قرمز گذاشته :

div.jsn-modulecontainer ul.menu-mainmenu > li:nth-child(7n+1) > a {
   border-left: 3px solid #ae0000;
}

برای آیتم های بعدی 7n+1 رو یکی یکی زیاد کرده.یعنی برای آبی 7n+2 ، برای زرد 7n+3 الی آخر ....

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

div.jsn-modulecontainer ul.menu-mainmenu > li:nth-child(7n+2) > ul {
   background: #5182c4;
}

یعنی از سلکتوری که گفتم کپی میگیریم ، به جای تگ a آخرش ul میزاریم و کد های دلخواهمون رو بهش انتساب میدیم.

سوالی بود در خدمتم

موفق باشید

بسیار ممنون از راهنمائیتون

ولی منظورم مانند این سایت بود:

403 Forbidden

هر ایتم از هر منو یک بک گراند جداگانه داشته باشه.

مثل آیتم های منوی اصلی که هر کدام یک رنگ دارند، ساب منو (های هر ایتم از منوی اصلی) هم دارای بک گراند با رنگ مجزا باشند.

حتی خواستم از قابلیت page class در تنظیمات هر آیتم منو در جوملا و یا اضافه کردن سی اس اس جداگانه برای هر ایتم منو در فایل css استفاده کنم که متاسفانه به دلیل کمبود تجربه نتونستم این کار رو بکنم.

بسیار ممنون میشم اگر لطف کنید راهنمائی کنید.

[The Godfather 10]

( در صورت باز نشدن نسخه اصلی سایتی که برای نمونه دادم ) منظورم مانند این منو بود:

[The Godfather 10]

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

[aminweb 26]

خب بجای border-left: 3px solid #ae0000; که آقای طاهری فرمودن شما background: بزار

[The Godfather 10]

ممنون دوست عزیز

من هم همین کار رو کردم، ولی گفتم که با این کار رنگ بک گراند آیتم های منو ها عوض میشه، من میخوام رنگ بک گراند ساب منو ها عوض بشه، مثل عکسی که دادم

[aminweb 26]

خب مهندس طاهری که گفتن بالا

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

کد:

div.jsn-modulecontainer ul.menu-mainmenu > li:nth-child(7n+2) > ul {

background: #5182c4;

}