Docs

[Matthieu]

Hi there !

I’d like to have a specific CSS for my blog posts.
Indeed, I find the global size of H1 and H2 too big for my posts and I would be pleased to have an other way to show my citations in the text :

– H1+H2 : smaller size and the possibility to fine tune the space before and after the title. Please give me the code to add and I will do my own tests to find the size that fits my tastes 🙂
– citations : I would like to have a small indent, a ” icon, text in italics and some space above and after the citation

Thank you by advance for your help !

[Darshana]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Matthieu]

This reply has been marked as private.

[Jade]

Hi there,

Please use these CSS selectors and kindly add the CSS rules accordingly:

.single-post h1 {
    font-size: 25px
    margin: 0;
}

.single-post h2 {
    font-size: 20px;
    margin: 0;
}

.single-post .footnotes {
    padding-left: 15px;
    margin: 25px 0;
    font-style: italic;
}

Hope this helps.

[Nabeel A]

Hi there,

Thanks for providing the credentials. Try this code

.single .entry-title {
    font-size: 20px !important;
}

.single .entry-content h1 {
    font-size: 20px !important;
}

.single .entry-content h2 {
    font-size: 20px !important;
}

Adjust the size as per your need. Cheers!

[Matthieu]

Hey there,

Thanks to both of you for your answers.
My apologies, by citation, I meant blockquote…

Could you also give me the code for it ?

[Joao]

I There,

Would you mind providing the url of the page you are using the blockquotes?

Thanks

Joao

[Matthieu]

You have an example of blockquote at this page (accessible only with the credentials given earlier) : http://canopee-innovation.com/qui-sommes-nous/pourquoi-la-canopee/
I’d like to have the same font as the rest of my website, another color (#00BCD4), no lines below and above, paddings of 5% left and right.
Thank you for your help !

[Friech]

Hi There,

Please address all the syntax error on your Custom CSS in Customizer first.

The double slash ( // ) is not a valid comments on CSS, It should be /* */.

e.g.
/* This is a style for header and footer */

And the @media (max-width: 979px) block is missing the closing bracket, please add the closing bracket.

After you’ve done that, you can now add this custom CSS to style your blockquotes.

/* styling for blockquotes */
 .singular blockquote {
    border-width: 0;
    padding: 0 5%;
    font-size: 120%;
    font-style: italic;
}

Hope it helps, Cheers!

[Matthieu]

Perfect !
Thank you !

[Thai]

You’re most welcome.

If you need anything else please let us know.

[Matthieu]

Another question with blockquotes : can I use the Roboto Slab google font ?

[Rahul]

Of course!

Use the following CSS :

.x-blockquote {
  font-family: Helvetica;
  font-size: 24px;
  color: #000;
}

.x-blockquote .x-cite {
  font-family: Helvetica;
  font-size: 16px;
  color: #aaa;
}

Thanks!

[Matthieu]

I’m confused.
I did not ask for Helvetica but Roboto Slab…
I did try font-family: "Roboto slab" ; but that did not work…

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-blockquote {
  font-family: "Roboto Slab",serif;
  font-size: 24px;
  color: #000;
}

.x-blockquote .x-cite {
 font-family: "Roboto Slab",serif;
  font-size: 16px;
  color: #aaa;
}

Hope this helps – thanks!

[Author]

Posts