Sharing my gradient customisations in code injection, for OnFlow theme by Priority Vision

Themes
1

OnFlow Theme

I really love the OnFlow theme by @PriorityVision :heart_eyes:

My customisations - pictures

I added some touches like gradient message bubbles and highlight marker effect for headings:

image
image3238×2238 367 KB

image
image3238×2238 377 KB

You can visit my site to see a demo currently, though I will probably change the post content soon (was just typing poetic things to try at first)

Code injection customisations

If you also get the theme, which I highly recommend, I wanted to share my customisations in case you’re interested.

Here is what I added to code injection in Ghost:

<style>
  /* Gradient for message bubbles */
  .card-content {
    background: linear-gradient(180deg, rgba(254,177,230,0.9) 0%, rgba(200,189,240,0.9) 30%, rgba(139,231,240,0.9) 100%);
  }

  /* Make text of message bubbles more visible against gradient */
  .card-content p {
    color: var(--color-contrast);
  }

  .card-content .card-date {
    color: #7178af;
  }

  /* Add highlight marker effect to headings */
  /* Thanks to https://dev.to/shubhamjain/how-to-create-marker-highlight-effect-in-css-be4 */
  h2.card-title {
    background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-1&color=D596FA);
    margin: -6px -6px;
    padding:  6px  6px;
  }

  .section-subscription h2 {
    background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-1&color=D596FA);
    margin: -6px -6px;
    padding:  6px  6px;
  }
  
</style>

I marked each part with comments, so you can just copy whatever CSS you’re interested in and tweak it.

Future improvements

I might see if I can make the page show different coloured gradients/marker effect depending on which internal tags that each post has.

(Similar to fueko’s themes e.g. Renge which allows you to change the background color of a post’s card on the home page, depending on which internal tag it has)

Extra resources

You can customise your gradient colors using any tool like CSS Gradient:

And here is where I learnt how to do the marker highlight effect:

1 Like