Center My banner!

[MATTEK]

My forum is Powered by SMF 2.0 RC2 . I can't seem to center my customer banner. Any ideas?

[Jakob Fel]

Put this before the code: <center>
Put this after the code: </center>

If that doesn't work, let me know.

[MATTEK]

Put this before the code: <center>
Put this after the code: </center>

If that doesn't work, let me know.

What code? I've simply inserted a link in the spot that for a banner link. Do I put that around it?

[Jakob Fel]

Here is the code you would need, but you need to put your own link in it.

Code Select Expand

<center><img src='http://example.com/example/img'</center>


[MATTEK]

Ok. So, I put that in and it didn't work.

Here's where I'm putting it.

[MATTEK]

I'm using the default curve theme.

I was going to try and edit the index.css sheet but I can't find the correct spot to enter the code you've given me. Should I do this through my ftp?

[Jakob Fel]

Well, you have the right place to place a link, but to center it, you would need to do it in the index.css. I have a mod for my sites that has headers and footers. The Headers and Footers mod allows HTML codes to be put above the site, or below it. Unfortunately, I never have had experience with basic SMF, because I always use smfforfree.com to make my sites. Sorry I couldn't help more. 

[MATTEK]

If I upload my index.css file and give someone the banner link will they edit the file for me?

[Jakob Fel]

Hmm... I am not so sure that would be a good idea. For one, you could get an exact replica of your site, run by someone else; two, whoever edits it, may ruin it. There are other reasons, but they aren't as critical.

Edit: clarified some of the original message

[rd]

index.css won't give someone an exact replica of the site >.< I think you are a bit misinformed. It's the database and site folders that really matter.

Also, if someone "ruins" it then it can still be easily fixed if you upload an un ruined version. Anyways, just attach your index.css and template.index.php, I am sure someone will do the edits for you. 

[MATTEK]

Thanks. I've attached them in the Help Wanted forum. Hopefully it's done by the time I wake up or I wont be able to upload it for a few days. 

[Jakob Fel]

index.css won't give someone an exact replica of the site >.< I think you are a bit misinformed. It's the database and site folders that really matter.

Also, if someone "ruins" it then it can still be easily fixed if you upload an un ruined version. Anyways, just attach your index.css and template.index.php, I am sure someone will do the edits for you.

I meant they could copy your index. I forgot about backups as well, for I never really use .css pages, because my forum came with all the mods needed for what I am doing.

[MATTEK]

index.css won't give someone an exact replica of the site >.< I think you are a bit misinformed. It's the database and site folders that really matter.

So long as I don't upload an entire folder - just the index.css file I'm good to go?

Unless they screw me by editing it wrong. But that's solved by uploading an unscrewed one, correct?

[kat]

In your theme's index.template, find this line:


   // Define the upper_section toggle in JavaScript.




Immediately before that, add this:

Code Select Expand

<a href="http://www.yourforumURL.com/index.php">
<center><img style="margin-top:6px" border="0" src="/Banner.gif" width="800" height="90" alt="yourforum" title="yourforum" /></a></center>



altering the URL, "yourforum" and "Banner.gif", to suit.


Banner.gif will need to be in the root of your forum.


Clicking the banner will take you to your homepage.

[MATTEK]

In your theme's index.template, find this line:


   // Define the upper_section toggle in JavaScript.




Immediately before that, add this:

Code Select Expand

<a href="http://www.yourforumURL.com/index.php">
<center><img style="margin-top:6px" border="0" src="/Banner.gif" width="800" height="90" alt="yourforum" title="yourforum" /></a></center>



altering the URL, "yourforum" and "Banner.gif", to suit.


Banner.gif will need to be in the root of your forum.


Clicking the banner will take you to your homepage.

Awesome. I'm pretty sure I understand except do I upload 'Banner.gif' to Themes/images or do I upload it to the main directory? You said Root, which I think means main directory, but I'm still a newb and need to make sure. Thank you very much.


Also...can you recommend a good .php editor program?

[kat]

The root of your forum, is where settings.php is.


I use Textpad. I know others swear by notepad++, I think it is.


Programmer's Notepad's damned good, too.


Especially the portable version.

[MATTEK]

The root of your forum, is where settings.php is.


I use Textpad. I know others swear by notepad++, I think it is.


Programmer's Notepad's damned good, too.


Especially the portable version.

Awesome. I'll do this when I get home. Thanks again.

[kat]

No sweat!


I know this is v1.1.11, but the banner will look like the one I have, here:


http://www.tlakoc.org.uk

[MATTEK]

No sweat!


I know this is v1.1.11, but the banner will look like the one I have, here:


http://www.tlakoc.org.uk

Great. I'll ler you know if it works. Also I have a question.

Is there a benefit to using 1.1.11 rather than 2.0 RC3 besides the fact that 2.0 3 is still a release candidate?

[kat]

Heh... Well, it's one of those "Whatever's best for you" things, innit?


v2.x has bugs in it, whereas v1.1.11 is tried and tested.


Actually, I prefer v1.1.11 over v2, anyway.

[MATTEK]

In your theme's index.template, find this line:


   // Define the upper_section toggle in JavaScript.




Immediately before that, add this:

Code Select Expand

<a href="http://www.yourforumURL.com/index.php">
<center><img style="margin-top:6px" border="0" src="/Banner.gif" width="800" height="90" alt="yourforum" title="yourforum" /></a></center>



altering the URL, "yourforum" and "Banner.gif", to suit.


Banner.gif will need to be in the root of your forum.


Clicking the banner will take you to your homepage.

BTW Kat, when you say immediately before...do you mean like touching the // ?

[kat]

No. I mean on the previous line, on it's own.

[MATTEK]

No. I mean on the previous line, on it's own.

Thank you.  Think you could PM me or let me know how to bold all Hyperlinks and links on my entire forum as well? I've made threads, but no one has replied.

[MATTEK]

So I did this and I got and error. Any other ideas?

[kat]

My psychic abilities seem to have deserted me...


What was the error?

[MATTEK]

This is what I put in

Code Select Expand

<a href="http://www.the-ush.com/index.php">
<center><img style="margin-top:6px" border="0" src="/tuhs5700.png" width="800" height="90" alt="http://www.the-ush.com" title="http://www.the-ush.com" /></a></center>

This was the error

Template Parse Error!

