Changing template and menu background in one step?

I would like to change the background of my League News site (about which there are many threads) but I would also like to change the background of the principal menu in the same step (if possible) to achieve something that looks like this:

http://www.visionprosportsinstitute.com/usa/index.php

1) Can I create a single image that will accommodate a change to both background and principal menu background or, 2) Must each background have to be treated individually. What is best? And, finally, 3) The semi transparent principal menu background, as shown in the website above, is this something that can be selected from within the League News template or are custom steps involved?

Many thanks.

Hi, I choose first (1) option, less images = quicker page.
In our template we use extra layer image - bg_top.png (from: gk_league_news/images/style.../bg_top.png) but you don't have to, remember that you have remove/or overwrite/ one line from css file "css\style1.css",
from:

Code: Select all

#gkPageTop {
   background-image: url('../images/style1/bg_top.png');
}

to:

Code: Select all

#gkPageTop {background-image: none;}

Thanks but if I remove the original background image that came with the QuickStart package by following the code you have provided. 1. How do I put my own background image in its place? and, 2. What should be the size of the image to match up with the template? Thanks again.

Hi,
on the sample page, which you link provided, there is extra icons menu, but it source is from this code:

Code: Select all

<iframe width="100%" height="54"
src="http://cfd135.cfdynamics.com/usl/new/index.cfm?team=TBFC "
frameborder="0" marginheight="0" marginwidth="0"
scrolling="no"></iframe>

So probably they add it into template php file, as a part of new layout.

2) they use background image 1 806px × 1 055px.

p.s.
Depending on the effect you want to accomplish, use different CSS/CSS3 solutions for background under top menu.

Thank you very much, Pawell:

http://www.visionprosportsinstitute.com ... hp/usl-pro

1. This website shows a thin white banner above the principal menu: is this imagery part of the custom background image art? If not, how does can one achieve this feature within the template to include the team logos that run across the banner with each one having it's own navigation, meaning that when you click on one of the team icons in the top banner, the viewer is directed to source data information. Thus, this area of the page works like a sub-menu or something?

Thank you in advance.

I've read and printed all of the relevant threads on how best to change the main page background of League News but am still having difficulty understanding the steps.

Higher up in this same thread, Pawell suggested that it IS possible to create a background image that accomplishes both a main page background AND top menu background in the same step for a quicker page.

But I think this is beyond the newbie that I am simply because you may have to go through several rounds of experimentation, adjusting your artwork as necessary so that the everything lines up and looks like how you want.

Based on this, I no longer what to do the two step.

Rather, I just want to set/replace my custom background so that it appears on the main page instead of the current that came with the demo package.

Where I am now:

1. I've created my own background image with a file dimension size of 1806 X 1055 pixels which were the suggested settings provided by Pawell as part of the thread to which this reply is posted. (thank you).

2. I've uploaded the file to the server)

My main problem, so it seems, is that I don't know how to edit the css file (css/style1.css) so that the template looks for my new file versus the exisitng one (bg_top.png).

How do I edit the code or treat this situation for to replace my image with the existing background?

Sorry, but I don't understand if you want to edit css files you have to edit them via FTP client or from back-end of Joomla.
To replace images use FTP client, also.

p.s.
You can always request support from us, but you need take in your mind that customization is not regular Template support.

For any "newbies" out there ("like me") that may be following this thread:

I successfully managed to change my League News Tamplate main page background through FTP Client and it was much easier than I thought. I should also mention that the responses connected to this thread were much less helpful than the information that I received from SiteGround Support:

This is the guidance provided to me from SiteGround (free of charge):

"Currently your template is using the following image:

http://americanfootballfilms.org/templa ... g_main.jpg

for its background. This image is located under:

public_html/templates/gk_league_news/images/style1/bg_main.jpg

You can replace the image via an FTP client:

http://www.siteground.com/tutorials/ftp/ftp_client.htm

using your own image. The image that you will upload must have the same name as the one currently used by your application "bg_main.jpg". "

I would recommend anyone to please follow the step-by-step tutorial provided above. In my case, I installed the FTP Client FireZilla (totally free of charge).

Once I got to the point of being able to view files through my FTP Client with my computer files (on the left) and the template files (on the right) it was just a matter of: 1. Delete the template background image named bg_main.jpg (on the right) and 2. Dragging the replacement file (with the same name) from the left side to the right side (thus, replacing the original file with another file (your own image) but with the same name.

A few seconds later, my page uploaded with the new image right away.

www.americanfootballfilms.org

The only problem is that my image size dimensions are wrong (I was given wrong information) and the image quality is not as strong as I would like.

p.s.
Add background "fixed" position, it could help a little with background image, or use better background color.

I gave you dimentions from our background template image not from space. I suggest to use also CSS3 background-size property.