FANDOM


  • Hi, I'm YNNOJ. One of the admins of this wiki.

    First off, your Spanish wiki looks freaking amazing. I hope you don't mind if I'm taking some of your template ideas! 

    Now to the point, do you mind helping me recreate a template specifically on your front page that showcases all the seasons for Breaking Bad? The one where if you hover your mouse over it, it'll have a "T1, T2, T3, T4, T5" logo? Thanks! Reply ASAP!

      Loading editor
    • Also, can you help me recolor the templates to orange, much like how you do it with the Better Call Saul infoboxes and the ones in your front page?

        Loading editor
    • Hello there! I don't mind about the templates, very glad they're useful to organize content from Better Call Saul!

      About the seasons template, it's pretty easy if you can do the images. First you add the following code in the CSS page, putting each image link in their place:

      .mains1 span { width: 75px; height: 272px; display:block; background-image: url("NORMAL_IMAGE_SEASON_1")}
      .mains2 span { width: 75px; height: 272px; display:block; background-image: url("NORMAL_IMAGE_SEASON_2") }
      .mains3 span { width: 75px; height: 272px; display:block; background-image: url("NORMAL_IMAGE_SEASON_3") }
      .mains4 span { width: 75px; height: 272px; display:block; background-image: url("NORMAL_IMAGE_SEASON_4") }
      .mains5 span { width: 75px; height: 272px; display:block; background-image: url("NORMAL_IMAGE_SEASON_5") }
       
      .mains1 span:hover {
        background-image:url("HOVER_IMAGE_SEASON_1") !important;
        width: 75px;
        height: 272px;
      }
      
      .mains2 span:hover{
        background-image:url("HOVER_IMAGE_SEASON_2") !important;
        width: 75px;
        height: 272px;
      }
      
      .mains3 span:hover {
        background-image:url("HOVER_IMAGE_SEASON_3") !important;
        width: 75px;
        height: 272px;
      }
      
      .mains4 span:hover {
        background-image:url("HOVER_IMAGE_SEASON_4") !important;
        width: 75px;
        height: 272px;
      }
      
      .mains5 span:hover {
        background-image:url("HOVER_IMAGE_SEASON_5") !important;
        width: 75px;
        height: 272px;
      }
      

      Once that's done, using the following code in the main page should make the images appear with that effect:

      {| style="margin-top: 12px;"
      |-
      |<div class="mains1">[[Season 1|<span></span>]]</div>
      |<div class="mains2">[[Season 2|<span></span>]]</div>
      |<div class="mains3">[[Season 3|<span></span>]]</div>
      |<div class="mains4">[[Season 4|<span></span>]]</div>
      |<div class="mains5">[[Season 5|<span></span>]]</div>
      |-
      |}
      

      (I'm also planning on adding vertical images for BCS seasons, one of my future plans for the main page)

        Loading editor
    • Now, about the orange color, I already had a CSS class for the green templates, so I did a new one, orange-brown (that's the best color I could find that still looks good with this design).

      I have these CSS classes for each color (first one is for green, and all the other ones are for the orange one, because I also needed to change the link color).

      /** Clase fondo verde **/
      .fverde { 
          background: #002612 !important;
          box-shadow: #000 0px 0px 5px 1px !important;
          -webkit-box-shadow: #000 0px 0px 5px 1px !important;
      }
      
      /** Clase fondo amarillento **/
      .famar {
          background: #4F390A !important;
          box-shadow: #000 0px 0px 5px 1px !important;
          -webkit-box-shadow: #000 0px 0px 5px 1px !important;
      }
      .famar a {
          color: #FF8800 !important;
      }
      .famar a.new {
          color: yellow !important;
      }
      .famar a.new:visited {
          color: yellow !important;
      }
      

      So, having all that done, I added a switch code to the templates in order to choose different colors in each article. This is the change that I did (by default, templates are green, but if I add |serie=BCS to the article, it turns to orange).

      For the main page I just changed the green class to the orange one in some of the sections.

      Don't know if I'm good at explaining this, but I'm really glad to help, so feel free to ask more!

        Loading editor
    • So do I replace "NORMAL_IMAGE_SEASON_1" with the URL of the image?

        Loading editor
    • Yes, and HOVER_IMAGE_SEASON_1 with the image you see when you hover!

        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