Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: Elaine Griffin on April 10, 2013, 10:07:18 AM

Title: adding a navigation area to header
Post by: Elaine Griffin on April 10, 2013, 10:07:18 AM
Hello,
I have a client who wanted what turned out to be a very html heavy header in a WP site, and now I'm trying to replicate that here for his forum. His site is ijustmetu.com. You will see in the middle is his navigation, which I created using a table in a text widget area that I added.
his forum is ijustmetu.com/simplemachineforum/, and I can't figure out the best way to add that navigation to the center. I added the two other signs in the css file, and then I added another div, which I added, along with my table, to the index.functions file, and while it will display, it doesn't display properly and puts the whole thing out of whack. Any thoughts on how to add this?
Thanks,
Elaine
Title: Re: adding a navigation area to header
Post by: Deaks on April 11, 2013, 01:25:28 PM
Hello,

Im sorry the forum link doesnt work :/
Title: Re: adding a navigation area to header
Post by: kat on April 11, 2013, 01:43:41 PM
Probably due to this, mate.

http://www.simplemachines.org/community/index.php?topic=501509.msg3523284#msg3523284
Title: Re: adding a navigation area to header
Post by: Elaine Griffin on April 11, 2013, 02:58:36 PM
Thanks to you both! Yea, I lost my customization when I switched my forum name. I need to work on getting that back. I'm hoping I can...
Title: Re: adding a navigation area to header
Post by: Elaine Griffin on April 13, 2013, 07:29:31 AM
Okay, I've fixed my theme, if someone can take a look, I would so appreciate it!
Title: Re: adding a navigation area to header
Post by: Deaks on April 13, 2013, 09:46:24 AM
ok so people dont get confused the forum address is:

http://ijustmetu.com/forum/

Can you posts your index.template.php please
Title: Re: adding a navigation area to header
Post by: Elaine Griffin on April 13, 2013, 10:41:49 AM
Thank you! I attached the file, I wasn't sure if I was supposed to post the whole thing here.
Title: Re: adding a navigation area to header
Post by: Deaks on April 13, 2013, 10:47:58 AM
uh your using a theme for SMF 1.1.X on your 2.0.4 forum :/ 

I am going to suggest straight away a different theme as your base as this will cause you more issues than you can think of if you keep this theme!
Title: Re: adding a navigation area to header
Post by: Elaine Griffin on April 13, 2013, 10:50:42 AM
Oooh, okay. My client chose the theme, not sure why that one since we are modifying it, and I didn't even notice that! Can you recommend a theme that is easy to customize, or should I just go with the default theme?
Thanks again!
Title: Re: adding a navigation area to header
Post by: Deaks on April 13, 2013, 10:56:12 AM
Id suggest getting your client to look at http://custom.simplemachines.org/themes/ and to choose a theme thats created for 2.0 RC4 onwards (these will work better with 2.0.4), and will save lots of work and errors, or yes modify a copy  of the default theme (should never modify the default directly)

Just remember to backup :)
Title: Re: adding a navigation area to header
Post by: Elaine Griffin on April 13, 2013, 10:58:47 AM
Okay. Thank you so much for the help!
Title: Re: adding a navigation area to header
Post by: Deaks on April 13, 2013, 11:01:27 AM
no problem, ill mark this as solved and if you need assistance with your new theme just say and we can help you more :)
Title: Re: adding a navigation area to header
Post by: Elaine Griffin on April 16, 2013, 01:22:21 PM
Okay, I need help with the new theme. Should I post here or start a new topic? :)
Title: Re: adding a navigation area to header
Post by: kat on April 16, 2013, 01:25:31 PM
Depends what help you need, Elaine.

The theme will have it's own support topic. If it's a "normal" theme question (Whatever that might be), it'll be best to post there, coz the theme's author will know how it's coded.

What's the problem? If you tell us that, we can either help you, or say "Support topic!". :)
Title: Re: adding a navigation area to header
Post by: Elaine Griffin on April 16, 2013, 01:28:44 PM
Awesome, thank you! It's still issues with the header. This is the forum: http://ijustmetu.com/forum/. I added the "home" button, if you will, but I need to add these other images/tables/links (ugh) to match what is on the WP site, here: http://www.ijustmetu.com.
I'm just not where where to put these tables.
Thanks so much!
Title: Re: adding a navigation area to header
Post by: kat on April 16, 2013, 01:33:13 PM
Ah... How would it be, if you didn't put them in the actual header section?

On my forum, I just put some code after the opening body tag, in index.template.php. That put it right at the top of every page.

It was kinda like this, with the links all clickable.

We don't use it, now, and it was coded years ago. So, some parts might be deprecated. I'm just using it as an example, to see if it might give you some ideas.

</head>
<body>';

// Because of the way width/padding are calculated, we have to tell Internet Explorer 4 and 5 that the content should be 100% wide. (or else it will assume about 108%!)
echo '


//This is the banner code:

<center><img src="TLABanner.jpg" usemap="#TLABanner" alt="" style="border-style:none" /></center>

<map id="TLABanner" name="TLABanner">
<area shape="rect" coords="8,89,108,103" href="http://www.centerofchaos.com/topalliance/in.php?id=6" title="" target="_BLANK" />
<area shape="rect" coords="7,104,107,120" href="http://www.rpgtopsites.com/in.php3?list=1093198172&site=tla" title="" target="_BLANK" />
<area shape="rect" coords="6,122,112,136" href="http://s11.invisionfree.com/foelastalliance/index.php" title="" target="_BLANK" />
<area shape="rect" coords="9,137,44,153" href="http://www.giveupalready.com/showthread.php?t=27511" title="" target="_BLANK" />
<area shape="rect" coords="8,153,121,168" href="http://www.centerofchaos.com/" title="" target="_BLANK" />
<area shape="rect" coords="349,90,490,106" href="http://shadowfax.thelastalliance.co.uk/" title="" target="_BLANK" />
<area shape="rect" coords="348,107,456,121" href="http://farms.thelastalliance.co.uk/" title="" target="_BLANK" />
<area shape="rect" coords="347,122,448,136" href="http://www.tlakoc.org.uk/index.php?action=arcade" title="" target="_BLANK" />
<area shape="rect" coords="347,136,462,153" href="http://www.sagaofsyn.com/chat.html" title="" target="_BLANK" />
<area shape="rect" coords="346,154,417,169" href="http://nizzle.clearphp.com/tlachat/phpMyChat.php3" title="" target="_BLANK" />
<area shape="rect" coords="648,105,701,121" href="http://www.the-shoutbox.com/" title="" target="_BLANK" />
<area shape="rect" coords="647,122,772,137" href="http://loc.eagles-realm.com/" title="" target="_BLANK" />
<area shape="rect" coords="647,138,759,152" href="http://s4.invisionfree.com/The_Silent_Hood" title="" target="_BLANK" />
<area shape="rect" coords="646,153,789,169" href="http://s7.invisionfree.com/Raging_Drow_Alliance" title="" target="_BLANK" />
<area shape="default" nohref="nohref" alt="" />
</map>

Title: Re: adding a navigation area to header
Post by: Elaine Griffin on April 16, 2013, 01:35:33 PM
Okay, that's what I was thinking, in general. I will give it a go. It's not what I would prefer to do, but I would have preferred to not use all that HTML in general!
Thank you!
Title: Re: adding a navigation area to header
Post by: kat on April 16, 2013, 01:42:05 PM
Let me know how you get on, woncha?

If you have the need, I have a test forum, where we can try things out, without having to worry about borking anything.

I can add you as an admin and we can try things out, if you like.
Title: Re: adding a navigation area to header
Post by: Elaine Griffin on April 17, 2013, 11:12:30 AM
That is so nice of you! I think I pretty much have it. It looked like I needed to put it in the BoardIndex.template file. I put it under #header (I added this) where I thought it might go. Everywhere else I put it, it gave me syntax errors. Unfortunately, it's not in the header, but in the content area!
Title: Re: adding a navigation area to header
Post by: kat on April 17, 2013, 12:33:48 PM
Hmmm... Board index usually only affects this page:

http://www.simplemachines.org/community/index.php

Index.template.php affects all pages.

