Insert header and footer

[EstefanTT]

Hello, I just got running the forum ... very exited !

I will integrate it in my website now. I alredy have an header and a footer present in every page of it. I wish to have them present also on the forum page.

Is there a way to do that or a thread speaking about it. I have some basic notions of HTML, CSS and PHP with wich I build my website.

I also want to change the background with mine to make it more homogeneous with the whole web site.

[Kindred]

http://wiki.simplemachines.org/smf/Category:Integrating_SMF

http://wiki.simplemachines.org/smf/Integrating_SMF_with_your_website

[EstefanTT]

I followed the guide and I could insert at the right place my header and footer in the index.template.php file.

Obviously they don't have any style because they are related to my basic style.css file and I don't have this line <link rel="stylesheet" href="style.css" /> in the index or index.template file. That's obviously normal, no reference to my stylesheet.css, no style.

I don't know exactely what to do to get my style back.

I could copy-past the css code about the header and footer in the css file of SMF if I knew wich one is ...

I thought maybe I could add <link rel="stylesheet" href="style.css" /> to the index.template but I'm not sure I can have two css file working on the same page and I'm pretty sure there will be a "fight" between them because there will be the same ID and class with different caracteritics in the two different file.

Any help would be greatly apreciated ;P

[Gluz]

Well, yes, if they use the same ID/class names then the last CSS file that is loaded will override the previous CSS file/s.

You should put the <link rel="stylesheet" href="style.css" /> to point to the direct link of your site CSS, can be a relative path but is better use a direct link.

[aegersz]

fyi, i use the Headers and Footers mod. for SMF extensively. it's a wonder way to transform your forum's appearance, quickly.

[EstefanTT]

Thanks guys !

I still don't know how to process.  It seems that the index and index.template are loading different SMF CSS depending of some criterias.

If I load my CSS, the forum won't have any kind of style, right ? So I can't.

My thought was to add in the main CSS of SMF the part in my CSS about the footer and header. I'm not sure it's the way to do it. If it is, my problem is that I don't know wich (or wich ones) of the several CSS file I need to add my footer/header origional code.

[Kindred]

If I load my CSS, the forum won't have any kind of style, right ? So I can't.

What? huh?

The system can load as many or as few CSS files as you want (just don't name them the same filename, for clarity)

[EstefanTT]

Ok, cool it works !

I load my CSS as well. I had some bugs, probably the same ID in bboth CSS file.

I change my <header> by <div id="header_main"> and change in my CSS file the name and it seems to works perfectly.

I have 2 very small problem left. one of then is not completely SMF forum related but if someone know how to do that, I would apreciate it a lot.

1) I have this written on the top of the screen :

'; if ($context['browser']['needs_size_fix']) echo ' ', $context['html_headers'], ' 
   
I guess, where ever this is coming from, the explorer doesn't recognise it as a code so it diosplay it like a texte.

2) In my home page my header wasn't peg to the top of the screen, I had to put this in the CSS :

   margin-top: -18px;

Now I realise that in the page with the forum, my header is even more seperated of the top of the screen. About 32 px. If I change in the CSS the 18px by 32px than it's perfect on the forum page but it's too hight on the other pages. Anyone have an idea on how to fix this ?


BTW, you guys are amazing in helping me so far. I will try to contribute later (when I will have more knowledge about this) in this forum if I can !

[Kindred]

looks like - where that code is in index.template.php, you accidentally opened  (or extra closed) the echo statement when you added your own code

[EstefanTT]

That's how the index.template looks like :

Code Select Expand


// The main sub template above the content.
function template_html_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

// Show right to left and the character set for ease of translating.
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/script.js"></script>
        <script language="JavaScript" type="text/javascript"><!--
            var smf_theme_url = "', $settings['theme_url'], '";
            var smf_images_url = "', $settings['images_url'], '";
        // --></script>
        <title>', $context['page_title'], '</title>
<link rel="stylesheet" href="style_bfcx.css" />
        <link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?rc1" />';

        if ($context['browser']['needs_size_fix'])
            echo '
                <link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/fonts-compat.css" />
                ', $context['html_headers'], '
    </head>
    <body>';
include('header.php');

I add the bold code : <link rel="stylesheet" href="style_bfcx.css" /> to load my CSS file as well. Now teh footer and header have style but the forum doesn't have. There is nothing but the texte of the forum when I load the page. I guess the CSS of SMF doesn't load anymore but I doin't see why ...

[Kindred]

**HOW** did you add that code?

I am betting that you PASTED from somewhere instead of typing it in....   and, probably, where ever you pasted from was using curly quotes or something along those lines...