Serendipity Forums

Posted: **Fri Dec 28, 2007 7:03 am**

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

Posted: **Fri Dec 28, 2007 9:40 am**

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

Posted: **Fri Dec 28, 2007 4:23 pm**

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

Posted: **Fri Dec 28, 2007 5:13 pm**

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

Posted: **Fri Dec 28, 2007 5:24 pm**

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

Posted: **Fri Dec 28, 2007 10:33 pm**

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

Thanks,

Dave

Posted: **Sat Dec 29, 2007 8:16 am**

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

Posted: **Sat Dec 29, 2007 9:06 pm**

dweber wrote: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.

Posted: **Sun Dec 30, 2007 4:00 am**

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

Posted: **Sun Dec 30, 2007 4:11 am**

dweber wrote: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.

Serendipity Forums

BulletProof Header Image

BulletProof Header Image

Re: BulletProof Header Image

Thanks Don!

Re: Thanks Don!