If you want to PM me the code, I can fiddle around, on my test site, to see if I can figure something out. :)
Title: Re: adding a navigation area to header
Post by: Elaine Griffin on April 17, 2013, 12:49:48 PM
So strange. With this theme, I don't even see index.template.php.
Here is the craziness I had to come up with to get this to display properly. <div id="header">
   
       <table width="1000" border="0" cellspacing="0" cellpadding="0" align="center">
   <tr>
   <td><img src="http://ijustmetu.com/wp-content/uploads/2013/02/i-just-met-u-header.png" width="320" height="200"/></td>
   <td>
  <table width="321" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
  <td><img src="http://ijustmetu.com/wp-content/uploads/2013/03/i-just-met-u-top.png" width="321" height="16"/></td>
  </tr></table>
  <table width="321" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td><img src="http://ijustmetu.com/wp-content/uploads/2013/03/i-just-met-u-left.png" width="22" height="93"/></td>
    <td><a href="http://www.facebook.com/ijustmetu" target="_blank"><img src="http://ijustmetu.com/wp-content/uploads/2013/03/i-just-met-u-on-facebook.png" width="81" height="93"/></a></td>
    <td><img src="http://ijustmetu.com/wp-content/uploads/2013/03/i-just-met-u-center-1.png" width="15" height="93"/></td>
    <td><a href="https://twitter.com/iJUSTMETu_com" target="_blank"><img src="http://ijustmetu.com/wp-content/uploads/2013/03/i-just-met-u-on-twitter.png" width="84" height="93"/></a></td>
    <td><img src="http://ijustmetu.com/wp-content/uploads/2013/03/i-just-met-u-center-2.png" width="16" height="93"/></td>
    <td><a href="http://ijustmetu.com/indiegogo/" target="_blank"><img src="http://ijustmetu.com/wp-content/uploads/2013/03/i-just-met-u-please-donate.png"/ width="82" height="93"></a></td>
    <td><img src="http://ijustmetu.com/wp-content/uploads/2013/03/i-just-met-u-right.png" width="21" height="93"/></td>
  </tr></table>
  <table width="321" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td><img src="http://ijustmetu.com/wp-content/uploads/2013/03/i-just-met-u-go-home.png" width="321" height="42"/></td>
  </tr>
  <tr>
    <td><a href="http://www.ijustmetu.com/about/"><img src="http://ijustmetu.com/wp-content/uploads/2013/03/i-just-met-u-our-vision.png" width="321" height="43"/></a></td>
  </tr>
  <tr>
    <td><img src="http://ijustmetu.com/wp-content/uploads/2013/03/i-just-met-u-bottom.png" width="321" height="15"/></td>
</table></td>
<td>
<table>
<tr><td><img src="http://www.ijustmetu.com/wp-content/themes/ijustmetu/images/i-just-met-u-search-background.png"/></td></tr></table></td></table>
</div>

I SO appreciate your help! I need to move on from this project in the worst way!
Title: Re: adding a navigation area to header
Post by: kat on April 17, 2013, 01:00:57 PM
Now, then... A theme without an index.template.php file is VERY usual.

Not impossible, though, coz it'll just mean that that theme is "borrowing" that file from the default theme's directory. (That's true of all files, with themes, as it 'appens).

So, you could add the code to the default theme's file and, if there really is no such file in the custom theme's directory, it should still work.

Let me go and have a play, with that code... (Gimme a while, coz I'm gonna be taking the "Trial and error" route, for the most part). ;)
Title: Re: adding a navigation area to header
Post by: Elaine Griffin on April 17, 2013, 01:06:23 PM
The funny thing is I'm using the default Curve theme. I was just modifying that (I know, bad).
Title: Re: adding a navigation area to header
Post by: kat on April 17, 2013, 01:08:54 PM
OK... Not sure if you can see this. If you can't, let me know and I'll open it up to guests.

http://playing.twaddlehosting.co.uk/index.php?theme=1

(It's a bit wide, at the moment)
Title: Re: adding a navigation area to header
Post by: Elaine Griffin on April 17, 2013, 01:22:20 PM
Yep, I can see that. And that makes more sense to me - I was trying to put it inside of the login area!
Title: Re: adding a navigation area to header
Post by: kat on April 17, 2013, 01:33:42 PM
Well, now. Firstly, we have a mystery to solve. I can guarantee, 100%, that your default theme will have an index.template.php file.

If it didn't, your forum would croak.

I just moved it, a bit, so that it's right at the top, rather than under the search box.

What I did, was add your code immediately on a new line, after the </head> tag.


Title: Re: adding a navigation area to header
Post by: Elaine Griffin on April 17, 2013, 01:40:26 PM
Well, I found one in the core folder, but when I added the code, the header is not showing up.
Title: Re: adding a navigation area to header
Post by: Elaine Griffin on April 17, 2013, 01:42:36 PM
I take that back, I found it!!
Title: Re: adding a navigation area to header
Post by: kat on April 17, 2013, 01:45:43 PM
WooHoo! :)

That doesn't look bad, at all, that!
Title: Re: adding a navigation area to header
Post by: Elaine Griffin on April 17, 2013, 01:47:02 PM
I must have just overlooked it. You know how when you look at something for too long it's impossible to find?
I am good now. Just have to move some things around. Ugh, thank you so much! You have no idea how much sanity you have saved me! I can't wait to be done with this project!
Title: Re: adding a navigation area to header
Post by: kat on April 17, 2013, 01:51:22 PM
My pleasure, darlin'.

Yeah, I know exactly what that's like. :)

I'm no coder, by a LONG stretch. So, when I look at a lot of code, I almost go all dyslexic!