BlogHarbor Home Page
FAQFAQ  SearchSearch  MemberlistMemberlist  UsergroupsUsergroups  UsergroupsRSS   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
Banner questions
 
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> Beginner's Lounge
View previous topic :: View next topic  
Author Message
incognit0
Guest





PostPosted: Sun Feb 13, 2005 3:39 pm    Post subject: Banner questions Reply with quote

Hi John,

Thanks for all your help thus far.
My questions of the day are...
Laughing
I have a blue strip above my banner, that appears to be part of the original template, how do I remove it? Also, I would ideally like the banner to appear in the center, instead of it being skewed off to the left as it currently is. Any ideas on that one?

Thanks m8,
incognit0

http://dissidentvox.blogware.com/blog
Back to top
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Mon Feb 14, 2005 1:06 am    Post subject: Re: Banner questions Reply with quote

Changing the top blue border on your blog is something that would be done by CSS. You've modified your CSS before, so you should be able to add this to your Custom CSS:

Code:
table.columns td.header {
    background-color: transparent;
    padding: 6px 0 0 0;
    border-color: #7f99cc;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
}


which will override the following part of the standard style for that color scheme:

Code:
table.columns td.header {
    background-color: transparent;
    padding: 6px 0 0 0;
    border-color: #7f99cc;
    border-style: solid;
    border-width: 10px 1px 1px 1px;
}


You can see we're modifying the table cells of the table with a class name of columns... The change will modify the top border (look for the border-width line) from 10 pixels to 1... (The 4 numbers on the border-width line are the top-right-bottom-left widths, it's clockwise starting from the top)

Take a peek at your HTML source, right at the top of the page you will see this:

Code:
<table border="0" cellpadding="0" cellspacing="0" class="columns" width="100%">


<tr>
<td class="header" align="center" colspan="3">


and that's the surrounding table which holds another table (the blogHeader table) which contains the 3 columns - left, center and right - of your header.

So here's another trick we can do with CSS if you want to center your banner image in the top header. First, remove the Custom Blog Name component which currently holds your banner image from your current Layout. It's currently in your Left Column, drag it to Inactive. We won't need it anymore.

Now we're going to modify the same CSS class as above, but set the background image as well:

Code:
table.columns td.header {
    background: url('http://dissidentvox.blogware.com/Banners/BANNER.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-color: transparent;
    padding: 6px 0 0 0;
    border-color: #7f99cc;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
}

Use this instead of the code above, and your logo will actually appear as the background image to the top header. This change alone won't do it, since the table containing the header elements is no longer tall enough to keep your banner displayed properly. Your banner is 243 pixels high, so add one more thing to your Custom CSS:

Code:
table.blogHeader {
    height: 243px;
}


Now you're set. Your logo is centered in the page, and the cool thing about doing it this way is that you can add some text or links in custom components to your Layout and they will 'float above' your logo...

Try it, and let us know how it turns out.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Rabbit



Joined: 03 Feb 2005
Posts: 3

PostPosted: Fri Mar 04, 2005 9:34 pm    Post subject: Reply with quote

I have a lot of questions about banners.

From what you posted to incognito, and from what I saw on his blog, as I understand it, I can place my banner all by itself in a header row, then put some nav links or whatever in a separate header row, either above or below the row my banner is in. That's great; I think I'll try that.

Up to just a few weeks ago, I was working on a 14" monitor at a resolution of 600 x 800. I designed my blog banner so it looked good according to those specs. I couldn't make the banner too wide, or else it bumped "Home" and "Subscribe" off the page to the right and the alignment looked bad.

But now I'm working on 17 wide flatscreen monitor and the old banner looks pokey -- not wide enough, so I want to make a new one about 1000 pixels wide to fill the entire width of the blog page. As I said, I'd like to place it in a row by itself above or below some nav links. But what I"m really wondering is --- What will a 1000 pixel wide banner look like on a narrower monitors.


For my new 1000 pixel wide banner design, I'm thinking of centering the blog name in a space about 600 pixels wide, between two 200 pixels areas on each side just filled with some kind of pretty, but empty, filler. My thinking is, that if I centre the banner in the header row, on a narrow screen the only the empty filler on the sides will cut off.

TIA for any help you can give me on how to sort this out. My goal is to have everything look nicely aligned on both narrower and wider screens --- if that is possible.
Back to top
View user's profile Send private message
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Sat Mar 05, 2005 9:04 pm    Post subject: Reply with quote

Making web sites look great when the monitor size can vary greatly from user to user has been a complex problem for many years even for the most advanced web design professionals.

One approach you may want to take, is to fix the width of your blog's main table, and center that in the browser window. This is the approach we use for our BlogHarbor pages. If you like it, you can learn how to implement it on your own blog pages by reading this thread from our forums:
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Rabbit



Joined: 03 Feb 2005
Posts: 3

PostPosted: Sun Mar 06, 2005 5:36 pm    Post subject: Reply with quote

John

That sounds like a great solution ... whenever I design an HTML page in Dreamweaver, that's exactly what I do -- set it at a fixed width and then centre it. I wouldn't even know where to start and how to do that in CSS, though, so thanks very much for pointing me to the thread.
Back to top
View user's profile Send private message
dougfoster



Joined: 04 Nov 2005
Posts: 2

PostPosted: Fri Nov 04, 2005 9:34 pm    Post subject: Re: Banner questions Reply with quote

john wrote:


So here's another trick we can do with CSS if you want to center your banner image in the top header. First, remove the Custom Blog Name component which currently holds your banner image from your current Layout. It's currently in your Left Column, drag it to Inactive. We won't need it anymore.

Now we're going to modify the same CSS class as above, but set the background image as well:

Code:
table.columns td.header {
    background: url('http://dissidentvox.blogware.com/Banners/BANNER.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-color: transparent;
    padding: 6px 0 0 0;
    border-color: #7f99cc;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
}



Okay, I think I tried that, but the banner doesn't show up. I can get the banner to work using the custom component method, so I know the graphic and the path are valid, but the background: url trick doesn't seem to work.

Ideally, I want two backgrounds in my header. One on the left, with a green fill to the right of it, and then one square logo on the right edge. Since I'm asking, I figured I would go for it all. My thought was that I could add a background to the blogHeaderLeft, and another to blogHeaderRight, but I'm not sure if that would work.

Also, I tried modifying the table.blogHeader a:hover { color: # ... but that didn't seem to change the hover of the subscribe and home links either. I'm wondering if maybe I'm not doing the custom CSS stuff right at all. I'm a newbie when it comes to CSS. I can do the simple stuff, but this is the most complex stuff I've done.

Thanks,

Doug
nela.blogharbor.com
Back to top
View user's profile Send private message
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Sat Nov 05, 2005 2:52 am    Post subject: Re: Banner questions Reply with quote

First, I would suggest you read this thread to learn why it might be better to modify your CSS by only entering the classes you need to override in your Custom CSS area...

Second, keep in mind that adding background images to your header is useful only if you don't need any of those images to perform a function, like be clickable. If you want these images to function as links to other web pages, then you should create custom components for them or modify your base template if using custom components does not enable you to meet your design objective.

Okay, I think I tried that, but the banner doesn't show up. I can get the banner to work using the custom component method, so I know the graphic and the path are valid, but the background: url trick doesn't seem to work.

Looks like you've defined your table.columns td.header classes twice in your Custom CSS. The second time will override the first. Can you verify which one you want to use and remove the second instance? That would make it easier to debug this. I think this has something to do with your second instance using a white background color, but it's tough to see...

Also, I tried modifying the table.blogHeader a:hover { color: # ... but that didn't seem to change the hover of the subscribe and home links either.

Again, your Custom CSS has two instances of table.blogHeader a:hover. The first one makes the hover color black. The second one white. The last one always gets the final say. Remove the one you don't want...

Hope this helps. Using the technique explained here can make customing your styles - and debugging them - much easier.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
dougfoster



Joined: 04 Nov 2005
Posts: 2

PostPosted: Sat Nov 05, 2005 6:33 am    Post subject: Banners - and poor CSS editing Reply with quote

Okay, so I was cutting and pasting the whole CSS sheet into my custom area, and actually did it twice. So now I'm doing it the right way, but the image still does not show up properly. I've pulled out the custom component I was using so that it is obvious.

I would prefer for the graphic to be a true background, so I can float the image on the top of it. Actually, if you look at the image:

You will see that it is two images that I put together. Ideally, the left image on the green background is in the blogHeaderLeft, and then the blogHeaderCenter is just the green background color, and then blogHeaderRight is the white background NELA logo. That way, as the site is sized or streched, the text stays left, the logo is fully right, and the green bar just grows. The header text could float on top either left or center.

Since I can't get this to work the suggested way, I didn't want to just go mucking about changing multiple classes.

Also, is there any way to do this in a "staging site", so that I can test things without doing it on a live site. This site isn't "live" yet, but that is the process I am used to for other HTML development.

Thanks for the quick response.

Doug
Back to top
View user's profile Send private message
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Sat Nov 05, 2005 7:26 am    Post subject: Re: Banners - and poor CSS editing Reply with quote

I just changed your code to the following:

Code:
table.columns td.header {
    background:url('http://nela.blogharbor.com/images/nelabanner680x100.gif');
    background-position: top center;
    background-repeat: no-repeat;
    background-color: transparent;
    padding: 0px 0 0 0;
    border-color: #7f99cc;
    border-style: solid;
    border-width: 0px 0px 0px 0px;
}


and added this as well to make sure the height of the header gets fixed at 100 pixels:

Code:
table.blogHeader {
    height: 100px;
}


and it looks as I would have expected it to...

FYI, under these color schemes the blog is fixed at 750 pixels and centered on the page. All other schemes are "full width" schemes, they will expand to fit the width of the browser window.

Hope this helps get you started.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Connected



Joined: 31 Mar 2005
Posts: 30

PostPosted: Sun Nov 27, 2005 12:27 pm    Post subject: Reply with quote

John

Thanks for all the help. I'm halfway there - I've managed to add the image but I need help with a few things.

http://www.connectedinternet.co.uk/blog

The Google banner is causing some problems but I think this won't look so bad if I can get the background image to stretch all the way across - how do I make the image stretch all the way across my header?

My current CSS Reads:
table.columns td.header {
margin: 0;
padding: 0 0 7px 0;
background-color: #1e1e1e;
background: url('http://www.connectedinternet.co.uk/nokia.jpg');
background-position: left;
background-repeat: no-repeat;
}

Thanks in advance
Back to top
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Sun Nov 27, 2005 12:43 pm    Post subject: Reply with quote

You'll either need a wider image, a narrower blog, or use the background-repeat attribute of CSS to tile your image. repeat-y makes the image repeat on the y axis (vertically) and repeat-x makes the image repeat on the horizontal axis. The example code above uses no-repeat which tells the image not to repeat...
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Connected



Joined: 31 Mar 2005
Posts: 30

PostPosted: Sun Nov 27, 2005 1:39 pm    Post subject: Reply with quote

thanks John I had a play around with the image and changed the background colour to match the image on bigger screens, and I think it looks quite cool now www.connectedinternet.co.uk
_________________
<a href="http://www.connectedinternet.co.uk/blog"><img src="http://feeds.feedburner.com/Connected-InternetNewsAndDiscussion.gif" height="67" width="200" style="border:0" alt="Latest on Connected Internet:"/></a>
Back to top
View user's profile Send private message Send e-mail Visit poster's website
billjw



Joined: 04 Dec 2005
Posts: 13
Location: Perth, Australia

PostPosted: Thu Dec 08, 2005 8:35 pm    Post subject: Losing the original Title Reply with quote

Hi John et al

I think this is the right thread.
I have a new banner on my blog now (http://resultsdriven.blogharbor.com) but I also need to lose the standard title. You may have stated this already but I am not familiar with code.

Can you please let me know how I can remove the "Results Driven" title below the banner?

Also, if I do this will it automatically bring up the blue border below it to be under the banner with the "subscribe" & "Home" remaining?

I hope that is clear enough.

Thanks

Bill
_________________
Bill James-Wallace
Coach, Business Initiatives & Strategy Development
VOIP Phone: 61 8 6262 3362
Mobile: 0403 456 141
Office Email: bill@resultdrivensolutions.com.au
Mobile Email: w.james-wallace@three.com.au
Fax: 08 9249 8182
Back to top
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Thu Dec 08, 2005 10:57 pm    Post subject: Re: Losing the original Title Reply with quote

A few things first:

  • Make sure you have extensions on any files you upload to your File Manager. You created a file called Header and uploaded to use as the logo background image. Instead of naming the file Header, it should have been named Header.bmp since it is a BMP file.
  • Use GIF or JPG or PNG files as images on web pages, not BMP.
I have a new banner on my blog now (http://resultsdriven.blogharbor.com) but I also need to lose the standard title.

You can remove a component by dragging it out of your layout. Learn more about changing your layout.

Lastly, you've implemented this technique for adding a background image to our header row. Make sure that when you add this code which we used in our example to your Custom CSS:

Code:
table.blogHeader {
    height: 243px;
}


you use the height of your own image... Your image was 182 pixels tall, so use that value instead...
Back to top
View user's profile Send private message Send e-mail Visit poster's website
billjw



Joined: 04 Dec 2005
Posts: 13
Location: Perth, Australia

PostPosted: Fri Dec 09, 2005 1:00 am    Post subject: Beautiful Reply with quote

Thanks John

I am enjoying this more and more.

Regards

Bill
_________________
Bill James-Wallace
Coach, Business Initiatives & Strategy Development
VOIP Phone: 61 8 6262 3362
Mobile: 0403 456 141
Office Email: bill@resultdrivensolutions.com.au
Mobile Email: w.james-wallace@three.com.au
Fax: 08 9249 8182
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Search all BlogHarbor support resources.
View previous topic :: View next topic  
Display posts from previous:   
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> Beginner's Lounge All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum