Having Different Static Background Image For Each Menu ? WordPress
- SOLVED
I am using pluto theme from themegoods.
http://themes.themegoods.com/pluto_wp/
As for now, the theme only support background gallery slides for 2 pages ( home & blog ), and all other pages/menu share the same "home page" gallery slide
I want to have different static background images for each menu and sub-menus, and mean while keep the current gallery slide at home page and blog page.
Hope somebody can help me on this.
skype: jackson919
Thanks in advance
Answers (3)
Julio Potier answers:
Hello
You want that each time you click on a page/post, you can set a different background image, is that ok ?
I look the pluto demo and saw that pages are requested by ajax, so i've got my idea to do this ;)
See you soon on skype
Julio Potier comments:
<em>@fahd: I solved it for about 90%, just a issue left, but my computer is dead XD
i'll fix it and be back to finish ;)</em>
Julio Potier comments:
Ok fixed, what did i do :
1) Modify the css/supersized.css to remove the useless and annoying "z-index: -999" on "#supersized"
2) Modify the "/js/custom.js" to modify this :
target_url = $j(this).children('a').attr('href');into this :
target_id = $j(this).attr('id');
current_target_id = $j('#homepage_wrapper').attr('rel');
target_url = target_url.replace(/^.*#/, '');
$j.history.load(target_url);
return false;
});
$bgImage = $j(this).css('background-image');
$j('#supersized').css( {backgroundImage: $bgImage } );
target_url = $j(this).children('a').attr('href');
target_id = $j(this).attr('id');
current_target_id = $j('#homepage_wrapper').attr('rel');
target_url = target_url.replace(/^.*#/, '');
$j.history.load(target_url);
if( $bgImage != 'none' )
$j('#supersized').attr( 'style', $j('#supersized').attr( 'style') + ' -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; ' );
return false;
});
3 times in this file.
3) Modify style.css to add :
.menu-item{
background-position: 0px 50px !important;
background-repeat: no-repeat !important;
}
.menu-item-XXX{
background-image: url(./path/to/file.jpg) !important;
}
Where XXX is the ID menu.
Julio Potier comments:
@fahd: i thought to ask you if i need help, but it's ok this time, thank you for your proposition !
(question will be closed soon)
Fahad Murtaza answers:
Based on each menu items ID in html, write the background CSS code i.e
#menu-item-2671{
background:url(/path/to/file/filename.jpg);
}
Fahad Murtaza comments:
OK I am adding you on skype.
Fahad Murtaza comments:
Can you elaborate, "I want to have different static background images for each menu and sub-menus, and mean while keep the current gallery slide at home page and blog page." Do you mean in the menu or on the pages.
Pages are even more easy.
Fahad Murtaza comments:
Hi Jackson,
Any luck yet?
Fahad Murtaza comments:
@Julio: Done, if not, I would also like to help.
Fahad Murtaza comments:
@Julio: This is amazing. I couldn't put much time in it but I was willing to help. This was one interesting project. The suggested price for this job by you is well, justified :)
