How to import Header & Footer from main page into my forum

[Darkphox]

Hi all,

I have a phpbb forum (3.2.2) installed as a page within my main site, BallisticTherapy
I want the forum to have the same header and footer as the other pages on my site, and have spent spent the past week trying to import my main site's header and footer into the forum, with no luck. I'm out of ideas and have no idea what I'm doing wrong. So, I'm resorting to the last thing any man wants to do...I'm asking for help. Now, full disclosure, I'm a newb at this type of thing so I've been reading numerous forums, and trying things one step at a time. Here's a handful of posts that I've already read and tried following: [spoiler]viewtopic.php?t=375947,https://www.phpb ... &t=2132942, viewtopic.php?f=74&t=1524985, viewtopic.php?t=1097285, viewtopic.php?f=46&t=2208086, viewtopic.php?f=481&t=2253516, viewtopic.php?f=556&t=2480551, viewtopic.php?f=466&t=2272346[/spoiler]

I built my main site with mobirise. The forum is installed as ballistictherapy.org/showforum.
I'm using the Carbon style, and have done the following:

1. Copied the header and footer HTML from my main site into the top of my style/template/overall(header/footer).html files

Header:

Code: Select all

  <link rel="shortcut icon" href="https://ballistictherapy.org/showforum/assets/images/squirrel-crosshairs-128x128.png" type="image/x-icon">
  <meta name="description" content="Homepage">
  <title>Forum</title>
  <link rel="stylesheet" href="assets/web/assets/mobirise-icons-bold/mobirise-icons-bold.css">
  <link rel="stylesheet" href="assets/web/assets/mobirise-icons/mobirise-icons.css">
  <link rel="stylesheet" href="assets/tether/tether.min.css">
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-grid.min.css">
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-reboot.min.css">
  <link rel="stylesheet" href="assets/socicon/css/styles.css">
  <link rel="stylesheet" href="assets/dropdown/css/style.css">
  <link rel="stylesheet" href="assets/theme/css/themestyle.css">
  <link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">

Footer:

Code: Select all

<section class="cid-qZfwS9LGij" id="footer1-l">
    <div class="container">
        <div class="media-container-row content text-white">
            <div class="col-12 col-md-3">
                <div class="media-wrap">
                    <a href="https://ballistictherapy.org/">
                        <img src="https://ballistictherapy.org/assets/images/squirrel-crosshairs-300x300.png" alt="Squirrel Crosshairs" title="">
                    </a>
                </div>
            </div>
            <div class="col-12 col-md-3 mbr-fonts-style display-7">
                <h5 class="pb-3">Contact Us</h5>
                <p class="mbr-text">[email protected]</p>
            </div>
            <div class="col-12 col-md-3 mbr-fonts-style display-7">
                <h5 class="pb-3"></h5>
                <p class="mbr-text"></p>
            </div>
            <div class="col-12 col-md-3 mbr-fonts-style display-7">
                <h5 class="pb-3"></h5>
                <p class="mbr-text"></p>
            </div>
        </div>
        
    </div>
</section>


  <script src="public_html/showforum/styles/Carbon/template/assets/web/assets/jquery/jquery.min.js"></script>
  <script src="public_html/showforum/styles/Carbon/template/assets/popper/popper.min.js"></script>
  <script src="public_html/showforum/styles/Carbon/template/assets/tether/tether.min.js"></script>
  <script src="public_html/showforum/styles/Carbon/template/assets/bootstrap/js/bootstrap.min.js"></script>
  <script src="public_html/showforum/styles/Carbon/template/assets/touchswipe/jquery.touch-swipe.min.js"></script>
  <script src="public_html/showforum/styles/Carbon/template/assets/parallax/jarallax.min.js"></script>
  <script src="public_html/showforum/styles/Carbon/template/assets/smoothscroll/smooth-scroll.js"></script>
  <script src="public_html/showforum/styles/Carbon/template/assets/dropdown/js/script.min.js"></script>
  <script src="public_html/showforum/styles/Carbon/template/assets/theme/js/script.js"></script>  
  
</body>

2. Copied the main site's CSS files into the showforum/theme folder

3. Added references/links to each of the imported CSS files in showforum/theme/stylesheet.css

Code: Select all

