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 ), 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 & 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 -->
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"> </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"> </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> <br><a href="http://reduxwatch.com/pages/we-guarantee" title="Redux & Co. Guarantee">We Guarantee</a><br><a href="http://dispatches.reduxwatch.com/stewardship/" title="Redux & 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 & Media<br></a><a href="http://reduxwatch.com/pages/privacy-terms">Privacy & 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 • 73°56′W ✈️
</div><!-- .large-8 .columns -->
</div><!-- .row -->
</div><!-- .site-footer-copyright-area -->
</footer>
</div>
</body>
</html>