FANDOM


  • I've been changing stuff in Wikia.css and Common.css and I can't find any color codes that are grey in the Infobox areas?

    http://monarchofevernight.wikia.com/wiki/Qianye

    I want to change Physical Description, Relationship(s), Statuses, Origin, and Apperances to a white font color.

    Wikia.css :

    /* Infoboxes */
    /* Background color */
    .portable-infobox.pi-background {
       background-color: white;
    }*
     
    .pi-data-value:not(:first-child){
        padding-left:5px;
    }
     
    .portable-infobox .pi-data:nth-child(even) {
        background-color: rgba(255, 255, 255, 0.0);
        color:white;
        font-weight:normal;
    }
    .portable-infobox .pi-data:nth-child(odd) {
        background-color: rgba(255, 255, 255, 0.0);
        color:white;
        font-weight:normal;
    }
     
    .pi-title {
        background-color:#1B0A2A;
        font-weight:normal;
    }
     
    .portable-infobox.pi-font {
        color:white;
    }
     
    .portable-infobox .pi-secondary-background{
        background-color: #1B0A2A;
        text-align:center;
    }
     
    .portable-infobox .pi-secondary-font{
        line-height:25px;
    }
     
    .portable-infobox {
        clear: right;
        float: right;
        margin: 0 0 15px 15px;
        width: 270px;
    }
    .portable-infobox .pi-title {
        font-size: 0.96em;
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
        line-height: 1.5;
    }
    .portable-infobox .pi-item-spacing {
        padding: 4px;
    }
     
    h3.pi-data-label.pi-secondary-font{
        font-weight:bold;
        font-style:italic;
        font-size:11px;
        /*background: #1B0A2A;*/
        margin-left: -4px;
        margin-bottom: -3px;
        margin-top: -4px;
        padding-left:3px;
        padding-top:3px;
    }
     
     
    .pi-border-color{
        border-color:#1B0A2A;
    }
     
    .pi-data{
        box-sizing:none;
    }




    Common.css :

    /*Infobox
    .pi-theme-Species .pi-title { background-color: #FFFFFF; }
    .pi-theme-Species .pi-navigation { background-color: #FFFFFF; }
    .pi-theme-Species .pi-navigation a { color: white; }
    .pi-theme-Species .pi-header { background-color: #1B0A2A; color:white;}
    .portable-infobox {
        background:#FFFFFF;
        clear: right;
        float: right;
        margin: 0 0 15px 15px;
        width: 270px;
    }
    .portable-infobox .pi-title {
        font-size: 0.96em;
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
        line-height: 1.5;
    }
    .portable-infobox .pi-item-spacing {
        padding: 4px;
    }
    .pi-theme-Species .pi-title {
        background-color: #FFFFFF;
    }
    .portable-infobox .pi-header, .portable-infobox .pi-title {
        border: 0;
        margin: 0;
    }
    .portable-infobox .pi-data:nth-child(even) {
        background-color: #010101;
        color:white;
        font-weight:normal;
    }
    .portable-infobox .pi-item-spacing {
        padding: 4px;
    }
    .portable-infobox .pi-border-color {
        border-bottom-style: none !important;
    }
    .portable-infobox .pi-data:nth-child(odd) {
        background-color: #111111;
        color:white;
        font-weight:normal;
    }
    .portable-infobox .pi-item-spacing {
        padding: 4px;
    }
    .portable-infobox .pi-border-color {
        border-bottom-style: none !important;
    }
      Loading editor
    • Try this:

      .portable-infobox {
          color: white;
          clear: right;
          float: right;
          margin: 0 0 15px 15px;
          width: 270px;
      }

      That should do it.

        Loading editor
    • FYI, when posting large blocks of code, try using either pre, source, or syntaxhighlight tags. For example, using <syntaxhighlight lang="css"></syntaxhighlight> to enclose the CSS you posted from your Wikia.css:

      /* Infoboxes */
      /* Background color */
      .portable-infobox.pi-background {
         background-color: white;
      }*
       
      .pi-data-value:not(:first-child){
          padding-left:5px;
      }
       
      .portable-infobox .pi-data:nth-child(even) {
          background-color: rgba(255, 255, 255, 0.0);
          color:white;
          font-weight:normal;
      }
      .portable-infobox .pi-data:nth-child(odd) {
          background-color: rgba(255, 255, 255, 0.0);
          color:white;
          font-weight:normal;
      }
       
      .pi-title {
          background-color:#1B0A2A;
          font-weight:normal;
      }
       
      .portable-infobox.pi-font {
          color:white;
      }
       
      .portable-infobox .pi-secondary-background{
          background-color: #1B0A2A;
          text-align:center;
      }
       
      .portable-infobox .pi-secondary-font{
          line-height:25px;
      }
       
      .portable-infobox {
          clear: right;
          float: right;
          margin: 0 0 15px 15px;
          width: 270px;
      }
      .portable-infobox .pi-title {
          font-size: 0.96em;
          font-weight: bold;
          color: #FFFFFF;
          text-align: center;
          line-height: 1.5;
      }
      .portable-infobox .pi-item-spacing {
          padding: 4px;
      }
       
      h3.pi-data-label.pi-secondary-font{
          font-weight:bold;
          font-style:italic;
          font-size:11px;
          /*background: #1B0A2A;*/
          margin-left: -4px;
          margin-bottom: -3px;
          margin-top: -4px;
          padding-left:3px;
          padding-top:3px;
      }
       
       
      .pi-border-color{
          border-color:#1B0A2A;
      }
       
      .pi-data{
          box-sizing:none;
      }

      Also, you may want to get rid of the stray asterisk hanging out at the end of the first rule. Also, on Common.css, even though it is at the end, it would probably still be a good idea to close your comment.

        Loading editor
    • Annabeth and Percy wrote: Try this:

      .portable-infobox {
          color: white;
          clear: right;
          float: right;
          margin: 0 0 15px 15px;
          width: 270px;
      }

      That should do it.

      Which CSS do I add that to? Or do I add "color: white;" to this line on Wikia.css?

      .portable-infobox {
          clear: right;
          float: right;
          margin: 0 0 15px 15px;
          width: 270px;
      }
        Loading editor
    • If you want the style to apply to all skins, use Common.css. If you just want it to apply to the default desktop skin, use Wikia.css.

      default desktop skin

      mobile skin

      non-default desktop skin

        Loading editor
    • Andrewds1021 wrote: FYI, when posting large blocks of code, try using either pre, source, or syntaxhighlight tags. For example, using <syntaxhighlight lang="css"></syntaxhighlight> to enclose the CSS you posted from your Wikia.css:

      /* Infoboxes */
      /* Background color */
      .portable-infobox.pi-background {
         background-color: white;
      }*
       
      .pi-data-value:not(:first-child){
          padding-left:5px;
      }
       
      .portable-infobox .pi-data:nth-child(even) {
          background-color: rgba(255, 255, 255, 0.0);
          color:white;
          font-weight:normal;
      }
      .portable-infobox .pi-data:nth-child(odd) {
          background-color: rgba(255, 255, 255, 0.0);
          color:white;
          font-weight:normal;
      }
       
      .pi-title {
          background-color:#1B0A2A;
          font-weight:normal;
      }
       
      .portable-infobox.pi-font {
          color:white;
      }
       
      .portable-infobox .pi-secondary-background{
          background-color: #1B0A2A;
          text-align:center;
      }
       
      .portable-infobox .pi-secondary-font{
          line-height:25px;
      }
       
      .portable-infobox {
          clear: right;
          float: right;
          margin: 0 0 15px 15px;
          width: 270px;
      }
      .portable-infobox .pi-title {
          font-size: 0.96em;
          font-weight: bold;
          color: #FFFFFF;
          text-align: center;
          line-height: 1.5;
      }
      .portable-infobox .pi-item-spacing {
          padding: 4px;
      }
       
      h3.pi-data-label.pi-secondary-font{
          font-weight:bold;
          font-style:italic;
          font-size:11px;
          /*background: #1B0A2A;*/
          margin-left: -4px;
          margin-bottom: -3px;
          margin-top: -4px;
          padding-left:3px;
          padding-top:3px;
      }
       
       
      .pi-border-color{
          border-color:#1B0A2A;
      }
       
      .pi-data{
          box-sizing:none;
      }

      Also, you may want to get rid of the stray asterisk hanging out at the end of the first rule. Also, on Common.css, even though it is at the end, it would probably still be a good idea to close your comment.

      Thank you for the info + tips! :)

        Loading editor
    • My pleasure.

        Loading editor
    • Hey Andrewds1021 I can't seem to figure out how to change the color of the text in this one box. https://imgur.com/oOFaWtx

      There is another box above "Chapter 1" but the text is white so you can't see it.

        Loading editor
    • Could you link to the page itself so I can inspect it?

        Loading editor
    • I see now. I thought your picture was of the top of the infobox so I didn't recognize that it was from the same page.

        Loading editor
    • I couldn't figure out how to change that one text to a diff color so I just changed the texts name from "First" to "Debut" then I linked it to the definition of debut on Wikipedia so it's the same color as links.. lol

        Loading editor
    • Okay, but do you really want it that way? I can still help you try to do it without using a link.

        Loading editor
    • I would really appreciate that! Thank you for taking the time, is there any way I can help?

        Loading editor
    • Well, first, I need to be able to inspect the issue. So you need to revert the template to the state where it had the issue. Also, what color did you want?

        Loading editor
    • Soaring Immortal
      Soaring Immortal removed this reply because:
      H
      07:55, January 12, 2018
      This reply has been removed
    • Yes... not sure why you removed your reply.

        Loading editor
    • Sorry. I knew I wouldn't be able to reply for a few days so I didn't want you to wait or anything. I didn't know you'd get notified of that deleted post. Sorry!

      So I removed the debut link now!

        Loading editor
    • Hmm is it possible to change that single section header text to a black font color while keeping the other section header texts to a white font color?

        Loading editor
    • Well, you could do that specific one, yes. However, the issue is the white text on white background. This issue will also be present for any other horizontal group you use. To fix all horizontal group headers, try the following.

      .pi-horizontal-group :not(caption) {
          color: black;
      }

      Edit:

      You will also have a similar problem with the data as well. I have edited the suggested CSS.

        Loading editor
    • To be honest I don't really understand it lol..

      I added that code to Common.css though? Not sure if I was supposed to do that

        Loading editor
    • Yes, do that. However, 1) you didn't copy it correctly and 2) what I gave you was not fully correct. Use the following instead.

      .pi-horizontal-group > :not(caption) {
          color: black;
      }

      Do not replace caption.

        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