Garvin-Need Help with Code for Image Banner

[ddegagne]

I want to use an image banner for my blog title. I read that you need to edit index.tpl however, I am not sure what code and where exactly to put it. I think it is in the code below, but where and what?

<div id="serendipity_banner">
<h1><a class="homelink1" href="{$serendipityBaseURL}">{$head_title|@default:$blogTitle}</a></h1>
<h2><a class="homelink2" href="{$serendipityBaseURL}">{$head_subtitle|@default:$blogDescription}</a></h2>
</div>

I have an image banner called "ojbanner" which is sized to replace the entire default banner for the template MT-Rusty. What code would I use and where do I put it?

Thanks http://ordinaryjoe.ca/blog/

Don

[gizmola]

To simply replace the image, you don't need to go into the .tpl files. Instead open up the style.css file for the theme with a text or .css editor. (I use topstyle light personally).

You'll find a style with this name:

Code: Select all

#serendipity_banner {
	font-weight: bold;
	padding-left: 10px;
	background-image : url('YOUR-BANNER-IMAGE-HERE.jpg');
	background-repeat : no-repeat;
	margin-left : 20px;
	margin-top : 10px;	
	padding-top : 60px;
}

As my note indicates, replace the background-image with the image you want to replace the default.

[ddegagne]

Thanks Garvin, I get it but I am not sure what directory to put my banner image into so it can be called by that code. I tried Uploads and in the MT-Rusty directory with no luck.

MT-Rusty doesn't normally have an image in it's banner - does that make a difference?

Your help is, as always, much appreciated.

Don

[Guest]

You can stick it wherever you want, but the best thing to do is to create an img directory in the same directory as the theme you're using.

You do have to provide the path from the webroot to the image. So it might be something like:

background-image : url('/blog/templates/MT-Rusty/img/ojbanner.jpg'background-image');

[nine-times]

You can stick it wherever you want, but the best thing to do is to create an img directory in the same directory as the theme you're using.

You do have to provide the path from the webroot to the image. So it might be something like:

background-image : url('/blog/templates/MT-Rusty/img/ojbanner.jpg'background-image');

Better yet:

Code: Select all

background-image : url('{TEMPLATE_PATH}img/ojbanner.jpg')

Putting the "{TEMPLATE_PATH}" variable in your CSS file will automatically replace it with the path of whatever template is in use, and so it's more portable.

In general, I'd recommend that when you create your own template, you first copy what you're basing it off of. So instead of altering MT-Rusty, you make a copy of MT-Rusty in your templates folder and call it something different. Therefore, you can keep the original MT-Rusty as a reference (should you need it) and you have a lesser risk of overwriting your work if you upgrade to a newer version of Serendipity.

And that's part of the reason I recommend using the "{TEMPLATE_PATH} variable-- you can move your template into another folder without messing up the url.

[TKS]

How does one indent <h1> and <h2> in index.tpl? Can I use standard html tags or do they have to be php ones? Just curious.


Also, I've setup my banner accordingly to this post and can't get a border around it like I had previously...here is my banner entry in style.css:

Code: Select all

/* Banner */

#serendipity_banner {
  border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    margin: auto;
    width: 100%;
    height: 90px;
    background-image: url('{TEMPLATE_PATH}img/bgHeader.jpg');
}

Notice the border tags...for some reason they aren't showing up. I used to have these in .71 setup so that the <h1> and <h2> homelinks were inside of the borders...kind of like a banner with the blog title on top of it. Right now, I'd be satisfied if I could just indent the homelinks about 30 pixels or so.

Help is appreciated!

Just thought of something...when using css one can do the following for margins. Would I be able to adapt this somehow and wrap it around the <div> elements in the index.tpl?:

Code: Select all

<style type="text/css">
  body { margin-left: 10%; margin-right: 10%; }
  h1 { margin-left: -8%;}
  h2,h3,h4,h5,h6 { margin-left: -4%; }
</style>

[ddegagne]

Okay guys, I still can't get it to work. This is the script:

#serendipity_banner {
font-weight: bold;
padding-left: 10px;
background-image : url('{home/tsesye/public_html/blog/template/mt-rusty/image}img/bestbanner2blur.jpg')
background-repeat : no-repeat;
margin-left : 20px;
margin-top : 10px;
padding-top : 60px;
}

I created an image file in mt-rusty and inserted my image (bestbanner2blur.jpg) All I get is the text for h1 and h2 on the body background color. So the banner part of my code is not doing anything.

See http://ordinaryjoe.ca

Any thoughts?

Don

[garvinhicking]

ddegagne, remove the '{' around your url path. And insert your HTTP url path, not your system Url path. Insert exactly the HTTP url you enter to see the image.

like http://blog/templates/mt-rusty/image/bestbanner.jpg - that is the url you'D need to input in the url() brackets.

Regards,
Garvin

[TKS]

Garvin,

You hit 2 birds with one stone on that one. Fixed my problem right up as well.

Also, I found that I could indent by using the following code:

Code: Select all

#serendipity_banner {
  border-left: 1px solid #666666;
    border-right: 1px solid #666666;
    border-bottom:  2px solid #666666;
    margin: auto;
    width: 75%;
    height: 90px;
    background-image: url('http://linuxblog.sytes.net/templates/mt-trendy/img/bgHeader.jpg');
}

a.homelink1,
a.homelink1:hover,
a.homelink1:link,
a.homelink1:visited,
#serendipity_banner h1 {
  
  margin-left: 5px;
 
  color: #cc9933;
  font-size: x-large;
}

a.homelink2,
a.homelink2:hover,
a.homelink2:link,
a.homelink2:visited,
#serendipity_banner h2 {
 
  margin-left: 5px;

  color: #cccccc;
  font-size: small;
  text-transform: none;
  letter-spacing: none;

Notice the two margin settings I set apart from the rest of the code above. That allowed me to give my homelink 1 and 2 some space between the borders of my top banner.

To check out how it looks, http://linuxblog.sytes.net

Garvin, this is a stellar release! Other than some misconceptions in the beginning on my part .8 is fantastic! I'll be hitting the documentation development for this release ASAP!

Derrick aka TKS

[garvinhicking]

TKS, great I helped you. Actually I didn't even notice your questions here!

Also very glad you like our 0.8 release, great to know. We'll need to be doing some PR in the next days, announce S9y 0.8 to the world. If any volunteers want to take part, our official announcement is http://www.s9y.org/63.html

Regards,
Garvin