The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

how to use this footer design

View previous topic View next topic Go down

how to use this footer design

Post by George Abdo on May 23rd 2016, 2:40 am

hi i found this footer design online and it's free to use how can i put it on my forum? http://demo.tutorialzine.com/2015/01/freebie-5-responsive-footer-templates/footer-distributed-with-address-and-phones.html


Last edited by George Abdo on May 29th 2016, 2:10 am; edited 2 times in total

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Re: how to use this footer design

Post by George Abdo on May 24th 2016, 3:18 am

up

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Re: how to use this footer design

Post by George Abdo on May 25th 2016, 10:39 am

up please

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Re: how to use this footer design

Post by George Abdo on May 27th 2016, 11:49 am

Bump

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Re: how to use this footer design

Post by George Abdo on May 29th 2016, 12:11 am

bump

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Re: how to use this footer design

Post by Luffy on May 29th 2016, 12:33 am

Hello @George Abdo,

You want the exact footer or something similar to that?






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Re: how to use this footer design

Post by George Abdo on May 29th 2016, 1:19 am

@Luffy exact footer which they provided a code would be nice thank you for reply and help Smile

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Re: how to use this footer design

Post by Luffy on May 29th 2016, 1:21 am

This is the footer HMTL:
Code:
<footer class="footer-distributed">

         <div class="footer-left">

            <h3>Company<span>logo</span></h3>

            <p class="footer-links">
               <a href="#">Home</a>
               
               <a href="#">Blog</a>
               
               <a href="#">Pricing</a>
               
               <a href="#">About</a>
               
               <a href="#">Faq</a>
               
               <a href="#">Contact</a>
            </p>

            <p class="footer-company-name">Company Name 2015</p>
         </div>

         <div class="footer-center">

            <div>
               <i class="fa fa-map-marker"></i>
               <p><span>21 Revolution Street</span> Paris, France</p>
            </div>

            <div>
               <i class="fa fa-phone"></i>
               <p>+1 555 123456</p>
            </div>

            <div>
               <i class="fa fa-envelope"></i>
               <p><a href="mailto:support@company.com">support@company.com</a></p>
            </div>

         </div>

         <div class="footer-right">

            <p class="footer-company-about">
               <span>About the company</span>
               Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.
            </p>

            <div class="footer-icons">

               <a href="#"><i class="fa fa-facebook"></i></a>
               <a href="#"><i class="fa fa-twitter"></i></a>
               <a href="#"><i class="fa fa-linkedin"></i></a>
               <a href="#"><i class="fa fa-github"></i></a>

            </div>

         </div>

      </footer>

And here's the CSS:
Code:
.footer-distributed{
   background-color: #292c2f;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
   box-sizing: border-box;
   width: 100%;
   text-align: left;
   font: bold 16px sans-serif;

   padding: 55px 50px;
   margin-top: 80px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
   display: inline-block;
   vertical-align: top;
}

/* Footer left */

.footer-distributed .footer-left{
   width: 40%;
}

/* The company logo */

.footer-distributed h3{
   color:  #ffffff;
   font: normal 36px 'Cookie', cursive;
   margin: 0;
}

.footer-distributed h3 span{
   color:  #5383d3;
}

/* Footer links */

.footer-distributed .footer-links{
   color:  #ffffff;
   margin: 20px 0 12px;
   padding: 0;
}

.footer-distributed .footer-links a{
   display:inline-block;
   line-height: 1.8;
   text-decoration: none;
   color:  inherit;
}

.footer-distributed .footer-company-name{
   color:  #8f9296;
   font-size: 14px;
   font-weight: normal;
   margin: 0;
}

/* Footer Center */

.footer-distributed .footer-center{
   width: 35%;
}

.footer-distributed .footer-center i{
   background-color:  #33383b;
   color: #ffffff;
   font-size: 25px;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   text-align: center;
   line-height: 42px;
   margin: 10px 15px;
   vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
   font-size: 17px;
   line-height: 38px;
}

.footer-distributed .footer-center p{
   display: inline-block;
   color: #ffffff;
   vertical-align: middle;
   margin:0;
}

.footer-distributed .footer-center p span{
   display:block;
   font-weight: normal;
   font-size:14px;
   line-height:2;
}

.footer-distributed .footer-center p a{
   color:  #5383d3;
   text-decoration: none;;
}


/* Footer Right */

.footer-distributed .footer-right{
   width: 20%;
}

.footer-distributed .footer-company-about{
   line-height: 20px;
   color:  #92999f;
   font-size: 13px;
   font-weight: normal;
   margin: 0;
}

.footer-distributed .footer-company-about span{
   display: block;
   color:  #ffffff;
   font-size: 14px;
   font-weight: bold;
   margin-bottom: 20px;
}

.footer-distributed .footer-icons{
   margin-top: 25px;
}

.footer-distributed .footer-icons a{
   display: inline-block;
   width: 35px;
   height: 35px;
   cursor: pointer;
   background-color:  #33383b;
   border-radius: 2px;

   font-size: 20px;
   color: #ffffff;
   text-align: center;
   line-height: 35px;

   margin-right: 3px;
   margin-bottom: 5px;
}

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 880px) {

   .footer-distributed{
      font: bold 14px sans-serif;
   }

   .footer-distributed .footer-left,
   .footer-distributed .footer-center,
   .footer-distributed .footer-right{
      display: block;
      width: 100%;
      margin-bottom: 40px;
      text-align: center;
   }

   .footer-distributed .footer-center i{
      margin-left: 0;
   }

}

You can add the HTML in the template you want to wherever you want it to be shown! Wink






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Re: how to use this footer design

Post by George Abdo on May 29th 2016, 1:30 am

i add it to overall_footer_begin and there is no result Sad
this is what my template looks like now:
Code:
<!-- BEGIN html_validation -->
<footer class="footer-distributed">
 
        <div class="footer-left">
 
            <h3>Company<span>logo</span></h3>
 
            <p class="footer-links">
              <a href="#">Home</a>
             
              <a href="#">Blog</a>
             
              <a href="#">Pricing</a>
             
              <a href="#">About</a>
             
              <a href="#">Faq</a>
             
              <a href="#">Contact</a>
            </p>
 
            <p class="footer-company-name">Company Name 2015</p>
        </div>
 
        <div class="footer-center">
 
            <div>
              <i class="fa fa-map-marker"></i>
              <p><span>21 Revolution Street</span> Paris, France</p>
            </div>
 
            <div>
              <i class="fa fa-phone"></i>
              <p>+1 555 123456</p>
            </div>
 
            <div>
              <i class="fa fa-envelope"></i>
              <p><a href="mailto:support@company.com">support@company.com</a></p>
            </div>
 
        </div>
 
        <div class="footer-right">
 
            <p class="footer-company-about">
              <span>About the company</span>
              Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.
            </p>
 
            <div class="footer-icons">
 
              <a href="#"><i class="fa fa-facebook"></i></a>
              <a href="#"><i class="fa fa-twitter"></i></a>
              <a href="#"><i class="fa fa-linkedin"></i></a>
              <a href="#"><i class="fa fa-github"></i></a>
 
            </div>
 
        </div>
 
      </footer>
<div>
   <div>
      <table>
         <tbody>
            <tr>
               <td>
<!-- END html_validation -->
               </td>
               <td valign="top" width="{C3SIZE}">
               <div id="{ID_RIGHT}">
                  <!-- BEGIN giefmod_index2 -->
                  {giefmod_index2.MODVAR}
                  <!-- BEGIN saut -->
                  <div style="height: {SPACE_ROW}px"></div>
                  <!-- END saut -->
                  <!-- END giefmod_index2 -->
               </div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</div>
