FANDOM


  • So I've spent the last few hours attempting to implement basic table CSS in MediaWiki:Wikia.css and fixing various issues on the advice of another editor. The code as it currently stands is:

    table {
        border: 0 none;
    }
    tr > th {
        text-align: center !important;
        background: #BA9D7F !important;
        color: black;
        border-bottom: 1px solid #ddd;
    }
    tr > .table {
        text-align: left;
        color: black;
        border-bottom: 1px solid #ddd;
    }
    .article-table td {
    background: #D4C2B0;
    
    Screen Shot 2018-02-05 at 7.20.16 AM

    The book template.

    It was only thanks to the use of !important that the header rows' (th) background color and text finally adopted the styes under tr > th, but it looks like it's now
    Screen Shot 2018-02-05 at 7.08.40 AM

    Album infobox.

    affected some of the wiki's infoboxes as a consequence. The (portable) book template's "next" data-source now displays with #BA9D7F !important, as does the top header of the (non-ported) album infobox.

    I guess it's the shared <th> elements that's causing the problem, but I'm not sure how to address the issue. It's taken upwards of 30 minutes to see Wikia.css changes populate on the affected pages, which is why I'm now bringing the issue here. One way could be to create a whole new table class, I suppose, but I'm wondering if there's a simpler solution...

    For examples of the table CSS in action, see the Runorata Family page and the page which uses the album infobox screencapped above.
    Screen Shot 2018-02-05 at 11.18.50 AM

    Edit: I only now noticed that something odd has happened to the Quick Stats table, as seen in the right screenshot.

      Loading editor
    • Well, based on the screenshots, it looks like you are already familiar with your browser's developer mode. So here is what you need to do; create a table and see what it overriding the custom site CSS. Then increase the specificity of your selectors as needed. Exactly how you do it will depend on how specific you want to be in which tables are formatted by this CSS. This may or may not require you to add a class and/or id. Depending on your exact application, you could also just create a table template that uses in-line CSS; however I am not a big fan of that solution.

        Loading editor
    • Well, I've attempted to experiment with a new table class (.tableA) over in my personal CSS (with a table set up here to test) but I'm still running into kinks. My thought was that perhaps I need to copy the CSS attributes of .article-table over to .tableA, but I get the feeling that I wouldn't be on the right track. I'm pretty sure that .infobox th(ead) was probably conflating/mingling with the .table th tag, but so far I haven't succeeded in implementing the new table class. I'm also trying to figure out what caused the odd...whatever that is in the screenshot of the Quick Stats table I edited into my original post.

        Loading editor
    • global.css works only if placed on community.wikia.com (here). so styles u linked just doesn't work. move it to common.css and try again. in the current state (with .tableA) these styles should affect .tableA class only.

        Loading editor
    • Screen Shot 2018-02-05 at 7.56.41 PM
      You're right; I moved the code to my personal common.css (and wikia.css) – however, it's still not producing the intended look. The intended look is, of course, the current 'look' of the tables that the wiki's Wikia.css currently has enabled (see screenshot). 

      The #D4C2BO for the content cells isn't showing up in my sandbox (linked in my last reply), and there's a vertical border gap separating the columns (in the sandbox table). What am I doing wrong...?

        Loading editor
    • I am not sure how you got the screenshot if it isn't working. However, you have two issues. First, the class you gave the table in the test page is "TableA" but the class you wrote the CSS for was "article-table". Second, to collapse the borders, set "border-collapse: collapsed;" for the table.


      Edit:

      By the way, your import statement at the bottom will not work. import statements must be at the top.

        Loading editor
    • Ah, sorry, perhaps I wasn't clear enough in my original post. The code I shared in the parent comment is the code that is currently enabled via Wika.css and is, as you have noticed, the code behind the screenshot in my last comment. The problem with that code is that it is affecting the th elements of some of the other templates and infoboxes on the wiki (as screenshotted in the parent comment).

      Screen Shot 2018-02-05 at 9.25.20 PM

      The so far unsuccessful table testing the new table class as seen in the Sandbox.

      Since I doubted that I knew enough CSS to correctly increase the specificity of the CSS selectors as you suggested (if only...!), I decided in the meantime to try and workaround the issue by creating a new table class (as mentioned in my first reply). I have been testing the experimental table class CSS in my personal CSS, and have set up a table in the sandbox in an attempt to observe the CSS's effects without disturbing the wiki further.

      The table in the right screenshot is the table in my Sandbox, based off the following code in my personal common and wikia.css:

       .tableA tr > th {
           text-align: center !important;
           background: #BA9D7F !important;
           color: black;
           border-bottom: 1px solid #CEB9A3;
       }
        
       tr > .tableA {
           text-align: left;
           color: black;
           border-bottom: 1px solid #CEB9A3;
       }
        
       .tableA td {
          background-color: #D4C2B0 !important;
       }

      Clearly, the code is not producing the desired result: a table that looks like the .article-table does now. As you mentioned, creating a new table class would be one way to overcome the .article-table code overriding the infobox CSS, but so far I cannot seem to realize it. It's either this or identifying the right CSS selectors, I think, but I can't seem to hit upon either solution.


      Thank you for the warning on the @import url. I was already aware that import statements must be at the top of the sheet, admittedly, but the fact of the matter is that those import statements date back to edits made to the wiki in 2013, before my time. I confess that I have avoided touching the old CSS to the point of neglect. 

        Loading editor
    • wikia.css: remove 'tr > th' and other rules in section "css test".

      Andrewds1021#6
      First, the class you gave the table in the test page is "TableA"

      fix that. if u have class="TableA", then rule .tableA will not work. cuz t !== T.
        Loading editor
    • I didn't even catch that, but yeah, that is also an issue.

        Loading editor
    • I can't believe I didn't notice the 't' was capitalized, thanks for catching that. Removing tr > th and (obviously) fixing the mistype was the major step needed, it seems; from there, I experimented a good deal with the HTML/CSS in JSFiddle and figured out the border gaps and padding.  I've disabled my personal css and tried it out across the wiki (added the code to Wikia.css, updated table classes) and I think I can safely say 'success'! The infoboxes are back to normal, and I should be able to make further CSS adjustments to .tableA without any more major problems. Thanks for the suggestions (and pointing out my rather daft oversight), I appreciate the help.

        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