Source Theme CSS Columnated

Themes
1

Hello, I am attempting to add a jquery table to my website. However, the overall theme I am using is conflicting with my table.

I believe the issues arise from the theme CSS .gh-content.gh-canvas.is-body element.

The attempted solution I have tried using in the page HTML is to use overrides with important tags. However, my data is still compressed only to the center column of an invisibly columnated page.

How can I go about changing this?

Site Page: Market Data

HTML Ghost Page:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stock Data Table</title>

    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.css">

    <style>
        :root {
            --content-width: 800px;
        }

        .post {
            width: 80%;
            max-width: 1200px;
            margin: 4rem auto;
            padding-bottom: 4rem;
            border-bottom: #EBF2F6 1px solid;
            word-wrap: break-word;
        }

        #stock-table-container {
            margin: 0 auto;
            text-align: center;
        }

        #stock-table-container .dataTables_wrapper .dataTables_scrollHead th {
            color: black;
            white-space: nowrap;
            text-align: center;
        }

        #stock-table tbody td {
            white-space: nowrap;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="gh-content gh-canvas is-body" style="width: 100%; display: flex; justify-content: center;">
        <div id="stock-table-container" style="width: 800px;">
            <table id="stock-table" class="display" data-position="fixed">
                <thead>
                    <tr>
                        <th>Country</th>
                        <th>Symbol</th>
                        <th>Company</th>
                        <th>Category</th>
                        <th>Price</th>
                        <th>Currency</th>
                        <th>Date</th>
                        <th>Change</th>
                        <th>Market Cap</th>
                        <th>Outstanding Shares</th>
                        <th>Volume</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Data will be dynamically inserted here -->
                </tbody>
            </table>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            // Load CSV data
            $.get('https://frontiermarketdata.com/assets/testdata', function (data) {
                // Parse CSV data
                var rows = data.split('\n');
                for (var i = 1; i < 100; i++) { // Limiting to 100 rows for demonstration
                    var cols = rows[i].split(',');
                    $('#stock-table tbody').append('<tr><td>' + cols[0] + '</td><td>' + cols[1] + '</td><td>' + cols[2] + '</td><td>' + cols[3] + '</td><td>' + cols[4] + '</td><td>' + cols[5] + '</td><td>' + cols[6] + '</td><td>' + cols[7] + '</td><td>' + cols[8] + '</td><td>' + cols[9] + '</td><td>' + cols[10] + '</td></tr>');
                }

                // Initialize DataTable with fixed headers
                $('#stock-table').DataTable({
                    "paging": false,
                    "searching": true,
                    "info": false,
                    "scrollX": true,
                    "scrollY": "300px",
                    "scrollCollapse": true,
                    "fixedHeader": true,
                    "autoWidth": true,
                    "columnDefs": [{
                        "width": "auto",
                        "targets": "_all"
                    }]
                });
            });
        });
    </script>
</body>

</html>
2

Something’s not right here. You’re inserting what looks like it’s supposed to be a full page into the HTML card, but the HTML card (like the entire post body) gets inserted into post.hbs, so you’ve got containers that aren’t meant to be nested ending up nested.

Try editing your HTML card. Include nothing except the table and contents in it. Maybe the #stock-table-container div that holds it. You may need to do a little styling on it, but that’s going to get you way closer than you are right now.

You’re going to want to set the outermost container in your html card to the grid-column: full-start/full-end attribute. Or maybe grid-column: wide-start/wide-end, if you want wide but not full screen. But first, you’ve got it get it out of the big mess of nested divs, so that it ends up directly in the gridded container.

Tip: Inspecting the page source (in the browser) is pretty informative and can help you figure out what’s going wrong. :)

3

Hi Cathy, I am familiar with inspect element and have been using it to trouble shoot.

I have made the changes you suggested and the issue persists. The table is being columnated by the element mentioned in my original post. I believe this is due to the Source theme.

4

I’m confused. What you pasted in above looks like a whole page, not an html card. What are you actually putting in the html card?

5

Hi Cathy, I removed all of the divs from my original post. Here is the code I am currently using:

<!DOCTYPE html>
<html lang="en">

    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.css">

<body>

            <table id="stock-table" class="display" data-position="fixed">
                <thead>
                    <tr>
                        <th>Country</th>
                        <th>Symbol</th>
                        <th>Company</th>
                        <th>Category</th>
                        <th>Price</th>
                        <th>Currency</th>
                        <th>Date</th>
                        <th>Change</th>
                        <th>Market Cap</th>
                        <th>Outstanding Shares</th>
                        <th>Volume</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Data will be dynamically inserted here -->
                </tbody>
            </table>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            // Load CSV data
            $.get('https://frontiermarketdata.com/assets/testdata', function (data) {
                // Parse CSV data
                var rows = data.split('\n');
                for (var i = 1; i < 100; i++) { // Limiting to 100 rows for demonstration
                    var cols = rows[i].split(',');
                    $('#stock-table tbody').append('<tr><td>' + cols[0] + '</td><td>' + cols[1] + '</td><td>' + cols[2] + '</td><td>' + cols[3] + '</td><td>' + cols[4] + '</td><td>' + cols[5] + '</td><td>' + cols[6] + '</td><td>' + cols[7] + '</td><td>' + cols[8] + '</td><td>' + cols[9] + '</td><td>' + cols[10] + '</td></tr>');
                }

                // Initialize DataTable with fixed headers
                $('#stock-table').DataTable({
                    "paging": false,
                    "searching": true,
                    "info": false,
                    "scrollX": true,
                    "scrollY": "300px",
                    "scrollCollapse": true,
                    "fixedHeader": true,
                    "autoWidth": true,
                    "columnDefs": [{
                        "width": "auto",
                        "targets": "_all"
                    }]
                });
            });
        });
    </script>
</body>
6

Looking at the page you linked above, here’s how to break it out of the main column:

Put the following in that page’s code injection (NOT sitewide)

<style>
#stock-table_wrapper {
    grid-column: wide-start / wide-end;
}
#stock-table_wrapper th {
   color: black
}
</style>

(Change wide-start/wide-end to full-start/full-end if desired)

However, there’s still some unwanted interaction between your code and the Ghost styles.

Hang on… maybe you just need this? (add between style tags)

th, td {
 white-space: nowrap
}

And then change your initialization to this:

                $('#stock-table').DataTable({
                    "paging": false,
                    "searching": true,
                    "info": false,
                    "scrollX": true,
                    "scrollY": "300px",
                    "scrollCollapse": true,
                    "autoWidth": true,
                    "columnDefs": [{
                        "targets": "_all"
                    }]
                });

I can’t test perfectly, but please take that for a spin and see if we’re getting closer?

1 Like
7

Hi Cathy, thank you for this and sorry for the long time in between reply.

This is exactly what I was trying to do (apply a style sheet change on only a specific page), but I can’t seem to find where I can do a CSS code injection for a single page. I only see the sitewide option. I am not that familiar with Ghost, but please let me know if this is a feature on all themes.

I am currently using Source theme, and my code injection option seems to apply site wide. I had searched the documentation for this before posting originally.

8

You can do the same code injection section on any theme. From the post editor, click the button in top right to open the post settings, and scroll down!

9

Oh my goodness, I thought it was a save button! I will report back, thank you. Will post the full solution.

Thank you very much!

10

Hi Cathy, I have pushed the changes live at Market Data do you see how there is still a white fade out on the edges? Is this also caused by the Theme? I was unable to find it when I was inspecting around before.

I think the issue of correcting the width and stylizing the table I can handle, but I want to create a full solution, as there was a lot of threads regarding making Jquery tables look nice.