Forum Support

Shape 5
November 29, 2021, 05:15:30 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] 2
  Print  
Author Topic: Site Header & Menu Colour  (Read 1820 times)
StevenM
Jr. Member
**
Offline Offline

Posts: 35



« on: May 23, 2014, 12:35:59 PM »

Hi guys,

I was wondering if anyone could help me with a quick question. I have downloaded the PSD file that is included with Maxed Mag but I was wondering if it is possible to create a website header and have it the full width of the website? Would making a site header in the PSD file allow for this to happen?

Also is it possible to change the colour of my menu background to something more tailored to my site?

Thanks
« Last Edit: May 23, 2014, 12:37:34 PM by fifeflyers » Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: May 23, 2014, 07:04:12 PM »

Hello,

1) A full page header wouldn't be possible without custom programming as the elements are tied within the body in the index

2) You can change the menu colors or gradients here:

Template.CSS - Line 590


#s5_menu_wrap, #s5_bottom_row3_wrap {
    background: url("../images/Shape5_MaxedMag_static.png") repeat scroll 0 0%, -moz-linear-gradient(center top , #676767 0%, #000000 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.5) inset;
    margin: 30px 12px 0;
    min-height: 63px;
}

-Mike
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
StevenM
Jr. Member
**
Offline Offline

Posts: 35



« Reply #2 on: May 25, 2014, 01:32:31 PM »

Thanks Mike, the PSD file that is provided with the download, can I alter this to make the MaxedMag logo more suited for my site? Can I ask, how would I go about changing the background colour of the following modules and buttons?

- S5 tab show
- S5 vertical accordian
« Last Edit: May 25, 2014, 02:00:10 PM by fifeflyers » Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: May 26, 2014, 11:19:30 PM »

Hello,

1) You can alter the .psd file to anything you like and upload your new version to the site. There are no limitations on this.

2) You would need to use Firebug and just hover over the areas where you want to change the colors. You will see the CSS used for the backgrounds. This is a very useful tool for developing and I highly suggest getting familiar with it. We made a small tutorial here to help you with that:

http://www.youtube.com/watch?v=4kmZ9uQcA_c

-Mike
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
StevenM
Jr. Member
**
Offline Offline

Posts: 35



« Reply #4 on: June 19, 2014, 02:36:19 PM »

Back again,

Just wondering how could I go about increasing the size of my site logo? I have changed it from the initial template site logo and put my own one in but I really need to increase the height (not by much) and the width (this is something I need to increase more significantly.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 on: June 21, 2014, 11:04:15 PM »

Hello,

You can adjust this here:

Template.CSS - Line 513


#s5_logo {
    background: url("../images/s5_logo.png") no-repeat scroll left top rgba(0, 0, 0, 0);
    cursor: pointer;
    float: left;
    height: 67px;
    margin-bottom: 6px;
    margin-left: 18px;
    margin-top: 25px;
    width: 265px;
}

-Mike
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
StevenM
Jr. Member
**
Offline Offline

Posts: 35



« Reply #6 on: August 05, 2014, 01:34:07 PM »

Hey guys,

I have not had a chance to work on this for a while and have some time tonight.I have tried replacing the logo for my website but there is nothing showing up after having updated template CSS and logo image

http://www.fifeflyersihc.co.uk/

Can anyone advise me how to get round this issue?>
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #7 on: August 05, 2014, 06:18:27 PM »

Hello,

It looks like an issue with your logo itself and the way it was saved. Your logo is quite small but you have an extremely large transparent background that you can't see.

http://www.fifeflyersihc.co.uk/templates/maxedmag/images/s5_logo.png

Try using the logo file I have attached. It gets rid of all the transparent space.

Regards,
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
StevenM
Jr. Member
**
Offline Offline

Posts: 35



« Reply #8 on: August 06, 2014, 07:22:24 AM »

Hello,

It looks like an issue with your logo itself and the way it was saved. Your logo is quite small but you have an extremely large transparent background that you can't see.

http://www.fifeflyersihc.co.uk/templates/maxedmag/images/s5_logo.png

Try using the logo file I have attached. It gets rid of all the transparent space.

Regards,

That's it, can I ask, is it possible to have my logo fill the whole top white space? So there is no white border in that area?
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #9 on: August 07, 2014, 09:18:37 PM »

Hello,

You would need to upload a larger width logo to cover the width of the body. Forcing the width would distort the image itself by stretching it. You can adjust the logo settings below:

Code:
Template.CSS - Line 506

#s5_logo {
    background: url("../images/s5_logo.png") no-repeat scroll left top rgba(0, 0, 0, 0);
    cursor: pointer;
    float: left;
    height: 160px;
    margin-bottom: 6px;
    margin-left: 18px;
    margin-top: 25px;
    width: 850px;
}

Regards,
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
StevenM
Jr. Member
**
Offline Offline

Posts: 35



« Reply #10 on: August 12, 2014, 09:11:12 AM »

Thanks, I have noticed though that when I make my logo the full width then my Facebook and Twitter logos move down below the actual website logo and do not stay in their original position, is it possible to have the social media links in their original position so they are placed on top of my logo?
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #11 on: August 13, 2014, 09:49:04 PM »

Hello,

You might be able to do this by adding an absolute position a large right margin.

Code:
Template.CSS - Line 549

#s5_headerright {

    margin-left: 875px;
    margin-right: 8px;
    margin-top: 6px;
    position: absolute;}

Regards,
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
StevenM
Jr. Member
**
Offline Offline

Posts: 35



« Reply #12 on: August 16, 2014, 02:06:54 PM »

Hello,

You might be able to do this by adding an absolute position a large right margin.

Code:
Template.CSS - Line 549

#s5_headerright {

    margin-left: 875px;
    margin-right: 8px;
    margin-top: 6px;
    position: absolute;}

Regards,

This put the links on the left hand side, how can I move them to the right?

I have also noticed that my new background seems to repeat and it doesn't show the image I wanted it to on the right hand side of the main page. Is there a way to stop the repeat and have a fixed size so I can specify how big to have it so I can see the images I want on my background?
« Last Edit: August 16, 2014, 03:26:12 PM by fifeflyers » Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #13 on: August 17, 2014, 09:00:12 PM »

Hello,

Your site has login credentials now but you can increase the left margin to move the icons over. In terms of the background you can specify a no-repeat on the background image itself and this will stop it from repeating. Anything much beyond this would be considered custom programming as the Template wasn't designed for this type of layout natively and would require 3rd party assistance to add the necessary coding for that layout.

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
StevenM
Jr. Member
**
Offline Offline

Posts: 35



« Reply #14 on: August 18, 2014, 08:22:22 AM »

Hello,

Your site has login credentials now but you can increase the left margin to move the icons over. In terms of the background you can specify a no-repeat on the background image itself and this will stop it from repeating. Anything much beyond this would be considered custom programming as the Template wasn't designed for this type of layout natively and would require 3rd party assistance to add the necessary coding for that layout.


Would it be this one I need to change for the no repeat background? I have lifted the restrictions on the website again

Code:
body  {
color:#191919;
background:#f7f7f7 url(../images/background.jpg) repeat;
font-size:0.8em;
line-height:150%;}

Would I change it to no-repeat?
Logged
Pages: [1] 2
  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.