FANDOM


  • Hello!

    Is there a way to change the font for the "edit" button on a Wiki? I'm trying to make it Raleway (all caps) on the Adele Wiki, but it's not working. Any suggestions?

    Thanks!

      Loading editor
    • Where does Raleway font come from?

        Loading editor
    • Adele frequently uses it. That's where I've seen it. I got it online because it's not a standard font on computers. 

        Loading editor
    • Add the code below to w:c:adele:MediaWiki:Wikia.css, anywhere after the Raleway font import:

      #ca-edit {
         font-family:Raleway;
         text-transform:uppercase;
      }

      After you've added it, bypass your browser's cache and the change(s) should show up. (I also have a working example on my test wiki, if you need a link.)

        Loading editor
    • Awesome! Thanks! Is there a way to do that on all buttons like that on a Wiki?

        Loading editor
    • The following CSS changes font of all buttons to Raleway and uppercase (I am quite sure it applies to all of buttons, but even so, if it misses any, let me know ^.^;):
      button,
      .wikia-menu-button,
      .wikia-button,
      input[type="submit"] {
        font-family:Raleway;
        text-transform:uppercase;
      }
      .wikia-menu-button li {
        font-family:Arial;
        text-transform:initial;
      }
        Loading editor
    • It appears to have worked! Thank you so much! =)

        Loading editor
    • Actually, never mind... The text is now capitalized, but on most pages, it's Arial font being used instead of Raleway.

        Loading editor
    • The reason I asked is because unless Raleway is a font delivered to the browser or loaded on the viewer's computer, it won't show up correctly. Which I guess you now see. If there is a Google font that looks like what you want you can use that. See Help:How to import Google Fonts.

        Loading editor
    • Fandyllic wrote: The reason I asked is because unless Raleway is a font delivered to the browser or loaded on the viewer's computer, it won't show up correctly. Which I guess you now see. If there is a Google font that looks like what you want you can use that. See Help:How to import Google Fonts.

      I'm seeng the font fine. They've imported it into their wiki's CSS (looks like its a Google font as well)

        Loading editor
    • Yeah the button seems to be showing the right font.

        Loading editor
    • The font is a Google font, and it's been imported. It shows up on the CSS page and a few other pages, but like, on the actual articles, it still looks like it's Arial font. Even if it is Raleway, the weight is clearly different. It's a lot lighter on the CSS page, which is how I want it because you can clearly see it's Raleway.

        Loading editor
    • AdorableDarling wrote:

      The following CSS changes font of all buttons to Raleway and uppercase (I am quite sure it applies to all of buttons, but even so, if it misses any, let me know ^.^;):
      button,
      .wikia-menu-button,
      .wikia-button,
      input[type="submit"] {
        font-family:Raleway;
        text-transform:uppercase;
      }
      .wikia-menu-button li {
        font-family:Arial;
        text-transform:initial;
      }


      Hey bud, try this instead, Adorable Darling gave you script that turns it to Arial. :P

      button,
      .wikia-menu-button,
      .wikia-button,
      input[type="submit"] {
        font-family:Raleway !important;
        text-transform:uppercase !important;
      }
      .wikia-menu-button li {
        font-family:Raleway !important;
        text-transform:initial !important;
      }
      

      Hope that helps, bruv!

        Loading editor
    • Adele Addict wrote: The font is a Google font, and it's been imported. It shows up on the CSS page and a few other pages, but like, on the actual articles, it still looks like it's Arial font. Even if it is Raleway, the weight is clearly different. It's a lot lighter on the CSS page, which is how I want it because you can clearly see it's Raleway.
      I think I may have found the issue. ^^; It seems to me that the Raleway font is being overridden by the default font in certain buttons. Try replacing the CSS I posted before with this:
      .wikia-menu-button,
      #WikiaPage .wikia-button,
      button,
      .button,
      input[type="submit"],
      .wikia-menu-button.secondary.combined {
        font-family:Raleway;
        text-transform:uppercase;
      }
      .wikia-menu-button li {
        font-family:Arial;
        text-transform:initial;
      }
      Slayingthehalcyon wrote: Hey bud, try this instead, Adorable Darling gave you script that turns it to Arial. :P
      button,
      .wikia-menu-button,
      .wikia-button,
      input[type="submit"] {
        font-family:Raleway !important;
        text-transform:uppercase !important;
      }
      .wikia-menu-button li {
        font-family:Raleway !important;
        text-transform:initial !important;
      }
      Hope that helps, bruv!
      Just to clarify, it is not right.
      The second code in CSS I posted does not change the font of buttons to Arial, and applies only to the dropdown list of button rather than the button itself - it actually is to prevent the font of button dropdown lists font from changing to Raleway and uppercase. It, hence, is not really what is causing the problem for Adele Addict, I believe.
        Loading editor
    • AdorableDarling wrote:

      ............. Just to clarify, it is not right.
      The second code in CSS I posted does not change the font of buttons to Arial, and applies only to the dropdown list of button rather than the button itself - it actually is to prevent the font of button dropdown lists font from changing to Raleway and uppercase. It, hence, is not really what is causing the problem for Adele Addict, I believe.

      I just now noticed the LI that's a my bad! I first noticed the Arial and drew a quick connection to what I thought was the issue without really stopping to read what the actual issue was. :)

      !important Is "important" to use whenever you are changing something that is all over the wiki, otherwise you're going to end up with the wiki's natural look being displayed instead of what you want.

        Loading editor
    • I tried that, and it still does not appear to be working for me.... Can someone else look at the site and the CSS and see if I'm doing something wrong?

        Loading editor
    • Hmm, odd. It seems to be working just fine for me now. This is how the font in buttons appears to me:

      Buttons with Raleway font

      Is this not how it is supposed to appear?

        Loading editor
    • works for me - edit button text is in Raleway as intended

        Loading editor
    • Adele Addict wrote: I tried that, and it still does not appear to be working for me.... Can someone else look at the site and the CSS and see if I'm doing something wrong?

      Have you cleared your cache yet?

      append ?action=purge to the end of your URL to see if it has changed.

        Loading editor
    • Purging a page doesn't clear your browser cache, it updates server-side stuff like the parser cache etc.

        Loading editor
    • TK-999 wrote: Purging a page doesn't clear your browser cache, it updates server-side stuff like the parser cache etc.

      it tends to work, the cache needs to be cleared for certain though.

        Loading editor
    • The screenshots posted by AdorableDarling are how it's supposed to look, and it does show up, but on normal pages, the "Edit" button is still Arial for me. I'm going to keep playing with it because I don't know what the problem is, especially if it's fine for everyone else....

      It appears fine on MediaWiki pages, but standard pages still show Arial. I don't understand what's wrong. Is there somewhere other than MediaWiki:Wikia.css that I'm supposed to put the code?

        Loading editor
    • Adele Wiki Edit Button Screenshot

      Here's a screenshot of what I'm seeing on normal pages.

        Loading editor
    • What is your editor set to? It appears the edit button changes based on your editor type and you may have not covered all the types.

        Loading editor
    • I'm pretty sure it's set to Visual Editor with the option of Classic. How do I cover all types?

        Loading editor
    • It would be best to get something like FireBug for Firefox or use the CSS inspection tools on whatever browser you use and look at the id of the buttons you want to change.

      You should remove this unless you know why it's there:

      .wikia-menu-button li {
       font-family:Arial;
       text-transform:initial;
      }
      

      This will set some buttons to Arial.

      For the font being set by id, you currently only have:

      #ca-edit {
        font-family:Raleway;
        font-weight:lighter;
        text-transform:uppercase;
      }
      

      When you should probably have:

      #ca-edit, #ca-ve-edit, #ca-viewsource {
        font-family:Raleway;
        font-weight:lighter;
        text-transform:uppercase;
      }
      

      Notice how I added other id options. I'm not quite sure what other options there are, but that should cover most.

        Loading editor
    • That worked! Thank you so much for your help! =) To everyone that contributed to this, thank you guys SO much. I really appreciate it!

        Loading editor
    • One more question.... (Sorry, I know you're probably sick of me at this point!)

      Some of the other buttons (not "edit" buttons) are in Arial. I noticed this specifically on the "Edit Mobile Main Page," "Start a Chat," and "Add Photo to Gallery" buttons. Is there something that will fix this?

      Thanks!

        Loading editor
    • Fandyllic wrote: You should remove this unless you know why it's there:
      .wikia-menu-button li {
       font-family:Arial;
       text-transform:initial;
      }
      
      This will set some buttons to Arial.
      I doubt it is capable of effecting buttons, though - notice the
      li
      in it: .wikia-menu-button li applies to the li elements (dropdown lists, specifically) of buttons only, not the buttons themselves, as I said before. I tested it before posting it, and it does not turn any button to Arial font.
      However, Adele Addict can go ahead and remove it if he has no problem with the dropdown lists of buttons turning to uppercase Raleway font, of course. :)
      Adele Addict wrote: One more question.... (Sorry, I know you're probably sick of me at this point!)

      Some of the other buttons (not "edit" buttons) are in Arial. I noticed this specifically on the "Edit Mobile Main Page," "Start a Chat," and "Add Photo to Gallery" buttons. Is there something that will fix this?

      Thanks!
      Based on the screenshot you posted, it seems to me that perhaps the font does appear as Raleway to you, but is bold, not light like it appears to me. I am not sure why so, if this is the case.
      Try replacing my CSS with this:
      .wikia-menu-button,
      #WikiaPage .wikia-button,
      button,
      .button,
      input[type="submit"],
      .wikia-menu-button.secondary.combined {
        font-family:Raleway;
        text-transform:uppercase;
        font-weight:lighter;
      }
      I do not know if it will work for you with this, but do give it a try. ^^;
        Loading editor
    • ^ I tried that, AdorableDarling. It didn't appear to work, unfortunately. The "Edit" button is fine, but it's every other button is either Arial or bolded Raleway (it looks more like Arial to me). Is there a code similar to what Fandyllic posted that would work for all of the other buttons?

        Loading editor
    • I presume this is not the case, then. ^^; I noticed that the Raleway font looks fairly similar to Arial when bold, so I suspected the bold weight of font to be the case with you, but looks like not. I am more quite confused why Raleway does not appear for you while it appears just fine to me.
      Once more, can you try one more CSS?
      #CuratedContentTool,
      div.chat-join a,
      a.wikia-photogallery-add {
        font-family:Raleway;
        font-weight:lighter !important;
      }
      It specifically targets "Edit Mobile Main Page", "Start a Chat", and "Add Photo to Gallery" buttons, as you said these still have Arial font. After applying this code, please let me know whether or not these buttons still are in Arial font.
      Also, one more thing: just for a test, can you try changing Raleway from my CSS to some other font to see if that one works on buttons? You know, such as Courier or Comic Sans MS.
        Loading editor
    • First of all, thank you so much for helping me with this. I really do not understand why this isn't working and I appreciate all of the time and effort you've put into this. 

      I tried your new CSS and it didn't work, so I tested it with a few different fonts and none of those worked either. 

      Do you have any other ideas?

        Loading editor
    • I was reading here. Is there any chance that the buttons I'm referring to are secondary buttons? I mean... Is there a way to change all buttons that aren't "edit" buttons at once? 

        Loading editor
    • Are you trying to get all buttons to have the Raleway font and uppercase letters? If so, this is what I could come up with. All of the selectors were taken from this post - Thread:483307#6.

      Also, I had to import the Raleway font into MediaWiki:Common.css for this code to work on my test wiki. Not sure if you will have to do the same.

      /* Base selectors (All buttons: no hover, no press) */
      a.wikia-button,
      .wikia-single-button a,
      .wikia-menu-button,
      input[type="submit"],
      input[type="reset"],
      input[type="button"],
      .button,
      button {
          font-family: 'Raleway', Arial, Helvetica, sans-serif;
          text-transform: uppercase;
      }
       
      a.wikia-button:hover,
      .wikia-single-button a:hover,
      .wikia-menu-button:hover,
      input[type="submit"]:hover,
      input[type="reset"]:hover,
      input[type="button"]:hover,
      .button:hover,
      button:hover {
          font-family: 'Raleway', Arial, Helvetica, sans-serif;
          text-transform: uppercase;
      }
       
      /* Base selectors (pressed) */
      a.wikia-button.active,
      a.wikia-button:active,
      .wikia-single-button a.active,
      .wikia-single-button a:active,
      .wikia-menu-button.active,
      .wikia-menu-button:active,
      input[type="submit"].active,
      input[type="submit"]:active,
      input[type="reset"].active,
      input[type="reset"]:active,
      input[type="button"].active,
      input[type="button"]:active,
      .button.active,
      .button:active,
      button.active,
      button:active {
          font-family: 'Raleway', Arial, Helvetica, sans-serif;
          text-transform: uppercase;
      }
       
      /* Secondary button selector (no hover, no press) */
      a.wikia-button.secondary,
      .wikia-single-button a.secondary,
      .wikia-menu-button.secondary,
      input[type="submit"].secondary,
      input[type="reset"].secondary,
      input[type="button"].secondary,
      .button.secondary {
          font-family: 'Raleway', Arial, Helvetica, sans-serif;
          text-transform: uppercase;
      }
       
      /* Secondary button hover */
      a.wikia-button.secondary:hover,
      .wikia-single-button a.secondary:hover,
      .wikia-menu-button.secondary:hover,
      input[type="submit"].secondary:hover,
      input[type="reset"].secondary:hover,
      input[type="button"].secondary:hover,
      .button.secondary:hover {
          font-family: 'Raleway', Arial, Helvetica, sans-serif;
          text-transform: uppercase;
      }
       
      /* Secondary button active */
      a.wikia-button.secondary.active,
      a.wikia-button.secondary:active,
      .wikia-single-button a.secondary.active,
      .wikia-single-button a.secondary:active,
      .wikia-menu-button.secondary.active,
      .wikia-menu-button.secondary:active,
      input[type="submit"].secondary.active,
      input[type="submit"].secondary:active,
      input[type="reset"].secondary.active,
      input[type="reset"].secondary:active,
      input[type="button"].secondary.active,
      input[type="button"].secondary:active,
      .button.secondary.active,
      .button.secondary:active {
          font-family: 'Raleway', Arial, Helvetica, sans-serif;
          text-transform: uppercase;
      }
        Loading editor
    • I copied and pasted that code and it didn't change anything. I also tried importing Raleway into MediaWiki:Common.css and that didn't do anything, but that being said, the page indicated that I couldn't import fonts there. 

      Do you have any other ideas? You can check out the MediaWiki:Common.css page here and the MediaWiki:Wikia.css page here.

        Loading editor
    • You are missing semicolon(s) on the Common.css, that tends to be a reason CSS is not loading...

      Most wikis now, will usually only load what's on Common.css for all of the wiki, try putting the the CSS on the Common.css page.

        Loading editor
    • Where specifically am I missing semicolons? I don't see any places where semicolons are missing....

        Loading editor
    • Adele Addict wrote: Where specifically am I missing semicolons? I don't see any places where semicolons are missing....

      /***** CSS placed here will be applied to all skins on the entire site. *****/
      
      /* Mark redirects in Special:Allpages and Special:Watchlist */
      .allpagesredirect {
         font-style: italic;
      }
      .allpagesredirect:after {
         color: #808080; content: " (redirect)"
      }
      .watchlistredir {
         font-style: italic;
      }
      button,
      .wikia-menu-button,
      .wikia-button,
      input[type="submit"] {
        font-family:Raleway !important;
        text-transform:uppercase;
      }
      .wikia-menu-button li {
        font-family:Arial;
        text-transform:initial;
      }
      #ca-edit {
         font-family:Raleway;
         text-transform:uppercase;
      }
      

      Should be:

      /***** CSS placed here will be applied to all skins on the entire site. *****/
      
      /* Mark redirects in Special:Allpages and Special:Watchlist */
      .allpagesredirect {
         font-style: italic;
      }
      .allpagesredirect:after {
         color: #808080; content: " (redirect)";
      }
      .watchlistredir {
         font-style: italic;
      }
      button,
      .wikia-menu-button,
      .wikia-button,
      input[type="submit"] {
        font-family:Raleway !important;
        text-transform:uppercase;
      }
      .wikia-menu-button li {
        font-family:Arial;
        text-transform:initial;
      }
      #ca-edit {
         font-family:Raleway;
         text-transform:uppercase;
      }
      
        Loading editor
    • I updated it with your code and it didn't work. Are there any semicolons missing on my MediaWiki:Wikia.css page?

        Loading editor
    • Adele Addict wrote: I updated it with your code and it didn't work. Are there any semicolons missing on my MediaWiki:Wikia.css page?

      Not that I saw.

        Loading editor
    • Well, then I don't know what to do... I cannot get this to work. Does anyone have any more potential solutions for changing the font on buttons other than "Edit"?

        Loading editor
    • The CSS syntax doesn't seem to be the problem if you run it through the W3C validator: https://jigsaw.w3.org/css-validator/#validate_by_input

      You never said what browser you are trying this in.

        Loading editor
    • I'm trying this in Chrome, but I've also tried it in Safari and Internet Explorer and it doesn't seem to work there either. 

      Update: Also, I just tried on Microsoft Edge, and it appears to work there. That is the only browser where it is working so far, though. 

        Loading editor
    • Try Firefox.

        Loading editor
    • All of the buttons and drop-down menus for the buttons appear in Raleway for me in Firefox, Chrome, and my tablet's browser.

        Loading editor
    •   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.