Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
GP&GB Course CSS
/* adds letter spacing to the main navigation */
.main-navigation a {
letter-spacing: 1px;
/* adds rounded corners to the GeneratePress blog archive photo & post featured image*/
.featured-image img, .post-image img {
border-radius: 8px;
/* custom class to style the blog post header date and author text */
.post-meta-style {
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
/* adds a drop shadow to the GenerateBlocks containers – must type drop-shadow in the container's Additional CSS class(es) field */
.drop-shadow {
box-shadow: 0px 0px 20px rgba(200, 200, 200, 0.2);
/* adds border radius to the top left and right corners of an image block – must type round-top-corners img in the Additional CSS class(es) field */
.round-top-corners img {
border-radius: 8px 8px 0px 0px;
/* adds a button to the navigation – must add nav-button to the menu items CSS class field */
.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a {
color: rgba(72,45,112,1.0);
border: 3px;
border-style: solid;
line-height: 36px;
border-radius: 2px;
margin-left: 20px;
transition: all 0.6s ease 0s;
.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a:hover {
color: rgba(72,45,112,0.8);
/* bonus video - header element gradient overlay */
.gradient-overlay {
position: relative;
.gradient-overlay:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(
rgba(92,121,255,0.9) 0%,
rgba(76,221,242,0.8) 100%
.gradient-overlay .inside-page-hero {
z-index: 1;
position: relative;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment