[Alto theme ] Trying to make a style for tables in pages and posts

Themes
1

For this, I added some styling to the alto theme in post.css. Then I used the created class and added a table. The table CSS wont show or wont apply to the table. The head of the table remains transparent, even if it’s set to orange.

orry I am kind of newbie with css. Hope you can debug me. Here’s the code I added to posts.css and the HTML of the rendered page.

Code of post.css

.post {
   margin-bottom: 100px;
}

.post-media {
   margin-bottom: 20px;
}

.post-feed .post-media {
   width: 100%;
   max-width: calc(960px + var(--gap) * 2);
   margin: 0 auto 40px;
}

.post-media-tag {
   position: absolute;
   top: 15px;
   right: 15px;
   z-index: 10;
   padding: 2px 10px;
   font-size: 13px;
   font-weight: 600;
   color: var(--white-color);
   background: var(--primary-color);
   border-radius: 15px;
}

.post-image-link:hover {
   opacity: 1;
}

.post-header {
   display: flex;
   flex-direction: column-reverse;
   gap: 10px;
}

.post-title {
   font-size: 30px;
   font-weight: 800;
   letter-spacing: -0.01em;
   word-break: break-word;
}

.has-serif-title :where(.post-feed, .single-post) .post-title {
   font-family: var(--font-serif);
}

.post-meta {
   font-size: 12px;
   font-weight: 700;
   color: var(--secondary-text-color);
   text-transform: uppercase;
   letter-spacing: 0.01em;
}

.post-meta-item:not(:first-of-type)::before {
   padding: 0 7px 0 4px;
   font-family: serif;
   content: "/";
}

.post-tag {
   color: var(--primary-color);
}

.post-excerpt {
   margin-top: 12px;
   word-break: break-word;
}

.has-serif-body .post-excerpt {
   font-family: var(--font-serif);
}

@media (max-width: 767px) {
   .post-media.large {
       margin-bottom: 30px;
   }

   .post-feed .post-title {
       font-size: 24px;
   }
}


.gh-content .table-container {
   margin-bottom: 1.5625rem;
   overflow-x: auto;
   width: 100%;
   word-break: normal
}

@media only screen and (min-width: 48rem) {
   .gh-content .table-container {
       margin-bottom:2.1875rem
   }
}

.gh-content table {
   background-color: transparent;
   color: var(--alt-text-color);
   font-size: .875rem;
   max-width: 100%;
   width: 100%
}

@media only screen and (min-width: 48rem) {
   .gh-content table {
       font-size:.9375rem
   }
}

.gh-content table thead th {
   background-color: #f27a17;
   color: #ffffff;
   font-weight: 500;
   padding: .8125rem
}

@media only screen and (min-width: 48rem) {
   .gh-content table thead th {
       padding:.875rem
   }
}

.gh-content table tbody tr:nth-child(2n) {
   background-color: var(--mask-color)
}

.gh-content table tbody td {
   padding: .8125rem;
   text-align: center
}

@media only screen and (min-width: 48rem) {
   .gh-content table tbody td {
       padding:.875rem
   }
}

Rendered page where the table was inserted

<div class="site-content">
        

<div class="content-area">
<main class="site-main">
    <article class="post no-image no-image single-post">

            <header class="article-header gh-canvas">
                <h1 class="post-title">Table example</h1>
                            </header>

        <div class="gh-content gh-canvas">
            
<!--kg-card-begin: html-->
<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
  </table>
</div>
<!--kg-card-end: html-->

        </div>

    </article>
</main>
</div>


    </div>

My rendered table

image
image1314×425 17.5 KB

2

Most themes require their css to be compiled. So if you edited post.css, you probably need to run a build on it before it’ll get served. I /think/ Alto uses gulp, so you’d need to install gulp and then run gulp build before zipping the theme. (Or your theme may build and zip on gulp zip. It depends on the theme…) Check for the presence of a gulpfile.js in the root directory of the theme as a hint that you need to compile styles.

If that seems like too much fuss, you can instead put your new styles into code injection or at the top of default.hbs in a <style> </style>

It’s possible that you will also have problems with css selector specificity, but if you can’t see any evidence of changes at all, suspect that your styles need to be compiled. :)

It’s a teeny bit off topic, but maybe this will be helpful - a discussion of using code injection (which is easier than compiling styles) and using dev tools to figure out CSS selectors (which you might need):

1 Like
3

Theme is compiled (did npm run zip command). Seems more related to selector and correct coding of the css.

Here what I can see from the inspector:

image
image2163×1722 490 KB

4

Right. So your styles are getting loaded, but then trumped. You can either bump up the specificity of your styles (by mimicking the setup of the one that’s overwriting yours) or stick a !important; on the end.

5

You are right, my CSS seem overwritted by some others CSS.

But the CSS overwritting mine is in a file called content.css, according to the inspector. However, there is no such file in my theme.

How can I change the class of content.css?

image
image998×239 25.2 KB

6

That CSS is coming from some CSS that’s shared across themes, located here:

In Alto, it’s brought in here: https://github.com/TryGhost/Alto/blob/400b27ac3007c6ab0f91ba0cb533d3ec83c18462/assets/css/screen.css#L1

You don’t really want to change the CSS in Alto or the content.css because it’ll then make it very difficult to update in the future. Since your changes are relatively small, I’d use Code Injection.

Nevertheless, the reason your changes are being overridden is because of this selector’s specificity. Because it has two classes and yours has one, the browser will apply it while styling. The easy out here is what Cathy said above: !important. Otherwise, you’d want to match the selector in your code.

1 Like