Forum Index >  glFusion >  glFusion Add-on, Plugin Support New Topic Post Reply
 Custom Top/Header Graphic
   |  Printable Version
By: Veloxi (offline)  Dec 15 2008 14:03 pm (Read 1917 times)  
Veloxi

Hey, how are ya? I'm writing with a theme-related question. Right now the site I'm working to create, using glFusion, is using the default Nouveau theme, and my question is regarding the blue header bar section at the top where the logo and search box reside.

Is there a way to change that entire area to be a custom graphic rather than just a gradient color? That way the site's logo takes up the entire top portion of the site?

Thanks in advance for any help y'all can provide. Smile

Forum Active Member
Active Member

Group Comfort
Level:
: +1

Registered: 11/20/08
Posts: 137
Location: Los Angeles, CA

Profile Email Website  
  Quote
By: Geiss (offline)  Dec 15 2008 14:45 pm  
Geiss

The easiest way to replace the header background image is to create your new .png format image and name it header-bg.png and overwrite the one in the public_html/layout/nouveau/images/ directory.

The width doesn't really matter, but it should be 100px high for default use with the Nouveau theme. If you are creating a fluid width site, I'd make it fairly wide, say 1600px. You can use header-bg-afternoon.jpg in the same images directory as an example. If it is a fixed width site, make sure it is as wide as your #gl_container-fixed div.

I would recommend not including the actual logo itself as part of the header-bg image, but make that a separate .png image with transparency, and then upload that through the Command & Control >> Logo interface. This way, the actual text in your logo will be clickable as a link to your homepage.

Thx!

Eric



Forum Active Member
Active Member

Group Comfort
Level:
: +58

Registered: 02/15/07
Posts: 2097
Location: Boise, Idaho

Profile Email Website  
  Quote
By: Veloxi (offline)  Dec 15 2008 14:55 pm  
Veloxi

K, it's a fluid site, so I should just make it 100px high and like 1600px wide?

Or, upload a transparent PNG then upload the logo through the admin? Would that take up the entire tip? They want a graphical image taking up the entire top section with no text.

That make any sense?

Forum Active Member
Active Member

Group Comfort
Level:
: +1

Registered: 11/20/08
Posts: 137
Location: Los Angeles, CA

Profile Email Website  
  Quote
By: Geiss (offline)  Dec 15 2008 15:29 pm  
Geiss

K, it's a fluid site, so I should just make it 100px high and like 1600px wide?



Yep. Big Grin

Or, upload a transparent PNG then upload the logo through the admin? Would that take up the entire tip? They want a graphical image taking up the entire top section with no text.



Reverse it. Copy your header.bg-png image file over the existing one, then upload the transparent png part through the logo interface.

If they don't want a clickable link in the header at all, then just copy public_html/layout/nouveau/header.thtml into public_html/layout/nouveau/custom/ and then open it and remove the {logo_block} line, like this:

PHP Formatted Code
                                        </div> <!-- end of header-flag-n-search  -->
                </div>



Thx!

Eric



Forum Active Member
Active Member

Group Comfort
Level:
: +58

Registered: 02/15/07
Posts: 2097
Location: Boise, Idaho

Profile Email Website  
  Quote
By: Veloxi (offline)  Dec 15 2008 15:37 pm  
Veloxi

Oh, I see, so upload a 100x1600 graphic as header-bg.png, then upload a transparent PNG through the interface. Should the transparrent PNG be of the same size?

Forum Active Member
Active Member

Group Comfort
Level:
: +1

Registered: 11/20/08
Posts: 137
Location: Los Angeles, CA

Profile Email Website  
  Quote
By: Veloxi (offline)  Dec 15 2008 15:48 pm  
Veloxi

BTW, you guys rock for always being so helpful. Thank you. Smile

Forum Active Member
Active Member

Group Comfort
Level:
: +1

Registered: 11/20/08
Posts: 137
Location: Los Angeles, CA

Profile Email Website  
  Quote
By: Geiss (offline)  Dec 15 2008 16:08 pm  
Geiss

Should the transparrent PNG be of the same size?



I shouldn't matter, since it is transparent. It will just stretch it I believe, but to be safe, you could make it 100px high by 500px wide (like it recommends in the logo upload interface).

BTW, you guys rock for always being so helpful.



It's our pleasure! If you have a moment, we'd love it if you could rate us and add some positive feedback on http://beta.opensourcecms.com/scripts/d ... e=glFusion.

Thx!

Eric


Forum Active Member
Active Member

Group Comfort
Level:
: +58

Registered: 02/15/07
Posts: 2097
Location: Boise, Idaho

Profile Email Website  
  Quote
By: Veloxi (offline)  Dec 22 2008 21:31 pm  
Veloxi

Hey, it worked! Thanks so much for all the help!!! Smile

Forum Active Member
Active Member

Group Comfort
Level:
: +1

Registered: 11/20/08
Posts: 137
Location: Los Angeles, CA

Profile Email Website  
  Quote
By: Veloxi (offline)  Dec 26 2008 02:27 am  
Veloxi

Hey, question, I noticed that the upper edges of the header banner are still curved. Any way I can make them angular/squarish? Thanks!

Forum Active Member
Active Member

Group Comfort
Level:
: +1

Registered: 11/20/08
Posts: 137
Location: Los Angeles, CA

Profile Email Website  
  Quote
By: Geiss (offline)  Dec 26 2008 10:48 am  
Geiss

You can remove the rounded corners two different ways:

1- Copy public_html/layout/nouveau/header.thtml to public_html/layout/nouveau/custom/header.thtml, and then open it and remove the two divs that set the curved corners. Remove the code snippets below:

PHP Formatted Code

            <div class="top-r-corner">
                <div class="top-l-corner">

...

                </div>
            </div>
 



2- In public_html/layout/nouveau/style.css, remove the images from .top-r-corner and .top-l-corner:

PHP Formatted Code

.top-r-corner {
background:transparent;
height:100px;
}

.top-l-corner {
background:transparent;
height:100px;
}
 



Thx!

Eric


Forum Active Member
Active Member

Group Comfort
Level:
: +58

Registered: 02/15/07
Posts: 2097
Location: Boise, Idaho

Profile Email Website  
  Quote
By: Veloxi (offline)  Dec 26 2008 12:19 pm  
Veloxi

I tried the first one and it worked! Thanks! You guys have been just so amazingly helpful, I really appreciate it.

Forum Active Member
Active Member

Group Comfort
Level:
: +1

Registered: 11/20/08
Posts: 137
Location: Los Angeles, CA

Profile Email Website  
  Quote
New Topic Post Reply


 All times are CDT. The time is now 02:04 am.
Normal Topic Normal Topic
Locked Topic Locked Topic
Sticky Topic Sticky Topic
New Post New Post
Sticky Topic w/ New Post Sticky Topic w/ New Post
Locked Topic w/ New Post Locked Topic w/ New Post
View Anonymous Posts 
Able to Post 
HTML Allowed 
Censored Content