<!-- close div id="page-body" -->
<div id="page-footer">
   <div align="center">
      <div class="gen">
<!-- BEGIN html_validation -->
      </div>
   </div>
</div>
<!-- END html_validation -->

this is my forum link http://montadasy.arab.st/

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Re: how to use this footer design

Post by Luffy on May 29th 2016, 1:42 am

@George Abdo maybe the place you added it it's not showing up right. Try somewhere else. Smile






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Re: how to use this footer design

Post by George Abdo on May 29th 2016, 2:14 am

thank you luffy it work now but one problem how can i make it stretch all the way? like in this image http://prnt.sc/b9n39l

and if i want to use this one http://demo.tutorialzine.com/2015/01/freebie-5-responsive-footer-templates/footer-distributed.html
what should i do?

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Re: how to use this footer design

Post by SLGray on May 29th 2016, 2:52 am

You have to download the files and manually add them to your forum.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35641
Reputation : 2374
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Re: how to use this footer design

Post by George Abdo on May 29th 2016, 3:27 am

i have downloaded the files but i don't know how to open them or how to know what code is html and what is css like what @Luffy posted before
luffy can you tell me codes for this please?
http://demo.tutorialzine.com/2015/01/freebie-5-responsive-footer-templates/footer-distributed.html

George Abdo
Forumember

Posts : 54
Reputation : 1
Language : english

http://montadasy.arab.st

Back to top Go down

Re: how to use this footer design

Post by SLGray on May 29th 2016, 3:51 am

Are they in a zip file? If yes, just click it to open it.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35641
Reputation : 2374
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Re: how to use this footer design

Post by Luffy on May 29th 2016, 5:03 am

You have to open it and extract all the files to your computer. That way all designs are displayed there and everything are in folders.

This is the HMTL for that footer:
Code:
<footer class="footer-distributed">

         <div class="footer-right">

            <a href="#"><i class="fa fa-facebook"></i></a>
            <a href="#"><i class="fa fa-twitter"></i></a>
            <a href="#"><i class="fa fa-linkedin"></i></a>
            <a href="#"><i class="fa fa-github"></i></a>

         </div>

         <div class="footer-left">

            <p class="footer-links">
               <a href="#">Home</a>
               
               <a href="#">Blog</a>
               
               <a href="#">Pricing</a>
               
               <a href="#">About</a>
               
               <a href="#">Faq</a>
               
               <a href="#">Contact</a>
            </p>

            <p>Company Name 2015</p>
         </div>

      </footer>
and this is its CSS:
Code:
.footer-distributed{
   background-color: #292c2f;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
   box-sizing: border-box;
   width: 100%;
   text-align: left;
   font: normal 16px sans-serif;

   padding: 45px 50px;
   margin-top: 80px;
}

.footer-distributed .footer-left p{
   color:  #8f9296;
   font-size: 14px;
   margin: 0;
}

/* Footer links */

.footer-distributed p.footer-links{
   font-size:18px;
   font-weight: bold;
   color:  #ffffff;
   margin: 0 0 10px;
   padding: 0;
}

.footer-distributed p.footer-links a{
   display:inline-block;
   line-height: 1.8;
   text-decoration: none;
   color:  inherit;
}

.footer-distributed .footer-right{
   float: right;
   margin-top: 6px;
   max-width: 180px;
}

.footer-distributed .footer-right a{
   display: inline-block;
   width: 35px;
   height: 35px;
   background-color:  #33383b;
   border-radius: 2px;

   font-size: 20px;
   color: #ffffff;
   text-align: center;
   line-height: 35px;

   margin-left: 3px;
}

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 600px) {

   .footer-distributed .footer-left,
   .footer-distributed .footer-right{
      text-align: center;
   }

   .footer-distributed .footer-right{
      float: none;
      margin: 0 auto 20px;
   }

   .footer-distributed .footer-left p.footer-links{
      line-height: 1.8;
   }
}






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum