In this post, i’ll show you the before and after results for embedding code in WordPress using Githubs Gists.
All CSS code should be added near the end of your child themes style.css file before the start of the code for your themes Media Queries.
Change Font Size
Here’s what the default size looks like for this theme.
And here’s the code to make the font size smaller or larger.
.gist {
font-size: 12px;
}
And here’s an example at 75%
Change Selection Color
Here’s the default selection color the code is highlighted.
Here’s some sample code you can use to change the selection color.
::selection {
background: #24890d;
color: #fff;
text-shadow: none;
}
::-moz-selection {
background: #24890d;
color: #fff;
text-shadow: none;
}
And here’s an example.
Change Font Color
.gist-data {
color: red;
}
And here’s the result.
If your code seems bloated when you embed it in gist, one of these code snippets may provide the solution that fixes it.
If you find any of the code doesn’t work for some reason, you may need to add !important to the end of the value for each property like this:
.gist {
font-size: 34px;
color: red!important;
}
Default Gist CSS
Here’s all the defualt CSS rendered when you embed a gist in a web page.
Leave a Reply
You must be logged in to post a comment.