How to create a footer outside the container?


  • I would like to create a footer which is placed outside the container, something like this:

    someone could explain the steps that I should do for achieve this?

  • GNU/Linux

    Create a footer in administration > Extensions > Widgets > Global Footer

    😉


  • @The-Worms

    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

    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.


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

    c

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


  • 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="http://schema.org/BreadcrumbList">
    	{{{each breadcrumbs}}}
    	<li<!-- IF @last --> component="breadcrumb/current"<!-- ENDIF @last --> itemscope="itemscope" itemprop="itemListElement" itemtype="http://schema.org/ListItem" <!-- IF @last -->class="active"<!-- ENDIF @last -->>
    		<meta itemprop="position" content="@index" />
    		<!-- IF !@last --><a href="{breadcrumbs.url}" itemprop="item"><!-- ENDIF !@last -->
    			<span itemprop="name">
    				{breadcrumbs.text}
    				<!-- 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 -->
    			</span>
    		<!-- IF !@last --></a><!-- ENDIF !@last -->
    	</li>
    	{{{end}}}
    </ol>
    <!-- ENDIF breadcrumbs.length -->
    
    <div data-widget-area="header">
    	{{{each widgets.header}}}
    	{{widgets.header.html}}
    	{{{end}}}
    </div>
    <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="http://www.schema.org/ItemList">
    			{{{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>
    		</div>
    
    		<h2 class="title">
    			<!-- IF ../isSection -->
    {../name}
    <!-- ELSE -->
    <!-- IF ../link -->
    <a href="{../link}" itemprop="url">
    <!-- ELSE -->
    <a href="{config.relative_path}/category/{../slug}" itemprop="url">
    <!-- ENDIF ../link -->
    {../name}
    </a>
    <!-- ENDIF ../isSection -->
    		</h2>
    		<div>
    			<!-- IF ../descriptionParsed -->
    			<div class="description">
    				{../descriptionParsed}
    			</div>
    			<!-- ENDIF ../descriptionParsed -->
    			<!-- IF !config.hideSubCategories -->
    			{function.generateChildrenCategories}
    			<!-- ENDIF !config.hideSubCategories -->
    		</div>
    		<span class="visible-xs pull-right">
    			<!-- IF ../teaser.timestampISO -->
    			<a class="permalink" href="{../teaser.url}">
    				<small class="timeago" title="{../teaser.timestampISO}"></small>
    			</a>
    			<!-- ENDIF ../teaser.timestampISO -->
    		</span>
    	</div>
    
    	<!-- IF !../link -->
    	<div class="col-md-1 hidden-sm hidden-xs stats">
    		<span class="{../unread-class} human-readable-number" title="{../totalTopicCount}">{../totalTopicCount}</span><br />
    		<small>[[global:topics]]</small>
    	</div>
    	<div class="col-md-1 hidden-sm hidden-xs stats">
    		<span class="{../unread-class} human-readable-number" title="{../totalPostCount}">{../totalPostCount}</span><br />
    		<small>[[global:posts]]</small>
    	</div>
    	<!-- 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">
    		<p>
    			<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>
    			</a>
    		</p>
    		<div class="post-content">
    			{../content}
    		</div>
    	</div>
    	<!-- ENDIF @first -->
    	{{{end}}}
    
    	<!-- IF !../posts.length -->
    	<div component="category/posts">
    		<div class="post-content">
    			[[category:no_new_posts]]
    		</div>
    	</div>
    	<!-- ENDIF !../posts.length -->
    </div>
    
    	</div>
    	<!-- ENDIF !config.hideCategoryLastPost -->
    	<!-- ENDIF !../link -->
    </li>
    
    			{{{end}}}
    		</ul>
    	</div>
    	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 <!-- IF !widgets.sidebar.length -->hidden<!-- ENDIF !widgets.sidebar.length -->">
    		{{{each widgets.sidebar}}}
    		{{widgets.sidebar.html}}
    		{{{end}}}
    	</div>
    </div>
    
    </div> <- I HAVE ADDED THIS
    <div data-widget-area="footer">
    	{{{each widgets.footer}}}
    	{{widgets.footer.html}}
    	{{{end}}}
    </div>
    
    
  • Global Moderator

    Which template is it that you modified there?


  • @PitaJ categories.tpl

  • Global Moderator

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


  • @PitaJ only the footer outside the container as https://forums.opera.com/

  • Global Moderator

    @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.

    footer.tpl

    ........
    
    	<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>
    		</div>
    	</div>
    	<!-- ENDIF !isSpider -->
            
      <footer>
      ==== Your footer goes here ====
      </footer>
    
    
    	<script defer src="{relative_path}/assets/nodebb.min.js?{config.cache-buster}"></script>
    
    	{{{each scripts}}}
    	<script defer type="text/javascript" src="{scripts.src}"></script>
    	{{{end}}}
    
    ........
    

  • @PitaJ many thanks!!!

Suggested Topics

| |