How to customize Radix’s css

5 quick Beginner-friendly css tips for Radix

Alberto Negron
10-09-2018

Radix

Here are 5 quick wins to change your Radix’s blog look and feel. Bear in mind that I am not an expert in css and I think everyone has different ideas about the right way to style a website/blog.

My goal is at least to point you in the right direction on how you can modify your theme or give you a full working sample stylesheet if you (like me) don’t know much about css.

And now, without further ado, here are my tips!

Create a custom stylesheet

The first thing we need to do to change Radix’s default css is to create a stylesheet file in the root of your blog folder (where you can see your \_posts, \_site and \images folder. Name your file styles.css. This file will be used to create an alternate theme for your blog.

The next step is to modify Radix’s default output in _site.yml as follow:

from:


output: radix::radix_article

to:


output:
  radix::radix_article:
    css: styles.css

With the above out of the way we can now start modifying Radix’s theme.

Justify your Content

By default Radix comes with left alignment of text within a paragraph which in my opinion a bit eyesore when reading long articles. Luckily this is a quick change!

Just add the following snippet to your styles.css and render your blog again to see changes in action.


body {
  text-align: justify;
}

Default Radix’s logo is quite small and it does not look good when you change it to your own logo, specially if your logo is bit bigger. This change isn’t as straight forward as the one above but scouring the internet I came across this example

By adding the following definition to your styles.css you will be able to render a bigger logo. Play with the option max-height: 50px to make the logo either bigger or smaller.


.radix-site-header .logo img {
   display: inline-block;
   background-size: 100% auto;
   background-repeat: no-repeat;
   max-height: 50px;
   width: auto;
   margin-bottom: 5px;
   padding-right: 5px;
   padding-top: 5px;
   vertical-align: bottom;
 }

Align your Blog’s Title with the right navbar

The above snippet has a side effect if you like me have a right menu (home, about, etc). The title and the right menu will look (little or a lot) misaligned due to the size of your new logo. Again just add the following snippet to styles.css to fix it.


.title {
  vertical-align: top;
}

Change the color of your navbar

To change the color of your navbar (and footer if you have one) we need to modify Radix’s default css class radix-site-nav. So good ahead and add the following defintion to your styles.css. Again play around with background-color to get the your desired colour.


.radix-site-nav {
  color: white;
  background-color: #A4262C;
  font-size: 15px;
  font-weight: 300;
}

My styles.css

Here is my styles.css if you fancy to just copy & paste and then just change colors and logo size. I hope you have enjoyed reading this article.


.radix-site-nav {
  color: white;
  background-color: #A4262C;
  font-size: 15px;
  font-weight: 300;
}

.radix-site-nav a {
  color: inherit;
  text-decoration: none;
}

.radix-site-nav a:hover {
  color: black;
  
}

.nav-dropdown-content > a {
  color: black;
}

.radix-site-header {
  
}

.radix-site-footer {
}

.radix-site-header .logo img {
   display: inline-block;
   background-size: 100% auto;
   background-repeat: no-repeat;
   max-height: 50px;
   width: auto;
   margin-bottom: 5px;
   padding-right: 5px;
   padding-top: 5px;
   vertical-align: bottom;
 }

.title {
  vertical-align: top;
}

body {
  text-align: justify;
}


@media print {
  .radix-site-nav {
    display: none;
  }
}

Reuse

Text and figures are licensed under Creative Commons Attribution CC BY 4.0. The figures that have been reused from other sources don't fall under this license and can be recognized by a note in their caption: "Figure from ...".

Citation

For attribution, please cite this work as

Negron (2018, Oct. 9). Data Addict's Secret Diary: How to customize Radix's css. Retrieved from http://www.dataaddict.me/posts/2018-10-09-how-to-customize-radixs-css/

BibTeX citation

@misc{negron2018how,
  author = {Negron, Alberto},
  title = {Data Addict's Secret Diary: How to customize Radix's css},
  url = {http://www.dataaddict.me/posts/2018-10-09-how-to-customize-radixs-css/},
  year = {2018}
}