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

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

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

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

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.

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

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?>

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,

: mikenicoll August 05, 2014, 06:18:27 PM

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?

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:

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,

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?

Hello,

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

Template.CSS - Line 549

#s5_headerright {

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

Regards,

: mikenicoll August 13, 2014, 09:49:04 PM

Hello,

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

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?

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.

: mikenicoll August 17, 2014, 09:00:12 PM

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

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

Would I change it to no-repeat?

Hello,

You can add it manually via CSS or if you added the background through the Backgrounds Tab in the Template Manager you can specify the Background Image Repeat Option in the back end directly.

: mikenicoll August 18, 2014, 02:35:03 PM

Hello,

You can add it manually via CSS or if you added the background through the Backgrounds Tab in the Template Manager you can specify the Background Image Repeat Option in the back end directly.

I have made sure that it is set to no repeat but it still seems to repeat the image

Hello,

You can try adding this to the custom.css to override it. You will need a bigger background to center it though so its visible on the sides.

body {
     background-position: center top ! important;
     background-repeat: no-repeat ! important;
}

Shape 5

Joomla Templates => Maxed Mag - Club => : StevenM May 23, 2014, 12:35:59 PM