htmlcsstwitter-bootstrapjekyll

How do I change bootstrap LESS code.less source code to customize my code coloring?

Currently, the theme I am using is based on the bootstrap.min.css from maxcdn online, but I can't seem to find the code.less source code anywhere to edit so that I can change the coloring of my inline code and the font type used.

I have written a custom.css file to overlay the original bootstrap css with the following option:

pre {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

// Inline code
code {
  padding: 2px 4px;
  font-size: 90%;
  color: #000000;
  background-color: #eff0f1;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

// Enable scrollable blocks of code
.pre-scrollable {
  overflow-x: scroll;
}

But nothing has changed. Is there a way I could actually let the changes I want kick in? My website is currently based on Jekyll.

This is the source code where I put custom.css over the original bootstrap css: https://github.com/kwotsin/kwotsin.github.io/blob/master/_includes/head.html

Am I doing it the right way?

Solution

  • You basically have 3 option:

    Option:1 Download the bootstrap source code less.css. modify the file and use it.

    Option:2 Place !important beside the css that you want to override in your custom.css

    Option:3 Go to developer tools identify the portions of less.css which you want to override and use your own id with those elements. After that style them in your own css file.