FANDOM


  • I have two issues I'd like assistance with. I'm fairly inexperienced with templates, so I'll appreciate any advice I can get.

    Firstly, I have one template coded like this.

    I'd like to fit both the header and body text inside the template box, but the body text appears outside of the box. If anyone knows why this is happening and how I can fix it, that'd be great.

    Secondly, I have another template coded like this.

    I've set the background to a gradient, but I'd like to set it to an image. If that's possible, I'd like to know how I can code it.

    Thanks!

      Loading editor
    • As for the second question: you can't set the background of a box to an image just with wikitext, but that would be possible using a CSS class (the property is background-image). Anyway, could you please link the page where you're having the problem with the body text of the template? That would be helpful.

        Loading editor
    • 1.

      {|class="boilerplate" id="template-test" style="width:85%; margin:0 auto; padding: 15px; border:5px Solid White; background:linear-gradient(to bottom, coral, darksalmon)"
      |-
      | align="center" |
      <p style="text-align:center;"><span style="color:#FFFFFF"><span style="font-size:40px; text-shadow: 0 0 9px black; color: white; font-family: Georgia">
      Header test</span>
      <br>
      <span style="color:#FFFFFF"><span style="font-size:15px; text-shadow: 0 0 9px black; color: white; font-family: Georgia">
      Body copy test </span>
      |-
      | align="right" |
      [[File:ExampleImage.png|200px|right|link=]]
      |-
      |}
      

      2. Use background-image: url("yourimage.png"); as Lord Ghiraim said.

        Loading editor
    • the body text appears outside of the box

      The <span style="color:#FFFFFF"> needs a |

      {|class="boilerplate" id="template-test" style="width:85%; margin:0 auto; padding: 15px; border:5px Solid White; background:linear-gradient(to bottom, coral, darksalmon)"
      |-
      | align="center" |
      <p style="text-align:center;"><span style="color:#FFFFFF"><span style="font-size:40px; text-shadow: 0 0 9px black; color: white; font-family: Georgia">
      Header test</span>
      |-
      | <span style="color:#FFFFFF"><span style="font-size:15px; text-shadow: 0 0 9px black; color: white; font-family: Georgia">
      Body copy test </span>
      |-
      | align="right" |
      [[File:ExampleImage.png|200px|right|link=]]
      |-
      |}
      


      set the background to an image

      You can set the background as position: relative and the text on-top using absolute; left: XXX; top: XXX (distance from left/top)

      • background in <div>
      • text in <span>
      {|class="boilerplate" id="image-bg" style="width:85%; margin:0 auto; padding: 15px; border:5px Solid White;"
      |-
      | align="center" |
      <div style="position: relative;">
      [[File:The-color-green-background-wallpaper-hd.jpg|500px]]
      <span style="color:#FFFFFF"><span style="font-size:15px; text-shadow: 0 0 9px black; color: white; font-family: Georgia; position: absolute; left: 220px; top: 150px;">
      Testing</span>
      </div>
      |}
      

      The-color-green-background-wallpaper-hd Testing </div>

        Loading editor
    • Thanks for the help! I'll try this all out.

      In case you still need it, here's the first template.

      Update: The first code fix works, but the second one just removes the whole box and leaves the text by itself. (link) Any suggestions?

      Update 2: Somehow missed TableWiz's fix, so I tried it out and it worked (see the first image). Decided to try it out with longer text and it also worked (see the second image), but now the text goes outside the template box and I can't fit it back in.

      TetraTemplateExample1

      image A

      TetraExampleThing
        Loading editor
    • Add width into <span>

      • image width = 500
      • padding left/right = 50
      • text width becomes 400
      {|class="boilerplate" id="image-bg" style="width:85%; margin:0 auto; padding: 15px; border:5px Solid White;"
      |-
      | align="center" |
      <div style="position: relative;">
      [[File:The-color-green-background-wallpaper-hd.jpg|500px]]
      <span style="color:#FFFFFF"><span style="font-size:15px; text-shadow: 0 0 9px black; color: white; font-family: Georgia; position: absolute; left: 50px; top: 120px; width:400px;">
      Decided to try it out with longer text and it also worked (see the second image), but now the text goes outside the template box and I can't fit it back in</span>
      </div>
      |}
      

      The-color-green-background-wallpaper-hd Decided to try it out with longer text and it also worked (see the second image), but now the text goes outside the template box and I can't fit it back in </div>

        Loading editor
    • Tetrawyvern wrote: Thanks for the help! I'll try this all out.

      In case you still need it, here's the first template.

      Update: The first code fix works, but the second one just removes the whole box and leaves the text by itself. (link) Any suggestions?

      Update 2: Somehow missed TableWiz's fix, so I tried it out and it worked (see the first image). Decided to try it out with longer text and it also worked (see the second image), but now the text goes outside the template box and I can't fit it back in.

      TetraTemplateExample1

      image A

      TetraExampleThing

      If you are trying to writing text on images then you can test following code also.

      <div style="position: relative; text-align: center;">
          <div style="opacity: 5.5;">[[File:Flames.jpg|link=|300px]]</div>
          <div style="position: absolute; width: 100%; top: 200px; left: 0; bottom: 0; color: white; margin: 0 auto; font-size: 17px;font-family: Comic Sans MS; top: 110px;line-height: 1.6;">Text here<br>
      Type your text here........</div>
      </div>
      
        Loading editor
    • Yep, that works.

      Thanks for the help, guys.

        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.