Blockquote style

Posted in: Newsmag
Post count: 19

Hello everybody!
How can I change the blockquote style to modify the layout with or without CSS code? I’ve tried to add a custom CSS code, but I see that conflicts with the standard template’s style…
Thanks.

  • This topic was modified 4 years by signorini.
  • This topic was modified 4 years by signorini.
Post count: 35449

Hello,
The blockquote style can be set from the Gutenberg editor -> https://i.imgur.com/cDNfmXu.png
If this is not what you mean, please let me know!
Thank you!

Post count: 19

I mean if it is possible to set a custom style.
With other themes, I just enter for example the following CSS code to obtain a blockquote in a sort of brackets.
blockquote {
max-width: 600px;
text-align: center;
margin: 20px;
padding: 20px;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 20px;
color: #428bca;
border-left: 4px solid #428bca;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-right: 4px solid #428bca;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}

Bust if I try to do so with newsmag it doesn’t work or better, is a merge between the standard theme’s blockquote style and this one.

I’m sorry for my English, hope I was clear.
Thanks.
J

Post count: 35449

Hi,
Now I understand what you mean.
This code is working with the Newsmag too, all you need to do is to add an extra class.
Please try this css:
.td-post-content blockquote {
max-width: 600px;
text-align: center;
margin: 20px;
padding: 20px;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 20px;
color: #428bca;
border-left: 4px solid #428bca;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-right: 4px solid #428bca;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}

I hope this will help you!

Post count: 19

Hi!
My issue is partially solved.
Now it adds the 2 brackets, but it doesn’t overwrite the style.css blockquote parameters. I’m not an expert, but I was lucky to find the CSS scrips in the style.css file:
}
.td-page-content blockquote p,
.td-post-content blockquote p,
.wpb_text_column blockquote p,
.td_block_text_with_title blockquote p,
.mce-content-body blockquote p,
.comment-content blockquote p {
font-family: 'Roboto', sans-serif;
font-size: 30px;
line-height: 40px;
font-weight: normal;
font-style: italic;
text-transform: uppercase;
color: #4db2ec;
}

Only changing them here I can for example change the font size, the color, etc. Therefore as I understand only the bold script of the custom CSS is recognized.
.td-post-content blockquote {
max-width: 600px;
text-align: center;
margin: 20px;
padding: 20px;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 20px;
color: #428bca;
border-left: 4px solid #428bca;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-right: 4px solid #428bca;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;

}

Clearly, I prefer not to make changes in the style.css file, also because probably they will be overwritten when the theme is updated.

For sake of clarity for future users that will eventually read this post having the same needs. You cannot change the style of the blockquote from “Newsmag – Theme panel”, but you need just to add the code in the custom CSS field of “Newsmag – Theme panel”.

Post count: 35449

Hi,
Yes, the section from custom css from theme panel can be used.
Also, if you want to edit the style file, you can use the css in the child theme in style.css file, in this way the code will not be lost and you can adjust it after your needs -> https://forum.tagdiv.com/newsmag-child-theme-support/
Thank you!

Viewing 6 posts - 1 through 6 (of 6 total)
The forum ‘Newsmag’ is closed to new topics and replies.