Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

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)

2012-01-19

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');
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;
});
into this :
$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)

2012-01-19

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 :)

2012-01-19

Arnav Joy answers:

can you explain more about your question?


Arnav Joy comments:

did you checked http://cityloungelx.com/teste/Pluto-v1-3/Manual/