Ghost, a cyberpunk theme for Discourse

Inspired by the cyberpunk genre, I created a Discourse theme to capture the sense of rebellion and dystopian city landscape by introducing subtle glitches in the interface, neon colors, semi-transparent gradients and animated elements.

5bb9fee9d594f-300
Source: Corporations on Behance

:microscope: Preview it on the theme creator

:link: Github repo link

:man_shrugging: How do I install a theme?




Thanks to @awesomerobot and the Discourse team for supporting this work.

41 Likes

Good job! The Advanced Search box is probably my favorite thing about this theme. :star_struck:

3 Likes

I like it! :slight_smile:

3 Likes

Modal windows also have this gradient (but less transparent :eyeglasses:)

8 Likes

As I wanted a theme like this with the original speech but with these gradient :heart:

1 Like

How do I make it not change my primary logo color?
It’s currently red, when naturally it’s blue.

2 Likes

If you add this css your logo will remain unchanged.

.d-header .logo-big, .d-header #site-logo {
  filter: unset;
}
6 Likes

Its showing a error 500 while I’m trying installing this. @melhosseiny

It’s likely to be a typo in your repo link as I’ve just installed this successfully from the link in OP:

2 Likes

2 Likes

Can you install any theme at present? As I’m able to install it at the moment it’s unlikely to be a discourse bug.

Yes, but just Ghost and Fakebook ins’t working here.

Ok, will try that one next.

Yep, it works too:

If other GitHub URLs work it’s not an intermittent network issue. Have you checked /logs?

5 Likes

Hello,

How do I remove the glow from the buttons, and change to color of the topic editor (from blues).

Thank you in advance!

To remove the glow, you can set box-shadow to none for default, primary and danger buttons on hover

.btn.btn-default, .btn.btn-primary, .btn.btn-danger {
  .discourse-no-touch & {
    &:hover, &.btn-hover {
      box-shadow: none;
    }
  }
}

To also remove it from navigation bars (including the main one)

.nav-pills, .admin-controls .nav-pills {
  >li>a:hover, >li.active>a, >li>a.active {
    box-shadow: none;
  }
}

// On mobile only
.nav-pills > li.navigation-toggle {
  box-shadow: none;
}

To change the background color of the topic editor, I suggest you look at the theme’s source code and search for where the $bios sass variable is used. For example, to change the background color of the composer to a red color

#reply-control {
  background: red;
}

If you do that, you probably also want to change the composer popup’s background as well (it pops up when you start typing and doesn’t show up on mobile)

// On desktop only
#composer-popup {
  background: red;
}
4 Likes

Thank you! I’ll give it a try!

I’m using this theme on mobile and loving it, great work!

There is just one page where the theme is breaking down, our new assigned route to the assign plugin, cc @Roman_Rizzi

8 Likes

Agreed. Awesome theme, and that quirk stinks. Any chance it’ll get fixed?

Hi @melhosseiny , I added topic list previews plugin to your theme, and if I select “topic tiles” layout, it forces all of the posts to the left-hand-side, stacked on top of one another instead of filling them out masonry-style. This doesn’t happen with any of the other themes I’ve tried – just ghost.

Ghost theme:

Vanilla theme:

Do you have any suggestions that I can try to make the fix?

Also, @angus, any thoughts?

Ghost changes some topic templates and make a bunch of stuff flex, so it will be incompatible with any other plugin or theme that expects the standard Discourse topic template. Getting it to play with other plugins is not planned and out of scope of this theme.

9 Likes