@import url("mobirise-icons-bold.css?v=3.2");
@import url("mobirise-icons.css?v=3.2");
@import url("tether.min.css?v=3.2");
@import url("bootstrap.min.css?v=3.2");
@import url("bootstrap-grid.min.css?v=3.2");
@import url("bootstrap-reboot.min.css?v=3.2");
@import url("styles.css?v=3.2");
@import url("style.css?v=3.2");
@import url("themestyle.css?v=3.2");
@import url("mbr-additional.css?v=3.2");

5. Recompiled stale style components via "load settings" in ACP

6. Purged cache via ACP

The header doesn't show up at all, but it did mess with the font size of the forum's default header.

The footer DOES have the logo, and text of the main site's footer...but it's not formatted correctly.

I then tried adding my assets folder from the main site to the /showforum directory, in case it was trying to find those files in the forum directory. This had no apparent effect.

The mobirise-generated files for the main page DO have .js files that accompany the .css files, but I don't know if I need to include these in the /showforum directory, or where to put them if I do.

I've tried to be as detailed as I can with what I've done so far. Again, I'm new at this but I've done a ton of reading, and trial & error, but have reached a brick wall. I appreciate any advice or insight anyone might be able to share on how I can move forward!

[thecoalman]

CSS files are cached by the browser. Have you refreshed your browser? alternatively hold ctrl and hit f5

[Darkphox]

Hi,

Thanks for the suggestion. Yes, I refreshed and tried in both FF and IE. As an idiot check I just tried from another computer altogether and it still shows the same: no header and an unformatted footer.

[DTMWC]

Hey
You would be better off doing one part at a time as that's easier.

If you want the new footer to be site wide it needs to be below/outside the wrap, in your carbon style the wrap div is called carbon_wrap

The same applies to your header, that needs to be above/outside the carbon_wrap div.

The font sizes and other bits being messed up is caused by some of the css you're importing overriding the style css, for example the boostrap.min.css has over 7000 lines, I would suggest creating a header/footer style sheet and only copying the css that it actually needs, as that should make it easier.

[Darkphox]

Wow, thanks so much!

So, I did paste my html code outside the wrap div's, but checking made me realize what I did that's at least causing part of the problem...when I copied the code from my site's html source, I copied only the header info (pasted in section, 1 above). When I looked at the forum's "overallheader.html" file, I noticed the header code for the forum is actually in the "body" of the html file. I looked back at my main site's html source again, and realized I didn't copy the other half of the code that was in the "body" of that file! I copied that bit of code over, and now I have my header bar! It's still missing images, but I'm on the right path thanks to your suggestion.

I'll say it again: I'm very new to this, but it is making more and more sense with each problem I come across, lol. Thanks again!

[Lumpy Burgertushie]

according to the code you posted above, all you did was copy the head section. that is not the header. the header would be:

Code: Select all

 <section class="menu cid-qTkzRZLJNu" once="menu" id="menu1-0">

    

    <nav class="navbar navbar-expand beta-menu navbar-dropdown align-items-center navbar-fixed-top navbar-toggleable-sm">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </button>
        <div class="menu-logo">
            <div class="navbar-brand">
                <span class="navbar-logo">
                    <a href="https://ballistictherapy.org">
                         <img src="assets/images/squirrel-crosshairs-600x600.png" alt="Squirrel Crosshairs" title="" style="height: 3.8rem;">
                    </a>
                </span>
                <span class="navbar-caption-wrap"><a class="navbar-caption text-white display-4" href="https://ballistictherapy.org">Ballistic Therapy</a></span>
            </div>
        </div>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav nav-dropdown nav-right" data-app-modern-menu="true"><li class="nav-item">
                    <a class="nav-link link text-white display-4" href="https://www.ballistictherapy.org/showforum"><span class="mbri-align-justify mbr-iconfont mbr-iconfont-btn"></span>Forum</a>
                </li><li class="nav-item"><a class="nav-link link text-white display-4" href="Comps.html"><span class="mbrib-target mbr-iconfont mbr-iconfont-btn"></span>
                        Competitions
                    </a></li><li class="nav-item"><a class="nav-link link text-white display-4" href="Gatpig.html"><span class="mbri-speed mbr-iconfont mbr-iconfont-btn"></span>GATPIG</a></li>
                <li class="nav-item">
                    <a class="nav-link link text-white display-4" href="Support.html"><span class="mbri-flag mbr-iconfont mbr-iconfont-btn"></span>
                        Support Us
                    </a>
                </li></ul>
            
        </div>
    </nav>
</section>

you do not need, nor can you use, anything to do with the mobirise stuff.

