FANDOM


  • You must be really good at CSS/Fandom code to do all the things that you've done on your profile. Well done. :) Also, good job on your high score. Maybe I should add that on my profile....

      Loading editor
    • Hey Hi1123, yeah, I'm quite experienced with the code FANDOM is using. My first edits were around March 2014 and I already loved finding out how to create all those boxes etc.. Also, thanks a lot!

      I can make some boxes and all the other stuff for you as well if you like.
      All you'd need to tell me is:
      • Background color(s): It can be a gradient as well. If so: Linear, radial or conic?
      • Shadow: Not necessary but can look beautiful.
      • Border: Width? Color(s)? Dotted, dashed, double, ridge etc?

      You could also give me additional information to make it more personalized. I can also teach you if you like. :)

        Loading editor
    • In response to your question. I would love for you to teach me how to make a box and expand stuff, if you can. I know a little bit about text color, but that's about it. Also, good job on your expand stuff too.  Could you also tell me how to add stuff to my message wall? Or is that an admin thing? 

        Loading editor
    • Also, I was thinking we could have a box on my profile page that is a gradient. The box would also have 4 different tabs. I'm not sure what the gradient would be. Probably because I don't know what would look best. Also, where/what is the shadow? Border would be a single width dark green, unless single is too thin. In that case, then it would be double. What is the border width on your boxes?

        Loading editor
    • This would be the border you requested.This is the border I am using on my profile. It is 3.5px thick and its “style” is called ridge.

      In my opinion, solid borders should be around 2px thick in order to be effective. I don’t know exactly how to teach you but I may try to answer every question you ask and to explain the different stuff when talking about boxes. Note that I don’t know everything about them either (only the basic stuff) and maybe I won’t be able to teach you the advanced stuff. :/

      Expanding stuff works quite easy. All you need to know is how to use some classes with <div>. It might sound complicated, but it’ll be simple if you have learned it. It also works with boxes (tables), but I’ll be talking about that later.
      This:
      <div class="mw-collapsible mw-collapsed">Title
      <div class="mw-collapsible-content">Text</div></div>

      Will turn to this:

      Title
      Text

      Now I’m gonna explain the different colors.

      • red and magenta: you will not be able to create anything without those.
      • green: with this, you will make your stuff collapsible (obviously).
      • yellow: if you add this to your code, the text will automatically be hidden and can be shown by clicking “Expand”. If you want to be your text be shown on default, just leave this out.
      • blue: This is the text you are trying to hide when when “Collapse” is clicked.

      I really hope that helps. I am truly sorry for my shitty way of explaining as I really suck at it, please don’t judge me for it :'). Anyway, I’m happy to answer any other questions.

        Loading editor
    • Thanks! How is ridge different than double?

        Loading editor
    • Is double two lines?

        Loading editor
    • Ridge is the opposite of groove. Ridge is like a 3D-border with the light coming from the top left corner while the light is coming from the bottom right corner when using groove. Double is just a double-lined border. Here’s an example:

      Ridge Groove Double



      By the way, this is a very simple table. In case you want to know how I made it, this is the code:
      {| style="border-collapse: seperate; border-spacing: 10px; width: 100%; text-align: center"
      |-
      | style="border: 5px ridge #fff; padding: 5px" | Ridge
      | style="border: 5px groove #fff; padding: 5px" | Groove
      | style="border: 5px double #fff; padding: 5px" | Double
      |}

        Loading editor
    • Hm. Question. What is shadow?

        Loading editor
    • This is the shadow of a box.


      This is the shadow of text.


      You can change its color and position (doesn’t need to be at the bottom right corner) and also how strongly it is blurred. You can even make it inset, like in the following box.

      inset shadow
        Loading editor
    • Do your boxes on your profile and message wall have a shadow?

        Loading editor
    • Yeah.

      This is the shadow of the box at the top (with the silver line) This is the shadow of the boxes in the middle / content
        Loading editor
    • Hm. How do you add a greeting message to your message wall?

        Loading editor
    • Also, I noticed your changed your profile page. Wait. What?

        Loading editor
    • You simply edit Message_Wall_Greeting:Hi1123. This is my message wall greeting (please do not edit it). You can view which code elements I used and try to understand what I wrote. :)

        Loading editor
    • Ok. Thanks! I've been trying for forever to add a message wall greeting. lol. 

        Loading editor
    • No problem. By the way, I just enabled the chat and I will be waiting for you to join if you have any questions (you don’t have to). It’s way easier to talk to each other in the chat than repeatedly leaving messages on this thread.

        Loading editor
    • Tab views

      This:
      <tabber>
      |-| Defly.io=I love defly.io! It’s a great game and my highscore is 50k.
      |-| Title2=Text2
      </tabber>

      Will turn into this:

      I love defly.io! It’s a great game and my highscore is 50k.

      Text2

        Loading editor
    • What? What does that do?

      Wait! That's awesome!

      Hover here.

        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