MyBB Community Forums

MyBB Community Forums > Extensions > Themes > Theme Support > Adding information to footer (square theme)
Full Version: Adding information to footer (square theme)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

coxuso

2014-11-13, 08:00 PM
Hi!

I tried to add a ned menu to the footer of my square theme. 

My template (footer templates > footer) looks like this:
<div id="footer">
	<div class="wrapper">
      	<div class="one">
          	<h3>Om Os</h3>
            <p><b><u>UngDebat <i>version 1.0</i></u></b></p>
          	<p>Ungdebat v1.0 er en nyopstartet debat,</p>
          	<p>for unge mennesker. Vi tilbyder et gratis</p>
          	<p>forum, med fri debat og mange muligheder.</p>
            <p><b>God fornøjelse.</b>.</p>
      	</div>
      	<div class="two">
          	<h3>Navigation</h3>
          	<ul>
                <li><a href="{$mybb->settings['bburl']}/index.php"><i style="font-size: 14px;" class="fa fa-comments fa-fw"></i> Forum</a></li>
                <li><a href="{$mybb->settings['bburl']}/search.php"><i style="font-size: 14px;" class="fa fa-search fa-fw"></i> Søg</a></li>
                <li><a href="{$mybb->settings['bburl']}/memberlist.php"><i style="font-size: 14px;" class="fa fa-users fa-fw"></i> Medlemmer</a></li>
                <li><a href="{$mybb->settings['bburl']}/calendar.php"><i style="font-size: 14px;" class="fa fa-calendar-o fa-fw"></i> Kalender</a></li>
				<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><i style="font-size: 14px;" class="fa fa-question-circle fa-fw"></i> Hjælp</a></li>
                <li><a href="{$mybb->settings['bburl']}/tag.php"><i style="font-size: 14px;" class="fa fa-search fa-fw"></i> Tags</a></li>
			</ul>
      	</div>
      	<div class="three">
          	<h3>Genveje</h3>
          	<ul>
              	{$contact_us}
				<li><a href="{$mybb->settings['bburl']}/misc.php?action=syndication"><i style="font-size: 14px;" class="fa fa-rss fa-fw"></i> {$lang->bottomlinks_syndication}</a></li>
              	<li><a href="{$mybb->settings['bburl']}/search.php?action=getnew"><i style="font-size: 14px;" class="fa fa-comments fa-fw"></i> {$lang->welcome_newposts}</a></li>
				<li><a href="{$mybb->settings['bburl']}/search.php?action=getdaily"><i style="font-size: 14px;" class="fa fa-comments-o fa-fw"></i> {$lang->welcome_todaysposts}</a></li>
              	<li><a href="/mybblog.php"><i style="font-size: 14px;" class="fa fa-file-o fa-fw"></i> Blog</a></li>
                <li><a href="{$mybb->settings['bburl']}/tickets.php"><i style="font-size: 14px;" class="fa fa-calendar-o fa-fw"></i> Tickets</a></li>
			</ul>
      	</div>
      <div class="four">
          	<h3>Information</h3>
          	<ul>
                <li><a href="{$mybb->settings['bburl']}/index.php"><i style="font-size: 14px;" class="fa fa-comments fa-fw"></i> Brugerbetingelser</a></li>
                <li><a href="{$mybb->settings['bburl']}/search.php"><i style="font-size: 14px;" class="fa fa-search fa-fw"></i> Retningslinjer</a></li>
                <li><a href="{$mybb->settings['bburl']}/memberlist.php"><i style="font-size: 14px;" class="fa fa-users fa-fw"></i> Sikkerhed</a></li>
                <li><a href="{$mybb->settings['bburl']}/calendar.php"><i style="font-size: 14px;" class="fa fa-calendar-o fa-fw"></i> Kalender</a></li>
				<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><i style="font-size: 14px;" class="fa fa-question-circle fa-fw"></i> Hjælp</a></li>
                <li><a href="{$mybb->settings['bburl']}/tag.php"><i style="font-size: 14px;" class="fa fa-search fa-fw"></i> Tags</a></li>
			</ul>
      	</div>
I copy pasted class="three" in as class="four", and then i did some small changes in square.css:
.one {
  	width: 330px;
  	margin-right: 130px;
  	float: left;
}

.two {
  	width: 150px;
  	margin-right: 100px;
  	float: left;
}

.three {
  	width: 150px;
  	float: left;
}

.four {
  	width: 150px;
  	margin-right: 200px;
  	float: left;
}

.one h3 {
  	font-size: 19px;
  	color: #FAFAFA;
  	margin: 20px 0;
}

.two h3 {
  	font-size: 19px;
  	color: #FAFAFA;
  	margin: 20px 0;
}

.three h3 {
  	font-size: 19px;
  	color: #FAFAFA;
  	margin: 20px 0;
}

.four h3 {
  	font-size: 19px;
  	color: #FAFAFA;
  	margin: 20px 0;
}

.one p {
  	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
  	line-height: 11px;
}

.two ul {
  	margin: 0;
  	padding: 0;
}

.two ul li {
  	list-style: none;
  	display: block;
  	padding: 2px 0;
  	margin: 0;
}

.two ul li a:link, .two ul li a:visited {
  	text-decoration: none;
  	color: rgba(255, 255, 255, 0.5);
  	transition: all 0.5s ease;
}

.two ul li a:hover, .two ul li a:active {
  	color: rgba(255, 255, 255, 1);
  	transition: all 0.5s ease;
}

.three ul {
  	margin: 0;
  	padding: 0;
}

.three ul li {
  	list-style: none;
  	display: block;
  	padding: 2px 0;
  	margin: 0;
}

.three ul li a:link, .three ul li a:visited {
  	text-decoration: none;
  	color: rgba(255, 255, 255, 0.5);
  	transition: all 0.5s ease;
}

.three ul li a:hover, .three ul li a:active {
  	color: rgba(255, 255, 255, 1);
  	transition: all 0.5s ease;
}

.four ul {
  	margin: 0;
  	padding: 0;
}

.four ul li {
  	list-style: none;
  	display: block;
  	padding: 2px 0;
  	margin: 0;
}

.four ul li a:link, .four ul li a:visited {
  	text-decoration: none;
  	color: rgba(255, 255, 255, 0.5);
  	transition: all 0.5s ease;
}

.four ul li a:hover, .four ul li a:active {
  	color: rgba(255, 255, 255, 1);
  	transition: all 0.5s ease;
}
Again, i took and C/P .three to .four, and changes the margin-right a tittle. The result is now:
[Image: vmt53k.png]
What i want is, i want 'Information' up right next to 'genveje'. Anybody? :-)

Michael2014

2014-11-13, 11:34 PM
Hey bud. Try this revision of your css, let me know howit goes please!
.one {
     width: 157px;
     margin-right: 130px;
     float: left;
}

.two {
     width: 157px;
     margin-right: 100px;
     float: left;
}

.three {
     width: 157px;
     float: left;
}

.four {
     width: 157px;
     float: left;
   margin-right: 100px;
}

.one h3 {
     font-size: 19px;
     color: #FAFAFA;
     margin: 20px 0;
}

.two h3 {
     font-size: 19px;
     color: #FAFAFA;
     margin: 20px 0;
}

.three h3 {
     font-size: 19px;
     color: #FAFAFA;
     margin: 20px 0;
}

.four h3 {
     font-size: 19px;
     color: #FAFAFA;
     margin: 20px 0;
}

.one p {
     font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
     line-height: 11px;
}

.two ul {
     margin: 0;
     padding: 0;
}

.two ul li {
     list-style: none;
     display: block;
     padding: 2px 0;
     margin: 0;
}

.two ul li a:link, .two ul li a:visited {
     text-decoration: none;
     color: rgba(255, 255, 255, 0.5);
     transition: all 0.5s ease;
}

.two ul li a:hover, .two ul li a:active {
     color: rgba(255, 255, 255, 1);
     transition: all 0.5s ease;
}

.three ul {
     margin: 0;
     padding: 0;
}

.three ul li {
     list-style: none;
     display: block;
     padding: 2px 0;
     margin: 0;
}

.three ul li a:link, .three ul li a:visited {
     text-decoration: none;
     color: rgba(255, 255, 255, 0.5);
     transition: all 0.5s ease;
}

.three ul li a:hover, .three ul li a:active {
     color: rgba(255, 255, 255, 1);
     transition: all 0.5s ease;
}

.four ul {
     margin: 0;
     padding: 0;
}

.four ul li {
     list-style: none;
     display: block;
     padding: 2px 0;
     margin: 0;
}

.four ul li a:link, .four ul li a:visited {
     text-decoration: none;
     color: rgba(255, 255, 255, 0.5);
     transition: all 0.5s ease;
}

.four ul li a:hover, .four ul li a:active {
     color: rgba(255, 255, 255, 1);
     transition: all 0.5s ease;
}

coxuso

2014-11-14, 01:27 AM
Hey, it helped a lot, but still some small issues:
[Image: b8239u.png]
MyBB Community Forums > Extensions > Themes > Theme Support > Adding information to footer (square theme)