Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Mar 2014
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Wordpress and PHPBB theme matching

    Hi,

    I have a phpbb forum that has been running for a couple of years. I want to expand this further with a wordpress blog but want the two sites to appear as though they are the same header and background wise that is
    I'm not a coder, i make changes from instruction such as mods all ok.. but always understand other than very basic html.

    That said I have managed to get it done through loads and loads of trial and error and much hair pulling out

    I just don't seem to be able to sort out a couple of small issues and was hoping someone could help?

    I have achieved what i have by completing the following.

    viewing the blog source and copying the header code including the navigation bar. this has then been pasted into the overall_header.html for phpbb3

    This obviously creates loads of CSS conflicts and messes phpbb all up. so removed the call for the wordpress theme css

    Then sifted through the themes css file and pulled all the code that was for the header and navigation bar.

    this achieved a pretty good result other than the following.

    1. the navigation is left rather than centered (i tried to correct with <center> tags but no go.

    2. the forum starts to early and appears beneath the navigation bar (tried to correct with <br> or <p> but no movement)

    3. the navigation bar is picking up a gradient from somewhere?

    4. the background image is not being picked up (only a simple diagonal tiled gif)

    I did not know if i should copy the actual code or not? and i can supply links if required? (although i'd rather not post unless i can no follow them?? don't want google picking them up as i'm working on duplicate rather than my live forum so will be dead after its all worked out and transferred to live site.

    I'd really appreciate the help if anyone can.. i have been playing with this for days and i'm about ready to jump out the window!

    Many thanks

    Andy

  • #2
    New Coder
    Join Date
    Mar 2014
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Weirdly despite struggling with this issue for days! i have just solved 1,2,4

    It clearly pays to take a break lol

    So im just looking for help on 3. the navigation bar is picking up a gradient from somewhere?

    If anyone can offer me some help please let me know what you need be it links or files?

    Please please please please

    Thanks

    Andy

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    We aren’t psychic and therefore can’t know your code or your site’s address. Please help us help you.

  • #4
    New Coder
    Join Date
    Mar 2014
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    We aren’t psychic and therefore can’t know your code or your site’s address. Please help us help you.
    Here you go thank you.

    The Camping Forum | Camping Forums for campers in UK and Europe to chat and get advice about all aspects of camping, tents, campsites and all that camping has to offer.

    The Camping Forum | Camping Forums for campers in UK and Europe to chat and get advice about all aspects of camping, tents, campsites and all that camping has to offer.

    I don't seem to be able to change the width of the forum either so something must be overriding that also?

    Thanks

    Andy

  • #5
    New Coder
    Join Date
    Mar 2014
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I think its picking the grad up from the forum container boxes as they run down light to dark as whats coming up on the nav only different color.

  • #6
    New Coder
    Join Date
    Mar 2014
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I think i may have it.. the wordpress header is referencing css marked .menu later on phpbb also .menu so im guessing they are conflicting so rename wordpress one to something i assume providing it matches within the css and the actual html template..

  • #7
    New Coder
    Join Date
    Mar 2014
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Im pretty sure thats the issue but renaming made no difference? did'nt break it either?? which is what normally happens when i change loads?

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    OK, there are several more problems than the ones you are describing but for the gradient question: The gradient on the forum site comes from the phpBB stylesheet, line 248 and is caused because the element <ul class="menu" id="primary-menu"> is basically covering its parent element (<nav>) which has the correct blog gradient. Luckily that class doesn’t seem to be used for anything else so it’s safe to remove it, i. e. make the ul element look like this: <ul id="primary-menu">

    Now to your other problems:
    The most obvious one is right there when I look at your source code on the forum site. The code starts like this:
    Code:
    <!DOCTYPE html>
    
    
    <link href="./styles/prosilver/theme/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
    <link href="./style.php?id=1&amp;lang=en&amp;sid=3c6f53d01b68699a3784dac97995ad9f" rel="stylesheet" type="text/css" media="screen, projection" />
    
    <link href="./styles/prosilver/theme/normal.css" rel="stylesheet" type="text/css" title="A" />
    <link href="./styles/prosilver/theme/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
    <link href="./styles/prosilver/theme/large.css" rel="alternate stylesheet" type="text/css" title="A++" />
    
    
    
    <!--[if IE 7]>
    <html id="ie7" lang="en-US">
    <![endif]-->
    <!--[if IE 8]>
    <html id="ie8" lang="en-US">
    <![endif]-->
    <!--[if !(IE 7) | !(IE 8) ]><!-->
    <html lang="en-US">
    <!--<![endif]-->
    <head>
        <meta charset="UTF-8" />
        <title>The Camping Forum | Camping Forums for campers in UK and Europe to chat and get advice about all aspects of camping, tents, campsites and all that camping has to offer.</title>
        <link rel="profile" href="http://gmpg.org/xfn/11" />
        <link rel="pingback" href="http://www.thecampingforum.co.uk/blg/xmlrpc.php" />
        <!--[if lt IE 9]>
        <script src="http://www.thecampingforum.co.uk/blg/wp-content/themes/parament/js/html5.js" type="text/javascript"></script>
        <![endif]-->
        <meta name='robots' content='noindex,follow' />
    <link rel="alternate" type="application/rss+xml" title="The Camping Forum &raquo; Feed" href="http://www.thecampingforum.co.uk/blg/?feed=rss2" />
    <link rel="alternate" type="application/rss+xml" title="The Camping Forum &raquo; Comments Feed" href="http://www.thecampingforum.co.uk/blg/?feed=comments-rss2" />
    
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.thecampingforum.co.uk/blg/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.thecampingforum.co.uk/blg/wp-includes/wlwmanifest.xml" /> 
    <meta name="generator" content="WordPress 3.8.1" />
        <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
    <style type="text/css" id="custom-background-css">
    body.custom-background { background-color: #383838; }
    </style>
    </head>
    
    <body class="home blog custom-background has-image">
    
    <div id="page-wrap" class="contain">
        <header id="branding" role="banner">
            <h1 id="site-title"><a href="http://www.thecampingforum.co.uk/blg">The Camping Forum</a></h1>
                        <h2 id="site-description"><a href="http://www.thecampingforum.co.uk/blg">Camping Forums for campers in UK and Europe to chat and get advice about all aspects of camping, tents, campsites and all that camping has to offer.</a></h2>        
                        <a id="header-image" href="http://www.thecampingforum.co.uk/blg"><img src="http://www.thecampingforum.co.uk/blg/wp-content/uploads/2014/03/cropped-smart.jpg" alt="" /></a>
                </header><!-- #branding -->
    
        <nav id="menu2" role="navigation"><ul id="primary-menu2" class="menu2"><li id="menu2-item-23" class="menu2-item menu2-item-type-custom menu2-item-object-custom menu2-item-25"><a href="http://www.thecampingforum.co.uk/blg/">Home</a></li>
    <li id="menu2-item-25" class="menu2-item menu2-item-type-custom menu2-item-object-custom current-menu2-item current_page_item menu2-item-home menu2-item-23"><a href="http://www.thecampingforum.co.uk/form1/">Forum</a></li>
    </ul></nav>
    
    
    
    
    <!-- end of wordpress #header -->
    
    
        <div id="main" role="main">
    
    <br>
    
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-gb" xml:lang="en-gb">
    <head>
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta http-equiv="content-language" content="en-gb" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="resource-type" content="document" />
    <meta name="distribution" content="global" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    
    <title>The Camping Forum &bull; Index page</title>
    …
    …
    As a matter of fact, there are several problems in this one, too.
    Obviously you’ve just pasted the blog header code randomly into some forum template. You can’t do this, it makes your HTML invalid and could cause way more layout problems than you see (I suppose you haven’t tested it in different browsers either?). However, it looks like the blog header code is messed up in itself already (although it looks correct on the blog site so it appears to be a result of your copy/paste action), so you have two major errors there.

    1. The stylesheet links at the very top (after the doctype) are wrong where they are. They must go inside the <head></head> section of the document.
    2. By your random copy/pasting you have now basically two document headers when only one would be valid.


    There are two different definitions of “header” content: There is the document header and the page header. The document header is basically the <head></head> section of the HTML document where the meta information, style links, and JavaScript references are stored, and that is invisible to the regular visitor. The page header is the top of the page that people see – usually a logo, a title image, main navigation etc.

    So, these are two different things that need to be treated differently for that matter, and you can’t just copy everything over together. Your blog’s page header code would be just this, and this is what you need to copy over in order to show the same header to visitors:
    Code:
    <header id="branding" role="banner">
        <h1 id="site-title"><a href="http://www.thecampingforum.co.uk/blg">The Camping Forum</a></h1>
        <h2 id="site-description"><a href="http://www.thecampingforum.co.uk/blg">Camping Forums for campers in UK and Europe to chat and get advice about all aspects of camping, tents, campsites and all that camping has to offer.</a></h2>        
        <a id="header-image" href="http://www.thecampingforum.co.uk/blg"><img src="http://www.thecampingforum.co.uk/blg/wp-content/uploads/2014/03/cropped-smart.jpg" alt="" /></a>
    </header><!-- #branding -->
    <nav id="menu" role="navigation">
        <ul id="primary-menu" class="menu">
            <li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-23"><a href="http://www.thecampingforum.co.uk/blg/">Home</a></li>
            <li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25"><a href="http://www.thecampingforum.co.uk/form1/">Forum</a></li>
        </ul>
    </nav>
    I don’t know phpBB very well but there must either be some admin panel way to include custom HTML in the head or you need to find the right spot in the (header) template.

    Then, the stylesheet links must go in between <head> and </head>, not before and not after, so, again, you need to find the right spot in the template(s).

    Go ahead and fix that and we’ll take care of the rest later.

  • #9
    New Coder
    Join Date
    Mar 2014
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Detailed thankyou very helpful.

    I have moved things around trying to fix problems the stylesheets i placed at the top because they were further down in the phpbb section so when the page loaded its formatting was all out for a split second until it hit the stylesheets and then reformatted.. nothing major but the page jumped all over the place whilst loading.

    You don't have an option to add custom html within the admin panel of phpbb so it has to go within the template. i'll have a proper read through what you have provided and go through all my code again..

    Thanks for the help really appreciate it its been driving me nuts lol

    Andy

  • #10
    New Coder
    Join Date
    Mar 2014
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Stephan, sorry for taking so much time it was late last night and then had work today, i have managed to fix the nav bar after the advice you gave so again massive thanks for that.

    I have looked at the other issues you detailed and moved the wordpress header code further down between the phpbb <head> tags and also removed the <head> tags contained within the wordpress header as described above. I have also moved the stylesheet links between those tags. actually i think i have moved them to the original location as now the wordpress header is further down in the correct location as advised the stylesheet is still loaded first.

    I'd be grateful if you would look at what i have done and just give me the nod of approval or further advise if required. I understand its important to have it correct and suitable for all.

    On another note if you are able to look at it quickly i have another issue in the width of the forum it should be wider and is coded that way.

    The css from phpbb is as follows

    PHP Code:
    #wrap {
        
    padding12px 20px;
        
    min-width650px;
        
    width65%;                    /* This changes the width of your style to a fluid 80%. */
        
    margin0 auto;                /* This center aligns your wrap width on the browser page */
        
    background-color#FFFFFF;     /* Gives the wrap a white background */
        
    border-radius6px;    /* The Rounded corners for all modern browsers */ 
    I'm guessing it will be a single piece of wordpress css thats overriding it. I'll keep hunting.

    Thanks again

    Andy

  • #11
    New Coder
    Join Date
    Mar 2014
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ok this is the culprit

    PHP Code:
    #page-wrap {
        
    margin0 auto;
        
    width1000px;

    if i remove the forum part returns to the correct width, however the menu jumps to the left and sits in front of the forum rather than above.

    So it is required but how can i run this without it conflicting.. ?

    Thanks again

    Andy

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    The beginning of your code looks better now but I still see you having copied the entire blog document header. You still have two opening <html> tags, two <head> sections and two opening <body> tags, which is invalid:
    Code:
    <!DOCTYPE html>
    <!-- change the phpBB doctype to this above if you are using the blog header code -->
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-gb" xml:lang="en-gb">
    <head>
    
    <link href="./styles/prosilver/theme/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
    <link href="./style.php?id=1&amp;lang=en&amp;sid=d86ce45e2d3a335277178ca40cadf254" rel="stylesheet" type="text/css" media="screen, projection" />
    
    <link href="./styles/prosilver/theme/normal.css" rel="stylesheet" type="text/css" title="A" />
    <link href="./styles/prosilver/theme/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
    <link href="./styles/prosilver/theme/large.css" rel="alternate stylesheet" type="text/css" title="A++" />
    
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta http-equiv="content-language" content="en-gb" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="resource-type" content="document" />
    <meta name="distribution" content="global" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title>The Camping Forum &bull; Index page</title>
    <!--
    	phpBB style name: prosilver
    	Based on style:   prosilver (this is the default phpBB3 style)
    	Original author:  Tom Beddard ( http://www.subBlue.com/ )
    	Modified by:
    -->
    
    <script type="text/javascript">
    …
    …
    </script>
    <script type="text/javascript" src="./styles/prosilver/template/styleswitcher.js"></script>
    <script type="text/javascript" src="./styles/prosilver/template/forum_fn.js"></script>
    
    
    
    
    
    <!-- here comes the wrong part (in red); remove that -->
    
    <!--[if IE 7]>
    <html id="ie7" lang="en-US">
    <![endif]-->
    <!--[if IE 8]>
    <html id="ie8" lang="en-US">
    <![endif]-->
    <!--[if !(IE 7) | !(IE 8) ]><!-->
    <html lang="en-US">
    <!--<![endif]-->
    
    	<meta charset="UTF-8" />
    	<title>The Camping Forum | Camping Forums for campers in UK and Europe to chat and get advice about all aspects of camping, tents, campsites and all that camping has to offer.</title>
    	<link rel="profile" href="http://gmpg.org/xfn/11" />
    	<link rel="pingback" href="http://www.thecampingforum.co.uk/blg/xmlrpc.php" />
    	<!--[if lt IE 9]>
    	<script src="http://www.thecampingforum.co.uk/blg/wp-content/themes/parament/js/html5.js" type="text/javascript"></script>
    	<![endif]-->
    	<meta name='robots' content='noindex,follow' />
    <link rel="alternate" type="application/rss+xml" title="The Camping Forum &raquo; Feed" href="http://www.thecampingforum.co.uk/blg/?feed=rss2" />
    <link rel="alternate" type="application/rss+xml" title="The Camping Forum &raquo; Comments Feed" href="http://www.thecampingforum.co.uk/blg/?feed=comments-rss2" />
    
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.thecampingforum.co.uk/blg/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.thecampingforum.co.uk/blg/wp-includes/wlwmanifest.xml" /> 
    <meta name="generator" content="WordPress 3.8.1" />
    	<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
    <style type="text/css" id="custom-background-css">
    body.custom-background { background-color: #383838; }
    </style>
    
    <body class="home blog custom-background has-image">
    
    <div id="page-wrap" class="contain">
    
    <!-- here is the part you actually need, but inside the phpBB <body> -->
    	<header id="branding" role="banner">
    		<h1 id="site-title"><a href="http://www.thecampingforum.co.uk/blg">The Camping Forum</a></h1>
    					<h2 id="site-description"><a href="http://www.thecampingforum.co.uk/blg">Camping Forums for campers in UK and Europe to chat and get advice about all aspects of camping, tents, campsites and all that camping has to offer.</a></h2>		
    					<a id="header-image" href="http://www.thecampingforum.co.uk/blg"><img src="http://www.thecampingforum.co.uk/blg/wp-content/uploads/2014/03/cropped-smart.jpg" alt="" /></a>
    			</header><!-- #branding -->
    
    	<nav id="menu2" role="navigation"><ul id="primary-menu2" ><li id="menu2-item-23" class="menu2-item menu2-item-type-custom menu2-item-object-custom menu2-item-25"><a href="http://www.thecampingforum.co.uk/blg/">Home</a></li>
    <li id="menu2-item-25" class="menu2-item menu2-item-type-custom menu2-item-object-custom current-menu2-item current_page_item menu2-item-home menu2-item-23"><a href="http://www.thecampingforum.co.uk/form1/">Forum</a></li>
    </ul></nav>
    <!-- blog code you need ends here -->
    <!-- delete the following in red -->
    	<div id="main" role="main">
    
    <br>
    <!-- end of wordpress #header -->
    </head>
    
    <body id="phpbb" class="section-index ltr">
    <!-- your blog header code (as noted above) needs to go somewhere here -->
    <div id="wrap" >
    	<a id="top" name="top" accesskey="t"></a>
    	<div id="page-header">
    You will still have to adjust some CSS in order to make it work but make these changes first and we’ll go on from there then.

  • #13
    New Coder
    Join Date
    Mar 2014
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, have removed the wordpress body tags, moved the wordpress header also slightly to bring it within the php header better, i thought i had removed the <head> tags? have checked again and removed one. the html i think i have removed that was referencing language?

  • #14
    New Coder
    Join Date
    Mar 2014
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry ignore that i missed you had highlighted in red missed the scroll i'll look again sorry

  • #15
    New Coder
    Join Date
    Mar 2014
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok sorry about that.. has been done, has messed the navigation bar though.. thats now not centered and the forum has jumped up and now sitting behind the nav bar.

    Thanks

    Andy


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •