CSS snippet from this article https://wptips.dev/gutenberg-custom-styles
/* ADMIN CSS */ | |
/* Media Text: Half Bg */ | |
.wp-block-media-text.is-style-half-bg { | |
--columnMedia: 4fr; | |
--columnContent: 3fr; | |
background-color: transparent !important; | |
padding-top: 2rem; | |
padding-bottom: 2rem; | |
} | |
.wp-block-media-text.is-style-half-bg::before { | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: -2rem; | |
bottom: 0; | |
width: calc(50% + 2rem); | |
background-color: var(--bgColor, rgba(0,0,0,.1)); | |
} | |
.wp-block-media-text.is-style-half-bg.has-media-on-the-right::before { | |
left: auto; | |
right: -2rem; | |
} | |
/* Heading: Stars */ | |
.is-style-stars { | |
display: flex; | |
flex-wrap: wrap; | |
background-color: transparent !important; | |
padding: 0 !important; | |
} | |
.is-style-stars::before { | |
content: "\2605 \2605 \2605 \2605 \2605"; | |
order: 2; | |
display: block; | |
width: 100%; | |
font-size: 14px; | |
letter-spacing: 2px; | |
color: var(--bgColor, currentColor); | |
} | |
/* Button: Outline arrow */ | |
.wp-block-button.is-style-outline-arrow .wp-block-button__link { | |
position: relative; | |
overflow: visible; | |
background-color: transparent; | |
border: 2px solid; | |
border-radius: 4px; | |
padding-right: 2rem; | |
margin-right: 1.5rem; | |
letter-spacing: 1px; | |
text-transform: uppercase; | |
} | |
.wp-block-button.is-style-outline-arrow .wp-block-button__link::after { | |
content: ""; | |
position: absolute; | |
top: 50%; | |
right: 0; | |
transform: translateX(50%) translateY(-50%); | |
display: inline-block; | |
width: 40px; | |
height: 10px; | |
background: url('https://raw.github.com/hrsetyono/cdn/master/wptips/2020-12/button-arrow.svg') center center no-repeat; | |
background-size: 100% auto; | |
} |
/* FRONTEND CSS */ | |
/* Media Text: Half Bg */ | |
.wp-block-media-text.is-style-half-bg { | |
position: relative; | |
position: relative; | |
background-color: transparent !important; | |
padding-top: 2rem; | |
padding-bottom: 2rem; | |
column-gap: 2rem; | |
} | |
@media (min-width: 768px) { | |
.wp-block-media-text.is-style-half-bg { | |
grid-template-columns: 4fr 3fr; | |
} | |
.wp-block-media-text.is-style-half-bg.has-media-on-the-right { | |
grid-template-columns: 3fr 4fr; | |
} | |
} | |
.wp-block-media-text.is-style-half-bg .wp-block-media-text__media, | |
.wp-block-media-text.is-style-half-bg .wp-block-media-text__content { | |
position: relative; | |
z-index: 2; | |
padding: 0; | |
} | |
.wp-block-media-text.is-style-half-bg::before { | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: -2rem; | |
bottom: 0; | |
width: calc(50% + 2rem); | |
background-color: var(--bgColor, rgba(0,0,0,.1)); | |
} | |
.wp-block-media-text.is-style-half-bg.has-media-on-the-right::before { | |
left: auto; | |
right: -2rem; | |
} | |
@media (max-width: 768px) { | |
.wp-block-media-text.is-style-half-bg::before, | |
.wp-block-media-text.is-style-half-bg.has-media-on-the-right::before { | |
width: calc(100% + 2rem); | |
bottom: auto; | |
height: 300px; | |
left: -1rem; | |
right: -1rem; | |
} | |
} | |
/* Heading: Stars */ | |
.is-style-stars { | |
display: flex; | |
flex-wrap: wrap; | |
background-color: transparent !important; | |
padding: 0 !important; | |
} | |
.is-style-stars::before { | |
content: "\2605 \2605 \2605 \2605 \2605"; | |
order: 2; | |
display: block; | |
width: 100%; | |
font-size: 14px; | |
letter-spacing: 2px; | |
color: var(--bgColor, currentColor); | |
} | |
/* Button: Outline arrow */ | |
.wp-block-button.is-style-outline-arrow .wp-block-button__link { | |
position: relative; | |
overflow: visible; | |
background-color: transparent; | |
border: 2px solid; | |
border-radius: 4px; | |
padding: 0.5rem 1.5rem; | |
margin-right: 1.5rem; | |
letter-spacing: 1px; | |
text-transform: uppercase; | |
} | |
.wp-block-button.is-style-outline-arrow .wp-block-button__link::after { | |
content: ""; | |
position: absolute; | |
top: 50%; | |
right: 0; | |
transform: translateX(50%) translateY(-50%); | |
display: inline-block; | |
width: 40px; | |
height: 10px; | |
background: url('https://raw.github.com/hrsetyono/cdn/master/wptips/2020-12/button-arrow.svg') center center no-repeat; | |
background-size: 100% auto; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment