Share your Ghost Blog URL!

Share & showcase
67

I built a custom theme for my blog totally from scratch using Tailwind CSS.

4 Likes
68

Heres one I built:

www.cramahelibrary.ca

I built the theme using Foundation for Sites. It’s simple and functional and fully dynamic.

1 Like
69

@m1guelpf I really like the little Moon-Icon-Switch on your Site to toggle Dark/Bright mode.

How did you do it and can it be done easily in another Theme? :wink:

70

EricFreeburg.com, a significant mod of the Valkyrie Theme

2 Likes
71

https://gkquiz.co I’m using @GodoFredoNinja’s Simply theme. It’s awesome. Thanks for the amazing theme :smiley:

2 Likes
72

I write about useful apps that helps you to autoamte your life

1 Like
73

My company’s blog, using a modified version of Casper.: designerup.co/blog/

I’ve also developed two Ghost themes that are available for sale, Dandelion and AnswerHub.

2 Likes
74

@ericalli I really like AnswerHub, good job!

1 Like
75

This is my site: https://hugothemesfree.com/ & https://gatsbyawesome.com/ I am proud of that developer

1 Like
76

https://Ghost-O-Matic.com - currently running on the “Orbit” theme - a nicely-built modern twist on the more traditional Ghost theme. By GBJsolution, $32 at Envato.

1 Like
77

I love that too, Miguel – nice work! I found this function in the page:

function(e, t) {
window.addEventListener("load", function() {
        document.body.classList.remove("preload")
    }),
    function() {
        function e(e) {
            window.__theme = e, t = e, "dark" == e ? document.body.setAttribute("data-dark", !0) : document.body.removeAttribute("data-dark"), window.__onThemeChange(e)
        }
        var t;
        window.__onThemeChange = function() {};
        try {
            t = localStorage.getItem("theme")
        } catch (e) {}
        window.__setPreferredTheme = function(t) {
            e(t);
            try {
                localStorage.setItem("theme", t)
            } catch (e) {}
        };
        var n = window.matchMedia("(prefers-color-scheme: dark)");
        n.addListener(function(e) {
            window.__setPreferredTheme(e.matches ? "dark" : "light")
        }), e(t || (n.matches ? "dark" : "light"))
    }(), document.getElementById("themeToggle").onclick = function() {
        window.__setPreferredTheme("light" == window.__theme ? "dark" : "light")
    }
},

… and then this in the HTML:

simple-theme-switcher
simple-theme-switcher.png802×195 10.6 KB

… and this in the CSS:

[data-dark] {
    --sepia-500: #181a1b;
    --sepia-900: #e8e6e3;
    --sepia-300: rgba(213, 210, 204, 0.6);
    --sepia-100: rgba(213, 210, 204, 0.3);
    --blue-500: #65a9e8;
    --white: #3c371e;
    --black: #e8e6e3
}

[data-dark] .dark\:bg-sepia-500 {
    background-color: var(--sepia-500)
}

[data-dark] .dark\:bg-sepia-100 {
    background-color: var(--sepia-100)
}

[data-dark] .dark\:border-sepia-900 {
    border-color: var(--sepia-900)
}

[data-dark] .dark\:border-2 {
    border-width: 2px
}

[data-dark] .dark\:fill-yellow-500 {
    fill: #ecc94b
}

[data-dark] .dark\:stroke-yellow-500 {
    stroke: #ecc94b
}

body[data-dark] .highlight {
    background-color: #4e4b06
}

@media (min-width:768px) {
    .md\:bg-white {
        background-color: var(--white)
    }
    [data-dark] .md\:dark\:bg-sepia-500 {
        background-color: var(--sepia-500)
    }
}
78

That is a sweeeet design job - love the animation on the excerpt blocks, as well as the date/time image presentation!

79

Our firm’s blog on Ghost(Pro): https://stout-bowman-associates-llc.ghost.io/ using a modified Casper theme and Foundation for Sites for navigation.

1 Like
80

Hay! Thanks for using my theme. Glad you liked it. Cheers :heart::metal:

BTW, please fix the SSL issue in your site. It looks like the certificate was issued for another domain.

1 Like
81

Let’s keep this thread working! A lot of inspiration.

82
1 Like
83

Hey there @lmuzquiz, I was going to say that that’s a very nice (and thorough) adaptation of the Nubia theme you have there, but then upon looking at your coding it looks like you heavily adapted it. Is that Bootstrap or something that you substituted in there for the row/column styling that Nubia came with?

Secondly, the reason why I looked at your coding (as opposed to just admire all of your nice adaptations) is because I too am currently working on a heavy-ish adaptation of the Nubia theme, and I too want to add sticky functionality to the sidebar. I’ve easily got it working before on other Ghost blogs, but for some reason adding in

.c-sidebar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0;
}

isn’t working in this case, nor is substituting in any of your .make-me-sticky and/or .sidebar-item <div>s and styling. I might just be having a brain-fart at the moment and missing out on a basic variable or something that needs to be added in, but is there something else you added in to get the sticky functionality working?

Cheers

84

Hi @Stromfeldt, yes basically i changed the whole grid to bootstrap 4 cause i am more familiar with it. I did tried the sticky sidebar with the Nubia grid and could not make it work, but i think its got to be able to work. The familiarity with bootstrap saved my time on this project. Basically i just needed Nubia to inspire the design. I also changed the code on the search hunter component so it does the search from the title and from the meta description of the posts.

85

Geez, that’s quite the overhaul. Nice work with it. And thanks for the heads-up about the position: sticky functionality, I might just resort to using a script I’ve used on other Ghost blogs, HC-Sticky.

86

Hey everyone,

I built a side project recently, MadeWithGhost, with the goal of creating a central location to curate/collect and display sites made with Ghost. I launched it this morning on Product Hunt and you can check it out by clicking any of the two links in this post. Also, if you think your ghost site might make a good addition, just hit the submit button at the top of the site, enter in the form info, and I’ll get on reviewing it soon.

5 Likes