Skip to content

Instantly share code, notes, and snippets.

@hrsetyono

hrsetyono/my-editor.css Secret

Last active Dec 22, 2020
Embed
What would you like to do?
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