FANDOM


  • This is the template, this is one of the examples, this is the CSS.

    What I want is #linkcolouragainstlight A:link { color: #b49c9a; } in the body and #linkcolouragainstdark A:link {color: #d7e6fa; } for the Hide/Show button.

    But I can't seem to get it to work.

      Loading editor
    • A few things:

      1. IDs should be used only once on a page. You use this template multiple times on the example page so you are breaking this guideline. I suggest you switch to using a class instead.
      2. The link is a child of a span tag inserted as the first child of the element you have specified with the class "mw-collapsible". You have given this class to the div tag surrounding your p tag. As such, the a tag you want to target is not a child of the p tag you assigned the ID to.
        Loading editor
    • Oh k, lemme see if I can figure that out.

        Loading editor
    • Andrewds1021 wrote: A few things:

      1. IDs should be used only once on a page. You use this template multiple times on the example page so you are breaking this guideline. I suggest you switch to using a class instead.
      2. The link is a child of a span tag inserted as the first child of the element you have specified with the class "mw-collapsible". You have given this class to the div tag surrounding your p tag. As such, the a tag you want to target is not a child of the p tag you assigned the ID to.

      Got it, ty :)

        Loading editor
    • Oh no, now my Recent changes is effected and is hard to read now. How do I counter that?

        Loading editor
    • Add a second class to the div in your template. Then appropriately add that second class to your CSS selectors. Essentially you want to do it so that collapsible parts that have that class in addition to "mw-collapsible" are impacted by the CSS. For example:

      <div class="mw-collapsible collapse-bar" <!-- more div stuff here -->
      >
      <!-- more template stuff here -->
      </div>
      <!-- more template stuff here -->
      

      Then you CSS would be:

      /***************/
      /* CollapseBar */
      /***************/  
      .collapse-bar.mw-collapsible a { color: #d7e6fa; }
      .collapse-bar .mw-collapsible-content > div a { color: #b49c9a; }
      .collapse-bar .mw-collapsible-content > div {
          width: 100%;
          color: #08445A;
          font-weight: normal;
          float: center;
          padding-left: 10px;
          }
      .collapse-bar.mw-collapsible {
          color: white;
          font-weight: bold;
          background: linear-gradient(#f9f8fe, #eef4fd);
          -moz-border-radius: 10px 10px 7px 7px;
          -webkit-border-top-right-radius: 10px;
          -webkit-border-top-left-radius: 10px;
          -webkit-border-bottom-right-radius: 10px;
          -webkit-border-bottom-left-radius: 10px;
          margin-top: 10px;
          }
      .collapse-bar .mw-collapsible-content {
          padding-bottom: 10px;
          }
      .collapse-bar.mw-collapsible.mw-collapsed a { color: #d7e6fa; }
      .collapse-bar.mw-collapsible.mw-collapsed {
          color: white;
          font-weight: bold;
          background: linear-gradient(#f9f8fe, #eef4fd);
          -moz-border-radius: 10px 10px 7px 7px;
          -webkit-border-top-right-radius: 10px;
          -webkit-border-top-left-radius: 10px;
          -webkit-border-bottom-right-radius: 10px;
          -webkit-border-bottom-left-radius: 10px;
          margin-top: 10px;
          }
        Loading editor
    • Got it ty!

        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.