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 1 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
  #2  
Old 04-19-2013, 10:26 AM
Princeton's Avatar
Princeton Princeton is offline
 
Join Date: Nov 2001
Location: Vineland, NJ
Posts: 6,693
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
great article ... many will find this useful
Reply With Quote
  #3  
Old 04-23-2013, 01:03 PM
joeychgo's Avatar
joeychgo joeychgo is offline
 
Join Date: Mar 2004
Location: Chicago, IL
Posts: 933
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Very good! Thank you!
Reply With Quote
  #4  
Old 04-23-2013, 01:24 PM
wacnstac wacnstac is offline
 
Join Date: Nov 2001
Posts: 312
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Got an example link?
Reply With Quote
  #5  
Old 04-24-2013, 05:51 PM
XiTCLUB XiTCLUB is offline
 
Join Date: Jan 2010
Location: Lahore, Pakistan
Posts: 304
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by wacnstac View Post
Got an example link?
http://www.xitclub.com/
Reply With Quote
  #6  
Old 05-14-2013, 04:11 PM
joeychgo's Avatar
joeychgo joeychgo is offline
 
Join Date: Mar 2004
Location: Chicago, IL
Posts: 933
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Nice, thank you for this
Reply With Quote
  #7  
Old 05-25-2013, 10:10 PM
abdobasha2004's Avatar
abdobasha2004 abdobasha2004 is offline
 
Join Date: Aug 2008
Posts: 541
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Google fonts are awesome, but there are few that support Arabic language !
Reply With Quote
  #8  
Old 07-27-2013, 09:27 PM
XiTCLUB XiTCLUB is offline
 
Join Date: Jan 2010
Location: Lahore, Pakistan
Posts: 304
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by abdobasha2004 View Post
Google fonts are awesome, but there are few that support Arabic language !
Yup! they are adding new one's time by time. may be they add more arabic fonts soon
Reply With Quote
  #9  
Old 08-23-2013, 05:54 AM
SBlueman SBlueman is offline
 
Join Date: Jan 2006
Posts: 717
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Can you combine fonts? A different one for headers and paragraphs?
Reply With Quote
  #10  
Old 09-01-2013, 01:24 AM
Bubble #5 Bubble #5 is offline
 
Join Date: Apr 2005
Posts: 984
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
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.
Reply With Quote
Reply
Page 1 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:31 PM.

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.04433 seconds
  • Memory Usage 2,297KB
  • Queries Executed 25 (?)
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
  • (2)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
  • (10)post_thanks_box
  • (2)post_thanks_box_bit
  • (10)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (10)post_thanks_postbit_info
  • (9)postbit
  • (10)postbit_onlinestatus
  • (10)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_postinfo_query
  • fetch_postinfo
  • 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