BulletProof Header Image

[dweber]

Just created a new header image for my blog. When window resizes, header image does not resize. Background colour shows on edges.

http://www.realestatekw.ca/blog

Any ideas on how to make the header image dynamically resize when window changes size?

Thanks in advance,

Dave

[garvinhicking]

Hi!

You can only do this by repeating an image. There's no real (well working) way to make an image dynamically rescale -you could only use 100% width and height in CSS, but then you'd have a skewed image because theimage would not be proportionally rescaled by your browser.

There might be ways to utilize javascript to proportionally resize theimage. But IMHO that's too complex,would not work on all browsers, and has an impact on performance.

Short answer: You can't really do that, browsers offer no good way to do that in CSS/HTML.

Regards,
Garvin

[dweber]

Is it possible to set the width of the blog to remain fixed? (ie. 1000 pixels wide so it does not resize in browser windows)

Thanks in advance,

Dave

[garvinhicking]

Hi!

Sure, you can create fixed width layouts by editing the style.css file. The template you're using was meant to be created for fluid layouts, so I'm not really sure if it can be easily modified. I'm sure, YellowLED, Don or others might catch up on this thread to answer your question more professionally...

Regards,
Garvin

[d_cee]

Hi

try using the bulletproof purple colourset as a basis for your blog/site. It's already fixed width and so should be easier for you to edit and configure as you want it. Your header image should be 944 x 133 px

HTH

Dave

[dweber]

Thanks, I will work at using the purple colourset as the bast and modify from there.

Thanks,

Dave

[dweber]

I have modified the yellow template and all is working well - Thanks for your help. Have a couple of other customization questions;

1. If you look at the nav bar, it has a white border on the left side but not the white, I tried addind a 5px border to the right, but will not work http://www.realestatekw.ca/blog - any suggestions on how to add it?

2. Is there any way to have a line separating the nav links and if so how would I go about adding the line to separate the links?

3. Which file do I edit the information in the template footer (ie. Template By...)

Thanks in advance!

Dave

[Don Chambers]

I have modified the yellow template and all is working well - Thanks for your help. Have a couple of other customization questions;

1. If you look at the nav bar, it has a white border on the left side but not the white, I tried addind a 5px border to the right, but will not work http://www.realestatekw.ca/blog - any suggestions on how to add it?

Add width to #sitenav - I have not indented it so you see what I am adding vs. what was already present:

Code: Select all

#sitenav {
    background-color: #8AB648;
    border-top: 0px solid #dfdfdf;
    border-bottom: 0px solid #dfdfdf;
    border-right: 5px solid white;
    margin: 0;
    padding: 0;
width: 934px;
 }

2. Is there any way to have a line separating the nav links and if so how would I go about adding the line to separate the links?

Try left and right borders on the anchor, change margin to 0, and match padding on hover and current page like this:

Code: Select all

#sitenav ul a{
    border-bottom: 0px solid #efefef;
    margin: 0 2px 0 0;
    padding: 6px 10px 6px 10px;
    float: left;
    overflow: hidden;
border-left: 1px solid #9BCE4E;
border-right: 1px solid #538706;
margin: 0;
}

li.navlink_first a{
border-left: 0!important;
}

#sitenav ul a:hover,
#sitenav .currentpage a {
    border-bottom: 0px solid #8AB648;
    padding: 6px 10px 3px 10px;
    background-color: #455455;
padding: 6px 10px 6px 10px;
}

3. Which file do I edit the information in the template footer (ie. Template By...)

This question always makes me uncomfortable. I trust you have no intention of modifying or deleting Reinhard's attribution text and link (ie, Template by R.Linnemann) or the bulletproof link. A condition of use is that both of these items remain. If, however, you wish to supplement that information with something like "additional modifications by dwebber", that is understandable. The file is index.tpl.

[dweber]

Thank you very much Don, ecerything was exactly what I was looking for. In answer to question number 3, did'nt want to change anything, just add a disclaimer to the site.

Regards,

Dave

[Don Chambers]

Thank you very much Don, ecerything was exactly what I was looking for. In answer to question number 3, did'nt want to change anything, just add a disclaimer to the site.

Regards,

Dave

Happy to help. You can use the bulletproof footer text for a site disclaimer or copyright message, which is exactly what it was designed for.... I am doing so on my own site using a not-yet-released bulletproof based template... just click the link in my signature below to see.