Hi. I’m using custom CSS for the “quote”. Custom CSS is saved in NewsPaper Theme Panel -> Custom CSS (for desktop as well as for mobile).
Design of Quote in Gutenberg editor is similar to the default quote design without my css changes. How to fix it?
Hi,
For me are the same -> https://i.imgur.com/VZSPwq5.png -> https://i.imgur.com/9uWRrNv.png -> https://i.imgur.com/qOvDarm.png
Please provide some more details and some screenshots.
Thank you!
Hi. Final article is here: https://www.hlidacstatu.cz/texty/kolik-by-stalo-dat-kazdemu-zakovi-vlastni-notebook-prekvapive-malo/
Attached is screenshot from editor
This is modified CSS from Custom CSS
/*
You can add your own CSS here.
Click the help icon above to learn more.
*/
.seriesmeta {
margin-bottom: 20px;
}
.tagdiv-type blockquote, .tagdiv-type blockquote p,
blockquote, blockquote.wp-block-quote p,
blockquote.is-style-large, blockquote.wp-block-quote.is-style-large p {
font-style: italic;
margin: 1.25em 0;
padding: 1.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
background:#ececec;
font-family: "Courier New", monospace;
overflow: auto;
font-size: 16px;
text-transform: none;
text-align: left;
}
.tagdiv-type blockquote.is-style-large, .tagdiv-type blockquote.is-style-large p,
blockquote.is-style-large, blockquote.wp-block-quote.is-style-large p {
font-size: 24px;
}
blockquote p:before, blockquote.wp-block-quote p:before,
blockquote.is-style-large p:before, blockquote.wp-block-quote.is-style-large p:before {
display: block;
content: "\201C";
font-size: 80px;
position: absolute;
left: -3px;
top: -29px;
color: #7a7a7a;
font-family: "Times New Roman", Times, serif;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
blockquote.right {
float: right; width: 30%; min-width: 350px;
margin-left: 2em !important;
}
blockquote.left {
float: left; width: 30%; min-width: 350px;
margin-right: 2em !important;
}
blockquote.small {
font-size:75%;
margin: 0.9em 0;
padding: 0.9em 20px;
line-height: 1.3;
}
li.serieslist-li, li.serieslist-li-current {
overflow-x: hidden;
white-space: nowrap;
font-size: 12px;
padding-bottom:4px;
}
.seriesbox {
max-width: 300px;
}
Hi,
Without the css that you are using -> https://i.imgur.com/JmUqzkV.png the Quote will be -> https://i.imgur.com/yNFoS6s.png
If this is not what you mean, please provide some more details.
Thank you!
You don’t understand my issue.
Quote in Gutenberg editor (editor of the article) is in default quote design (big blue chars) https://www.dropbox.com/s/ppfxe42xkqp6g2a/Screenshot%20%202020-05-25%20at%2016.31.19.png?dl=0
In the article it looks well: here https://www.hlidacstatu.cz/texty/kolik-by-stalo-dat-kazdemu-zakovi-vlastni-notebook-prekvapive-malo/
Is it any way how to have final UI of quote in editor too?
Hi,
That is because the css that you are using for style the quote is apply only on front, on website, this is not apply in backend editor. The custom code section code is affecting only the frontent website, the backend editor can be change only front theme files.
Thank you!
