FANDOM


  • I'd like to know how to add information on the featured article section the main home page of a wikia. I can't find a template for this in source mode. 

      Loading editor
    • Could you please link to this main page? How you add information will depend on how they are added to the page.

        Loading editor
    • https://midtownmadness.fandom.com/wiki/Midtown_Madness_Wiki. I've just become an admin for this wikia. 

        Loading editor
    • You can't find a template for this because there is no template for it. The content for the featured article section has been placed directly on the main page.

        Loading editor
    • How do you change it or add information?

        Loading editor
    • You need to edit the main page itself. It is the content after the line that has:

      ==Featured article==
      

      but before the line that has:

      ==Featured Video==
      
        Loading editor
    • Okay, thank you. That's helpful. 

        Loading editor
    • But wait, what's with the featured article template on the side of the mainpage? Can you add or put information there?

        Loading editor
    • You mean like the one on this page? That is a standard module and the contents are automatically determined by a script Fandom runs. You cannot customize it.


      Edit:

      Oh. I see what you mean now. There are two different "featured article" sections on the main page; one in the left column and one in the right column. I was referring to the one in the right column this whole time. The one in the left column is a similar situation.

        Loading editor
    • So you can't remove it either?

        Loading editor
    • See my edit.

        Loading editor
    • I justed added a header like you showed me, but the featured article section has a image template on the side. I'm talking about removing that.

        Loading editor
    • Alright. Let's slow down so we can all be on the same page. When I talked about the headers, those were already things on the main page. What you want to do is find them and then edit the content between them. I did not mean that you should add the header. I didn't realize you had just added another "featured article" which is why I was confused.

        Loading editor
    • Ohhhh, I found it, thanks. My bad. 

        Loading editor
    • I didn't realise that the featured section was below the source editor page. I missed it completely, thank you. 

        Loading editor
    • I have another question. Can you add graphs on infoboxes?

        Loading editor
    • And how do you create color boxes?

        Loading editor
    • What kind of graphs and color boxes are we talking about? Do you have any examples on other wikis you can show me?

        Loading editor
    • They're line graphs. I made one using a chart and using hex codes to add colors. But I'm not sure how to them on an infobox. It's on my midtown madness wiki. I'm recording the density of something and displaying it using a chart but I was wondering if you could do this on fandom too. Because I saw it on wikipedia. It was colorbox|color=#B2EC5D of something like that to create color boxes.

        Loading editor
    • Like this: colorbox|color=#B2EC5D

        Loading editor
    •   Loading editor
    • I see. Regarding the color box, you could just copy it from Wikipedia. However, it is also fairly simple to just create your own as well.

      <span style="{{#if: {{{2|}}} | background-color: {{{2}}};}}{{#if: {{{3|}}} | color: {{{3}}};}}{{#if: {{{4|}}} | border: 1px solid {{{4}}};}}">{{{1|}}}</span>
      

      Then you would use it like this:

      {{ColorBox|content|background color|text color|border color}}
      

      I am still a bit confused regarding the graphs. Is this something that is already on your wiki that you are trying to move into infoboxes? If so, could you link to an example of its current use? If not, how are you creating the graphs?

        Loading editor
    • -
        Loading editor
    • look at this in source mode.

        Loading editor
    • Okay. I think I get the idea. Maybe it is just me, but I am pretty sure those are bar graphs, not line graphs. Perhaps something like this?

      <infobox>
        <group>
          <header>Bar Graph</header>
          <data source="param1">
            <label>Param1</label>
            <format><div style="background-color: green; height: 100%; width: {{{param1}}}%;"></div></format>
            <default><div style="background-color: green; height: 100%; width: 0%;"></div></default>
          </data>
          <data source="param2">
            <label>Param2</label>
            <format><div style="background-color: green; height: 100%; width: {{{param2}}}%;"></div></format>
            <default><div style="background-color: green; height: 100%; width: 50%;"></div></default>
          </data>
          <data source="param3">
            <label>Param3</label>
            <format><div style="background-color: green; height: 100%; width: {{{param3}}}%;"></div></format>
            <default><div style="background-color: green; height: 100%; width: 100%;"></div></default>
          </data>
        </group>
      </infobox>
      



      Edit:

      Alternatively, you could just take your current method and stick it into a navigation tag. However, you would need to play around with the width to make sure it fits in the infobox.

      <infobox>
        <navigation>
      {| border="0" cellspacing="1" cellpadding="1" style="width:100%;" class="article-table"
      ! scope="row"|Traffic Density
      | style="background:#00FF00; color:#000; font-family:helvetica;" |
      | style="background:#00FF00; color:#000; font-family:helvetica;" |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |}
        </navigation>
      </infobox>
      
        Loading editor
    • Yeah this is a bar graph. I was adding statistics to race cars since this wikia is full of them. I'm adding information reguarding statistics on horsepower, mass, durability, and top speed. The bar graphs will show this information. 

        Loading editor
    • Do you know how to make naviboxes that appear at the bottom of the wikia page? And I was wondering what does the Template Loop message means. 

        Loading editor
    • Navboxes are just templates. Are you having trouble with a particular aspect of navboxes?

      A template loop is when a template trancludes itself. This can either be direct or indirect via tranclusion of a different template that transcludes the first template either directly or indirectly. For instance, if Template1 trancludes Template2, Template2 transcludes Template3, and Template3 transcludes Template1; then using any of those templates will result in a template loop. If a template is not part of a loop but trancludes a template that is, then that also causes a template loop. For example, if Template4 trancludes Template2 from the precious example, then Template4 would also cause a template loop.

      The most common cause of accidental template loops is the lack of noinclude tags.

        Loading editor
    • Do you know what the spawn code for the navboxes are? 

        Loading editor
    • And when a picture says, opps, this item is no longer available what does it mean?

        Loading editor
    • I added a picture of something and the next day it said "Oops, this item is no longer available, but now that you're here, explore <wikiname> wiki!"

        Loading editor
    • I am not sure what you mean by "spawn code". The only purpose of template types is to categorize them and, in some cases, determine if they should be shown on mobile. With the exception of portable infoboxes, templates to not have special code; you can use the same code as you would for any other type of template, article, blog, etc.

      The message probably means exactly what is says. Can you link to the page with this image? Perhaps I can hep figure out why it is missing.

        Loading editor
    • The picture's back, so never mind. But In what cases does this warning message appear?

      And Let me explain what I'm trying to do: I want to create a navbox at the bottom of the Midtown Madness wiki. This fandom database is filled with races, cars, and locations. I've seen navboxes at the bottom of different wikias to help people find information that they are looking for in a certain catagory. 

      This is the source code that I used to create the navboxes. Will this make them appear?


        Loading editor
    • I think it showed Template:Loop last time.

        Loading editor
    • Regarding the image, this is the first time I have heard of this. If I had to guess, I would say it was probably just a temporary issue with something on the backend.

      As for the navbox, it seems to work fine here. Are you still getting the template loop warning on your wiki? Where did you try using it?

        Loading editor
    • I just used this template by putting its entity code. I encountered the Template:Loop error again. 

        Loading editor
    • What do you mean transcludes itself?

        Loading editor
    • I put the code in the template page where people can modify infoboxes. 

        Loading editor
    • Okay. I think I see the issue. But first, let me clarify what "transclusion" means. "Transclusion" is the act of including something or part of something in something else. If you want to know more about transclusion as it pertains to computer science as a whole, you can have a look at the Wikipedia page. MediaWiki (the platform used to host Fandom wikis) uses this concept with regards to page content. You can read this page to learn more about transclusion as it pertains to MediaWiki. Templates are simply pages in a particular namespace. The intent of the namespace is to have pages that are intended to be transcluded on other pages. There isn't any code that can be used on templates only and pages in other namespaces can be trancluded as well. So, basically, the only thing that makes templates unique as a page type is the namespace.

      Now on to the navbox problem. There are two distinct parts to trancluding a page (template or otherwise). First, you need to determine the content of the page. Second, you need to determine where that content should be transcluded. The code you have been placing on Template:Navbox is not code for determining page content but code for transcluding the content.

      So what you are telling MediaWiki is that you want Template:Navbox to contain the content of Template:Navbox. Okay, what is that content? Well to find out, let's look at Template:Navbox. Oh, it is the content of Template:Navbox; what is that? The content of Template:Navbox... I assume you have spotted the problem by now.

      If you want to create nested navboxes for your main page, you need to create a new template. Let's call it "Template:MainPageNavbox". Then your contents of Template:MainPageNavbox would be what you have been trying to change Template:Navbox to. Something like this from your previous post.

      {{Navbox
       | name = Navbox
       | title = Navbox
       | bodyclass = hlist
       
       | group1 = Group 1
       | list1 = List 1
       
       | group2 = Group 2
       | list2 = {{Navbox|child
        | group1 = Group 2.1
        | list1 = List 2.1
       
        | group2 = Group 2.2
        | list2 = {{Navbox|child
         | group1 = Group 2.2.1
         | list1 = List 2.2.1
       
         | group2 = Group 2.2.2
         | list2 = List 2.2.2
         }}
       
        | group3 = Group 2.3
        | list3 = List 2.3
        }}
       
       | group3 = Group 3
       | list3 =
       * List 3
       * List
       * List
       }}
      
        Loading editor
    • Okay.

        Loading editor
    • I had some questions about the graphs.  When I mentioned using these graphs in an infobox that I asked you about, this is for a car. I'm trying to edit the results of these graphs so that they would show different amounts of horsepower, mass, durability, and speed. I added the entity code in the page for how the infobox template layout should be. If I change any of these results, would they be different? Would it show the results in the code used on the template layout page?

        Loading editor
    • I am sorry but could you please explain what you mean by "entity code"? You are the first person I have talked with that has used this term and I am still not sure what it is referring to.

      If you use the first option from #25 (or something like it), you provide the "amount" as a percent. For example, if I wanted the bar for param1 to be at 100%, I would enter "100" as the value of param1.

        Loading editor
    • I added this code in this page:
      Data code
       
        Loading editor
    • Ah. I see now. Hang on while I make some changes.

        Loading editor
    • Car info
      This is where the information comes in: On this inbox. How do I change this so that it shows the suitable amount?
        Loading editor
    • Sorry, "infobox," not inbox.

        Loading editor
    • What did you do?

        Loading editor
    • Okay. I edited the template. Try something like this:

      {{Car
        | horsepower_game = 75
        | mass = 20
        | durability = 80
        | top_speed = 95
      }}
      
        Loading editor
    • It works! Thanks!

        Loading editor
    • Now I'd like to know how you'd create these graphs without an infobox.

        Loading editor
    • Perhaps something like this. By separating the bars from the rest of the graph, you can easily add as many bars as you want to a given graph.

      Template:Bar_Graph

      {| class="{{{class|wikitable}}}" style="width: {{{width|100%}}};{{{style|}}}"
      |+ {{{caption|Bar Graph}}}
      {{{bars|}}}
      |}
      

      Template:Graph_Bar

      |-
      ! {{{label|}}} || style="width: 100%; background-image: linear-gradient(to right, {{{color|green}}} {{{percent|0}}}%, transparent {{{percent|0}}}%);" |
      

      On a Page

      {{Bar Graph
        | caption = Car Stats
        | bars = {{Graph Bar
                   | label = Horsepower
                   | percent = 75
                 }}
                 {{Graph Bar
                   | label = Mass
                   | percent = 25
                 }}
                 {{Graph Bar
                   | label = Durability
                   | percent = 50
                 }}
                 {{Graph Bar
                   | label = Top Speed
                   | percent = 87.5
                   | color = red
                 }}
      }}
      

      Expected Output

      Car Stats
      Horsepower
      Mass
      Durability
      Top Speed
        Loading editor
    • It's not for car stats, but thank you.

        Loading editor
    • No problem. Just set the caption to whatever you want.

        Loading editor
    • Yup/. I just wanted to use something better rather than filling charts will colors in order to make them resemble graphs. 

        Loading editor
    • Wait, you can make the graphs show amount to right, just not in percentage, in out of 10. 

        Loading editor
    • Revised Versions

      Template:Graph_Bar

      
      |-
      ! {{{label|}}}
      | style="width: 100%; background-image: linear-gradient(to right, {{{color|green}}} calc(100% * {{{value|0}}} / {{{max_value|10}}}), transparent calc(100% * {{{value|0}}} / {{{max_value|10}}}));" |
      | style="white-space: nowrap;" | {{{value|0}}} / {{{max_value|10}}}
      

      On a Page

      {{Bar Graph
        | caption =
        | bars = {{Graph Bar
                   | label = Label1
                   | value = 75
                   | max_value = 100
                 }}{{Graph Bar
                   | label = Label2
                   | value = 25
                   | max_value = 25
                 }}{{Graph Bar
                   | label = Label3
                   | value = 5
                 }}{{Graph Bar
                   | label = Label4
                   | value = 20
                   | color = red
                 }}{{Graph Bar
                   | label = Label5
                   | value = -5
                 }}
      }}
      

      Expected Output

      Label1 75 / 100
      Label2 25 / 25
      Label3 5 / 10
      Label4 20 / 10
      Label5 -5 / 10
        Loading editor
    • Maybe this would be even better?

      Template:Graph_Bar

      
      |-
      ! {{{label|}}}
      | style="text-align: center; width: 100%; background-image: linear-gradient(to right, {{{color|green}}} calc(100% * {{{value|0}}} / {{{max_value|10}}}), transparent calc(100% * {{{value|0}}} / {{{max_value|10}}}));" | {{{value|0}}} / {{{max_value|10}}}
      

      Expected Output

      Label1 75 / 100
      Label2 25 / 25
      Label3 5 / 10
      Label4 20 / 10
      Label5 -5 / 10
        Loading editor
    • Okay, thanks. I can use this for infobox graphs too?

        Loading editor
    • Wait, It's not showing.

        Loading editor
    • Code 2
      This is what I typed, could you help me?
        Loading editor
    • It might work in infoboxes but I did not design it with that in mind; so it might look weird. This goes back to the difference between using a template a creating a template. The code I provided as "Template:Bar_Graph" and "Template:Graph_Bar" are supposed to be on template pages, not the article itself.

        Loading editor
    • Is there a code for article pages and not infoboxes? And I wanted to add numbers in infoboxes as captions.

        Loading editor
    • When I said I wanted to create these graphs without infoboxes I meant represent stats on article pages.

        Loading editor
    • How do you create bar graphs on article pages?

        Loading editor
    • For the infobox, I made some changes. The values should now be on a scale from 1 to 10. Give it a try and let me know what you think.

      Infoboxes and templates are not the same thing; although infoboxes are typically used via templates. It is possible to have an infobox that is not a template and it is possible to have a template that is not an infobox. Here are non-infobox templates you can use to make the graph.

      Template:Bar_Graph

      {| class="{{{class|wikitable}}}" style="width: {{{width|100%}}};{{{style|}}}"
      |+ {{{caption|Bar Graph}}}
      {{{bars|}}}
      |}
      

      Template:Graph_Bar

      
      |-
      ! {{{label|}}}
      | style="width: 100%; background-image: linear-gradient(to right, {{{color|green}}} calc(100% * {{{value|0}}} / {{{max_value|10}}}), transparent calc(100% * {{{value|0}}} / {{{max_value|10}}}));" |
      | style="white-space: nowrap;" | {{{value|0}}} / {{{max_value|10}}}
      

      Assuming you add those two templates to your wiki, this is what you would put on an article page.

      {{Bar Graph
        | caption =
        | bars = {{Graph Bar
                   | label = Label1
                   | value = 75
                   | max_value = 100
                 }}{{Graph Bar
                   | label = Label2
                   | value = 25
                   | max_value = 25
                 }}{{Graph Bar
                   | label = Label3
                   | value = 5
                 }}{{Graph Bar
                   | label = Label4
                   | value = 20
                   | color = red
                 }}{{Graph Bar
                   | label = Label5
                   | value = -5
                 }}
      }}
      

      Alternatively, you could try to use EasyTimeline. However, I have never used it before so I would probably not be able to offer much help with that.

        Loading editor
    • I'm good, thanks. That's all for today.

        Loading editor
    • Do you both the Template:Bar_graph and the Template:Graph_bar together? And then add the template at the bottom? I'm confused.

        Loading editor
    • You don't have to reply right now if you don't want to. I can expect an answer by tomorrow.

        Loading editor
    • You use both templates together on the article page. More specifically, you use Template:Graph_Bar as the input for the "bars" parameter of Template:Bar_Graph.

        Loading editor
    • Bar Graph
      |-
      ! 
      | style="width: 100%; background-image: linear-gradient(to right, green calc(100% * 0 / 10), transparent calc(100% * 0 / 10));" |
      Template:Bar Graph
      
        Loading editor
    • Like this?

        Loading editor
    • Can you show me the complete code?

        Loading editor
    • And thanks for fixing the infoboxes, it looks much better.

        Loading editor
    • I went ahead and added the templates for you. I also wrote some documentation that provide an example of how to use it on a page.

        Loading editor
    • Thanks!

        Loading editor
    • I had a question: When you're creating reference lists. Can you add archived webpages?

        Loading editor
    • I haven't used the reference list feature myself but I would imaging so. Are you having issues using an archived page in the list?

        Loading editor
    • There are references on wikipedia that I would like to use on FANDOM.

        Loading editor
    • Do you mean you want to cite Wikipedia as a reference or that Wikipedia has references you want to copy to your wiki? If the latter, could you link to the page and describe which references you want to copy?


      Edit:

      If you haven't already, perhaps reading Help:Cite would help.

        Loading editor
    • Reference list
      This is the reference list. It's from Midtown Madness wikipedia page. There are 37 total. Do you know if I could include this list?
        Loading editor
    • Yes, you should be able to. But how you do it depends on how you intend to use it. Wikipedia generates the list using the citation extension I linked to. The citation list at the end of a page contains only citations that are actually used on the page. If you want to have the full list of 37 sources regardless of which ones are actually used, you will need to just create a list template.

        Loading editor
    • Hello. I'm a new admin for Flight 29 down wiki now. I'd like to know how to change the font for the Popular Pages and the Recent wiki activity sidebars. Can you show me how to do that? I already figured it out for the content in the articles. 

        Loading editor
    • Take your current CSS rule and change it to this:

      .WikiaArticle,
      .WikiaRail {
          font-family: Aloha;
      }

      However, it looks like your font isn't working anyways. Are you sure you imported it correctly?

        Loading editor
    • How is it done exactly?

        Loading editor
    • I tried the code in CSS and it isn't doing anything. I changed the font for the article pages as I wanted but it isn't changing the sidebar information. 

        Loading editor
    • Mountain, perhaps find something here: https://community.fandom.com/wiki/Forum%3AFonts (it’s an old post though)

        Loading editor
    • This doesn't help me, sorry. I just want to know how to change the font like the way Andrewds1021 showed me. 

        Loading editor
    • .WikiaArticle,
      .WikiaRail {
          font-family: Aloha;
      }
      

      This is the way I was shown. I typed this in CSS but the font does not change to Aloha. This is in Flight 29 Down wiki. I want to change the font of the Popular Pages and the Recent Wiki Activity sections to match the font of the content in the articles. 

        Loading editor
    • I think this should help better: On the “Your Collection” module, click “@IMPORT”. This will display a snippet of code that includes the syntax, @import url('https://fonts.googleapis.com/css?family=Font+Name'); where Font+Name will be the name of the font you chose, with spaces in the name replaced with the plus sign. Ignore the <style> and </style> lines, but copy the @import line of code and paste it at the top of your community's CSS page. After the cache updates, which can take up to several minutes, your new font will be ready to use.

      From Help:How to import Google Fonts

        Loading editor
    • Okay, but Andrewds1021 showed me how to add the code in the post I just sent. I don't want to add any fonts. 
      CSS

      This picture I just added is the code that I put on the CSS editor to change the font of Flight 29 Down's wiki. It worked on the pages and I want to change it for the sidebars. Could you show me what code I should add in order to change the font for the sidebar information?

        Loading editor
    • Does the .WikiaRail input code change the font for the information on "recent wiki activity" and "popular pages" sections?

        Loading editor
    • Oh never mind it works.

        Loading editor
    • Oh I just need to ask a question to Andrewds1021, is he there?

        Loading editor
    • Yes, I am here. I was just composing a long response. I will paste it below.


      That (what UpnCbs06 posted) works but only if the font is available from Google Fonts. While I did find several fonts that included "Aloha" in their name, I did not find one that matched exactly.

      Devices don't magically know what a font is. Something has to tell it what Times New Roman, Ariel, Wing Dings, Helvetica, Cambira, etc. look like. The same goes for your font. This information is stored in font files (of which there are several types). If a website does not provide this file, then the browser relies on the files stored on the viewer's device. If the device does not have the requested font, it doesn't work.

      There is no definitive list of fonts that all devices must have. However, there are some that are so common they are referred to as web-safe fonts. If you use one of these fonts, chances are it will be okay. If you are using a font that is not on this list, chances are you will need to supply the font file.

      When supplying a font file, you are responsible for ensuring that your use is permitted by the license of the font file. Some hosts allow you to directly access the file via a URL. This is the case with Google Fonts. If the font is available from one of these hosts, then you can use a similar method to that described on the help page UpnCbs06 linked to; except replacing the example URL with whichever URL is appropriate for that host.

      If the host does not provide a direct URL, you will need to download the file from the host and then upload the file to your wiki. By default, Fandom wikis do not permit the upload of font files. Therefore, if you need to upload your font file, you will need to first ask staff to enable support for whichever file type your font file uses. Once the file has been uploaded, you will need to use @font-face to import the font.

        Loading editor
    • Thank you. I just need to ask you a question. In this post:
      Post

      You said: "However, it looks like your font isn't working anyways. Are you sure you imported it correctly?" What did you mean by that?

        Loading editor
    • When I used the "Aloha" font, it changed the font to other than the one that the default font new wikis come with is used in. The one before the admin adds a theme to it. By the way, what font is that?

        Loading editor
    • The default font used by Fandom is Helvetica. By setting font-family like you did, you are telling the browser to use your font instead. However, if your font is not available, the browser will use its own default font. This default font is potentially different for each user. Although, in practice, it usually just varies by browser/device. It is possible that you have Aloha installed on your computer. In that case, it would work for you but not for anyone else.

        Loading editor
    • Ok. Is it possible to show the font that I'm using for the FANDOM page on every computer when someone opens this page?

        Loading editor
    • I've seen different wikis that use their own font rather than the default Helvetica font that already comes with the page. 

        Loading editor
    • Yes. But the specifics of what you need to do depend on where you got the font from. Do you remember where you got the font from? Or did it come pre-installed on your device?

        Loading editor
    • So far it's from a word document. But I'll let you know tomorrow.

        Loading editor
    • One question. Since I'm an admin, do you know how to set one user to "Inactive" on the header?

        Loading editor
    • The "inactive" tag is typically added using UserTags. You can find installation and use instructions on that page but, of course, feel free to ask for help if you need it.

      If the font is something you have been using in word documents on your computer, then it is probably a font that came with your computer (or that was downloaded a while ago). You will need to locate the font file on your computer. What operating system are you using (examples: Windows 10, Ubuntu 18.04, MacOS 10.14 (Mojave)).

        Loading editor
    • You need to install javascript on the computer? And the font, I'll get back to you on that.

        Loading editor
    • The JS doesn't go on your computer, it goes on your wiki. The installation section tells you what you need to do.

        Loading editor
    • Does the installation code have to written in CSS for it to work? Where is the ImportJS page?

        Loading editor
    • I am not entirely sure which wiki you are adding this to. However, assuming it is the Flight 29 Down Wiki, you would add the following on this page:

      dev:UserTags/code.js
      

      This part is neither CSS nor JS; it is just plain text. The "inactive" tag should be added to any user that has not edited within the last 30 days. If you want to customize this number, then you will need to use your wiki's JS pages to change the configuration settings.

        Loading editor
    • This is for Midtown Madness wiki. A user wanted this action done. 

        Loading editor
    • How do I access the JS pages? What do I type on the search bar?

        Loading editor
    • In that case, you need to add the line here.

      Your JS page is here. However, it looks like that wiki does not have the JS review process enabled yet. To have it enabled, you will need to contact staff. Once it is enabled, the right rail should look similar to this. That being said, you shouldn't need the JS page unless you are unhappy with the default settings.

        Loading editor
    • I activated the JS page, how do I change the user's status to inactive?

        Loading editor
    • @ Mountain4567 use InactiveUsers in the ImportJS section of the wiki (depending on which one you want it on).

        Loading editor
    • All done, thank you!

        Loading editor
    • InactiveUsers has been superseded by UserTags. The separate page is maintained primarily for wikis that are still using the old script.

        Loading editor
    • Okay, thanks! It's all taken care of.

        Loading editor
    • Hello, I'm editing this page on Flight 29 Down Wiki. https://flight29down.fandom.com/wiki/Abby_Fujimoto

      I have trouble keeping the navbox at the bottom. Yeah, I only spaced it down on the source page, but how do I make sure it says at the bottom?

        Loading editor
    • I looked at this forum: https://community.fandom.com/wiki/Thread:1498617 

      But it didn't work when I tried it.

        Loading editor
    • Fixed.

        Loading editor
    • I'm also creating a new navbox on episodes https://flight29down.fandom.com/wiki/Template:Episode_(Navbox)

      But the header isn't stretching all the way to the end like it did with Characters. 

        Loading editor
    • Do you know you the stretch the header all the way?

        Loading editor
    • @ mountain, do you mind if I copy the template code for a second? I’m going to try something.

        Loading editor
    • Sure!

        Loading editor
    • Fixed.

        Loading editor
    • Thanks! And how do I change the font color for the section Season One from black to white?

        Loading editor
    • Use the font-color tag and change the color name
        Loading editor
    • You set the color via the style attribute like you did for the "header".


      Edit:

      What is the font-color tag?

        Loading editor
    • It didn't do anything.

        Loading editor
    • It didn't change the color to the hex code I wrote.

        Loading editor
    • UpnCbs06
      UpnCbs06 removed this reply because:
      Not working right
      01:59, April 18, 2020
      This reply has been removed
    • It's generating a color different from the hex code used for the header. The font color isn't changing either. Could you help me fix it?

        Loading editor
    • And how do you the move the tag to the center top?

        Loading editor
    • Okay. I took a look at the changes you tried to make and I think this is a good opportunity to slow down and review the differences between template parameters, HTML attributes, and CSS properties. When you do something like this

      | align=right width=250 | Cell Content
      

      you are setting HTML attributes. I noticed you tried setting bgcolor this way. bgcolor is not an HTML attribute. Rather, it is a commonly used template parameter name. To change the color of things, you need to use the HTML style attribute. This attribute accepts CSS properties.

      | align=right width=250 style="background-color: red; color: blue; height: 100px;"
      

      In this example, align, width, and style are HTML attributes while background-color, color, and height are CSS properties. Now let's say you changed it to this

      | align=right width=250 style="background-color: {{{bgcolor|red}}}; color: blue; height: 100px;"
      

      Now we have introduced the template parameter bgcolor which will allow the users to set the color of the background via the template call as opposed to having all instances of the template use the same color.

      Does that make sense?

      A side note, we really should be setting width via CSS property instead of HTML attribute but both should work.

        Loading editor
    • Okay, I understand. Is there also a way to make "Season One" a column rather than a row? I want to put it on the top instead of on the side. 

        Loading editor
    • Probably colspan?

        Loading editor
    • The colors work now, now I want to move the sub-header (e.g. Season 1, 2) to the the top rather than the side. Is there any way to do that?

        Loading editor
    • Yes. Make it its own row.

        Loading editor
    • What do you mean?

        Loading editor
    • I think I figured it out, but the stretching like with thhe header?

        Loading editor
    • I got it! Never mind.

        Loading editor
    • Hello I just needed to ask a question. The colorbox template that you mentioned about a while ago. I'm having trouble creating it. Like the way you showed me, could you help me?

        Loading editor
    • I mean, I mentioned wanting to create a colorbox in Midtown Madness FANDOM. I mentioned it in this window back on March 18. 



      https://midtownmadness.fandom.com/wiki/Template:Colorbox

        Loading editor
    • The problem I have is that it's not spawning. 

        Loading editor
    • Spawning?

        Loading editor
    • I added the code in the link I just posted and nothing's happening. I'm trying to create a color box. 

        Loading editor
    • Mountain4567
      Mountain4567 removed this reply because:
      nothing in here
      00:21, April 23, 2020
      This reply has been removed

    • This is the post from March 18, I wanted to know how to create a color box so I can add this template on infoboxes. 

      I entered this in the link that I posted in the comment above and nothing's happening. It's not showing anything on the template page. 

      I see. Regarding the color box, you could just copy it from Wikipedia. However, it is also fairly simple to just create your own as well.

      
      

      Then you would use it like this:

      Template:ColorBox
      

      I am still a bit confused regarding the graphs. Is this something that is already on your wiki that you are trying to move into infoboxes? If so, could you link to an example of its current use? If not, how are you creating the graphs?

        Loading editor
    • Never mind I figured it out. 

        Loading editor
    • I figured out the color box using the Templates Fandom, but is there any way to change the text color inside the color box? In case there is white or black background, I want to change the font color so people can see the text. 

        Loading editor
    • So can I change the text so that it's white font over black background and black font over white background?

        Loading editor
    • Never mind. Could you help me with something else?

        Loading editor
    • What do you need help with now?

        Loading editor
    • If I'm bothering you, then I can stop asking.

        Loading editor
    • I was just gonna ask if you could help me with documentation for templates.

        Loading editor
    • I added the entity code for the color boxes but it isn't showing. Look at the source page.



      https://midtownmadness.fandom.com/wiki/Template%3AColorbox

        Loading editor
    • I don’t know how to help with that. I guess you should wait for Andrew.

        Loading editor
    • Ok. What exactly are you in charge of?

        Loading editor
    • Mostly wikitext stuff and some templates (Navbox, userboxes and some custom templates for wikis).

        Loading editor
    • Uh. So what is it you need help with now? It looks like you mentioned a few different things since I last saw this thread but some of them you appear to have figured out on your own.

        Loading editor
    • It seems like the day after I send a post I always find the answer. Feels kinda weird. 

      I've figured out how to create the templates by copying and pasting from other fandoms and putting them on here. But I need to know how to add documentation on template pages, so that any new fandom users can figure out how to add information when they need to. And the color template was copied from wikipedia, just like you suggested in your previous thread. But it does not show up on the page when I added it in source mode. 



      In this page, nothing shows up:

      https://midtownmadness.fandom.com/wiki/Template%3AColorbox


      However, in source mode, this code is being used: https://midtownmadness.fandom.com/wiki/Template:Colorbox?action=edit


      P.S: So anything from wikipedia, can be added on FANDOM, like these templates?

        Loading editor
    • It isn't "showing" because the default color scheme camouflages it with the page background. If you try it with a non-default color scheme, then you will see it.

      In general, copying tempaltes from Wikipedia is not recommended. In order starting with the most commonly applicable:

      1. They often involve a maze of nested transclusions and module invokations. All of these would need to be copied for the template to work properly.
      2. The versions of extensions (and even the core MediaWiki platform) can differ between Wikipedia and Fandom. This means that Wikipedia may be using a new function or option that is not available on Fandom. Sometimes this is due to Fandom using an older release and other times this is due to Fandom customizing the version it uses. For instance, Fandom has removed several "standard" functions from the Scribuntu extension. In case you don't know, the Scribuntu extension is what allows wikis to use Lua modules.
      3. Wikipedia uses some extensions that Fandom does not. If the template uses one of these extensions, then it won't work on Fandom.

      You use Template:Documentation. You can inspect that template as an example of how to use it.

        Loading editor
    • Okay, One thing, people put screenshots on Fandom all the time. If the screenshot is from a home video or DVD. Is that allowed? Does it violate the FBI piracy warning or FANDOM standards in any way?

        Loading editor
    • I am not sure about that, however if you feel like being precautionary with uploads, you can always apply a copyright template on the file page.

        Loading editor
    • Like This?

      This file is copyrighted. The individual who uploaded this work and first used it in an article, and subsequent persons who place it into articles, assert that this qualifies as fair use of the material under United States copyright law.

      Who else can I ask about this?

        Loading editor
    •   Loading editor
    • Bug
      If you install a video with an ogv file and this warning shows, do you recommend that I should upload it?

      I mean, would it affect the site in any way?

        Loading editor
    • And that color template is fixed, thank you for your help.

        Loading editor
    • That is a warning to let you know that the file doesn't meet certain security standards. I don't know what those standards are but apparently MediaWiki thinks it's worth warning you about. That said, that doesn't necessarily mean the file is bad; it just means MediaWiki can't verify that it isn't bad. As long as you trust the source, you are probably fine.

        Loading editor
    • Ok, the source does not damage the site in any way?

        Loading editor
    • I can't say. What I meant by "source" was where you got the video from. If you trust the site/person you got the video from, then you are probably fine. However, I wouldn't trust random sites on the internet. Unless I got the video from a well-known and reputable brand, then I probably wouldn't risk it.

        Loading editor
    • I mean the ogv file.

        Loading editor
    • Oh I think I figured out the problem. It was probably beacause it was in mp4 format and not in ogv format, which is not the acceptable file type. 

        Loading editor
    • Yeah, that will do it.

        Loading editor
    • Ok, thank you for your help. And good evening. 

        Loading editor
    • I'm trying to create character portals on the home page: How do I align then in rows and columns? And how do I add images?



      https://flight29down.fandom.com/wiki/Flight_29_down_Wiki#Characters

        Loading editor
    • This is the first time I have seen this particular arrangement. Where did you get it from? Typically multiple characters are placed into a single table; thus the rows and columns. If you copied the template from some other wikis, there may be another template that you haven't copied yet.

        Loading editor
    • Never mind. I figured it out. But I added a image in this template and it isn't showing. 

        Loading editor
    • Do you why that is?

        Loading editor
    • Perhaps we are looking at different pages? I see only one image specified and it doesn't exist on the wiki. The other portals don't have an image specified so they try to use the default, which doesn't exist on your wiki either.

        Loading editor
    • Here is the link:



      https://flight29down.fandom.com/wiki/Flight_29_down_Wiki

      The picture I added isn't working on put it on Lex Marin. I put it on his character portal and nothing is showing. 

        Loading editor
    • Okay. Well, we are looking at the same page then. This is the image name I see when I view the page.

      File:v1.bjsyODMzMTU7ajsxODQwODsxMjAwOzIzMzY7MzUwNA.jpeg
      

      There is no such image on your wiki. Which image are you trying to add and how are you adding it?

        Loading editor
    • V1.bjsyODMzMTU7ajsxODQwODsxMjAwOzIzMzY7MzUwNA
      This is the image I'm trying to upload. I've added it on the wiki. In the character's image gallery.
        Loading editor
    • I meant, are you adding the image to the template call via source mode or visual mode? I edited in source mode and it seems to work; sort of. It looks like there are some alignment issues.

        Loading editor
    • Thanks. The picture is showing now. How do you adjust the alignment?

        Loading editor
    • I made the easiest change. The issue was that the tables had their height restricted while the image had it's width set (making it as tall as needed to reach that width). I have changed the image to match the height restriction of the table. Note that there may still be some issues with width if the image has a landscape orientation. However, it looks like the ones you are using aren't. If you have one that is, we can make further adjustments to accommodate that.

        Loading editor
    • Thanks, how did you change the height?

        Loading editor
    • The file link syntax allows you to specify the width, height, or both of the image. If only one is specified, the other is scaled as necessary. If both are specified, then the image is scaled to fit within an imaginary box with the specified dimensions.

      <!-- no restrictions -->
      [[File:Wiki-wordmark.png]]
      <!-- width limited to 150px -->
      [[File:Wiki-wordmark.png|150px]]
      <!-- height limited to 20px -->
      [[File:Wiki-wordmark.png|x20px]]
      <!-- both width (150px) and height (20px) limited
      (height as the limiting dimension) -->
      [[File:Wiki-wordmark.png|200x20px]]
      <!-- both width (150px) and height (65px) limited
      (width as the limiting dimension) -->
      [[File:Wiki-wordmark.png|200x65px]]
      

      Wiki-wordmark

      Wiki-wordmark

      Wiki-wordmark

      Wiki-wordmark

      Wiki-wordmark

        Loading editor
    • Actually, I knew this. Does this work with character portraits?

        Loading editor
    • I did it like this for a image:

      | image = S-l1600.jpg | 290px

      And nothing is happening.

      Here is the link: https://flight29down.fandom.com/wiki/Template:Media_Portraits?action=edit

        Loading editor
    • Or could you show me how to zoom in on these images?

        Loading editor
    • Zoom in? I don’t know what you’re trying to do.

        Loading editor
    • Zoom in on a image in a character portrait. 

        Loading editor
    • I’m not sure if Fandom supports that.

        Loading editor
    • How do you adjust the size of an image in a character portrait?

        Loading editor
    • Change the px value I guess.

        Loading editor
    • Does not work. Where's Andrewds 1021?

        Loading editor
    • Wait for him.

        Loading editor
    • I mentioned this in a thread that I just posted. I changed the image by doing that and nothing happened.

        Loading editor
    • Seems like you should setup a support contract with Andrewds1021... talk about exploitation.

        Loading editor
    • Sorry, I didn't mean to offend anyone. I'm just trying to fix something. I need someone's help.

        Loading editor
    • Mountain4567
      Mountain4567 removed this reply because:
      already have one.
      19:23, May 1, 2020
      This reply has been removed
    • What do you mean by exploitation? 

        Loading editor
    • Fandyllic's comment was a joke; I think.

      The way Template:Character_Portal is written, the height of the table cell is adjustable but the dimensions of the images are not. Since you don't appear to be using custom cell heights, I just adjusted the hard-coded image height to match the default cell height.

      If you want to couple the image and cell heights so that they always match, we can do that. However, that means you will always have to use "px" as the units. The image link syntax only accepts "px".

      If you would rather be able to specify them separately, with the image height specified as you are trying to do, we can do that instead (we can't do both). However, you would need to slightly change how you use the template. Because your are currently trying to specify a vertical bar character as literal input to a template. However, because that character is used to delimit different template parameters, using it directly like that will get misinterpreted. Assuming we go down this route, you would need to do this instead of what you are currently trying.

      | image = S-l1600.jpg {{!}} 290px
      

      Give it some thought and let me know which way you want to go.

        Loading editor
    • Only half a joke...

        Loading editor
    • Ok, thanks, this is helpful.:) I just feel really excited and really hyped about creating a FANDOM database that looks just like everyone else's. With its own theme, and adding information that people will enjoy. 

        Loading editor
    • I have a problem: In this link below: these icons do not link to their respective pages, they only go to the character catagory page. Do you know why this is?

      https://flight29down.fandom.com/wiki/Template%3AMedia_Portraits

        Loading editor
    • First, you don't need to use interwiki syntax to link to pages on your own wiki. Second, there are two links in the template: actorarticle and chararticle. You are setting the former which is used for the small text in the lower-right corner. It is the latter that is used for the image and, if present, the name above the image.

      Have you decided how you want to control the image height? Or are you fine with the way things are?

        Loading editor
    • Thanks, the image size is fine just the way it is. The second thingL If you don't need the interwiki syntax to link page then how to you link these buttons to their respective pages? And how do you use Category pages as links?

        Loading editor
    • To link to articles on the local wiki:

      {{Portalportrait
       | bgcolor      = #3366CC
       | actorcolor   = #ffa
       | nochar       =
       | image = The plane.jpeg
       | chararticle = Flight 29 Down (TV Series)
       | actorarticle = Flight 29 Down (TV Series)
       | actor        = Show
      }}
      

      It is the same as any other internal link on an article page. If you haven't, perhaps you might want to read Help:Links/Wikitext. It explains the different types of links.

      I don't quite understand what you mean "use Category pages as links". Could you clarify?

        Loading editor
    • Thanks. I want link these portraits to their respective Catagory pages.

      For example:

      https://flight29down.fandom.com/wiki/Category:Images

        Loading editor
    • In that case, you still don't have to use the interwiki syntax. What you would do is something like this.

      {{Portalportrait
       | bgcolor      = #3366CC
       | actorcolor   = #ffa
       | nochar       =
       | image = The plane.jpeg
       | chararticle = :Category:Images
       | actorarticle = :Category:Images
       | actor        = Show
      }}
      

      Here is an example that works here on CC.

      [[:Category:Adoption_requests]]
      

      Category:Adoption_requests

      See the extra ":" in front of the namespace? You can do the same for images as well.

      [[:File:Wiki-wordmark.png]]
      

      File:Wiki-wordmark.png

        Loading editor
    • Okay, Thank you!

        Loading editor
    • It works, thanks!

        Loading editor
    • I was wondering. Can you copy timeline templates from wikipedia and put them on a fandom database?

        Loading editor
    • Like maybe a Gantt chart?

        Loading editor
    • I am not sure. It depends on how Wikipedia makes the timelines. That said, you should be able to use EasyTimeline on Fandom wikis.

        Loading editor
    • Woooooaaaaahhh buddy you're taking too many steps. Just click on the gallery in the Featured Articles and make sure to edit the link in all the "photos".

        Loading editor
    • So I looked into EasyTimelines on FANDOM Developers wiki. It needs a software called Lua. Do you need to download this or does it come with the wikia? And if so? How do you enable it?

        Loading editor
    •   Loading editor
    • Does it work in CSS? And what namespace do I have to type it in?

        Loading editor
    • I believe you are mistaken. Is this the page you were looking at? That is indeed a Lua module but it is used instead of EasyTimeline. It is not EasyTimeline. EasyTimeline is a MediaWiki extension that should already be enabled on your wiki. The page I linked to in my previous post should have a description on how to use it.

        Loading editor
    • Which post is this?

        Loading editor
    •   Loading editor
    • Graph
      I want to create this graph on that timeline page:
        Loading editor
    • I was referring to post #215. What you have on the test page is a mix of EasyTimeline and the Lua alternative from the dev wiki. You cannot mix the two solutions; they are completely separate. The timeline tags are used with EasyTimeline, not the Lua module from teh dev wiki.

        Loading editor
    • Ok, well could you help me fix it? There are error messages that I do not know how to resolve. I can't find the information I'm looking for in developers.

      https://flight29down.fandom.com/wiki/Timeline_of_Events

        Loading editor
    • Well, which do you want to use? Do you want to use EasyTimeline or the Lua module?

        Loading editor
    • I want to create a graph that looks like the one in the picture that I posted above. It's a Lua module , so I want to use that. 

        Loading editor
    • Looks good! Thanks! I can take over from here.

        Loading editor
    • Hold on. How do you modify infomation? Because it says "Script Error" when I used the code. 

      https://dev.fandom.com/wiki/Global_Lua_Modules/Timeline

        Loading editor
    • Importing the Module

      I have already done this for you. However, for future reference, you need to import the module before you can use it. If the module is a global Lua module from the dev wiki (as is in this case), then you can just create the corresponding page and use require(). For example, if the module name is "Example", create page "Module:Example" with the following content.

      return require("Dev:Example")

      In this case, the page you want to create it Module:Timeline. If the module is not a global Lua module from the dev wiki, then you need to copy the entire code from the source to your wiki.

      Specifying Data

      The data is specified in the format described in the documentation and shown by the example. However, what you were not doing correctly was putting it on the right page. The data is stored not on the page where the timeline is displayed but as another Lua module. I have moved the example data to Module:Timeline/Example. You create a new module for each timeline you want.

      Displaying the Timeline

      After specifying the data as mentioned above, you display it by placing this where you want the timeline to be displayed.

      {{#invoke:Timeline|create|DataSource}}
      

      Replace "DataSource" with the name of the module you specified the data in (without the preceeding "Module:"). Since I moved the example data to Module:Timeline/Example, the example timeline is displayed by doing this.

      {{#invoke:Timeline|create|Timeline/Example}}
      

      This allows you to display the same timeline in multiple places despite having only a single copy of the data.

        Loading editor
    • Thanks!

        Loading editor
    • Uh. How to change the data is a bit hard to explain if you don't understand how Lua works. I'll give it a try though.

      The example starts with return. What does this do? It gives whatever follows it to whichever function called the module.

      So what is it returning? In this case, we are using it to return the data needed to construct the timeline.

      Okay, but how is that data represented? It is represented using what Lua refers to as "tables". If you are familiar with other programming languages, you may be more familiar with the some other term such as "struct", "object", or "list". A table contains properties. Each property has a key (i.e. name) that is used to access it's value. Here is an example table.

      {
          prop1 = 5,
          prop2 = "hello"
      }

      This table has two properties: prop1 and prop2. The value of prop1 is 5 and the value of prop2 is the string (i.e. text) "hello". Values can also be boolean values (i.e. true or false) or other tables.

      Timeline has a specific manner in which the table is to be structured in order to correctly indicate the relevant data. A summary of the various table properties can be found here. In the documentation, "root object" refers to the table returned by return.

      Does this make sense?

        Loading editor
    • Ok 
      Flight time
      Can I show you what I'm trying to do? The show Flight 29 Down is about teens who are stranded on an island. The timeline will show the days (on top) in which the events of each episode will take place in. The titles on the bars are episode names in which the episode takes place. This is a screenshot from a timeline concept I'm trying to create using a powerpoint doc. (I hope this is okay, since I can't upload an actual powerpoint file as as image to the right) I just hope this gives you a better understanding of what I'm trying to do. Is it possible to create a timeline chart like this?
        Loading editor
    • Unfortunately, I don't think it is possible to change the position of the axis labels. So the numbers will have to be on the bottom and the episode titles will have to be to the left.

        Loading editor
    • That's fine. How do I make it show days instead of years on the bottom of the graph? I've altered the timeline using the page below:

      https://flight29down.fandom.com/wiki/Module:Timeline/Example

      I've tried to do that. But I need help with the rest. Somehow when I copy and paste it it seems to have some errors. 

        Loading editor
    • Unfortunately, it looks like the module is not capable of adjusting what gets used as major grid lines. The use of years as the major grid lines and months as the minor grid lines is all hard coded into the module. You could try to contact the author and ask if they can add this capability to the module. However, I don't know how long that would take if they agreed to do it.

      Which errors are you seeing. I don't see any. If you are talking about how only two of the bars are visible, that is because your time span for the entire plot is too small.

        Loading editor
    • I'll explain the errors in a bit.

        Loading editor
    • Thank You

        Loading editor
    • This is the error: 
      Error script
      What does this mean?
        Loading editor
    • And this one: 
      Error graph
      Unexpected symbol "=" near '{'.

      Because it seems like this "=" sign should be part of the code. 

        Loading editor
    • That is odd. I am not getting those errors and I don't see anything wrong with the code. These are recent screenshots, right?

        Loading editor
    • Yes, they're from today when I tried to add new code. But what does this error above mean? With the unexpected symbol?

        Loading editor
    • Oh. So this happened when you tried to add code; which you didn't save? That means you have mismatched braces. Similar to how each wikitext table starts with "{|" and ends with "|}", each Lua table must start with "{" and end with "}". If you are unsure which part of your new code is causing this, you can go ahead and save the changes and I will take a look.

        Loading editor
    • I tried to save it with an error and it showed an inscription in red. I copied and pasted the bar graphs in order to create a new bar for the next line. It caused problems as it showed the "x" in row 34 like in the picture that I posted above. I think I see the problems now.

        Loading editor
    • The graph works fine now, thanks. I've left a message for the author to ask about the graph's grid lines. 

        Loading editor
    • Wordmark-problem
      I have a problem. I made a new wordmark for the wiki. It's made from GIMP and it's scaled to 250 by 65 (which is acceptable) but it's scrunched up. It there any way to scale it to fit it like the way it's supposed to on wikia?

      Actually, I figured it out. It turns out you can adjust the canvas size on GIMP. 

        Loading editor
    • Glad you figured it out. Though I don't understand how it could have been 250x65 already and yet the answer was to change the canvas size. Oh well. All's well that ends well I guess.

        Loading editor
    • I was wondering. Are you able to create interactive maps on FANDOM? Using Extension:ImageMap from MediaWiki, are you able to use a image of a map, Not a Google Map, but an image of a map from a tv show or game, and add clickable links to each of the sections that are highlighted? 

      Mmmap2
        Loading editor
    • Yes, that is the whole purpose of ImageMap.

        Loading editor
    • It works just like the graph doesn't it? You have to create this template by adding it on another page? Can you add like a marker on the map so that people can click on it? If so, how to you do that?

        Loading editor
    • It works like EasyTimeline (the extension), not like Module:Timeline (the dev wiki module you are using). The instructions can be found here. Like EasyTimeline, I have never use this myself; but the instructions seem straightforward at a glance.

        Loading editor
    • So if I were to create a page called: Module:Map, this code is put on here:

      return require("Dev:Map")
      

      And on this page: Module:Map/Example:

      Error: not enough coordinates for shape at line 3

      ​​​​​Would this work? (I'm still trying to understand how these templates work, I think it would work with practice)

        Loading editor
    • No, that is not how you use it at all. You don't use Lua at all for this extension. Here is an example.

      <imagemap>
      File:Wiki-wordmark.png
      rect 0 0 125 65 [[Help:Links]]
      circle 187.5 32.5 32.5 [[Help:Images]]
      default [[Help:Contents]]
      </imagemap>
      
      Wiki-wordmarkHelp:LinksHelp:Images
      About this image

      Place that on the page where you want the image map. If you want to place the same image map on multiple pages, place it on a template page and then place the template on the article pages.

        Loading editor
    • Okay. I figured it out. It works just by inputing this data in.  How do these parameters work? I have a hard time figuring them out.

        Loading editor
    • In my example, there are 3 types of lines. The first line specifies the image. The second type of line (placed as the last line in my example) specifies the default link. This link is used for any portion of the image where a link has not been specified. The third type of line is that part that lets you split the image into regions. The link comes last in the line and the type of shape comes first in the line. The numbers beteween the shape name and the link are the coordinates used to specify the location/size of the shape. The units are pixels and the coordinate system is based on the original image. Let's say you have a 500x500 image, then 0 0 would indicate the top left corner and 500 500 would indicate the bottom right corner. This is independent of the display size of the image, which is set on the first line.

        Loading editor
    • Mountain4567
      Mountain4567 removed this reply because:
      Not needed
      21:15, May 17, 2020
      This reply has been removed
    • In these infoboxes, is there a way to only make information columns invisible, so that it when there is no information: they just don't appear on the main page? I'm talking about Opponents, and laps. 

      Infobox

      And are you able to change the size of the infoboxes?

        Loading editor
    • Well, that isn't a portable infobox so changing the size is as simple as changing the table's width. That said, you probably want to use a portable infobox since the layout is pretty close and portable infoboxes will hide unused fields; which is what you want. You can still hide unused fields in non-portable infoboxes but you have to code that into the wikitext.

        Loading editor
    • What code do I use to hide unused fields? And why are they considered portable infoboxes? Can you change the size of that and make it simliar to this infobox?

        Loading editor
    • To hide unused fields in a non-portable infobox (what you currently have), you do something like this.

      {| class="wikitable"
      ! Name
      ! Age
      {{#if: {{{job|}}} |
      ! Profession
      }}
      |-
      | {{{name|}}}
      | {{{age|}}}
      {{#if: {{{job|}}} |
      {{!}} {{{job}}}
      }}
      |}
      

      Portable infoboxes use a Fandom-custom tag system. Fandom's custom extension then takes the information provided by these tags and formats the infobox differently depending on the type of device. This allows editors to write just one simple piece of wikitext while also allowing users to view a version of the infobox that has a "pleasant" appearance on whichever device they are using. If you go to the template page, you will notice a "Migrate this infobox" box in the right rail. Click that button to generate a autogenerated draft of the portable infobox. You can always edit the draft before finalizing the migration. You can read more about portable infobxes as Help:Infoboxes. As for the width, your current template is 260px wide. Portable infoboxes are 300px wide by default; so pretty close. If that isn't close enough for you, you can always change the width of portable infoboxes via site CSS.

        Loading editor
    • I added the </br> attibute to move it into place but it's at the right, how do I move it to the center?

      Are you able to hide headers too along with unused fields? Does it work like this?

      https://en.wikipedia.org/wiki/Template:Infobox#Hiding_headers_when_all_data_fields_are_hidden

        Loading editor
    • Rather than using br, you should probably just use a second row. As for centering the text, you need to place "text-align: center" on the cells, not the rows. For example:

      |- style="font-size:95%;" valign="top"
      | style="text-align: center;" | '''Checkpoints''' {{#if: {{{opponents|}}} | {{!!}} style="text-align: center;" {{!}} '''Opponents'''}}
      |-
      | style="text-align: center;" | {{{checkpoints}}} {{#if: {{{opponents|}}} | {{!!}} style="text-align: center;" {{!}} {{{opponents}}}}}
      
        Loading editor
    • What about the header?

        Loading editor
    • Sorry. I forgot about that. See this revised wikitext.

      |-
      ! colspan="3" style="background-color: #FFFF00; color: #000; padding: 0.15em;" | {{#if: {{{checkpoints|}}}{{{opponents|}}} | Information}}
      |- style="font-size: 95%;" valign="top"
      | style="text-align: center;" {{#if: {{{checkpoints|}}} | {{!}} '''Checkpoints'''}}
      | style="text-align: center;" {{#if: {{{opponents|}}} | {{!}} '''Opponents'''}}
      |-
      | style="text-align: center;" {{#if: {{{checkpoints|}}} | {{!}} {{{checkpoints}}}}}
      | style="text-align: center;" {{#if: {{{opponents|}}} | {{!}} {{{opponents}}}}}
      
        Loading editor
    • Would the fields under this header disappear too? I mean, I know it's because the text is gone, but what about the labels?

        Loading editor
    • They should.

        Loading editor
    • Parameters
      Like this? I was wondering: Do you know about Midtown Madness?

      The point of creating the infobox like I've been posting in this tread is to show information on races, with time to finish, weather conditions of the race, number of laps, and opponents (if any). The point of unused fields is to add as many information in this infobox while saving space. 

        Loading editor
    • No. I don't know anything about Midtown Madness. the part about hiding unused fields makes sense. That is why it is a built-in feature for portable infoboxes. Thus the reason I really think you should consider converting to them.

        Loading editor
    • The problem, like I mentioned in my previous post, is adjusting the size. I don't know how to adjust the size of a portable infobox.  I was wondering if there is a way to use the "opponents" field while trying to keep it on the same horizontal line without the use of a second row and make sure it is aligned properly as it should be with "checkpoints" while using the hiding feature.  Two, should the words "Amateur and Professional" under the header be showing or hidden since the header is hidden?

        Loading editor
    • Even if I did consider using a portable infobox, would I be able to lay out information like I'm doing with this non-portable infobox? Can you customize it to look exactly like this?

        Loading editor
    • Perhaps not exactly but extremely similar. If you want, I can make a draft as a subpage and you can see what it looks like. The width needs to be set via site CSS so that would have to be fixed after your make your decision. That said, if you do decide to go with portable infoboxes, the CSS would be this.

      .portable-infobox.pi-europa {
          width: 260px;
      }

      i don't quite follow what you are talking about with the layout questions. Could you try explaining a bit more?

        Loading editor
    • Mountain4567
      Mountain4567 removed this reply because:
      Not needed.
      16:06, May 18, 2020
      This reply has been removed
    • Actually, I already figured the infobox out. Now what I want to do is adjust the size of the font, the section headers.  I could easily do that in the non-portable infobox, but not the portable infobox. Do you type this in CSS to change the image size?

      .portable-infobox.pi-image {
          width: 230px;
      }
      
      And the layout question. I wanted to know how to hide the "opponents" field while keeping it on the same row as you'd expect with a portable infobox, like this: Since I'm using the portable infoboxes now, this is unnessary. 
      Screen Shot 2015-06-16 at 13.27.08
        Loading editor
    • And another thing, this changes the sizes of all the infoboxes on FANDOM, this there a way to change the size of only one template?

        Loading editor
    • You need a space between ".portable-infobox" and ".pi-image". Other than that, I think what you have should work.

      So you want the size change for this particular template only? That is entirely doable. In the template code:

      <infobox type="race">
      </infobox>
      

      Then change ".portable-infobox" to ".portable-infobox.type-race" for all of the relevant CSS rules.

        Loading editor
    • Thank you! I'll try it out.

        Loading editor
    • The problem with CSS is that it does not work right away. I tried to bypass the brower's cache with shift, command, and R key. It works sometimes and sometimes it does not.

        Loading editor
    • Could you help me fix this? The image in the Race Infobox is not getting smaller. It's moving to the side. 

      https://midtownmadness.fandom.com/wiki/Dearborn_Dash

      If you type it like this, including the "type-race" to only get this to work for the "race template"

      .portable-infobox.type-race. pi-image {
          width: 230px;
      }
      

      Would this work?

        Loading editor
    • The problem is you have this CSS:

      .portable-infobox .pi-image {
          padding: 130px;
      }

      What is this supposed to apply to? 130px padding is very large considering a portable infobox is only 300px to begin with. This leaves a mere 40px for the actual content.

      As for adjusting the width of the image, you want to move the space before the period.

        Loading editor
    • Oh, I didn't realize I did that. So the point of doing this is to scale to image to make it small. The default size does not know the entire map now that the infobox is smaller. I want to make it smaller to show the entire map. In the non-portable infobox, I could do this. So does adjusting the width move the image or make the image smaller?

        Loading editor
    • Okay. I did some actual digging around. Try this instead.

      .portable-infobox.type-race .pi-image img {
          width: 230px;
          height: auto;
      }
        Loading editor
    • Okay, it works now. Thank you, and sorry if I bombarded you with so many questions today. 

        Loading editor
    • No worries.

        Loading editor
    • See you tomorrow!

        Loading editor
    • Good afternoon, I was wondering if there is a way to display content with seven-segment displays. Say, if someone wanted to display information like a clock or stopwatch. Is it possible to do this on FANDOM? I don't want to build a timer or a clock that displays actual time, I just want to show still information, like below:

      00:20:00

        Loading editor
    • Are we talking inside an infobox or just somewhere in a page's content?

        Loading editor
    • My plan was to create one inside an infobox, but would that make a difference?

        Loading editor
    • I'm asking because somewhere in my memory banks, I think there was a wikia that showed information in seven-segment display. It's not a font style it was more like a template. And this was inside a black board, like the way you'd expect an actual display clock to look. 

        Loading editor
    • It matters because the best solution for use in an article does not always translate well for an infobox. What particular output format are you looking for?

        Loading editor
    • Well, I saw how wikipedia is creating seven-segment displays. I was wondering how it is created in infoboxes and how does it work? Is it possible to create this and to add it on a black board that looks like a printed circuit board? Template:7seg

      And this is to look like a stopwatch so that it will display time-related infromation. Is there a template that creates ":"?

        Loading editor
    • Perhaps it would be better if you just linked to an example page on Wookiepedia. That way I can get a better idea of what it looks like.

        Loading editor
    • Wookiepedia or wikipedia?

      This is where I found it:

      https://7seg.fandom.com/wiki/Digits

      Seven segment
      This is how I wanted to create it.

      Although, much smaller and it has colons to seperate the time pieces. 

        Loading editor
    • Oh. I see now. My apologies for misreading your post. I read it too quickly and misread the wiki's name. Both wikis appear to accomplish this by overlaying various images. You would probably have to either do something similar or find a font that looks like this.

        Loading editor
    • And the background? And I couldn't find a way to put this: ":". 

        Loading editor
    • Assuming the background of your images are transparent (as is for Wikipedia and Segment Displays Wiki), the background color is set simply by the background color of the element containing the images. Otherwise, you would need to make the background of the image a color you want. As for the colon, that would also need to be an image.

        Loading editor
    • Oh wait, you can change the color of the background, can't you?

        Loading editor
    • I found some templates. Do you know where I can find an digital image of a colon?

        Loading editor
    • Actally never mind. I created one. Now I just need to find a template that will place pictures in rows in order to create a digital clock. Do you know a suitable template I could use?

        Loading editor
    • Yes, the way the Segment Displays Wiki does it, you can change the background color by changing the background color of the table that contains the images. I believe that also answers your last question regarding how to put them together in a template.

      I don't think this will work well in infoboxes because tables and images arranged in this manner generally don't display well on mobile. However, if you insist on having this aesthetic, I suppose this is the best option we have at our disposal.

        Loading editor
    • Actually, I'm getting it to work now thanks!

        Loading editor
    • One question, when you're creating templates, how to you create image placeholders? They will go on the empty slots to place the images. 

      Clock
        Loading editor
    • [[File:Placeholder]]
      

      Keep in mind though that this only works when the file link is placed directly on the page. Attempting to use it with templates, infoboxes, galleries, etc. won't work.

        Loading editor
    • I know about this. I finally figured out how to do this! Now I can create displays, Thanks!

        Loading editor
    • I was wondering, can you change tabber box sizes?

        Loading editor
    • Allow me to briefly doff my hat at Andrewds' diligence; your patience and continued assistance in this thread (over 300+ messages and counting)haven't gone unnoticed. Well done.

      Mountain, I do suggest perusing the many Help pages available when you have the time; they do cover quite a bit of ground. It sounds like Help:Tabber could be of use to you. If by "chang[ing] tabber box sizes" you mean you'd like to change the width of the box 'below' the tabs--

      (and I suspect you do, now that I see the tabber on the Dearborn Dash article is extending 'behind' the infobox)

      --then yes, you can change the default dimensions of boxes and make many other customization to tabs besides via CSS. The styling 'code' provided on Help:Tabber includes the basic tabber elements you can copy to your in-use CSS page and customize to your liking. For instance, if you wanted to make the width of all tabber boxes a firm 500px, you could try replacing "/* tabber wrapper style */" with "width: 500px;" in that stylesheet.

      If you wanted to adjust the width of just one tabber on a particular page, e.g. Dearborn Dash, you could try experimenting with sandwiching the tabber code between

      <div style="width:value%"></div>

      , i.e. adjusting the percentage value to your liking. However, you'll have to accordingly adjust the widths you're using for the table; using Dearborn Dash again as an example, I'm referring to the two usages of:

      style="width:300px;"

      If you do want to give indiviudal styling via div style a try, here's some values you can try using as a test run:

      <div style="width:60%;">

      ...followed by replacing both 300px usages with 200px. Again, these values aren't necessarily formal suggestions, just values to toy around with after testing them. Don't forget to close the div tag after you've closed the tabber tab; if you'd rather customize tabber unformly, then definitely do so via CSS.

        • Edit:** CSS suggestion was careless on my part, yikes! Didn't notice at the time you'd used tables differently on other articles, but even then--shouldn't been so cavalier w/bad advice. Sorry. Could've also pointed out you have Clr templates on your wiki, which can 'clear' as needed.
        Loading editor
    • Hello, the reason why I consult this tread is because the help pages don't alwasys give me the information that I'm looking for. Thank you. I'll try this out. 

      Are you suggesting posting questions in a new thread?

        Loading editor
    • Yes. Unfortunately, the help pages don't always give enough information. Not to mention some of them are out-of-date.

      Posting new questions in a new thread may make them easier to find at a later date, but it isn't a requirement. In general, the only time you "must" create a new thread is if you are not the original poster and your question is significantly unrelated.

      Well, Revriley's post answered a few of my questions and their solution is definitely one way to go. If this is something you need to do on just a few pages, I think that solution is the best. Although, some of the tabs' contents will also need to be adjusted.

      If this is something you need on most pages, we could change the width via CSS. However, this would impact all tabbers even if it isn't needed. So CSS isn't really a good option here.

      The last option I would suggested is forcing the tabbers to start below the infobox. This means there may be some blank space on the page but you won't have to resize the tabs' contents and you will be able to do it for all tabbers via CSS. The CSS for this would be:

      .tabber {
          clear: both;
      }
        Loading editor
    • Actually, I think it looks fine. Thanks anyway. 

        Loading editor
    • A FANDOM user
        Loading editor