Different Background Images

[wavermike70]

Hi, first my english is not the best. I place a Background Images with full Browser Size on this page: http://www.tanzschule-schaller.de/ with the Advanced Options – Background Images. It is possible to place different BG Images on different Sites? An when yes it is a big effort or is there e easy way to to that?

And by the way… 🙂 Two other Questions: 

• It is possible to make the Main mene center and the top islike now on the right site?
• It is possible that the DropDown-Menu drops horizontal not vertical?

So much questions… 🙂 Thank you very much for your support!!!

[scrambler]

1- Yes, just add rules like below for each page that needs a different image in Advanced options > Head Section > Custom CSS Rule box

html .page-id-xxx {background-image: url(ImageURL);}

replacing xxx by the id of the page, and imageURL by the URL of the image you want to use on it

read this for more details http://forum.weavertheme.com/discussion/2648/changing-the-background-image-for-a-specific-page

2- Your secondary menu should be aligned left by default, unless you checked the option to move it right in Main options > menus > Menu Bar Layout.

3- I will have to get back to you on this. I found a way to do it on the latest Xtreme Theme, but not sure if it will work on the old Weaver II   

[scrambler]

3- Try adding the rules below in Advanced options > Head section > Custom CSS Rule box

#nav-bottom-menu .menu_bar li {white-space:nowrap;}
#nav-bottom-menu .sub-menu li {display:inline-block;float:none;}
#nav-bottom-menu .menu_bar ul ul a {width:auto;}

It may need some tweaking once in place

[wavermike70]

Thank you very much for your fast and competently answer!!! i was in a short vacation 🙂 It works with the different BG Images!!!  :)) I try this with the Site “Team”. The other Sites i will to tomorrow. And also tomorrow i will try your solution wit the menues. Now i will be a yerry happy man 🙂 I make a entry here if it works or not. Thank you Michael

[wavermike70]

Hi, now i have a small Problem: I have a Testsite with Page ID 636: http://www.tanzschule-schaller.de/work/ 

That put in the Advanced Options-Head Section:

html .page-id-636 {background-image: url(http://www.tanzschule-schaller.de/wp-content/uploads/2015/07/impressum.jpg);}

1. The BG Images will be replaced horizontal
2. The Main BG (Advanced Options-BackroundImages) lies beneath
3. It is not full Browser Size

Maybe one of this inside:

html
{background: url(xxx.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

html, body{
width: 100%;
min-height:100%;}

Were is  my error? Thank you so much!!!

[wavermike70]

Hi, you Code for the horizontal DropMenu works!!! 🙂 http://www.tanzschule-schaller.de/ But how i get the top Menue to the right? Thank you

[scrambler]

For the background image, you will need to change the way you are applying the global one.

Right now the way you did it is is applied on the html tag, and we cannot override that on a page basis, because there are no page selector at the html level.

What you need to do is set your main background image using WordPress > Appearance > Background. That will place the background image on the body tag with a rule

body.custom-background {background…..}

Then you can override that on a page by replacing the rule I gave you by the two below

body.custom-background {-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

body.custom-background.page-id-636 {background-image: url(http://www.tanzschule-schaller.de/wp-content/uploads/2015/07/impressum.jpg);}

to replace the image on that specific page, while keeping all the other parameters

[scrambler]

For your last question, if what you mean is that you want the top menu aligned right, and the bottom menu centered, you will need to do the following

In Main Options > Menu > Menu bar Layout, uncheck center menu, and check Move secondary menu to right

That will aligned the top menu right.

Then to center only the bottom menu bar, add the rules below in Advanced Options > HEad Section > Custom CSS rule box

#access.menu_bar div.menu {float:right;right:50%;position:relative;}
.menu_bar#access ul, .menu_bar#access div {margin:0 auto;}
.menu_bar#access li {left:50%;}

[wavermike70]

Hi and thank you for the great Support. Questions to the BG-Imgage

1. Should i first erase the BG Image in Advanced Options – Background Images?
2. Than i set the BG Image in WP-Design-Backround?  Where can i to there a Rule? (body.custom-background {background…..})
3. Than i to in the  Custom CSS rule box this one:

• body.custom-background {-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
• body.custom-background.page-id-XXX… {background-image: url(http://www.tanzschule-schaller.de/wp-content/uploads/2015/07/impressum.jpg);}

Questions to the Menue:

It works but the DropDown-Buttons are not under the Main Button:

Maybe it is short before everithing ok 8-| Thank you very much

[wavermike70]

Aaaaaahhh maybe now i have understand: http://www.tanzschule-schaller.de

1. The BG Image erase in Anvanced Options – BackgroundImages
2. BG Image in Wordpress – Appearance – Background with “Scroll fixed” !!!
3. Than this in Anvanced Options – Head Section – Custom CSS Rules: body.custom-background {-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
4. Than all the different Images with this: body.custom-background.page-id-xxx {background-image: url(http://www.tanzschule-schaller.de/wp-content/uploads/2015/07/xxx.jpg);} *** But not the Picture from the Index Site?!

Puuuhhh Now I’m tired :-j 

If existet a solution with the Navigation Problem (look schedule ) im a happy man!!! 😀 Thank you for the great Support!!!

[scrambler]

4- Is there a question here ?

5- “If existet a solution with the Navigation Problem (look schedule )” If this is regarding your image that shows the sub menus being shifted right, I do not see this on my computer. I have tested IE11, Chrome and FF and on all of them the sub menu is aligned under the main menu item.

Have you cleared your cache and tested on different browser / computers?

[wavermike70]

Hi, i’m involved in too much things… :)] The BG Problem is solved thanks to your help. The Navigation is the last Problem. But if i do this Code in Anvanced Options – Head Section – Custom CSS Rules …

#access.menu_bar div.menu {float:right;right:50%;position:relative;}

.menu_bar#access ul, .menu_bar#access div {margin:0 auto;}

.menu_bar#access li {left:50%;}

#nav-bottom-menu .menu_bar li {white-space:nowrap;}

#nav-bottom-menu .sub-menu li {display:inline-block;float:none;}

#nav-bottom-menu .menu_bar ul ul a {width:auto;}

… Then are the Problem with the last Screenshoot from the Navigation. I clear the Cache and make Browserchecks with all Browsers and Systems- But the problem remains… Mayby you have another Idea? Thank you very much!!!

[scrambler]

As I said, I am not seeing what you are seeing, on my machine it looks correct, so I will repeat my questions…

• Have you cleared your cache (browser and including any cache plugin you may be using)?
• have you tested on other computers?
• have you tested on other browsers (if so which one show the problem)?

[wavermike70]

Oh my last answere is gone… But the Client has decide this two menue points  put in the footer. But i clean the cache and tested with much browsers an systems. But now it is ok  :)>-

A last Problem:  I would like to set a link in the Header Logo to the Homepage. From every site the user comes with click on the logo to the Homepage… I try the “Header Gadgets” but i have problems there wit the exactly center position. How can i make the Logo 50% center? Thank you very much

[scrambler]

For your header image to link to the home page, just check the option in Main options > Header > HEader Image > Header Image Link to site.

What do you mean by 50% center ?

[wavermike70]

This Theme and the Support here is amazing!!! So easy!!! And i tested for a houer with this: http://faq.wpde.org/wie-verlinke-ich-meinen-header/ and with “Shortcode Pro” – Header Gadgets (there was the problem with 50% center) and only what i must do is check a Box  :))

But i read that this theme ist not for the future :-S is it smart for the next project to use Weaver Extreme? Thank you and have a nice day 🙂

[Author]

Posts