WordPress phpBB Wrap Styling and Responsive

Need some custom code changes to the phpBB core simple enough that you feel doesn't require an extension? Then post your request here so that community members can provide some assistance.

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
Post Reply
wookiedachew
Registered User
Posts: 14
Joined: Sat Jun 23, 2018 7:06 pm

WordPress phpBB Wrap Styling and Responsive

Post by wookiedachew »

I'm trying to wrap my phpBB with our WordPress header/footer. I don't want to iframe or embed phpBB into our Wordpress or use any of those bridge plugins, because our WordPress is kind of slow and I want our forum to be as fast as possible and not get bogged down by WordPress issues. :|

Forum here: http://forums.reduxwatch.com

WordPress "source" for header and footer:
http://dispatches.reduxwatch.com/

I've made some progress and I couldn't figure out how the php files for WordPress worked, so I just grabbed the HTML from static pages.

Unfortunately, I've lost some of the styling I wanted to preserve from the phpBB style I'm using. i.e. looks like some font sizes are off, the line spacing and table widths are all messed up. (https://www.phpbb.com/customise/db/styl ... e/demo/3.2) Is there a way to save the CSS here so it doesn't get overridden?

And I can't figure out how to bring over all the rest of the styling/responsive header and footer. My WordPress header bizarrely includes a ridiculous number of stylesheets (to me :shock: ), so it's confusing to know what controls what.

I followed this tutorial, which got me started in the right direction, but then he skipped through the CSS refinement, which I needed to see!
https://css-tricks.com/video-screencast ... ing-phpbb/

Should I go about this in a different way? I.e. Is there a better way to dynamically link the header and footer so any changes made in WP will show up in phpBB?

Here is my current overall_header.html

Code: Select all

<!DOCTYPE html>
<html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
{META}
<title><!-- IF UNREAD_NOTIFICATIONS_COUNT -->({UNREAD_NOTIFICATIONS_COUNT}) <!-- ENDIF --><!-- IF not S_VIEWTOPIC and not S_VIEWFORUM -->{SITENAME} - <!-- ENDIF --><!-- IF S_IN_MCP -->{L_MCP} - <!-- ELSEIF S_IN_UCP -->{L_UCP} - <!-- ENDIF -->{PAGE_TITLE}<!-- IF S_VIEWTOPIC or S_VIEWFORUM --> - {SITENAME}<!-- ENDIF --></title>
<link rel="shortcut icon" href="https://cdn.shopify.com/s/files/1/1133/2956/t/4/assets/logo.png" type="image/x-icon" />
<!-- IF S_ENABLE_FEEDS -->
	<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{{ path('phpbb_feed_index') }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{{ path('phpbb_feed_news') }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{{ path('phpbb_feed_forums') }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{{ path('phpbb_feed_topics') }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{{ path('phpbb_feed_topics_active') }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{{ path('phpbb_feed_forum', { forum_id : S_FORUM_ID } ) }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{{ path('phpbb_feed_topic', { topic_id : S_TOPIC_ID } ) }}"><!-- ENDIF -->
	<!-- EVENT overall_header_feeds -->
<!-- ENDIF -->

<!-- IF U_CANONICAL -->
	<link rel="canonical" href="{U_CANONICAL}">
<!-- ENDIF -->

<!--
	phpBB style name: Flat Style
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:      Ian Bradley
-->

<!-- IF S_ALLOW_CDN -->
<script>
	WebFontConfig = {
		google: {
			families: ['Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese']
		}
	};

	(function(d) {
		var wf = d.createElement('script'), s = d.scripts[0];
		wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
		wf.async = true;
		s.parentNode.insertBefore(wf, s);
	})(document);
</script>
<!-- ENDIF -->


<link rel='stylesheet' id='mr_tailor-app-css'  href='http://dispatches.reduxwatch.com/wp-content/cache/busting/1/wp-content/themes/mrtailor/css/app-1.0.css' type='text/css' media='all' />
<link rel='stylesheet' id='mr_tailor-defaults-css'  href='http://dispatches.reduxwatch.com/wp-content/cache/busting/1/wp-content/themes/mrtailor/css/defaults-1.0.css' type='text/css' media='all' />
<link rel='stylesheet' id='mr_tailor-styles-css'  href='http://dispatches.reduxwatch.com/wp-content/cache/busting/1/wp-content/themes/mrtailor/css/styles-1.0.css' type='text/css' media='all' />
<link rel='stylesheet' id='mr_tailor-responsive-css'  href='http://dispatches.reduxwatch.com/wp-content/cache/busting/1/wp-content/themes/mrtailor/css/responsive-1.0.css' type='text/css' media='all' />
<link rel='stylesheet' id='mr_tailor-default-style-css'  href='http://dispatches.reduxwatch.com/wp-content/themes/mrtailor-child/style.css' type='text/css' media='all' />



<link href="{T_FONT_AWESOME_LINK}" rel="stylesheet">
<link href="{T_STYLESHEET_LINK}" rel="stylesheet">
<link href="{T_STYLESHEET_LANG_LINK}" rel="stylesheet">


<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!-- IF S_PLUPLOAD -->
	<link href="{T_THEME_PATH}/plupload.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!-- IF S_COOKIE_NOTICE -->
	<link href="{T_ASSETS_PATH}/cookieconsent/cookieconsent.min.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!--[if lte IE 9]>
	<link href="{T_THEME_PATH}/tweaks.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<![endif]-->

<!-- EVENT overall_header_head_append -->

{$STYLESHEETS}

<!-- EVENT overall_header_stylesheets_after -->

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<style>
div,h1,h2,h3,h4,h5,h6,a, em, li, p {
    font-family: 'Roboto' !important;
}

.register-section {
 width:100% !important;
}

.register-section input[type="text"],.register-section input[type="password"],.register-section input[type="email"] {
 width:40% !important;
}


.faqz h3 {
 text-align:left !important;
 font-family:"Roboto" !important;
 margin-bottom:25px !important;
}

.faqz h4{
    font-family: "Roboto" !important;
    font-size: 19px !important;
}
.faqz p{
font-size: 14px !important;
    line-height: 21px !important;
font-family: "Roboto" !important;
}
.faqz {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
}


@media screen and (max-width: 767px) {
.register-section input[type="text"],.register-section input[type="password"],.register-section input[type="email"] {
 width:100% !important;
}
}




</style>

<!-- TOP button style -->
<style>

body {
  font-family: Arial, Helvetica, sans-serif;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
</style>


</head>
<body id="phpbb" class="nojs notouch section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">






<!-- dispatches menu start -->

<header id="masthead" class="site-header header-default" role="banner">
        <div class="row">		
        
        <div class="large-12 columns">
            
            <div class="site-header-wrapper">
            
                <div class="site-branding">
                    
                        
                        <a href="http://reduxwatch.com" rel="home"><img class="site-logo" src="//cdn.shopify.com/s/files/1/1133/2956/t/4/assets/logo.png?17543379435542219952" title="Missions to Tackle. | Pilot Diver Hybrid Watches" alt="Redux &amp; Co." /></a>
                    
                                        
                </div><!-- .site-branding -->
                
                <div id="site-menu">
                    
                    <nav id="site-navigation" class="main-navigation" role="navigation">                    
                        <ul id="menu-main-navigation"><li id="mrtailor-menu-item-8272" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://reduxwatch.com/collections/watches"><strong>WATCHES</strong></a></li>
<li id="mrtailor-menu-item-8965" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://reduxwatch.com/collections/straps"><strong>STRAPS</strong></a></li>
<li id="mrtailor-menu-item-8967" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://reduxwatch.com/pages/about-us"><strong>ABOUT</strong></a></li>
<li id="mrtailor-menu-item-9727" class="menu-item menu-item-type-post_type menu-item-object-page"><a title="Gallery" href="http://dispatches.reduxwatch.com/gallery/"><strong>FIELD-REPORTS</strong></a></li>
<li id="mrtailor-menu-item-10252" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="https://reduxwatch.com/pages/support"><strong>SUPPORT</strong></a></li>
</ul>           
                    </nav><!-- #site-navigation -->                  
                    
                    <div class="site-tools">
                        <ul>
                            
                            <li class="mobile-menu-button"><a href="javascript:void(0)"><span class="mobile-menu-text">MENU</span><i class="fa fa-bars"></i></a></li>
                            
                                                        
                            
                                                        
                                                        
                        </ul>	
                    </div>
                </div></div></div></div></header>
<!--dispatches menu end-->

<!-- To the top button -->
<button onclick="topFunction()" id="myBtn" title="Nonstop flight to TOP">✈️</button>


<script>
// When the user scrolls down 500px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>

<!-- EVENT overall_header_body_before -->

<div id="wrap" class="wrap">
	<a id="top" class="top-anchor" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar" role="banner">
		<!-- EVENT overall_header_headerbar_before -->
			<div class="inner">

			<!--div id="site-description">
				<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">
					<!--span class="site_logo"></span></a>
				<div  class="site-description">
					<h1>{SITENAME}</h1>
					<p>{SITE_DESCRIPTION}</p>
					<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
				</div>
			</div>
-->
			</div>
			<!-- EVENT overall_header_headerbar_after -->
		</div>
		<!-- EVENT overall_header_navbar_before -->
		<!-- INCLUDE navbar_header.html -->
	</div>

	<!-- EVENT overall_header_page_body_before -->

	<a id="start_here" class="anchor"></a>
	<div id="page-body" class="page-body" role="main">
		<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
		<div id="information" class="rules">
			<div class="inner">
				<strong>{L_INFORMATION}{L_COLON}</strong> {L_BOARD_DISABLED}
			</div>
		</div>
		<!-- ENDIF -->

		<!-- EVENT overall_header_content_before -->

And my overall_footer.html

Code: Select all

		<!-- EVENT overall_footer_content_after -->
	</div>

<!-- EVENT overall_footer_page_body_after -->

<div id="page-footer" class="page-footer" role="contentinfo">
	<!-- INCLUDE navbar_footer.html -->

	<div class="copyright">
        <i>forum powered by <a href="http://www.phpbb.com">phpBB</a> | design: <a href="http://iansvivarium.com/">Ian Bradley</a></i></span><br />
		<!-- EVENT overall_footer_copyright_prepend -->
		<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
		<!-- EVENT overall_footer_copyright_append -->
		<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
		<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
	</div>

	<div id="darkenwrapper" class="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}">
		<div id="darken" class="darken">&nbsp;</div>
	</div>

	<div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}">
		<a href="#" class="alert_close">
			<i class="icon fa-times-circle fa-fw" aria-hidden="true"></i>
		</a>
		<h3 class="alert_title">&nbsp;</h3><p class="alert_text"></p>
	</div>
	<div id="phpbb_confirm" class="phpbb_alert">
		<a href="#" class="alert_close">
			<i class="icon fa-times-circle fa-fw" aria-hidden="true"></i>
		</a>
		<div class="alert_text"></div>
	</div>
</div>

</div>

<div>
	<a id="bottom" class="anchor" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>

<script type="text/javascript" src="{T_JQUERY_LINK}"></script>
<!-- IF S_ALLOW_CDN --><script type="text/javascript">window.jQuery || document.write('\x3Cscript src="{T_ASSETS_PATH}/javascript/jquery.min.js?assets_version={T_ASSETS_VERSION}">\x3C/script>');</script><!-- ENDIF -->
<script type="text/javascript" src="{T_ASSETS_PATH}/javascript/core.js?assets_version={T_ASSETS_VERSION}"></script>
<!-- INCLUDEJS forum_fn.js -->
<!-- INCLUDEJS ajax.js -->
<!-- IF S_ALLOW_CDN -->
	<script type="text/javascript">
		(function($){
			var $fa_cdn = $('head').find('link[rel="stylesheet"]').first(),
				$span = $('<span class="fa" style="display:none"></span>').appendTo('body');
			if ($span.css('fontFamily') !== 'FontAwesome' ) {
				$fa_cdn.after('<link href="{T_ASSETS_PATH}/css/font-awesome.min.css" rel="stylesheet">');
				$fa_cdn.remove();
			}
			$span.remove();
		})(jQuery);
	</script>
<!-- ENDIF -->

<!-- IF S_COOKIE_NOTICE -->
	<script src="{T_ASSETS_PATH}/cookieconsent/cookieconsent.min.js?assets_version={T_ASSETS_VERSION}"></script>
	<script>
		window.addEventListener("load", function(){
			window.cookieconsent.initialise({
				"palette": {
					"popup": {
						"background": "#0F538A"
					},
					"button": {
						"background": "#E5E5E5"
					}
				},
				"theme": "classic",
				"content": {
					"message": "{LA_COOKIE_CONSENT_MSG}",
					"dismiss": "{LA_COOKIE_CONSENT_OK}",
					"link": "{LA_COOKIE_CONSENT_INFO}",
					"href": "{LA_COOKIE_CONSENT_HREF}"
				}
			})});
	</script>
<!-- ENDIF -->

<!-- EVENT overall_footer_after -->

<!-- IF S_PLUPLOAD --><!-- INCLUDE plupload.html --><!-- ENDIF -->
{$SCRIPTS}

<!-- EVENT overall_footer_body_after -->

<!-- DISPATCHES FOOTER -->
<footer class="entry-meta">    
                                    </footer>
  <footer id="site-footer" role="contentinfo">
						
                 <div class="zee_footer">
        <div class="container row">
          
            <div class="seven columns ze1">
              <img class="mess_img" src="https://cdn.shopify.com/s/files/1/1133/2956/t/4/assets/radar.png?4510958624518484071">
              <div class="mess">
STAY ON THE RADAR
              </div>              
          </div>
          
              <div class="eight columns ze">
                  <div class="form_footer">
        
                
            <p class="topper_border">SIGN UP FOR NEW PRODUCTS, INSPIRATION, AND MORE ...</p>
            <div class="newsletter ">
  <p class="message"></p>
      
    <form method="post" action="https://reduxwatch.com/contact#contact_form" id="contact_form" class="contact-form" accept-charset="UTF-8"><input type="hidden" value="customer" name="form_type"><input type="hidden" name="utf8" value="✓">
       
     
       <input type="hidden" name="contact[tags]" value="prospect,newsletter">
       <input type="hidden" name="contact[first_name]" value="Newsletter">
       <input type="hidden" name="contact[last_name]" value="Subscriber">
       
       <input type="email" class="contact_email" name="contact[email]" required="" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" placeholder="Enter your email address...">
       <input type="submit" class="action_button sign_up" value="Sign Up">
     </form>
  
</div>
<!--<script type="text/javascript" src="https://qh307.infusionsoft.com/app/form/iframe/99ca0d2cc1f658a1d81605d92b3b70ec"></script>-->
          </div>
        
           </div>
        </div>
        </div>     
                      
						 						 
                                							<div class="trigger-footer-widget-area">
    								<span class="trigger-footer-widget-icon"></span>
    							</div>

<div class="site-footer-widget-area" style="">
								<div class="row">
									<div class="large-3 medium-6 small-12 columns"><aside id="text-2" class="widget widget_text">			<div class="textwidget"><aside id="text-3" class="widget widget_text"><h3 class="widget-title">SUPPLY</h3><div class="textwidget"><br><a href="/collections/watches" title="Watches">Watches</a><br>
<a href="/collections/straps" title="Straps">Straps</a>
                
           </div></aside></div>
		</aside></div><div class="large-3 medium-6 small-12 columns"><aside id="text-3" class="widget widget_text">			<div class="textwidget"><aside id="text-3" class="widget widget_text"><h3 class="widget-title">HANGAR</h3><div class="textwidget">

<a href="http://dispatches.reduxwatch.com">Dispatches</a><br>
                
<a href="http://dispatches.reduxwatch.com/faq" title="FAQ">FAQ</a><br>
                
<a href="http://dispatches.reduxwatch.com/knowledge-base" title="Customer Care">Customer Care</a><br>
                
<a href="/pages/preflight-checklist-operators-manual" title="Operator's Manual">Operator's Manual</a><br>
                
<a href="/pages/track-shipment" title="Track Shipment">Track Shipment</a><br>
                
<a href="/pages/the-valiant-alliance" title="The Valiant Alliance">The Valiant Alliance</a><br>
                
<a href="http://dispatches.reduxwatch.com/forums" title="Forums">Forums</a>
                

                
           </div></aside></div>
		</aside></div><div class="large-3 medium-6 small-12 columns"><aside id="text-4" class="widget widget_text">			<div class="textwidget"><aside id="text-3" class="widget widget_text"><h3 class="widget-title">REDUX & CO.</h3><div class="textwidget"><p><a href="http://reduxwatch.com/pages/about-us">About</a>&nbsp;<br><a href="http://reduxwatch.com/pages/we-guarantee" title="Redux &amp; Co. Guarantee">We Guarantee</a><br><a href="http://dispatches.reduxwatch.com/stewardship/" title="Redux &amp; Co. Stewardship">Stewardship<br></a><a href="https://reduxwatch.com/pages/testimonials" title="Redux Testimonials">Testimonials</a><br> <a href="http://reduxwatch.com/pages/press-media">Press &amp; Media<br></a><a href="http://reduxwatch.com/pages/privacy-terms">Privacy &amp; Terms</a></p>
                
           </div></aside></div>
		</aside></div><div class="large-3 medium-6 small-12 columns"><aside id="text-5" class="widget widget_text">			<div class="textwidget"><div class="site-social-icons"><ul class="//animated //flipY" style="padding-left: 0px; position: relative; right: 9px;"><li class="site-social-icons-instagram"><a target="_blank" href="https://instagram.com/reduxwatch"><i class="fa fa-instagram"></i><span>Instagram</span></a></li><li class="site-social-icons-facebook"><a target="_blank" href="https://facebook.com/reduxwatch"><i class="fa fa-facebook"></i><span>Facebook</span></a></li><li class="site-social-icons-twitter"><a target="_blank" href="https://twitter.com/reduxwatch"><i class="fa fa-twitter"></i><span>Twitter</span></a></li><li class="site-social-icons-pinterest"><a target="_blank" href="https://pinterest.com/reduxwatch"><i class="fa fa-pinterest"></i><span>Pinterest</span></a></li></ul></div></div>
		</aside></div>								</div><!-- .row -->
							</div><!-- .site-footer-widget-area -->
                        
												
                        <div class="site-footer-copyright-area">
                            <div class="row">
                                <div class="medium-4 columns">	
                                    <div class="payment_methods">
                                        
                                                    
                                    </div><!-- .payment_methods -->
                                </div><!-- .large-4 .columns -->
                                
                                <div class="medium-8 columns">
                                    <div class="copyright_text">
                                                                                    <span>© 2015-2018 <a href="http://reduxwatch.com">Redux & Co.</a> / 40°40′N &bull; 73°56′W   ✈️                                                                            
                                </div><!-- .large-8 .columns -->            
                            </div><!-- .row --> 
                        </div><!-- .site-footer-copyright-area -->
                               
                    </footer>


</div>
</body>
</html>
Any help much appreciated!
User avatar
Toxyy
Registered User
Posts: 942
Joined: Mon Oct 24, 2016 3:22 pm
Location: Namek
Contact:

Re: WordPress phpBB Wrap Styling and Responsive

Post by Toxyy »

There's a free WordPress plugin that can embed your site into your WordPress.
I am a web developer/administrator, specializing in forums. If you have work you need done or are too lazy to do, pm me!

Some of my extensions:
[3.3][BETA] Post Form Templates || [3.3][BETA] Anonymous Posts || [3.2][3.3][BETA] ACP Merge Child Forums || [3.2][BETA] Sticky Ad || [3.2][DEV] User Delete Topics || [3.3][DEV] Moderate While Searching || [3.3][RC] Short Number Twig Extension
User avatar
GanstaZ
Registered User
Posts: 1187
Joined: Wed Oct 11, 2017 10:29 pm
Location: GZOverse

Re: WordPress phpBB Wrap Styling and Responsive

Post by GanstaZ »

There's no easy way to do this dynamically, because there's no framework to connect both. One way is to adopt phpbb style to wordpress style, so nothing will override default settings & unneeded css will not be loaded. Other way is to make an extension & include the changes you need/want to see in phpbb theme.
Usus est magister optimus! phpBB pre-Triton & latest php environment.
When answer lies in the question, question becomes redundant!
wookiedachew
Registered User
Posts: 14
Joined: Sat Jun 23, 2018 7:06 pm

Re: WordPress phpBB Wrap Styling and Responsive

Post by wookiedachew »

Toxyy wrote: Sun Jun 24, 2018 5:01 pm There's a free WordPress plugin that can embed your site into your WordPress.
Thanks, @toxyy. I saw some of those plugins. But I want to keep my phpbb install separate from my wordpress, because I don't want my WP to drag phpBB down.
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: WordPress phpBB Wrap Styling and Responsive

Post by Lumpy Burgertushie »

you can get most of what you want by copying the wp header html from the source like you did.
add that to the overall_header.html file . then you need to figure out the css that applies to the header part only and include that into phpbb style css.
best to create a separate stylesheet and include that in your phpbb stylesheet.

if you get the right css from wp, it will still remain responsive just like in wp.

as for making any changes you make to the wp header reflect in the phpbb that is not going to be very easy unless you use one of the plugins etc.


how often do you invision making major changes to your wp header/menu etc.?

probably just minor changes to the menu that would only take a couple of minutes to copy over to your phpbb overall_header.

actually if you create a separate html file for your wp menu/header and then just include that html file in your overall_header file using the INCLUDE variable, it will make it all much easier to control.

robert
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
wookiedachew
Registered User
Posts: 14
Joined: Sat Jun 23, 2018 7:06 pm

Re: WordPress phpBB Wrap Styling and Responsive

Post by wookiedachew »

Lumpy Burgertushie wrote: Mon Jun 25, 2018 3:41 pm you can get most of what you want by copying the wp header html from the source like you did.
add that to the overall_header.html file . then you need to figure out the css that applies to the header part only and include that into phpbb style css.
best to create a separate stylesheet and include that in your phpbb stylesheet.

if you get the right css from wp, it will still remain responsive just like in wp.
Thank you, Robert. How do I figure out which css it is that I need? For example, I'm having a difficult time figuring out why I can't turn the footer black like in my Wordpress. I think I've tried inserting every stylesheet that was included in Wordpress. I'm a total hack. I don't even know where to begin with creating a separate stylesheet and including it! :shock:

Lumpy Burgertushie wrote: Mon Jun 25, 2018 3:41 pm as for making any changes you make to the wp header reflect in the phpbb that is not going to be very easy unless you use one of the plugins etc.

how often do you invision making major changes to your wp header/menu etc.?

probably just minor changes to the menu that would only take a couple of minutes to copy over to your phpbb overall_header.
You're right, I wouldn't often make changes. And most likely it wouldn't be massive.
Lumpy Burgertushie wrote: Mon Jun 25, 2018 3:41 pm actually if you create a separate html file for your wp menu/header and then just include that html file in your overall_header file using the INCLUDE variable, it will make it all much easier to control.
In theory, I think I know what you mean, but again in practice I'm not sure what this looks like. Should I just copy out the header and footer changes I've tried into separate files? Why does that make it easier to control?

Thanks for any help!
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: WordPress phpBB Wrap Styling and Responsive

Post by Lumpy Burgertushie »

putting all of the html in a separate html file means that any time you work on it you do not have to open the overall_header or _overall_footer files.

so, put your wp header html in a file and name it header.html
put the wp footer html in a file and name it footer.html.
save both of those files to your style/template folder.

open your overall_header.html file and replace the wp header code with this line:
<!-- INCLUDE header.html -->
go to your overall_footer.html file and replace all of the wp footer code with:
<!-- INCLUDE footer.html -->

now, anytime you want to edit the header or footer you simply open the relevant file and make your changes.

as to the css. anytime you want to know what css is working for a given spot on a web page, right click on that spot and choose "inspect element" if you are using firefox or whatever your browser has available for that.

you will be able to see the exact css that controls that spot and what css file it is in and the line number etc.

once you know where to find that css you open that file and copy it and past it in to a new blank text file.

once you have all the relevant css copied from the wp css file into your new file, save it as menu.css or whatever you want to call it.
put that file in the phpbb/styles/yourstyle/theme folder.

in that theme folder you will find a file named stylesheet.css
add a new line at the bottom to include your new css file named menu.css or whatever you named it.
just copy the last line and paste it and edit the file name to your new filename.

save and upload back to the server.

by the way, if you haven't already done this, go to the admin panel, left menu, load settings. on that page scroll down and find
Recompile stale style components: and set that to yes. submit.

this will keep you from having to purge the cache after every edit you make to see the changes.

since you are working with wp you will run into some problems figuring out exactly where the css is for certain things.

I have found in the past that sometimes it is easier to just create my own css rules and put them in the new css file.

robert
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
wookiedachew
Registered User
Posts: 14
Joined: Sat Jun 23, 2018 7:06 pm

Re: WordPress phpBB Wrap Styling and Responsive

Post by wookiedachew »

Lumpy Burgertushie wrote: Tue Jun 26, 2018 1:48 am putting all of the html in a separate html file means that any time you work on it you do not have to open the overall_header or _overall_footer files.

so, put your wp header html in a file and name it header.html
put the wp footer html in a file and name it footer.html.
save both of those files to your style/template folder.

open your overall_header.html file and replace the wp header code with this line:
<!-- INCLUDE header.html -->
go to your overall_footer.html file and replace all of the wp footer code with:
<!-- INCLUDE footer.html -->

now, anytime you want to edit the header or footer you simply open the relevant file and make your changes.
Ok, thanks Robert, done! But now it looks really strange. Does this header file look right? I wasn't sure if I'm supposed to include the <head> </head><body></body> tags?

Code: Select all

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
{META}


<link rel='stylesheet' id='mr_tailor-app-css'  href='http://dispatches.reduxwatch.com/wp-content/cache/busting/1/wp-content/themes/mrtailor/css/app-1.0.css' type='text/css' media='all' />
<link rel='stylesheet' id='mr_tailor-defaults-css'  href='http://dispatches.reduxwatch.com/wp-content/cache/busting/1/wp-content/themes/mrtailor/css/defaults-1.0.css' type='text/css' media='all' />
<link rel='stylesheet' id='mr_tailor-styles-css'  href='http://dispatches.reduxwatch.com/wp-content/cache/busting/1/wp-content/themes/mrtailor/css/styles-1.0.css' type='text/css' media='all' />
<link rel='stylesheet' id='mr_tailor-responsive-css'  href='http://dispatches.reduxwatch.com/wp-content/cache/busting/1/wp-content/themes/mrtailor/css/responsive-1.0.css' type='text/css' media='all' />
<link rel='stylesheet' id='mr_tailor-default-style-css'  href='http://dispatches.reduxwatch.com/wp-content/themes/mrtailor-child/style.css' type='text/css' media='all' />



<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<style>
div,h1,h2,h3,h4,h5,h6,a, em, li, p {
    font-family: 'Roboto' !important;
}

.register-section {
 width:100% !important;
}

.register-section input[type="text"],.register-section input[type="password"],.register-section input[type="email"] {
 width:40% !important;
}


.faqz h3 {
 text-align:left !important;
 font-family:"Roboto" !important;
 margin-bottom:25px !important;
}

.faqz h4{
    font-family: "Roboto" !important;
    font-size: 19px !important;
}
.faqz p{
font-size: 14px !important;
    line-height: 21px !important;
font-family: "Roboto" !important;
}
.faqz {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
}


@media screen and (max-width: 767px) {
.register-section input[type="text"],.register-section input[type="password"],.register-section input[type="email"] {
 width:100% !important;
}
}




</style>

</head>
<body>

<!-- dispatches menu start -->

<header id="masthead" class="site-header header-default" role="banner">
        <div class="row">		
        
        <div class="large-12 columns">
            
            <div class="site-header-wrapper">
            
                <div class="site-branding">
                    
                        
                        <a href="http://reduxwatch.com" rel="home"><img class="site-logo" src="//cdn.shopify.com/s/files/1/1133/2956/t/4/assets/logo.png?17543379435542219952" title="Missions to Tackle. | Pilot Diver Hybrid Watches" alt="Redux &amp; Co." /></a>
                    
                                        
                </div><!-- .site-branding -->
                
                <div id="site-menu">
                    
                    <nav id="site-navigation" class="main-navigation" role="navigation">                    
                        <ul id="menu-main-navigation"><li id="mrtailor-menu-item-8272" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://reduxwatch.com/collections/watches"><strong>WATCHES</strong></a></li>
<li id="mrtailor-menu-item-8965" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://reduxwatch.com/collections/straps"><strong>STRAPS</strong></a></li>
<li id="mrtailor-menu-item-8967" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://reduxwatch.com/pages/about-us"><strong>ABOUT</strong></a></li>
<li id="mrtailor-menu-item-9727" class="menu-item menu-item-type-post_type menu-item-object-page"><a title="Gallery" href="http://dispatches.reduxwatch.com/gallery/"><strong>FIELD-REPORTS</strong></a></li>
<li id="mrtailor-menu-item-10252" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="https://reduxwatch.com/pages/support"><strong>SUPPORT</strong></a></li>
</ul>           
                    </nav><!-- #site-navigation -->                  
                    
                    <div class="site-tools">
                        <ul>
                            
                            <li class="mobile-menu-button"><a href="javascript:void(0)"><span class="mobile-menu-text">MENU</span><i class="fa fa-bars"></i></a></li>
                            
                                                        
                            
                                                        
                                                        
                        </ul>	
                    </div>
                </div></div></div></div></header></body>
<!--dispatches menu end-->

Lumpy Burgertushie wrote: Tue Jun 26, 2018 1:48 am as to the css. anytime you want to know what css is working for a given spot on a web page, right click on that spot and choose "inspect element" if you are using firefox or whatever your browser has available for that.

you will be able to see the exact css that controls that spot and what css file it is in and the line number etc.

once you know where to find that css you open that file and copy it and past it in to a new blank text file.

once you have all the relevant css copied from the wp css file into your new file, save it as menu.css or whatever you want to call it.
put that file in the phpbb/styles/yourstyle/theme folder.

in that theme folder you will find a file named stylesheet.css
add a new line at the bottom to include your new css file named menu.css or whatever you named it.
just copy the last line and paste it and edit the file name to your new filename.

save and upload back to the server.
The weird thing is most of the css points back to one sheet, which I've included:

<link rel='stylesheet' id='mr_tailor-app-css' href='http://dispatches.reduxwatch.com/wp-con ... pp-1.0.css' type='text/css' media='all' />
<link rel='stylesheet' id='mr_tailor-defaults-css' href='http://dispatches.reduxwatch.com/wp-con ... ts-1.0.css' type='text/css' media='all' />
<link rel='stylesheet' id='mr_tailor-styles-css' href='http://dispatches.reduxwatch.com/wp-con ... es-1.0.css' type='text/css' media='all' />
<link rel='stylesheet' id='mr_tailor-responsive-css' href='http://dispatches.reduxwatch.com/wp-con ... ve-1.0.css' type='text/css' media='all' />
<link rel='stylesheet' id='mr_tailor-default-style-css' href='http://dispatches.reduxwatch.com/wp-con ... /style.css' type='text/css' media='all' />

But still the intended styles don't seem to appear and worse, the phpBB styles are all messed up!
Lumpy Burgertushie wrote: Tue Jun 26, 2018 1:48 am by the way, if you haven't already done this, go to the admin panel, left menu, load settings. on that page scroll down and find
Recompile stale style components: and set that to yes. submit.

this will keep you from having to purge the cache after every edit you make to see the changes.
Thanks for the tip! I spent all night last night clearing the cache after every upload!!! :|
Lumpy Burgertushie wrote: Tue Jun 26, 2018 1:48 am since you are working with wp you will run into some problems figuring out exactly where the css is for certain things.

I have found in the past that sometimes it is easier to just create my own css rules and put them in the new css file.
haha you make it sound SO easy. :) It'd be nice if there were some tool that you could select elements and it would generate a CSS file!
wookiedachew
Registered User
Posts: 14
Joined: Sat Jun 23, 2018 7:06 pm

Re: WordPress phpBB Wrap Styling and Responsive

Post by wookiedachew »

Is there a way to contain the stylesheets to header and footer only to my included file/header vs. spreading into the phpBB style?
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: WordPress phpBB Wrap Styling and Responsive

Post by Lumpy Burgertushie »

wookiedachew wrote: Tue Jun 26, 2018 3:15 am Is there a way to contain the stylesheets to header and footer only to my included file/header vs. spreading into the phpBB style?
yes, it can be added to the new html files if you wish.


robert
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
Post Reply

Return to “phpBB Custom Coding”