Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > Programming Articles
Reload this Page Spice Up Your vBulletin Forum with Google CSS3 Web Fonts
FAQ Community Calendar Today's Posts Search

Reply
Page 2 of 2 1 2
 
Thread Tools
Spice Up Your vBulletin Forum with Google CSS3 Web Fonts
XiTCLUB
Join Date: Jan 2010
Posts: 304

I am on Skype these days contact me their : gsolutionspk

Lahore, Pakistan
Show Printable Version Email this Page Subscription
XiTCLUB XiTCLUB is offline 04-17-2013, 10:00 PM
Spice Up Your vBulletin Forum with Google CSS3 Web Fonts

In This Article i will show you, how you can make your forum more attractive and beautiful by changing the default font style of your forum. I am going to use Google web fonts as CSS3 fonts and tell you how you can use Google web fonts in your forum

1: Goto Google Web Fonts Directory Google Fonts

Now Chose the font style you like, you will see small buttons in bottom right of each font style. See screenshot for reference. Click on small "Quick use" Button, this will now display available options for how to using that font style



Scroll Down a bit and you see following screen. As you can see you have 3 options for using font style. I am using 1st method which is standard method.



2: Adding Google fonts stylesheet to your forum template

a) Goto Admincp > Styles & Templates > Style Manager > Select Your template > Edit > headinclude
b) Copy <link href..... Code from Google and paste at the bottom

3: Using Font Family

Now edit you "additional.css" template

For all Headings


Code:
h1,h2,h3,h4,h5,h6 {   font-family: 'Roboto Condensed', sans-serif; //(or your font family you chose on google) }
For All List Elements

Code:
ul li, ol li {   font-family: 'Roboto Condensed', sans-serif; }
For All Paragraphs

Code:
p {   font-family: 'Roboto Condensed', sans-serif; }
For All Links

Code:
a, a:hover, a:visited {    font-family: 'Roboto Condensed', sans-serif; }
Reply With Quote
  #12  
Old 09-08-2013, 11:48 AM
XiTCLUB XiTCLUB is offline
 
Join Date: Jan 2010
Location: Lahore, Pakistan
Posts: 304
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by Bubble #5 View Post
Great article. Very helpful. THANKS!

--------------- Added [DATE]1378059024[/DATE] at [TIME]1378059024[/TIME] ---------------

4.2.1

Is there a way to just use these fonts for posting purposes?

It's messing up the post bit area (where members stats are) and would like to either exclude that area OR just make posts with the new font.
its all about CSS, you can control via CSS all the font on your forum

--------------- Added [DATE]1378644547[/DATE] at [TIME]1378644547[/TIME] ---------------

Quote:
Originally Posted by SBlueman View Post
Can you combine fonts? A different one for headers and paragraphs?
yes u can use different font-family for h1,h2,h3... and for <p> tags
Reply With Quote
Благодарность от:
SBlueman
  #13  
Old 09-08-2013, 05:25 PM
Bubble #5 Bubble #5 is offline
 
Join Date: Apr 2005
Posts: 984
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by XiTCLUB View Post
its all about CSS, you can control via CSS all the font on your forum
Ok well that tells us it's possible, but not the CSS code that we need to use.

Anyone know?
Reply With Quote
  #14  
Old 09-15-2013, 08:01 PM
Spangle Spangle is offline
 
Join Date: Jun 2011
Posts: 520
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by Bubble #5 View Post
Ok well that tells us it's possible, but not the CSS code that we need to use.

Anyone know?
additional.css overrides any other css.

The easiest way to find out what the css for a particular element is, is to use "inspect element" in Firefox, ( right click on the element, brings up a menu)

then post that css in additional.css with the command line, click on save and reload

As you are only editing additional.css it should be fairly easy to see if you get the desired effect.

If you need more help google css elements and you should get enough info to keep you going.
Reply With Quote
  #15  
Old 08-24-2017, 11:36 AM
Cem01 Cem01 is offline
 
Join Date: Nov 2016
Location: Istanbul, Turkey
Posts: 16
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
This article is so useful. Google fonts work great on my web site. Thank you!
Reply With Quote
Reply
Page 2 of 2 1 2

« Previous Thread | Next Thread »

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 04:15 AM.

Contact Us - Archive - Top

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04254 seconds
  • Memory Usage 2,252KB
  • Queries Executed 19 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (4)bbcode_code
  • (4)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (5)post_thanks_box
  • (3)post_thanks_box_bit
  • (5)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (2)post_thanks_postbit
  • (5)post_thanks_postbit_info
  • (4)postbit
  • (5)postbit_onlinestatus
  • (5)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 
Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.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
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete