New Theme for Blog

Today I decided that I wanted to give my Jekyll blogging site a fresh coat of paint as I’ve been using the same theme for a few years. After some experimentation and relearning some of the basics of Jekyll I was able to switch to the Flexible Jekyll theme. After applying the theme it became increasingly apparent, however that I would once again have to make my own CSS modifications in order for everything to display correctly. I also wanted to add some nice little touches like highlight colors and the search mechanism I had in my previous theme.

Custom CSS

So once again I had issues with Syntax highlighting with a new theme. Seems to be a trend with all the Jekyll themes. The GitHub Gist other line highlights were two loud and the line numbers were not lined up right with the code itself. These were for the most part simple fixes but it just goes to show that any time you add a theme in Jekyll it is probably best to apply your own custom CSS to the theme for the pieces that may not suit you. These themes are NOT one size fits all. One thing I did differently this time however was instead of downloading the theme directly into my GitHub Website repository, I am now using the new Jekyll Gem jekyll-remote-theme. This allows you to load the theme when the site is built and I believe keep it up to date. I also when applying my CSS to the built in copied down the main CSS and then added the following lines at the top to load the main CSS and allow me to customize said CSS:

@import "main.css";
@import "custom.css";

Now that we can use custom CSS, I can make changes to how things behave on the site. If you are interested in just pulling my CSS Styles and adjusting them for your site feel free to copy the custom.css code below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
/* Fix Code Blocks */
pre {
    white-space: pre !important;
}
.lineno {
    user-select: none !important;
    margin: 0 auto !important;
}
.rouge-table td {
    padding:inherit !important;
}
.rouge-table td.gutter.gl {
    width:7% !important;
}
.rouge-table td.code {
    width:93% !important;
}
.rouge-table {
    width:inherit !important;
}
.article-page {
    width: 100% !important;
}
/* Shrink Cover Images */
.page-cover-image {
    max-height: none !important;
    max-width: 25% !important;
    margin: 0 auto !important;
    background-color: #fff !important;
}
/* Make Thumbnails a nice size */
.post-thumbnail {
    background-size: 65% !important;
    background-repeat: no-repeat !important;
}

/* Remove Facebook Icon */
.contact li:nth-child(2) {
    display: none !important;
}

/* Fix Gist Hightlighting */
table tr:nth-child(even) {
  background: #eee !important;
}

/* Center navigation */
.container {
    display: block !important;
    margin: 0 auto !important;
}

.pagination ul {
    display: inline-flex !important;
}
.pagination ul p {
    padding-left: 0.5em !important;
    padding-right:0.5em !important;
}

/* Format Projects List */
.projects-title {
    font-size:1.25em;
    font-weight:bold;
    background: cadetblue;
    color:#ffffff;
    text-align:center;
    margin-top: 5.0em;
    padding-top:0.25em;
    padding-bottom:0.25em;
    display:block;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    border-radius: 5px;
    width: 102%;
}
.projects ul {
    list-style-type: none !important;
    padding-left: 0 !important;
    width: 100% !important;
}
.projects a {
    color: #263959;
    text-decoration: none;
}
.projects a:hover {
    color: cadetblue;
}

/* Format Search Results */
.sidebar {
    overflow: auto;
}

#search-input {
    width:100%;
    margin: 0 auto 2.0em;
    display: block;
}

#results-container {
  list-style-type:none;
  margin: 0 auto;
  margin-bottom: 5.0em;
  z-index:5;
  background-color: #fff;
}
.search-wrapper ul {
    padding-left: 0 !important;
}
.search-wrapper ul li a {
    color: #263959;
    text-decoration: none;
}
.search-wrapper ul a:hover {
    color: cadetblue;
}
.search-wrapper ul li:hover {
    -webkit-transform: translate(0px, -2px);
    -ms-transform: translate(0px, -2px);
    transform: translate(0px, -2px);
}
.search-wrapper ul li {
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
}

/* Format links in blog posts */
.wrap-content a {
    color: #263959 !important;
    text-decoration: none !important;
}
.wrap-content a:hover {
    color: cadetblue !important;
}

.about .author-name::after {
    display: none !important;
}
.about .author-name p {
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
}
.about .author-name p:nth-child(2) {
    font-size: 15px;
    margin: 0 0 10px;
    text-transform: none !important;
    font-weight: normal !important;
    text-align: left;
}
/* New Navigation Arrows */
i.fa.fa-arrow-circle-o-left {
    font-size:25px;
}
i.fa.fa-arrow-circle-o-left:hover {
    color: cadetblue;
}
i.fa.fa-arrow-circle-o-right {
    font-size:25px;
}
i.fa.fa-arrow-circle-o-right:hover {
    color: cadetblue;
}
/* Contact cadetblue highlight */
.contact i.fa.fa-twitter:hover {
    color: cadetblue;
}
.contact i.fa.fa-github:hover {
    color: cadetblue;
}
.contact i.fa.fa-linkedin:hover {
    color: cadetblue;
}
.contact i.fa.fa-envelope-o:hover {
    color: cadetblue;
}
/* Format Post Link Headings to cadetblue */
.post h2 a:hover {
    color: cadetblue !important;
}

.about .cover-author-image {
    background-color: cadetblue !important;
}

Now that everything is adjusted and looking pretty, it was time to begin pulling the search feature back into the layout

Search

To add the search, we once again use the same files we had in the original theme which are from Simple Jekyll Search. I have kept these files intact as I didn’t really need to make any changes but of course I’ll probably update the search to the newer version soon.

Adding the search required us pulling down the main.html file as we are going to make changes to the default file. Remember, any files we place in our repository manually will OVERRIDE the remote version. Using the following code in our main.html and then combined with the Search json files and the CSS listed above we now have Search capabilities on the site.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input type="text" id="search-input" placeholder="search...">
<div class="search-wrapper"><ul id="results-container"></ul>
</div>
<script src="/js/jekyll-search.js" type="text/javascript"></script>
<script type="text/javascript">
SimpleJekyllSearch({
  searchInput: document.getElementById('search-input'),
  resultsContainer: document.getElementById('results-container'),
  json: '/search.json',
  searchResultTemplate: '<li style="display:block;"><a href="{url}" title="{title}">{title}</a></li>',
  noResultsText: 'No results found',
  limit: 10,
  fuzzy: true
})
</script>

Finishing Touches

One thing I never did that I probably should have was add images for ALL posts so that all posts in the pagination lists looked consistent. Lastly, I had to go through all of my posts themselves to adjust image links and attachment links as these links needed updated for the new theme.

Special Thanks

Once again John Pater was great in assisting me with the trials and tribulations of CSS as it is always an adventure. If you have questions or comments please let me know.