as for the css all you need to do is include the css that affects the code I posted above. you can copy and paste it from your css files into the phpbb css files
you would copy and paste that into the overall_header.html file of your phpbb style . you should put it above the wrapper tag as mentioned above.

for the footer you would copy and paste this:

Code: Select all

<section class="cid-qZfwS9LGij" id="footer1-l">

    

    

    <div class="container">
        <div class="media-container-row content text-white">
            <div class="col-12 col-md-3">
                <div class="media-wrap">
                    <a href="https://ballistictherapy.org/">
                        <img src="assets/images/squirrel-crosshairs-300x300.png" alt="Squirrel Crosshairs" title="">
                    </a>
                </div>
            </div>
            <div class="col-12 col-md-3 mbr-fonts-style display-7">
                <h5 class="pb-3">Contact Us</h5>
                <p class="mbr-text">[email protected]</p>
            </div>
            <div class="col-12 col-md-3 mbr-fonts-style display-7">
                <h5 class="pb-3"></h5>
                <p class="mbr-text"></p>
            </div>
            <div class="col-12 col-md-3 mbr-fonts-style display-7">
                <h5 class="pb-3"></h5>
                <p class="mbr-text"></p>
            </div>
        </div>
        
    </div>
</section>

into the overall_footer.html file. probably just above the closing body tag.

I would start over with the backups of those files that you made before you started.


robert

[Darkphox]

Yes, I wrongly thought that the header info would all be in the <head> section of the html files. Again, making a lot more sense now.

I plan to do exactly as you suggest, with reverting to original files and starting again. Thanks for your help!

[thecoalman]

I'll say it again: I'm very new to this, but it is making more and more sense with each problem I come across, lol. Thanks again!

In case you are unaware in your browser you can right click something that is giving you an issue, select inspect element. This will open the developer console. Depends on the browser but on right hand side should be the CSS rules affecting that particular element, what file they are coming from and what line.

If you have not already done use a text editor like Notepad++ which is made for editing code.

https://notepad-plus-plus.org/

[Darkphox]

Wow, I did not know it would show the CSS rules for the element. This is getting scary, because I'm starting to feel like I know what I need to do, lol. You guys are awesome!

[Darkphox]

Hello again, I've made what I feel is amazing progress over the past week. I have the custom header on the site, and it works! I have encountered one final issue that I'm hoping someone can shed light on.

The header on the home page is perfect, but the header on the forum is not centered. The top of my logo image is cut off, the nav bar is wider, and the nav buttons are physically bigger, while the height of the menu bar itself is shorter. You can see the disparities quite clearly on the following links:

https://ballistictherapy.org/
https://ballistictherapy.org/showforum

The menu bar is still responsive, and trims itself down when viewed on mobile. I'd say I'm at a 99% solution, but I'd like to get this right. The HTML is identical, and I've linked all the same css files as the home page uses. I'm guessing it's a conflict between the forum's height/width setting somewhere, but I've so far been unable to figure it out. I once again appreciate any help/insight!

[DTMWC]

The problem seems to be to do with this line .cid-qTkzRZLJNu .navbar { it's repeated in the css 6 or 7 times, you shouldn't need 3000 lines for a menus css, it even slows the fireforx inspector tool down,

Try adding this to the very bottom of the css sheet:

Code: Select all

.cid-qTkzRZLJNu .navbar {
margin-top: 0px;
}

[Darkphox]

Thanks for your help. That fixed the vertical disparity and the logo getting cut off!

I agree that my css is way too fat. Now that I've got the menu working, my next goal is to trim things down to just the necessary code. I want to at least eliminate duplicate css, and I've begun looking into using csspurge via node.js. I downloaded it, and installed node.js but I couldn't figure out how to install css purge...It's taken me the last 2-3 weeks to build a basic understanding of html, css, and simple tools like browser inspecting and css extracting, I figure it'll take me a even longer to do anything more advanced.

I'm all ears if you have any tips or tricks on how I can optimize things.

Thanks again for your help!

[Darkphox]

Well, I figured out a little more. Did some more reading and learned a little bit about NPM and some basic command line stuff.

I figured out purifycss and used it to get rid of unused css data from my two main css files. That cut it down from 5700 lines to 4700.

I couldnt figure out clean-css, but I used their web interface and that cut it down further to just 2900 lines. Functionality looks unchanged, but loads better so I'm quite happy so far!