Formatting in Blockquotes and Alert Boxes

Support
#1

Hi there,

Just a quick question:

When I have a blockquote or an alert box and I want to divide the text up into paragraphs the formatting of the text changes for some reason. So if I add a couple of paragraph breaks the text at the top stays as it was, but the lower text changes size, color and the spacing changes as well.

Is it possible to ensure that the text stays the same even if there is a paragraph break?

Thank you,
EW

#2

Hi There,

Thank you for writing in, but I can not replicate this issue on my end, so it seems there is something on your setup that affecting the alert and blockquote element.

Please provide us the direct page URL where we can see the issue on a “secure note”.

Cheers!

#3

Hi Friech,

I’ve added the secure note.

Thanks,
EW

#4

Hey There,

Thanks for the URL :slight_smile:
You have used <p> tag in alert box and your <p> tag has a styling that affects alert box content.
Can you please check if you have added custom CSS style for P tag? Either way is you can avoid using <p> tag in alert box.

Hope this help

Regards

#5

Hi Rahul,

As far as I’m aware there is no

tag in the alert box. The contents are as follows:

As Sokolova points out, the choice of the name Matryona was not arbitrary. Malyutin did not choose Matryona simply because it was a wholesome peasant name (there were many other earthy options to choose from).

In fact, Matryona is a curiously dualistic name: originating from the Latin, Matrona (meaning, ‘a noble woman’), the Orthodox Church believed it had pious connotations, contributing to its popularity. However, others did not see it this way: evil Matryonas appear in the works of Karnaukhov and Afanasiev. The roots of this contradiction are unknown, but what is clear is that the name Matryona stirs emotional undertones in the Russian-speaker that are difficult for foreigners to understand.

And the custom CSS that I have for the page is:

.single-post .entry-header {
display: none;
}
.x-extra {
cursor: default
}

a.x-extra {
color: #262626;
}

.x-alert {
display: block;
}

Do you know what I need to add/remove from this to get what I need?

Thanks,
EW

#6

Hey EW,

Please provide me your WP login details using Secure Note so, I can take a closer look into it.

Regards

#7

Just done it, Rahul

#8

Hey EW,

The plugin Easy Google Fonts overrides default font of theme and it modifies P tag fonts. You can use our Font Manager to manage/modify fonts.

Deactivate ‘Easy Google Fonts’ and check alert box.

Regards

#9

Hi Rahul,

Thanks for your help. While that does seem to work, it creates a bit of a hassle for me as the whole of the website’s formatting changes due to Easy Google being dropped.

If I wanted to solve this manually and simply readjust the lower text (whose format has been altered) back to the original format of the upper text (i.e. the format that Themeco has designed for the original alert boxes), would you be able to tell me:

  • the hex/rgb code for the blue “info” alert box and its text
  • the font and size of the alert box text
  • paragraph spacing etc.

I.e. everything that I need to make any altered text look identical to how you have the alert text originally set up - this would be really helpful!

Thank you again,
EW

#10

Hi There,

Please add this on your Custom CSS to get back the default color and size of your alert box content, and a 1.5em space between paragraphs.

body .x-alert-info p {
    color: #4d8fcb;
    font-size: 14px;
    margin-bottom: 1.5em;
}

Feel free to adjust those values.

I could not replicate the issue on blockquotes though. It was not wrap inside <p> tag. Maybe that is because you use text element for adding it. Please directly use the Blockquote element for it. If the plugin overwrite the styling again like what it did to alert box, please use the custom CSS below to re-styled it.

body .x-blockquote p {
	font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	color: #272727;
	margin-bottom: 1.5em;
}

Hope it helps,
Cheers!

#11

Hi Friech,

I changed it to a block quote element put the CSS in and it worked perfectly

As for the alert box (and I do appreciate that I am nitpicking at this point), but although the CSS worked almost perfectly there, it isn’t exactly the same as the other text.

I think that: the gap between characters/words is larger for the second text block and that the upper text looks a bit bolder/thicker the one we have modified. Do you know how I could get it just a little bit better by tweaking these aspects?

Also, could I please ask you to kindly to provide me with the corresponding custom css to return the other four types of alert boxes (muted, success, warning, danger) back to their original text formatting, as I feel that I will need to know them in the future and it would save time to make a note of all of them now.

Thank you - you’ve all been incredibly helpful as usual!

EW

#12

Hi There,

I did check the link-height of those paragraph and they are the same. The difference that I am seeing is, the first paragraph is not wrap in a <p>, the second is the first paragraph is in font-family: lato;, while the second is in font-family: mandali;

Lets make both in font-family: mandali;.Please update my given CSS code to this:

body .x-alert p,
body .x-alert {
	font-family: 'Mandali', serif;
    color: #4d8fcb;
    font-size: 14px;
    font-style: normal;
	font-weight: normal;
}

The class x-alert is common to those all 5 alert type. This means that this css code will affect all of your Alert elements.

Cheers!

#13

Hi Friech,

Thank you, that’s sorted it out perfectly.

I have made a note of the CSS code, but could you perhaps provide the colour codes for the other 4 alert types, as I think that’s all I’m missing here?

Otherwise, I did just notice one other small problem with the blockquote modification that we made: namely, that the space between the cite and the bottom line is now too big. So, on http://www.eurasianwhispers.com/snow-leopard-horseback/ for the blockquote towards the bottom of the page you can see that the space between ‘mongolian proverbs’ and the bottom line is bigger than before.

Is there any code I can add to shorten this gap?

Thanks again,
EW

#14

Hi There,

There is an empty <p> tag on that blockquote (https://prnt.sc/ftdewt) that creates the unwanted gap. Do not force a line-break between a paragraph. Just wrap them them with a <p> tag and they will be automatically break.

You mean the color code used for the border and text on each alert type, here you go.

#2ecc71 - success (light green)
#999999 - muted (gray)
#4d8fcb - info (blue)
#fab418 - warning (orange)
#eb5439 - danger (bright red)

Cheers!

#15

Hi Friech,

I have taken away the line-break and changed it so that under quote&citation for the block quote element it now reads:

[x_icon type="quote-left"] If you feed a cat, they’ll eat you next.<p>Cats are always watching you, waiting for you to die [x_icon type="quote-right"]<p>

but as you can see it hasn’t made any difference…

#16

Hi There,

Try using the following code instead.

[x_icon type="quote-left"] If you feed a cat, they’ll eat you next. Cats are always watching you, waiting for you to die [x_icon type="quote-right"]

Hope that helps.

#17

Hi Mldarshana,

No, unfortunately that doesn’t work - as I’ve written above, I’m trying to get the the blockquote to let me create a paragraph break in between each sentence without causing a large space between the cite and the bottom line of the blockquote

Thanks,
EW

#18

Hi There,

Now that I’ve tried your shortcode and see how this turns out. I say that the <p> tag is not actually a good idea inside the blockqoute. Lets use <span> tag instead.

<span>[x_icon type="quote-left"]If you feed a cat, they’ll eat you next.</span><span> Cats are always watching you, waiting for you to die [x_icon type="quote-right"]</span>

Add this on the page custom CSS to break the <span>.

.x-blockquote span {
	display: block;
}

Sorry, I should have been advice this in the first place.

Let us know how it goes,
Cheers!

#19

No problem at all, Friech. It works perfectly now, so thank you!

#20

Glad we could help.

Cheers!