vb.org Archive - Forum Home Enhancements - Awesome footer with Social Icons.

Page 3 of 4

Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)

- - Forum Home Enhancements - Awesome footer with Social Icons. (https://vborg.vbsupport.ru/showthread.php?t=286140)

socialteenz

11-20-2012 07:52 PM

Quote:

Originally Posted by Bluefin221 (Post 2372345)

I added an image to the bottom which appears to slightly overlap unsure how to get rid of the overlapping, anyone any ideas?

http://www.fpcforums.com/images/footer%20error.jpg

Provide a link to your site.

JasonReynolds

11-26-2012 01:51 AM

hmm the links original color, How would you change them?

MuraTh

11-28-2012 09:41 PM

nice thanks

socialteenz

11-29-2012 08:41 AM

Quote:

Originally Posted by JasonReynolds (Post 2385133)

hmm the links original color, How would you change them?

Mark this is as installed for further support.

Thanks.

bada_bing

11-29-2012 05:46 PM

OK I will ask but is there a 3.8.x version of this for some of us that are still on that version?

socialteenz

11-30-2012 08:32 PM

Quote:

Originally Posted by bada_bing (Post 2386529)

OK I will ask but is there a 3.8.x version of this for some of us that are still on that version?

Yes...

Awesome footer with Social Icons

L2Insomnia

12-07-2012 05:33 PM

Awesome mod man thanks. It adds a level of class to VB forums and brings you out of the norm!

socialteenz

12-07-2012 05:52 PM

Quote:

Originally Posted by L2Insomnia (Post 2389139)

Awesome mod man thanks. It adds a level of class to VB forums and brings you out of the norm!

Thank you :)

interfx

12-17-2012 11:47 AM

I really like this footer template, and have implemented on my forum.

http://www.brassreview.com

However, when i view on my mobile device/iPad the 4th column hangs out on the right side. How can I fix this? I tried to narrow width to less than the following 1090px. but it did not display correctly.

Quote:

.footer1 .container {
width: 1090px;
margin: auto;
}

Any advice out there?

Breixo

12-17-2012 08:00 PM

Great, thanks!

thenags

12-22-2012 06:38 PM

Anyone have a version to just add the social links without everything else?

JamalFree

01-05-2013 05:29 PM

very intessant thanks

SouthpawK

01-05-2013 08:09 PM

I love this! I know a little but am no expert on coding. I've got it all set up and understand where to changes the links and all. But I want to put an image in the background instead of a color. I know where to make the changes, just not sure how to put it in as far as coding. Also, doe the background image need to be a specific size to cover the entire footer as the color does? Any help is appreciated...

socialteenz

01-05-2013 08:13 PM

Quote:

Originally Posted by SouthpawK (Post 2394963)

If you want me to help you in setting up the background image, pm me your site url.

gsmlover4u

01-13-2013 01:49 PM

how can add only social icon ?

tanzeelniazi

01-13-2013 09:46 PM

Working Perfect in Vb 4.2.0 Thanks

fxdigi-cash

02-20-2013 02:30 AM

Quote:

Originally Posted by gsmlover4u (Post 2396612)

how can add only social icon ?

what do you mean by adding only social icons? you mean the whole footer is about social icons and no more....?? is it?

If yes, then you just need to delete everything else except this code below:

Code:

 <div class="col4 fallowus">

           <h3>Follow us on</h3>

            

          <p>

              <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Twitter" src="social/social_twitter.png"></a> 

              <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Facebook" src="social/social_fb.png"></a> 

<a href="#" target="_blank"><img width="28" height="28" border="0" alt="youtube" src="social/youtube.png"></a>

            <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Flickr" src="social/social_flickr.png"></a> 

            <a href="#" target="_blank"><img width="28" height="28" border="0" alt="DavianArt" src="social/social_da.png"></a> 

            <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Dribbble" src="social/social_dribbble.png"></a>            <a href="#"><img width="28" height="28" border="0" alt="RSS Feed" src="social/icon_rss.png"></a></p>

         



</br>

hit save and check it to see if works or not...

cheers

danycutu1

02-22-2013 08:24 AM

look and works fantastic. you should make the columns fluid though, using percentage instead of pixels. looks bad in low resolutions (small monitors)

marccap

02-22-2013 04:44 PM

I'm guessing new coding is needed to change the font for the titles such as "Quick Links" etc?

socialteenz

02-23-2013 07:21 AM

Quote:

Originally Posted by danycutu1 (Post 2405744)

look and works fantastic. you should make the columns fluid though, using percentage instead of pixels. looks bad in low resolutions (small monitors)

Sure i will, when i get some more time.

socialteenz

02-23-2013 07:26 AM

Quote:

Originally Posted by marccap (Post 2405824)

I'm guessing new coding is needed to change the font for the titles such as "Quick Links" etc?

Pretty simple, go to additional.css

Find:

Code:

.footer1 .container .col4 h3 {    

    font-family: 'BodoniStd-BookItalic',"Times New Roman",Times,serif !important;

Change it to suit your needs.

gsmlover4u

02-26-2013 01:46 PM

Quote:

Originally Posted by fxdigi-cash (Post 2405350)

what do you mean by adding only social icons? you mean the whole footer is about social icons and no more....?? is it?

If yes, then you just need to delete everything else except this code below:

Code:

 <div class="col4 fallowus">

           <h3>Follow us on</h3>

            

          <p>

              <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Twitter" src="social/social_twitter.png"></a> 

              <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Facebook" src="social/social_fb.png"></a> 

<a href="#" target="_blank"><img width="28" height="28" border="0" alt="youtube" src="social/youtube.png"></a>

            <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Flickr" src="social/social_flickr.png"></a> 

            <a href="#" target="_blank"><img width="28" height="28" border="0" alt="DavianArt" src="social/social_da.png"></a> 

            <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Dribbble" src="social/social_dribbble.png"></a>            <a href="#"><img width="28" height="28" border="0" alt="RSS Feed" src="social/icon_rss.png"></a></p>

         



</br>

hit save and check it to see if works or not...

cheers

sir need some more help can you guide me how i can put this in header under username pass ?

fxdigi-cash

02-26-2013 10:07 PM

Quote:

Originally Posted by gsmlover4u (Post 2406463)

sir need some more help can you guide me how i can put this in header under username pass ?

Hi,

can you post a snapshot of where you want to place the code?

I believe you can try placing the code at the end of the header in the header template.

Cheers :)

P.S:

if you want to place the code at the end of the header in the header template, you should place the following code to avoid any error:

Code:

<div class="col4 fallowus">

           <h3>Follow us on</h3>

            

          <p>

              <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Twitter" src="social/social_twitter.png"></a> 

              <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Facebook" src="social/social_fb.png"></a> 

<a href="#" target="_blank"><img width="28" height="28" border="0" alt="youtube" src="social/youtube.png"></a>

            <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Flickr" src="social/social_flickr.png"></a> 

            <a href="#" target="_blank"><img width="28" height="28" border="0" alt="DavianArt" src="social/social_da.png"></a> 

            <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Dribbble" src="social/social_dribbble.png"></a>            <a href="#"><img width="28" height="28" border="0" alt="RSS Feed" src="social/icon_rss.png"></a></p>



</div>

and for the style play with this css in additional.css file based on your desire:

Code:

.col4 {

    float: left;

   margin-left: 56px;

    width: 202px;

}





.fallowus {

    width: 226px;

}

gsmlover4u

02-27-2013 12:59 PM

1 Attachment(s)

i do edit header as you said but socialnetwork images not showing even i upload social folder in my forum root
and not showing up FOLLOW US
and how to put my twiter and facebook link in that ?

socialteenz

03-05-2013 06:38 AM

Quote:

Originally Posted by gsmlover4u (Post 2406706)

i do edit header as you said but socialnetwork images not showing even i upload social folder in my forum root
and not showing up FOLLOW US
and how to put my twiter and facebook link in that ?

Link to your forum would be nice!

You sure, you uploaded the social icon folder in the root? cos it works perfectly.

Here is the result..

http://awesomescreenshot.com/06f108lx0c

This is what i did..

Open your header template... find

Code:

<div class="ad_global_header">

Just above that add this..

Code:

<div class="col4 fallowus">

           <h3>Follow us on</h3>

            

          <p>

              <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Twitter" src="social/social_twitter.png"></a> 

              <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Facebook" src="social/social_fb.png"></a> 

<a href="#" target="_blank"><img width="28" height="28" border="0" alt="youtube" src="social/youtube.png"></a>

            <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Flickr" src="social/social_flickr.png"></a> 

            <a href="#" target="_blank"><img width="28" height="28" border="0" alt="DavianArt" src="social/social_da.png"></a> 

            <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Dribbble" src="social/social_dribbble.png"></a>            <a href="#"><img width="28" height="28" border="0" alt="RSS Feed" src="social/icon_rss.png"></a></p>



</div>

You can edit the [<a href="#"] # to point to your url.

Then open additional.css template & this..

Code:

.col4 {

    float: left;

   margin-left: 56px;

    width: 202px;

}





.fallowus {

    width: 226px;

}

betts02

03-05-2013 10:27 PM

How do i remove the background image and just have it transparent ?

Solved it by using 'transparent' instead of the colour

Edited it to suit my needs and look

Many thanks

http://www.nextgenerationgamers.co.uk/

dizzynation

03-06-2013 11:19 PM

Sweet! What if I have a Branding Free, can you provide that code?

Also, what if we have an image we want to use for background, how do we do that?

socialteenz

03-07-2013 04:21 AM

Quote:

Originally Posted by dizzynation (Post 2408409)

Sweet! What if I have a Branding Free, can you provide that code?

Also, what if we have an image we want to use for background, how do we do that?

If you are branding free, find & remove these lines from my code..

Code:

<div id="footer_copyright" class="shade footer_copyright">

    <!-- Do not remove this copyright notice -->

    Powered by <a id="vbulletinlink" href="https://www.vbulletin.com">vBulletin&reg;</a> Copyright &copy; 2012 vBulletin Solutions, Inc. <br>

    <!-- Do not remove this copyright notice -->    

</div>

Check the FAQ for adding a background image.

Also please mark as installed for further support.

Thanks.

Bob_R

03-18-2013 09:03 PM

1 Attachment(s)

See the screenshot I provided.

The (in this case) PM drops down to a line by itself.

Would like it all on the same line.

For whatever reason I can't seem to figure it out. :confused:

Looks like I picked the wrong week to quit sniffing glue. :D

cc10	04-17-2013 08:11 PM

Any plans to update this for vb5 ?

thanks

bakabanana

04-21-2013 03:18 PM

Quote:

Originally Posted by Bob_R (Post 2410862)

Increase the css width

socialteenz

04-21-2013 05:16 PM

Quote:

Originally Posted by Bob_R (Post 2410862)

GO to your additional.css

Search for

.footer1 .container {

Increase the width.

socialteenz

04-21-2013 05:17 PM

Quote:

Originally Posted by cc10 (Post 2416998)

Any plans to update this for vb5 ?

thanks

Sorry, nope.

walas87

04-23-2013 10:15 AM

Thank you.

puncol

05-16-2013 08:13 AM

Great, Thank you!

mightysanta

07-18-2013 02:19 AM

We tried to put this on our site and when we did everything was on the left hand side. We tried that col4 edit that you told another user on page 3 but that did not change anything. Please help

fxdigi-cash

07-23-2013 07:52 PM

Quote:

Originally Posted by mightysanta (Post 2434229)

We tried to put this on our site and when we did everything was on the left hand side. We tried that col4 edit that you told another user on page 3 but that did not change anything. Please help

I'm just wondering what are you trying to do??? :confused:

kiba snowpaw

08-12-2013 02:11 PM

really great Work !!! *thumbs up*

socialteenz

08-26-2013 09:05 AM

Quote:

Originally Posted by kiba snowpaw (Post 2438466)

really great Work !!! *thumbs up*

Thank you, i am working on a new version which i will be releasing shortly :D

K4GAP

09-04-2013 03:53 PM

What would this code look like if the background was an image.

Code:

.footer1 { background: #000; }

All times are GMT. The time now is 06:41 PM.

Page 3 of 4

Show 40 post(s) from this thread on one page

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01792 seconds Memory Usage 1,847KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (10)bbcode_code_printable (18)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (3)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: