FANDOM


  • I saw an article on another wiki that is not on the Wikia server but still uses MediaWiki that had a page where the title and headings have a different font style and color than the rest of the page. This is the code for it:

    .page-JaAm h1 { color: #FF0000; font-family: Comic Sans MS, sans-serif }


    They mentioned that it was to be inputed into common.css, but when I added it there on my wiki under a different page name, it wouldn't apply the changes. I'm guessing the reason for this is because of the difference in servers.

    Could I have the code for these changes on Wikia?

      Loading editor
    • The code I put altered the title only, the code for the headings is the same only it has h2 instead of h1.

        Loading editor
    • Can you use a font that a user doesn't have on his system, via importing?

        Loading editor
    • @TronX7, put your code into w:c:transformers:MediaWiki:Wikia.css instead. On Wikia, Common.css no longer affects the Oasis ("default") skin. See also: Help:JavaScript_and_CSS_Cheatsheet#Common.css.

        Loading editor
    • That code, .page-JaAm h1 { color: #FF0000; font-family: Comic Sans MS, sans-serif } only changes the font on a page named "JaAm". Is there any way to change the text of all pages? Can you just eliminate .page-JaAm and just .h1? (Goes off to try it...)

        Loading editor
    • Adamantoise wrote:
      That code,

      .page-JaAm h1 { color: #FF0000; font-family: Comic Sans MS, sans-serif } only changes the font on a page named "JaAm". Is there any way to change the text of all pages? Can you just eliminate .page-JaAm and just .h1? (Goes off to try it...)

      Use h1 { ... instead (without the period in front). For example,

      h1 {
      color: #FF0000;
      font-family: Comic Sans MS, sans-serif
      }
      
        Loading editor
    • Oh cool! It works! Now, what if other users don't have that font. Can you import the font to ensure they can see it, too?

        Loading editor
    • Adamantoise wrote:
      Oh cool! It works! Now, what if other users don't have that font. Can you import the font to ensure they can see it, too?

      From looking at this w3schools page, yes.

        Loading editor
    • Fonts that are not stored in the viewer's device will be rendered as the default one, afaik. You would need to import them for others, who do not have that font, to see.

        Loading editor
    • Import? By using the @font-face that Blaster alluded to? It says to give the url where the font can be downloaded. I can't upload the .ttf file to the wiki, so I uploaded it to my website - http://www.nottfo.com/tb/trueblood.ttf . Do I include the entire url, protocol and all, in the url field?

        Loading editor
    • Everything was working good and then all h1 headers quit displaying correctly. The h2-4 headers are also now trying to display funny...

        Loading editor
    • Right sidebar headers appear great. The h2-4 headers are still only partially displaying, and the h1 headers still don't show. They are there, because you can highlight over the letters, but it's as if they are transparent...

        Loading editor
    • H3 and H4s were perfect. Didn't add much. Reverted everything back. It came back. Added H3 and H4 code again. They work perfectly. H1 and H2 still not wanting to work. Could it be because the values are predefined under the .WikiaArticle h1 code? Everything was working great until I tried increasing the font sizes. That's when everything quit working.

        Loading editor
    • Font-test001
      Font-test002
      Font-test003

      Image #1: Testing headers at top of my page. Righthand sidebar headers appear okay, as do h3s and h4s. H2s don't display correctly. Name at top displays. Is that H1 because page titles don't display.

      Image #2: Farther down page. H2s display sporadically. Occasionally they blink as you scroll, coming in clearly, and then going right back to displaying incorrectly.

      Image #3: The writing at the top, Admin Dashboard, and CSS no longer display correctly. Sidebar items use the font correctly.

        Loading editor
    • I reverted everything back for the second time and tried it again:

      @font-face {
          font-family: TrueBlood, True Blood;
          src: url(http://www.nottfo.com/tb/trueblood.tff);
      }
      
      h1 { color: #FFFFFF; font-family: TrueBlood, True Blood; }
      h2 { color: #FFFFFF; font-family: TrueBlood, True Blood; }
      h3 { color: #FFFFFF; font-family: TrueBlood, True Blood; }
      h4 { color: #FFFFFF; font-family: TrueBlood, True Blood; }

      ...refreshed a couple times and, *knock on wood*, everything's working again.

        Loading editor
    • In retrospect, it might have had something to do with the fact that I removed the "color: #FFFFFF;" attribute to eliminate the variables possibly being defined twice. They're still working, so I'm not going to mess with anything. I just wish I could ensure everyone can see the font as well, via @font-face, I guess...

        Loading editor
    • I'm seeing the default Times New Roman font in header elements on your wiki, and I've checked Inspect Element to make sure it isn't a cache issue. I believe the issue is in your src attribute. The URL you are using doesn't exist, thus the font is only showing up on your computer because you have it installed.

        Loading editor
    • Oh, wow, the URL should have ended in ttf instead of tff. Let me change that right quick!

        Loading editor
    • It's changed.

        Loading editor
    • Any luck!? And you're default is Times New Roman??? Mine is Arial. I known that must make the wiki look horrible being written in Times New Roman. Ugh.

        Loading editor
    • I tried. It doesn't work for me.

        Loading editor
    • Anybody? http://trueblood.wikia.com/wiki/True_Blood_Wiki You might have to go to a page to see the fonts in action as the main page doesn't exactly contain headers, per se. (It uses images as headers) Try a character page, such as http://trueblood.wikia.com/wiki/Eric_Northman or http://trueblood.wikia.com/wiki/User:Adamantoise . Please tell me if the @font-face element is working. Thanks!

        Loading editor
    • It ain't for me. Times New Roman.

        Loading editor
    • For some reason, even if I put the code into Wikia.css, it doesn't apply. I think some other code is clashing with it, but I don't know where.

        Loading editor
    • Is the @font-face element not working?

      @font-face {
          font-family: TrueBlood, True Blood;
          src: url(http://www.nottfo.com/tb/trueblood.tff);
      }

      Is there a problem in the src? Let me remove the font name with a space so there's only one font listed. Don't know if that will help, but you never know.

        Loading editor
    • Adamantoise wrote:
      Any luck!? And you're default is Times New Roman??? Mine is Arial. I known that must make the wiki look horrible being written in Times New Roman. Ugh.

      Your URL is correct (in Wikia.css, not in your post), but I am still seeing Times New Roman. I'll check again tomorrow afternoon just in case my cache isn't clearing. Don't worry, I see the rest of the elements on your wiki in Arial because Wikia has default CSS that changes the font (thank goodness!).

        Loading editor
    • Didn't mean to post the tff. That was actually copied over from the page in Notepad I originally copied it from. The CSS file is set to ttf - the right link.

        Loading editor
    • The other admin/bureaucrat says that he see them, but that's more than likely because he already has the font installed on his computer. It would be nice to ensure everyone else can see them, as they really do help make the page come alive (I added shadows on the h1 and h2 headers, also). Please let me know your findings!

      Update: I'm assuming that it works because I can see the font on my mobile device whereas I could not see it before. But could someone else please verify that it works? Thanks.

        Loading editor
    • I'm trying to ge the font to appear on a User page only (User:TronX7/Sandbox) but the code ignores the ":TronX7/Sandbox" part because of the colon. How do I make it so that it recognizes the whole thing as a title?

        Loading editor
    • The software interprets the ":" as a "/". Have you tried User%3ATronX7/Sandbox or User%3ATronX7:Sandbox?

        Loading editor
    • I'm still seeing the Times New Roman (default) font for the headers, and I checked on both the Eric Northman page and Adamantoise's user page.  Not sure what could be causing this issue. Have you tried putting single quotes around 'True Blood' and the URL (I wouldn't think this matters, but it's worth a try)?


      EDIT:

      After a few quick Google searches I found two examples of someone appending format('truetype') to the src. For example,

      @font-face {
          font-family: 'MyFontFamily';
          src: url('myfont-webfont.eot') format('embedded-opentype'), 
              url('myfont-webfont.woff') format('woff'), 
              url('myfont-webfont.ttf')  format('truetype'),
              url('myfont-webfont.svg#svgFontName') format('svg');
      }
      

      and

      @font-face {
        font-family: 'runescape';
        font-style: normal;
        font-weight: normal;
        src:	url('http://images.wikia.com/runescape/images/a/ab/Runescape_chat.eot?') format('embedded-opentype'),
      	local("RuneScape Chat"),
      	url('http://images.wikia.com/runescape/images/8/87/Runescape_chat.woff') format('woff');
      }
      

      I found these examples at https://github.com/CSSLint/csslint/wiki/Bulletproof-font-face and w:c:runescape:MediaWiki:Common.css/Webfonts.css. I also noticed that on the latter it mentions,

      If you're seeing this page looking for ways to install this on your wiki, you'll first need to have webfonts enabled on your wiki, by contacting Wikia staff about it via the Special:Contact page on your wiki. The .woff, .tff and .eot file formats need to be enabled for full access to all webfont file types.

      Perhaps this is the issue?

        Loading editor
    • It's appearing on my phone, and I know I don't have the True Blood font installed on my phone, so I was assuming it works. I'm pretty sure webfonts are enabled. There were hundreds of thousands of users on during the series peak, so 98% of special activatable extensions were activated on the wiki back in the day.

      I know at least one other user tells me he can see the font... I could try the single quotes, though. Sigh.

        Loading editor
    • I added single quotes and the format('truetype') declaration.

        Loading editor
    • Blaster Niceshot wrote:
      I'm still seeing the Times New Roman (default) font for the headers, and I checked on both the Eric Northman page and Adamantoise's user page.  Not sure what could be causing this issue. Have you tried putting single quotes around 'True Blood' and the URL (I wouldn't think this matters, but it's worth a try)?

      EDIT:

      After a few quick Google searches I found two examples of someone appending format('truetype') to the src. For example,

      @font-face {
          font-family: 'MyFontFamily';
          src: url('myfont-webfont.eot') format('embedded-opentype'), 
              url('myfont-webfont.woff') format('woff'), 
              url('myfont-webfont.ttf')  format('truetype'),
              url('myfont-webfont.svg#svgFontName') format('svg');
      }
      

      and

      @font-face {
        font-family: 'runescape';
        font-style: normal;
        font-weight: normal;
        src:	url('http://images.wikia.com/runescape/images/a/ab/Runescape_chat.eot?') format('embedded-opentype'),
      	local("RuneScape Chat"),
      	url('http://images.wikia.com/runescape/images/8/87/Runescape_chat.woff') format('woff');
      }
      

      I found these examples at https://github.com/CSSLint/csslint/wiki/Bulletproof-font-face and w:c:runescape:MediaWiki:Common.css/Webfonts.css. I also noticed that on the latter it mentions,


      If you're seeing this page looking for ways to install this on your wiki, you'll first need to have webfonts enabled on your wiki, by contacting Wikia staff about it via the Special:Contact page on your wiki. The .woff, .tff and .eot file formats need to be enabled for full access to all webfont file types.
      Perhaps this is the issue?

      Probably not, because external hosting should work. Check out my test wiki.  I've managed to get it's font to be Roboto just by using a Google font using code copied from another Wikia (also a test wiki, belonging to staff member CzechOut).

      /* +++++++++++++++++++
         Main text font 
         +++++++++++++++++++ */
       
      @font-face {
          font-family: "Roboto";
          src:url(http://img2.wikia.nocookie.net/__cb20140717165236/czechitout/images/1/1e/Roboto-Regular.ttf) format('truetype');
          src: local(‚ò∫),; /* because no one will have this on their local machines,
                              it forces browsers to accept only Roboto */
       
       
                  /* The next two declarations may no longer be necessary, but at one point
                     they were required to make it possible to apply styling to 
                     imported fonts in webkit browsers.  Can't hurt to still include
                     them, even in 2014. */
          font-weight: normal; 
          font-style: normal;     
      }
        Loading editor
    • I'm still reading your reply, but try it again... I accidentally added two single quotes at the end of the font name, and didn't realize until all of the fonts went away. Changing it back and two ctrl+f5s were all it took for me to see them again.

      Went to your wiki but everything (headers and all) were in this... standard sans serif font reminiscent of Arial. Hmmm... You already added the coding to your CSS?

        Loading editor
    • I did notice CzechOut also used double quotation marks around the font name, single quotes around the format type and no quote marks around the url. Was this intentional?

        Loading editor
    • The coding doesn't appear in your CSS... The only thing there is:

      .i18ndoc {
         background-color: #FFF77D;
         border-bottom: 1px solid lightgrey;
         font-family: monospace;
         font-size: 8pt;
         height: 140px;
         overflow: auto;
         padding: 3px;
      }
        Loading editor
    • Adamantoise wrote:
      The software interprets the ":" as a "/". Have you tried User%3ATronX7/Sandbox or User%3ATronX7:Sandbox?

      Those don't work either.

        Loading editor
    • TronX7 wrote: I'm trying to ge the font to appear on a User page only (User:TronX7/Sandbox) but the code ignores the ":TronX7/Sandbox" part because of the colon. How do I make it so that it recognizes the whole thing as a title?

      TronX7, you ever figured out the problem? This was over on the Grimm wiki:

      a[href="/wiki/User:Gaarmyvet"], a[href="http://grimm.wikia.com/wiki/Message_Wall:Gaarmyvet"], table.diff a[href="/wiki/User:Gaarmyvet"], ul#pagehistory li a[href="/wiki/User:Gaarmyvet"], ul.special li a[href="/wiki/User:Gaarmyvet"], table.mw-enhanced-rc td a[href="/wiki/User:Gaarmyvet"], .WikiaBlogListing .author-details span a[href="/wiki/User:Gaarmyvet"], .WikiaBlogListingBox .author-details span a[href="/wiki/User:Gaarmyvet"], .WikiaBlogPostHeader .author-details a[href="/wiki/User:Gaarmyvet"], #WikiaRail a[href="/wiki/User:Gaarmyvet"], #wikiactivity-main a[href="/wiki/User:Gaarmyvet"], a.real-name[href="http://grimm.wikia.com/wiki/Message_Wall:Gaarmyvet"], a[href="http://grimm.wikia.com/wiki/User:Gaarmyvet"], .ForumParticipationModule a[href="http://grimm.wikia.com/wiki/User:Gaarmyvet"], .Forum .last-post a[href="http://grimm.wikia.com/wiki/Message_Wall:Gaarmyvet"] {
      	color: #036679; font-weight:bold !important;
      }

      Each admin had a special code that altered the fonts on their personal page. Perhaps you can amend the above to include your own username and wikia? Don't forget to add "font-family:yourfontsname;" before or after the font-weight declaration.

        Loading editor
    • It changed the font of every link linking to my profile instead of the title.

        Loading editor
    • I saw four different users in your css that were depicted, but I didn't see you. Try adding:

      h1 a[title="User:TronX7/Sandbox"], h2 a[title="User:TronX7/Sandbox"],

      in the middle of all of the coding you were going to add for yourself.

        Loading editor
    • TronX7, did you ever figure it out? Did the last code I posted help?

        Loading editor
    • It didn't. Thar code changes the font style/color of links linking to your profile. Not titles.

        Loading editor
    • Hey, so I dunno if anybody will see this since this thread is old, but now that there has been an update, how do I change the title font? The original code listed here doesn't work anymore.

        Loading editor
    • You would use .wikia-page-header .header-column h1. For example,

      .wikia-page-header .header-column h1 {
      color:blue;
      }
      
        Loading editor
    • I'm still a little confused. Could you give an example using an article page from another wiki perhaps?

        Loading editor
    • Perhaps I misunderstood your question. Are you looking to change the styles of all article headings, or just the heading on one particular page?

      I can't recall any wikis that have either at the moment, but I will post a link if I am able to remember/find one.

        Loading editor
    • I am looking to change the header of one particular page. Thanks.

        Loading editor
    • In that case, you would use .page-Page_Name .header-column h1. For example,

      .page-Example_Page .header-column h1 {
           color:blue;
      }
      

      would change the text color of the title of Example Page to blue.


      Here's a breakdown of the code:

      • .page-Example_Page selects elements with the class page-Example_Page (in this case, the page Example Page).
      • .header-column selects elements with the class header-column (in this case, the title area).
      • h1 selects all h1 elements (in this case, the title).

      Because all three classes are together, it selects all h1 elements inside header-column elements that are inside page-Example_Page elements.

      Note:.page-Example_Page .header-column h1 and .page-Example_Page.header-column h1 are two different things. In this case, there is a space between the two classes.


      Instead of looking at other wikis, you could also post the code in your personal wikia.css to see the result and play around with it.

      You can also use Inspect Element, a tool you can access by right clicking and selecting it from the menu in most (if not all?) major browsers. It allows you to test the CSS (and other code) in websites, although you can not publish anything. I find it quite useful.

      If you happen to use either of these options, just make sure you post the code in your wikia's CSS when you are finished.

        Loading editor
    • I tried this and only the font style changed I couldnt get the color to change though can anyone help

        Loading editor
    • Please don't bump old threads, this is nearly 4 years old. Create a new thread on the forum boards and remember to link to your wiki

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.