How to create a footer outside the container?

NodeBB Development
  • #3


    Thanks for the reply, I already did this, the problem's that the widget footer is being placed inside the container class, I need to put it outside otherwise I'll get the margin added by the container class of bootstrap

  • Global Moderator Plugin & Theme Dev

    You can edit the template to move the element with nodebb-plugin-customize.

    If it's just the margin you care about, you can instead add a negative margin to the footer to cancel out the margin of the container element.

  • #5

    @PitaJ said in How to create a footer outside the container?:


    there is any tutorial for nodebb-plugin-customize? which file should I edit?

  • #6

    I tried to add </div> before the tag opening but now the footer is duplicated why? This is the full code:

    <!-- IF breadcrumbs.length -->
    <ol class="breadcrumb" itemscope="itemscope" itemprop="breadcrumb" itemtype="">
    	{{{each breadcrumbs}}}
    	<li<!-- IF @last --> component="breadcrumb/current"<!-- ENDIF @last --> itemscope="itemscope" itemprop="itemListElement" itemtype="" <!-- IF @last -->class="active"<!-- ENDIF @last -->>
    		<meta itemprop="position" content="@index" />
    		<!-- IF [email protected] --><a href="{breadcrumbs.url}" itemprop="item"><!-- ENDIF [email protected] -->
    			<span itemprop="name">
    				<!-- IF @last -->
    				<!-- IF !feeds:disableRSS -->
    				<!-- IF rssFeedUrl --><a target="_blank" href="{rssFeedUrl}" itemprop="item"><i class="fa fa-rss-square"></i></a><!-- ENDIF rssFeedUrl --><!-- ENDIF !feeds:disableRSS -->
    				<!-- ENDIF @last -->
    		<!-- IF [email protected] --></a><!-- ENDIF [email protected] -->
    <!-- ENDIF breadcrumbs.length -->
    <div data-widget-area="header">
    	{{{each widgets.header}}}
    <div class="row">
    	<div class="<!-- IF widgets.sidebar.length -->col-lg-9 col-sm-12<!-- ELSE -->col-lg-12<!-- ENDIF widgets.sidebar.length -->">
    		<h1 class="categories-title">[[pages:categories]]</h1>
    		<ul class="categories" itemscope itemtype="">
    			{{{each categories}}}
    			<li component="categories/category" data-cid="{../cid}" data-numRecentReplies="1" class="row clearfix">
    	<meta itemprop="name" content="{../name}">
    	<div class="content col-xs-12 <!-- IF config.hideCategoryLastPost -->col-md-10 col-sm-12<!-- ELSE -->col-md-7 col-sm-9<!-- ENDIF config.hideCategoryLastPost -->">
    		<div class="icon pull-left" style="{function.generateCategoryBackground}">
    			<i class="fa fa-fw {../icon}"></i>
    		<h2 class="title">
    			<!-- IF ../isSection -->
    <!-- ELSE -->
    <!-- IF ../link -->
    <a href="{../link}" itemprop="url">
    <!-- ELSE -->
    <a href="{config.relative_path}/category/{../slug}" itemprop="url">
    <!-- ENDIF ../link -->
    <!-- ENDIF ../isSection -->
    			<!-- IF ../descriptionParsed -->
    			<div class="description">
    			<!-- ENDIF ../descriptionParsed -->
    			<!-- IF !config.hideSubCategories -->
    			<!-- ENDIF !config.hideSubCategories -->
    		<span class="visible-xs pull-right">
    			<!-- IF ../teaser.timestampISO -->
    			<a class="permalink" href="{../teaser.url}">
    				<small class="timeago" title="{../teaser.timestampISO}"></small>
    			<!-- ENDIF ../teaser.timestampISO -->
    	<!-- IF !../link -->
    	<div class="col-md-1 hidden-sm hidden-xs stats">
    		<span class="{../unread-class} human-readable-number" title="{../totalTopicCount}">{../totalTopicCount}</span><br />
    	<div class="col-md-1 hidden-sm hidden-xs stats">
    		<span class="{../unread-class} human-readable-number" title="{../totalPostCount}">{../totalPostCount}</span><br />
    	<!-- IF !config.hideCategoryLastPost -->
    	<div class="col-md-3 col-sm-3 teaser hidden-xs" component="topic/teaser">
    		<div class="card" style="border-color: {../bgColor}">
    	{{{each ./posts}}}
    	<!-- IF @first -->
    	<div component="category/posts">
    			<a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(posts.user, "sm", true)}</a>
    			<a class="permalink" href="{config.relative_path}/topic/{../topic.slug}<!-- IF ../index -->/{../index}<!-- ENDIF ../index -->">
    				<small class="timeago" title="{../timestampISO}"></small>
    		<div class="post-content">
    	<!-- ENDIF @first -->
    	<!-- IF !../posts.length -->
    	<div component="category/posts">
    		<div class="post-content">
    	<!-- ENDIF !../posts.length -->
    	<!-- ENDIF !config.hideCategoryLastPost -->
    	<!-- ENDIF !../link -->
    	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 <!-- IF !widgets.sidebar.length -->hidden<!-- ENDIF !widgets.sidebar.length -->">
    		{{{each widgets.sidebar}}}
    </div> <- I HAVE ADDED THIS
    <div data-widget-area="footer">
    	{{{each widgets.footer}}}
  • Global Moderator Plugin & Theme Dev

    Which template is it that you modified there?

  • #8

    @PitaJ categories.tpl

  • Global Moderator Plugin & Theme Dev

    Do you want the footer to be global or just on categories.tpl?

  • #10

    @PitaJ only the footer outside the container as

  • Global Moderator Plugin & Theme Dev

    @Alpha-Team after some investigation, it looks to me that the Opera forums don't use the widget system for their footer. Instead they use a hard-coded customization to the footer.tpl template in their theme.

    If you wish to do the same, you can make a similar change with nodebb-plugin-customize.


    	<div component="toaster/tray" class="alert-window">
    		<div id="reconnect-alert" class="alert alert-dismissable alert-warning clearfix hide" component="toaster/toast">
    			<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    			<p>[[global:reconnecting-message, {config.siteTitle}]]</p>
    	<!-- ENDIF !isSpider -->
      ==== Your footer goes here ====
    	<script defer src="{relative_path}/assets/nodebb.min.js?{config.cache-buster}"></script>
    	{{{each scripts}}}
    	<script defer type="text/javascript" src="{scripts.src}"></script>
  • #12

    @PitaJ many thanks!!!

Suggested Topics

| | | |