Adding Powerful Ghost Blog CSS Styling (The Very Easy Way)

Ghost Blog is what runs this website. It has proven itself very secure, very reliable, and runs inside a very small docker container footprint.

Code block highlighting makes a site look very professional, and here is a very easy way to do so without spending months on it.

Access https://prismjs.com/  and select the languages that your code blocks will be using:

Once you have done this at the bottom will be two blocks:

• The left block is your javascript. The right is the css.
• Inside your ghost blog site settings select the gear

• Select the code injection under advanced.

• This is the 'Site Header' block this will be injected at the top of every page.

• Inside the site header you will set it up as it looks above..

<script>
   ** Paste the Download JS Brown Box LEFT text exampled above **
</script>
<style>
   ** Paste the Download CSS Yellow Box RIGHT text exampled above **
</style>

• That is literally it!  Your code will look like:

Changing Column Width (On Casper Theme)

• If you just like to slightly adjust your column width:

<style>
@media (max-width: 650px)
.gh-canvas>* {
    grid-column: 2/span 2 !important;
}
.gh-canvas>* {
    grid-column: 3/span 2 !important;
}

</style>

• 2/span 2 !import - Means start on grid 2 and use 2 grids.