vBulletin Mods

The Official vBulletin Modifications Site
https://www.vbulletin.org/forum/showthread.php?t=297360

Spice Up Your vBulletin Forum with Google CSS3 Web Fonts
by XiTCLUB
18 Apr 2013 20:34

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

http://www.xitclub.com/attachments/w...ts-capture.jpg

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.

http://www.xitclub.com/attachments/w...ts-capture.png

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



Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

For All List Elements


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

For All Paragraphs


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

For All Links


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Princeton 19 Apr 2013 12:26

great article ... many will find this useful

joeychgo 23 Apr 2013 15:03

Very good! Thank you!

wacnstac 23 Apr 2013 15:24

Got an example link?

XiTCLUB 24 Apr 2013 19:51

Quote:

Originally Posted by wacnstac (Post 2418068)
Got an example link?

http://www.xitclub.com/

joeychgo 14 May 2013 18:11

Nice, thank you for this

abdobasha2004 26 May 2013 00:10

Google fonts are awesome, but there are few that support Arabic language !

XiTCLUB 27 Jul 2013 23:27

Quote:

Originally Posted by abdobasha2004 (Post 2424226)
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

SBlueman 23 Aug 2013 07:54

Can you combine fonts? A different one for headers and paragraphs?

Bubble #5 01 Sep 2013 03:24

Great article. Very helpful. THANKS!:)

--------------- Added 01 Sep 2013 at 19:10 ---------------

4.2.1

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

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.

XiTCLUB 08 Sep 2013 13:48

Quote:

Originally Posted by Bubble #5 (Post 2442244)
Great article. Very helpful. THANKS!:)

--------------- Added 01 Sep 2013 at 19:10 ---------------

4.2.1

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

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 08 Sep 2013 at 13:49 ---------------

Quote:

Originally Posted by SBlueman (Post 2440472)
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

Bubble #5 08 Sep 2013 19:25

Quote:

Originally Posted by XiTCLUB (Post 2444110)
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? :confused:

Spangle 15 Sep 2013 22:01

Quote:

Originally Posted by Bubble #5 (Post 2444194)
Ok well that tells us it's possible, but not the CSS code that we need to use.

Anyone know? :confused:

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.

Cem01 24 Aug 2017 14:36

This article is so useful. Google fonts work great on my web site. Thank you!


All times are GMT. The time now is 21:41.

Powered by vBulletin® Version 3.8.14
Copyright © 2020, MH Sub I, LLC dba vBulletin. All Rights Reserved. vBulletin® is a registered trademark of MH Sub I, LLC
Copyright ©2001 - , vbulletin.org. All rights reserved.