FANDOM


  • All these things I'd like to know how. I've seen on some wikias some colored text and users with custom roles which also causes their comments to have color. I've also seen many Wikia's with fancy titles. How do I enable these things? 
    PR Easter Event

    An example of the custom role with color.

      Loading editor
    • With regards to altering the appearance of the comments, I believe this will answer your question. As for the "custom roles", I am assuming you are referring to the box that says "Creator". Is that correct? Since you haven't linked to the wiki on which you saw that, I cannot say for sure. However, I suspect they achieved that by using something such as:

      .edited-by a[href$="<username>"]::after {
          content: "Creator";
          margin-left: 5px;
          padding: 5px 0px;
          background-color: yellow;
          border: 1px solid black;
          border-radius: 3px;
      }

      With regards to the "fancy" titles, are you referring to the wiki wordmark?

        Loading editor
    • Andrewds1021 wrote:
      With regards to altering the appearance of the comments, I believe this will answer your question. As for the "custom roles", I am assuming you are referring to the box that says "Creator". Is that correct? Since you haven't linked to the wiki on which you saw that, I cannot say for sure. However, I suspect they achieved that by using something such as:
      .edited-by a[href$="<username>"]::after {
          content: "Creator";
          margin-left: 5px;
          padding: 5px 0px;
          background-color: yellow;
          border: 1px solid black;
          border-radius: 3px;
      }

      With regards to the "fancy" titles, are you referring to the wiki wordmark?

      This is the link to the wikia I saw this on. http://r2da.wikia.com/wiki/Planned_Updates  

      Where do I enter all of that? 

      Also how do I use it? 

        Loading editor
    • Okay, so for the comments, this is what they use for the example you showed.

      .comments li[data-user="PlaceRebuilder"] .edited-by:after {
          content: "Creator";
          font-weight: bold;
          color: #000;
          background-color: #FFD800;
          border: 1px solid #7F6A00;
          border-radius: 2px;
          padding: 0 5px;
          margin-left: 3px;
      }
      .comments li[data-user="PlaceRebuilder"] blockquote {
          background: #DAD6BE  !important;
      }
      .comments li[data-user="PlaceRebuilder"] blockquote:after {
          border-color: transparent #DAD6BE #DAD6BE transparent !important;
      }
      .comments li[data-user="PlaceRebuilder"] blockquote div {
          background: transparent !important;
      }

      However, I do not recommend using "!important". Instead, try this version.

      .comments li.comment[data-user="PlaceRebuilder"] .edited-by:after {
          content: "Creator";
          font-weight: bold;
          color: #000;
          background-color: #FFD800;
          border: 1px solid #7F6A00;
          border-radius: 2px;
          padding: 0 5px;
          margin-left: 3px;
      }
      .comments li.comment[data-user="PlaceRebuilder"] blockquote {
          background: #DAD6BE;
      }
      .comments li.comment[data-user="PlaceRebuilder"] blockquote:after {
          border-color: transparent #DAD6BE #DAD6BE transparent;
      }
      .comments li.comment[data-user="PlaceRebuilder"] blockquote div {
          background: transparent;
      }

      You should replace values as you see fit. This should be places on your wiki's CSS page.

      As for the wordmark, just create a PNG that meets the size limits and upload it to the wiki.

        Loading editor
    • Sorry, that was me.

        Loading editor
    • Andrewds1021 wrote:
      Sorry, that was me
      Alright, I've added this to my CSS I'll test it now. 
        Loading editor
    • I added what you posted to my CSS and instead of PlaceRebuilder put my user. It didn't do anything, am I doing something wrong? 

        Loading editor
    • LeSlick wrote:
      I added what you posted to my CSS and instead of PlaceRebuilder put my user. It didn't do anything, am I doing something wrong? 

      Your username is cap-sensitive, so make sure you capitialized it properly in the code. Also, try viewing it then adding ?debug=1 at the end of the web address. Websites store cache to make re-loading faster, so you may be viewing an older version.

        Loading editor
    • Other than the potential caching of the CSS page itself (which in my experience doesn't happen), caching should not impact CSS (except for in-line CSS). Server caching, at least for Wikia, only pertains to rendering the MediaWiki markup. As such, changes to CSS/JS should take immediate effect upon reloading a page, even if the server is providing an older cached version. Caching by the browser, however, may cause a delay in seeing updated CSS.

        Loading editor
    • Andrewds1021 wrote:
      Other than the potential caching of the CSS page itself (which in my experience doesn't happen), caching should not impact CSS (except for in-line CSS). Server caching, at least for Wikia, only pertains to rendering the MediaWiki markup. As such, changes to CSS/JS should take immediate effect upon reloading a page, even if the server is providing an older cached version. Caching by the browser, however, may cause a delay in seeing updated CSS.
      Aaaaaaa
      will this work? 
        Loading editor
    • Andrewds1021 wrote:
      Other than the potential caching of the CSS page itself (which in my experience doesn't happen), caching should not impact CSS (except for in-line CSS). Server caching, at least for Wikia, only pertains to rendering the MediaWiki markup. As such, changes to CSS/JS should take immediate effect upon reloading a page, even if the server is providing an older cached version. Caching by the browser, however, may cause a delay in seeing updated CSS.

      You seem to really know your stuff and I'm struggling to figure this out. Is there any chance you could go into my CSS & Theme Designer and do it for me if I give you access? If you're willing to. 

        Loading editor
    • I am busy at the moment but I would be willing to be more hands-on later in the week (such as the weekend). However, I really think it is a better long-term solution for you to learn how to do things yourself. If I were to be more hands-on in helping you with the CSS, I would need to know which wiki this is for.

      That being said, here are my comments based on your image.

      1. I am a bit confused as to where you have put this CSS. If it is on a CSS page, then the lines above what we are working with are invalid. If not, then that is your first issue. The CSS would need to be put into a stylesheet (ie. on a CSS page).
      2. Make sure all your CSS rules are closed properly. It looks like you are missing some closing braces. Not doing this will either cause the CSS to not be applied or result in unexpected changes.
      3. The CSS I gave you initially is now redundant. Remove it.
      4. It is my bad for not catching this but there is actually an error in the CSS I copied from the other wiki. It should always be "::after", never ":after". Note the double versus single colons.
        Loading editor
    • Andrewds1021 wrote:
      I am busy at the moment but I would be willing to be more hands-on later in the week (such as the weekend). However, I really think it is a better long-term solution for you to learn how to do things yourself. If I were to be more hands-on in helping you with the CSS, I would need to know which wiki this is for.

      That being said, here are my comments based on your image.

      1. I am a bit confused as to where you have put this CSS. If it is on a CSS page, then the lines above what we are working with are invalid. If not, then that is your first issue. The CSS would need to be put into a stylesheet (ie. on a CSS page).
      2. Make sure all your CSS rules are closed properly. It looks like you are missing some closing braces. Not doing this will either cause the CSS to not be applied or result in unexpected changes.
      3. The CSS I gave you initially is now redundant. Remove it.
      4. It is my bad for not catching this but there is actually an error in the CSS I copied from the other wiki. It should always be "::after", never ":after". Note the double versus single colons.

      So what CSS should I use now? 

        Loading editor
    • .comments li.comment[data-user="LeSlick"] .edited-by::after {
          content: "Creator";
          font-weight: bold;
          color: #000;
          background-color: #FFD800;
          border: 1px solid #7F6A00;
          border-radius: 2px;
          padding: 0 5px;
          margin-left: 3px;
      }
      .comments li.comment[data-user="LeSlick"] blockquote {
          background: #DAD6BE;
      }
      .comments li.comment[data-user="LeSlick"] blockquote::after {
          border-color: transparent #DAD6BE #DAD6BE transparent;
      }
      .comments li.comment[data-user="LeSlick"] blockquote div {
          background: transparent;
      }
        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