Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 30, 2018 at 10:25 am #1027931
    Renko

    Hi there,

    we are happily using Enfold for the page of a customer. She now wants to have a quotation mark instead of the black vertical line in her blockquotes.

    After a quick search I found this solution on the support forum:

    Quote

    So I inserted the code into the quick CSS field. The quotation mark is inserted now, but it overlaps over the text. And I have to get rid of the vertical line. See the screenshot:

    https://www.bilder-upload.eu/bild-b9b55f-1540887417.png.html

    So the mark should be on the top left position, the text should be indented for some pixels.
    Bonus question: When the quote is just one line, the quotation mark is cut (as you can see a little bit scrolling down the sample page). How can I achieve, that the quotation mark is always seen in its original size (52x52px)? And, of course, if the quote is longer, the mark has to be just on the top left position in its original size…

    Could you help me please?
    Thank you in advance.
    PS: If you want to have an admin login to the page, just tell me.

    October 31, 2018 at 4:16 pm #1028518
    Renko

    I will now remove the code from the website again, as it is disturbing für users as it is now. I really, really would like to have a solution to this problem.

    Kind regards,
    Renko

    November 2, 2018 at 4:44 am #1028992
    Ismael

    Hi,

    Thank you for using Enfold.

    You can implement one of the blockquote styles here:

    // https://freefrontend.com/css-quote-styles/

    Example:

    @import url('https://fonts.googleapis.com/css?family=Special+Elite');

blockquote {
	font-weight: 100;
	font-size: 1rem;
	max-width: 600px;
	line-height: 1.4;
	position: relative;
	margin: 0;
  padding: .5rem;
  border: none;
}

blockquote:before,
blockquote:after {
	position: absolute;
	color: #f1efe6;
	font-size: 8rem;
	width: 4rem;
	height: 4rem;
}

blockquote:before {
	content: '“';
	left: -3rem;
	top: -2rem;
}

blockquote:after {
	content: '”';
	right: -3rem;
	bottom: 1rem;
}

cite {
	line-height: 3;
	text-align: left;
}

    Best regards,
    Ismael

    November 2, 2018 at 11:06 am #1029099
    Renko

    Thank you for your help, Ismael.

    For some reasons the code above did something wrong to load the side properly. But thanks to your link, I got another snippet, which I adapted now to our purposes:

    Thanks,
    Renko

    November 2, 2018 at 6:57 pm #1029281
    Jordan Shannon

    Hi,

    Did you need additional help, or shall we close this topic?

    Best regards,
    Jordan Shannon

    November 5, 2018 at 9:46 am #1029811
    Renko

    Hi Jordan, please leave it open (for some days) as the customer didn’t react to the changes until now (due to bank holidays here). I will come back if everything is fine.

    Thank you.
    Renko

    November 5, 2018 at 11:04 am #1029833
    Rikard

    Hi Renko,

    Thanks for the update, we’ll leave the thread open in case you should need any further help on the topic.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.