FANDOM

Iynque

aka "ink"

  • I live in USA
  • I was born on October 21
  • My occupation is Graphic Design
  • I am Male
A FANDOM user
  Loading editor
  • Thanks for source tiding my sig!

    21:24, April 28, 2016 (UTC)
      Loading editor
    • A FANDOM user
        Loading editor
  • Hello Iynque!

    I noticed that your subpages were causing quite a few broken templates. We try to keep that page clear of them, so rather than me messing around with your pages, do you think you would remove those templates and/or create them in order to keep that page clear? Thanks!

    Shyguy-emoticon.gifJoey (talk)

      Loading editor
  • I found out how to give credit to a Wikipedia page. Just go to this link to my other wiki, click on "Edit," and you'll see how I gave credit. :D

      Loading editor
    • A FANDOM user
        Loading editor
  • So I saw your wiki (which looks great by the way) and I wanted to know how to make customized headers, and any tips and/or warnings to go with it. Thanks in advance :)

      Loading editor
    • If you need any help acheiving something in particular, I can offer some advice, but I don't really have any general tips. I just imagine how I want it to look, inspect the element I want to change, and then write some CSS to change it. :D

      The video at File:Intro to CSS & Your Wiki Webinar shows how to use the web inspector on Chrome, but it's basically the same for Firefox and Safari too. That allows you to try out new styles live on the page, and if you come up with something you like, you can copy it and paste it into Special:CSS.

      My only warning would be to make sure the header content doesn't move and still functions the same way (tabs on top, a row of links, and then submenus where appropriate). Don't try to totally re-invent or rearrange things, or Wikia staff might not like it.

        Loading editor
    • Hey, thanks for responding! I meant headers such as ==this==, but what you offered me is more than enough. Another thing I wanted to ask is how you split the latest wiki activity into two columns (on your wiki). If you can answer that, I'd appreciate it!

        Loading editor
    • Oooooh, haha :D

      Those style are much simpler. One good tip: They are all formatted with header tags containing span tags: <h1><span>header</span></h1>

      For the multi-column layouts, I use some special CSS, but I'm still working out some bugs. It's neat though because it will make text format itself in up to 3 columns when the window is big enough, and as the window gets smaller, the columns collapse into one column automatically. On mobile, of course, it will just be one column, so you won't end up with stuff squished together in two columns on a cellphone 😃

      Here is the css:

      /* Multi-column layouts (MCL) */
          .MCL-2col {
              -webkit-column-count: 2;
              -moz-column-count: 2;
              column-count: 2;
          }
          .MCL-3col {
              -webkit-column-count: 3;
              -moz-column-count: 3;
              column-count: 3;
          }
          .MCL-2col, .MCL-3col {
              -webkit-column-gap: 20px;
              -moz-column-gap: 20px;
              column-gap: 20px;
          }
              /* Styles for when we have less than 1600px to work with */
              @media screen and (max-width:1600px) {
              .MCL-3col {
                  -webkit-column-count: 2;
                  -moz-column-count: 2;
                  column-count: 2;
              }
              }
                  /* Styles for when we have less than 1440px to work with */
                  @media screen and (max-width:1440px) {
                  .MCL-2col {
                      -webkit-column-count: 1;
                      -moz-column-count: 1;
                      column-count: 1
                  }
                  }
                      /* Styles for when we have less than 800px to work with */
                      @media screen and (max-width:800px) {
                      .MCL-3col {
                          -webkit-column-count: 1;
                          -moz-column-count: 1;
                          column-count: 1;
                      }
                      }
          .columnItem {
              display:inline-block;
              -webkit-column-break-inside:avoid;
              -moz-column-break-inside:avoid;
              -o-column-break-inside:avoid;
              -ms-column-break-inside:avoid;
              column-break-inside:avoid;
          }
          .MCL-3col h1, .MCL-3col h2, .MCL-3col h3, .MCL-3col h4, .MCL-3col h5, .MCL-3col h6,
          .MCL-2col h1, .MCL-2col h2, .MCL-2col h3, .MCL-2col h4, .MCL-2col h5, .MCL-2col h6 {
      	-webkit-column-span: all;
      	-moz-column-span: all;
      	column-span: all;
          }

      So, to create a columnar layout, surround the content in div tags with class="MCL-2col" or class="MCL-3col" and that's all you need to make gracefully collapsing columns. You can then add div tags with class="columnItem" to keep parts together (for example to keep a headline with text under it, to make sure you don't have the headline on the bottom of one column and the text on the top of the next column. …and lastly, there's a bit on the end ".MCL-3col h1, .MCL-3col h2," etc. That uses the column-span property, which makes any headlines ignore columns, span across them, and start the columns over again. You can easily disable that by deleting or commenting-out that part.

      So, for example…

      <!-- start of Multi-Column Layout -->
      <div class="MCL-3col">
          This text will be split across three columns. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque libero diam, pulvinar vel urna nec, porttitor feugiat dolor. Donec feugiat fringilla arcu tristique tristique. Aenean auctor purus at quam consequat sodales. Suspendisse nec molestie eros, at rutrum diam.

          <div class="columnItem"> This text will be kept together in a single column and not split until after the closing div tag. Aliquam scelerisque pellentesque sollicitudin. Nulla varius diam ut justo mattis suscipit. Curabitur a eros at mi dapibus adipiscing vel in turpis. Quisque rhoncus dignissim purus. Phasellus lobortis elit eget sapien cursus sodales. Etiam cursus sapien et felis sollicitudin vestibulum. Cras vehicula pretium leo, sollicitudin eleifend tellus fermentum eget. Suspendisse potenti. Phasellus leo mi, aliquam sed quam vitae, ullamcorper pharetra diam.
      </div>

      <h2>This header…</h2>
          …will span all columns and restart the columnar layout with new content. Mauris fringilla tellus ut felis semper, eget vulputate magna ornare. Proin lobortis malesuada nibh posuere malesuada. Mauris at tortor in mauris condimentum molestie at id tellus. Etiam aliquet euismod lacus, ac fermentum nibh blandit nec. Nam blandit suscipit nunc, egestas imperdiet magna. Morbi id ipsum interdum, interdum elit ut, imperdiet turpis. Fusce eu venenatis erat.

      </div><!-- end of Multi-Column Layout -->

      You can see examples of it working at w:c:iynque (3 columns, if your window is wide enough), and w:c:iynque:User:Iynque/Sandbox (2 columns, if your window is wide enough). Try making your window smaller to see the columns collapse into a single column.

      …and, again, there are some bugs that need to be worked out, but it mostly works, apart from splitting up content it shouldn't sometimes.

        Loading editor
    • This info is really useful! Thanks!

        Loading editor
    • A FANDOM user
        Loading editor
  • Hello again,

    I'm sorry to bother you, but looking at the explanations on your Iynque wiki, I couldn't help but notice the gorgeous banner-style Wikia header you'd set up. It's almost exactly what we wanted to achieve a while back, but we feared it might violate the TOU and binned it.

    Our designer hasn't been available lately, so I just wanted to ask your permission to adapt your banner style for our own site. We'd be sure to credit you at the top of our stylesheet if you allow us, and if not, we obviously respect that too.

    Cheers!

      Loading editor
    • You can use it, it's all in Wikia.css. However, I also worry that it violates the TOU. I figured it was fine for a 'personal' test wiki, just to see if it could be done. I think it would cover up some ads though—the kind that change the background—but since I've never gotten that type of ad to show, I've never been able to test it. If they do start showing up, I think I would immediately try to figure out a way to turn off the banner style when an ad changes the background. ...which would probably requiring detecting JS variables on load and then injecting new styles when background ads are displayed.

      heh, but you can go for it if you want. ;) 

        Loading editor
    • Thanks so much. :) I'll add a credit to you with our sincerest thanks.

      As for potential Wikia objections, if they complain, I'll certainly oblige them, but won't lose sleep over it. I've never seen any background ads here either and don't care to any time soon, so I'd prefer having to ask their forgiveness later on if necessary than to chase them for permission.

        Loading editor
    • A FANDOM user
        Loading editor
  • I have a web design project that requires someone who can actually make something look good. I have heard from people who heard from people that you are a good person to ask. Do you think that you can lend a hand to customize a wiki? I am at the point of pulling my hair out and giving up. If you would like to help it would be greatly appreciated.

      Loading editor
    • View all 6 replies
    • Okay, I'll see what I can come up with. 😉

        Loading editor
    • Thank you so much!

        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.