— layout: post title: “Customizations” date: 2016-09-20 16:25:06 description: Few customizations available out of the box! share: true tags: - customizations

- jekyll

Accent color

Accent color is color for some important elements, such as links, buttons, icons. Currently accent color is <span class=“btn” style=“background-color:#3CA2A2; color:#444444”>#3CA2A2</span>. This theme has some more predefined colors available in theme.scss:

theme.scss {:.filename} {% highlight scss %} // Several accent colors, choose one or create your own! $accent-color: #3CA2A2; // original =) // $accent-color: #C38FD6; velvet // $accent-color: #8FD6B3; greenish // $accent-color: #35B4DE; bluish // $accent-color: #D2E354; yellowish // $accent-color: #52B54B; green

{% endhighlight %}

You can use one of them (just click the button below to see accent color in action) or define your own!

<span class=“btn” style=“background-color:#C38FD6; color:#444444”>#C38FD6</span>, <span class=“btn” style=“background-color:#8FD6B3; color:#444444”>#8FD6B3</span>, <span class=“btn” style=“background-color:#35B4DE; color:#444444”>#35B4DE</span>, <span class=“btn” style=“background-color:#D2E354; color:#444444”>#D2E354</span>, <span class=“btn” style=“background-color:#52B54B; color:#444444”>#52B54B</span>.

Other colors

As Jekyll comes with support of SASS I put colors in variables. Here are the ones which could be easily changed:

theme.scss {:.filename} {% highlight scss %} $font-color: dddddd; $background-color: #292929; $post-panel-color: #444; $footer-background-color: #292c2f; $note-color: #87CEFA; $warning-color: ffff00; {% endhighlight %}

Background

It is also possible to change the background pattern and color. This theme comes with few patterns pre-installed – you can check them by clicking on the images below. Or check the transparenttextures.com – it has tons of different patterns for background.

To change the color go to the theme.scss and change the background-pattern variable to the name of the pattern image file. To use custom pattern, download it from transparenttextures.com and place it under css/pics/background/.

theme.scss {:.filename} {% highlight scss %} // use this or pick any from /css/pics/background folder or from transparenttextures.com $background-pattern: 'random-grey-variations.png'; {% endhighlight %}