How To Use Your Sites Regular Header With Vanilla 2.0
SilentxxBunny
New
Dear Vanilla Community,
I am a first time Vanilla user, who was attracted to this particular forum solution because it is open-source and easily customizable. So if this is an easy question or something that has already been answered, I apologize for spamming, but I couldn't find the answer after about 15 minutes of searching.
Essentially what I am trying to do is include my sites regular header on all forum pages. The header is written in HTML/PHP and I am not sure what the best way to accomplish this would be.
PROFANITY WARNING! You can view my site (and the header) here.
The header is coded like so:
SNIPPED EVERYTHING ABOVE THIS IS JUST A STANDARD HEADING
<link rel='stylesheet' type='text/css' href='style.css'/>
<link rel='icon' type='image/png' href='/images/favicon.png' />
<title>Home</title>
</head>
<body>
<div id='container'>
<div id='header'>
<a href='index.php'><img src = '/images/$random_image.png' /></a>
</div>
<div class='navbar'>
<ul>
<li><a href='index.php'>Home</a></li>
<li><a href='index.php?page=games' >Games</a></li>
<li><a href='index.php?page=blog' >Blog</a></li>
<li><a href='index.php?page=forum'>Forum</a></li>
<li><a href='index.php?page=contact'>Contact</a></li>
</ul>
</div>
SNIPPED THE ONLY THING AFTER THIS IS THE PAGES CONTENT
When you click "Forum" I want the forum to be displayed beneath the same header you see on every page. My goto method was to use PHP include, as I have been with the other pages, but this does not pull the forum's appropriate style sheet. The only other way I can think of to accomplish this effect is to manually code the header's code into a theme and use that instead. If I were to do this, I imagine that I would copy and paste some of the site's main CSS (the appropriate divs and such) into the forum's style sheet, correct? Or is there a more effective way of doing this?
Comments
What you want to do is put the markup in you themes /views/default.master.php or /views/default.master.tpl after body tag. if you do not have one copy it from applications/dashboard/views/ to your themes view
include your styles into your themes /design/custom.css (creating if doesn't exist). What I would do though is namespace the header, so you don't get a clash of styles. So in other words put a div around you header and give is a special class or id such as `MySpecialHeader.
the for each of the header style rules prefix, e.g.
.MySpecialHeader element.SomeClass { }Due to inheritance property of cascading styles (what the word 'cascading' denotes), your look may may still be affected. If necessary you can ad a reset section before (check your old styles to see if there is a reset section add as namespaced). Otherwise there is another method which involves using style.css. However as your header is relatively simple you may just get away with it, with possibly a few tweaks.
If you think about it just tagging on some header doesn't make a great deal of sense, it could be working at cross purposes, to the framework.
I seen some really terrible implementations, such as pagelines force loading wordpress to try include files and then relying on a series of hacks to get it to work. Causing a massive overhead.
grep is your friend.
+1 for what x00 explained. I had to do exactly the same thing for a client, the header of his two websites had to be identical to the pixel. As one can imagine, this is not an easy task to accomplish, as one is an e-commerce, with a specific structure, while the other is a forum, with a completely different structure.
It took a while, but I managed to do it, and the transition between the two is almost seamless (if we exclude the specific widgets on the header, which are different from one site to the other. Definitely doable, it just needs patience and a few adjustments.
My shop | About Me