There was a problem loading the Themes/default/index.template.php template or language file. Please check the syntax and try again - remember, single quotes (') often have to be escaped with a slash (\). To see more specific error information from PHP, try accessing the file directly.

You may want to try to refresh this page or use the default theme.
syntax error, unexpected '<'

[kat]

In the second line, try substituting just a word for the URL. (Both)


i.e. change "http://www.the-ush.com" to just "the-ush".

[ɔɔɔɔɔɔuɥoɾ]

Do it by editing your index.template.php file like this

Index.Template.PHP (from your current theme)

Code (Find) Select Expand


function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;


Code (Add After) Select Expand


echo '
       <div class="header" align="center">
     <img src="' , $settings['images_url'] , '/banner.gif" alt="" />
   </div>';

Upload your image to your themes image folder and name it banner.gif, or change the filename in the above code.

Disable the logo in the "current theme" area as it will no longer be needed.

[MATTEK]

Do it by editing your index.template.php file like this

Index.Template.PHP (from your current theme)

Code (Find) Select Expand


function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;


Code (Add After) Select Expand


echo '
       <div class="header" align="center">
     <img src="' , $settings['images_url'] , '/banner.gif" alt="" />
   </div>';

Upload your image to your themes image folder and name it banner.gif, or change the filename in the above code.

Disable the logo in the "current theme" area as it will no longer be needed.

Thank you. I'll let you know how it goes when I get home.

[kat]

There're various other ways of doing this, too.


Maybe we'll get the full set, eh?

[MATTEK]

There're various other ways of doing this, too.


Maybe we'll get the full set, eh?

Hopefully. I'll take everything I can get.

[MATTEK]

This worked, but it was above the actual forum and all of my text went huge.

[Antechinus]

Centering the banner is really easy. Just needs one line of css changed. The thing is you also have to get rid of the SMF logo over at the right and re-position the upshrink image for the userinfo/news div. This is easy too.

Guys, forget doing rough hacks with deprecated HTML tags. CSS rocks. Here's what you do.

Index.css:
Find:

Code Select Expand

h1.forumtitle
{
line-height: 45px;
font-size: 1.8em;
font-family: Geneva, verdana, sans-serif;
margin: 0;
padding: 0;
float: left;
}

Replace:

Code Select Expand

h1.forumtitle
{
line-height: 45px;
font-size: 1.8em;
font-family: Geneva, verdana, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}

Find:

Code Select Expand

/* the upshrink image needs some tweaking */
img#upshrink
{
float: right;
margin: 1em;
}
/* ..so does the SMF logo */
img#smflogo
{
margin-left: 1em;
}

Replace:

Code Select Expand

/* the upshrink image needs some tweaking */
img#upshrink
{
float: right;
margin: -2.5em 1em 0 0;
z-index: 5;
}
/* ..so does the SMF logo */
img#smflogo
{
display: none;
}

That's it. All done. SMF logo gone. Upshrink image where it should be. Logo perfectly centered. Works in all browsers. Crack a beer and celebrate.

[ɔɔɔɔɔɔuɥoɾ]

That would be the correct way to center the existing banner
I like to add my own banner though - That should have not made your text huge, common banners are above the forum, that's how I have mine and it looks great.

[MATTEK]

That worked perfect dude thank you so much!

Only thing I notice is I can't collapse the User interface at the top. Not a biggy but if you know a fix I'd appreciate it.

[Antechinus]

That would be the correct way to center the existing banner
I like to add my own banner though - That should have not made your text huge, common banners are above the forum, that's how I have mine and it looks great.

2.0 will do that if you put the code in the wrong place. It can't go straight after the body tag in 2.0.

Anyway, in my experience common banners are part of the forum header. Most people don't run separate banners above the forum.

[Antechinus]

That worked perfect dude thank you so much!

Only thing I notice is I can't collapse the User interface at the top. Not a biggy but if you know a fix I'd appreciate it.

No idea why that's happening since it still works for me. A CSS change shouldn't affect the javascript for the header. Are you sure you reverted all the other changes you were attempting?

[MATTEK]

That worked perfect dude thank you so much!

Only thing I notice is I can't collapse the User interface at the top. Not a biggy but if you know a fix I'd appreciate it.

No idea why that's happening since it still works for me. A CSS change shouldn't affect the javascript for the header. Are you sure you reverted all the other changes you were attempting?

The only thing I added was "font-weight:bold;" to bold all my links. However, that was done after I centered the banner and the issue was occurring before I made that change. I can live without it though.

I thought it would have something to do with the SMF logo on the top right we removed.

[Antechinus]

Took a look at your site. You've made a mistake in the css for the header area:

Code Select Expand

#header div.frame^
{
background: url(../images/theme/main_block.png) no-repeat 100% -240px;
display: block;
padding: 5px 20px 0 0;
}


That ^ shouldn't be there. It's causing the browser to drop the code after it. That's why you have a square corner at top right.

You also have an HTML error in your news:

Code Select Expand

<p><div style="text-align: left;"><strong>Dissecting Second Coming. Week 3:<br />Ben and Gabe double team some comics.</strong><br /><a href="http://www.the-ush.com/index.php?topic=1340.0" class="bbc_link new_win" target="_blank">Don't make me kill you. Click.</a></div></p>


Can't put a div inside a paragraph. You could use  a span instead. (I agree that the default right aligned news looks like crap)

[MATTEK]

Took a look at your site. You've made a mistake in the css for the header area:

Code Select Expand

#header div.frame^
{
background: url(../images/theme/main_block.png) no-repeat 100% -240px;
display: block;
padding: 5px 20px 0 0;
}


That ^ shouldn't be there. It's causing the browser to drop the code after it. That's why you have a square corner at top right.

You also have an HTML error in your news:

Code Select Expand

<p><div style="text-align: left;"><strong>Dissecting Second Coming. Week 3:<br />Ben and Gabe double team some comics.</strong><br /><a href="http://www.the-ush.com/index.php?topic=1340.0" class="bbc_link new_win" target="_blank">Don't make me kill you. Click.</a></div></p>


Can't put a div inside a paragraph. You could use  a span instead. (I agree that the default right aligned news looks like crap)

Ok. Bare with me here as I'm still new

Code Select Expand

#header div.frame^
{
   background: url(../images/theme/main_block.png) no-repeat 100% -240px;
   display: block;
   padding: 5px 20px 0 0;
}

So do I completely remove this or do I replace it with something? EDIT: I removed completely and it's still squared on the top right.

And how should I go about fixing the HTML error in my news?

[Antechinus]

That ^ shouldn't be there. It's causing the browser to drop the code after it. That's why you have a square corner at top right.

Can't put a div inside a paragraph. You could use  a span instead. (I agree that the default right aligned news looks like crap)

[MATTEK]

That ^ shouldn't be there. It's causing the browser to drop the code after it. That's why you have a square corner at top right.

Can't put a div inside a paragraph. You could use  a span instead. (I agree that the default right aligned news looks like crap)

Please read what I said before increasing your text size like that. As I said I'm new to this stuff.

I completely removed that header code and it did absolutely nothing.

I have no idea what a span is which is why I asked.

[Antechinus]

I did read what you said. You weren't reading what I said. Look at the code I copied from your css.

Code Select Expand

#header div.frame^
{
   background: url(../images/theme/main_block.png) no-repeat 100% -240px;
   display: block;
   padding: 5px 20px 0 0;
}


Now look at the other css classes in your file. Now spot the difference. As I said:

That ^ shouldn't be there. It's causing the browser to drop the code after it. That's why you have a square corner at top right.

A span is another tag like <div> or <p> or whatever. It can go inside a paragraph without causing a validation error. The other alternative would be to change the css for the news area:

Code Select Expand

#upper_section div.news
{
width: 50%;
float: right;
text-align: right;
}

You can change the text-align to left there if you want to.

[MATTEK]

I fixed the news but I still can't figure out the top right corner issue. When you say "it shouldn't be there" I take that as "remove it".

I've removed it and it's still the same. O well I guess. Sorry to be such a pain.

[Antechinus]

Ok but what exactly did you remove? Coding is fussy stuff. One apostrophe out of place in a template can totally crash your site. What I'm talking about with your css is this:

Code Select Expand

#header div.frame^
{
   background: url(../images/theme/main_block.png) no-repeat 100% -240px;
   display: block;
   padding: 5px 20px 0 0;
}


If you look at all the other css classes in your file you'll see that they don't have a ^ between the class name and the opening bracket for the following code. IOW, this is correct:

Code Select Expand

#header div.frame
{
   background: url(../images/theme/main_block.png) no-repeat 100% -240px;
   display: block;
   padding: 5px 20px 0 0;
}


See the diff? Having the ^ in there makes the stuff inside the brackets get dropped. Get rid of that and it will work.

[MATTEK]

Wow. I'm an idiot. The whole time I thought your ^ was pointing at the entire code itself so I was removing the entire code. I see what you mean now. My apologies dude. I was eyeing that bugger ^ too but didn't think it would effect anything.

It worked. Thank you so much. 

[Antechinus]

Cool. Oh and I know what is wrong with the collapse/expand thing. I set the negative top margin on that to match a standard Curve. It's still there on your one, but it's hard to see because your taller banner has pushed things down relative to the background image. If you look carefully you should be able to see it just about level with the bottom of your banner, but over to the right.

If you want to move it back up to the top just change the top margin on it.

Code Select Expand

/* the upshrink image needs some tweaking */
img#upshrink
{
   float: right;
   margin: -2.5em 1em 0 0;
   z-index: 5;
}

-2.5em is the top margin. Changing it to -10em (at a rough guess) would get it back in the ballpark. Adjust to suit.
Other way to do it is leave it where it is and make an image you can see. Up to you how you want to do it.

[MATTEK]

Cool. Oh and I know what is wrong with the collapse/expand thing. I set the negative top margin on that to match a standard Curve. It's still there on your one, but it's hard to see because your taller banner has pushed things down relative to the background image. If you look carefully you should be able to see it just about level with the bottom of your banner, but over to the right.

If you want to move it back up to the top just change the top margin on it.

Code Select Expand

/* the upshrink image needs some tweaking */
img#upshrink
{
   float: right;
   margin: -2.5em 1em 0 0;
   z-index: 5;
}

-2.5em is the top margin. Changing it to -10em (at a rough guess) would get it back in the ballpark. Adjust to suit.
Other way to do it is leave it where it is and make an image you can see. Up to you how you want to do it.

Funny...I found it right before I viewed your post. I'll edit it later. Again, thank you.