Forum Support

Shape 5
March 28, 2024, 04:35:08 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: how to change the menu background and center background  (Read 939 times)
kacper1972
Jr. Member
**
Offline Offline

Posts: 19



« on: January 14, 2015, 10:37:00 AM »

thank you for this great template

I want to make two changes, the first:
how to add a background in the menu when I'm using firebug writes color is:
# s5_nav {
     background: none repeat scroll 0 0 #fff;
     float: left;
     left: 50%;
     margin: auto;
     position: relative;
     width: auto! important;
}
but then the background shows up just over half the length, please see the image

secondly

I want to center a background image, but the option Background Image Position Option probably does not work. I changed the settings does not change anything.
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #1 on: January 14, 2015, 12:54:06 PM »

Hello,

You can add a background to this:

#s5_nav li {

And then remove the margin-right:4px on this CSS definition too.  Other than this you can't get a background on the menu like you are trying to do because its centered with CSS and thats why its only showing on half of it.   The above method should do the same for you though

As for the background image can you post a URL of this?

Thanks,
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
kacper1972
Jr. Member
**
Offline Offline

Posts: 19



« Reply #2 on: January 14, 2015, 02:02:40 PM »

Thank you Smiley

link

http://samm.idw.net.pl/

as you see, I need to center it and fit to window, it works in other positions, but no with main background

Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #3 on: January 15, 2015, 02:16:55 PM »

It looks like it just needs to have the "Background Image Position Option" set to center.  Then this should work.  "top center" specifically.
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
kacper1972
Jr. Member
**
Offline Offline

Posts: 19



« Reply #4 on: January 21, 2015, 10:44:16 AM »

I tried different settings. Please look at the picture. More than this I installed a different template, and the situation is the same. Background does not set up for display.

I found another solution, if I choose a background for center_area_seting area as shown in the picture I have a background that sets up for the screen.

But the problem is that I have only half the screen with the background - an idea how to remove
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 on: January 22, 2015, 12:12:53 AM »

Hello,

Your background call looks like this currently:

url("http://samm.idw.net.pl/images/background_homepage.jpg") no-repeat fixed 0 0 rgba(0, 0, 0, 0) !important

Try using center top as well as cover values in the coding above to help keep it in the middle and covering the entire page.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
kacper1972
Jr. Member
**
Offline Offline

Posts: 19



« Reply #6 on: January 22, 2015, 12:46:17 PM »

I found solution not good but for me ok.
I tray difrent setting in template options. in the end I made some change:

on line 91 I add this:
body style="background: url(images/background_homepage.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;"

and it works
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #7 on: January 23, 2015, 06:08:19 PM »

Alright glad you got it sorted out.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
enrutaco
Jr. Member
**
Offline Offline

Posts: 18



« Reply #8 on: April 19, 2015, 10:46:30 PM »

Hi,

What file did this user edit to change line 91 and add a background to main menu?

Elton
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #9 on: April 19, 2015, 10:54:28 PM »

Hello,

His code doesn't line up to my site but most likely in the s5_flex_menu.css file. Generally I would suggest adding your custom code to the custom.css file for easier access later on though.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
enrutaco
Jr. Member
**
Offline Offline

Posts: 18



« Reply #10 on: April 27, 2015, 01:49:23 PM »

How can I add an image as background for main menu then...? I mean, the right way using your site.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #11 on: April 27, 2015, 06:14:11 PM »

Hello,

The best way would be to add it to the entire header div.

Code:
#s5_header_wrap {background: url(images/background_homepage.jpg) no-repeat center center fixed;}

The menu bar is part of 2 elements so a background wouldn't look proper without custom programming it into a single <div> first in the index and applying the background to that <div>. That sort of change wouldn't be the easiest to accomplish without some PHP experience though.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.