Curly Quotes

  • 1
  • Question
  • Updated 6 years ago
  • Answered
Curly Quotes - how do you do those exaggerated large quote marks? I have tried to follow the explanations on the internet - but I am lost!!
Photo of vasey888

vasey888

  • 51 Posts
  • 0 Reply Likes

Posted 8 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello vasey888

I did a bit of researching and came across this code. I hope that this works for you. I know it does work in Firefox, but I have not tried it in the other browsers.

Step 1: Drag over an HTML Widget and paste in the following code:

<style type="text/css">

* html { font-size: 100%; }

body {
font-family: "Trebuchet MS", Helvetica, Arial, san-serif;
font-size: 0.8em;
}

#wrapper { width: 450px; }

blockquote {
margin: 1em 0;
padding: 0;
position: relative;
text-indent: 2em;
background-color: #F0F1F6;
}

.hugeQuotes {
margin: 2em 0;
padding: 0;
position: relative;
text-indent: 4em;
background-color: transparent;
}

.hugeQuotes .bqstart,
.hugeQuotes .bqend {
font-size: 700%;
}

/* apply IE specific rules first */
.hugeQuotes .bqstart {
text-indent: 0;
margin: -2.4em 0 -5em 0;
float: left;
position: relative; /* relative positioning to stop from disappearing in IE when the blockquote has a background color - probably peek-a-boo or something */
}

.hugeQuotes > .bqstart {
/* add extra non-ie rules */
position: absolute;
top: -0.4em;
left: 0;
/* remove IE specific rules */
float: none;
margin: 0;

}

.hugeQuotes .bqend {
position: absolute;
margin-top: -1.2em; /* notice this is 1/2 of the start quotation mark, there may be some exponential relationship there */
right: 0;
text-indent: 0;
}

.hugeQuotes > .bqend {
margin-top: -0.2em;
}

/
</style>

Step 2: Drag over another HTML Widget and paste in the following:
<div id="wrapper">

<blockquote class="hugeQuotes">
<span class="bqstart">&#8220;</span>I'm a blockquote and I'm loving the big curly quotes I have.<span>&nbsp;</span><span class="bqend">&#8221;</span>
</blockquote>

</div>

*Replace "I'm a blockquote and I'm loving the big curly quotes I have" with the text you wish to have.

Please let me know if you have any trouble with this.
Photo of vasey888

vasey888

  • 51 Posts
  • 0 Reply Likes
YOU ARE AMAZING - Thanks so much - so helpful. Dave
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
My pleasure, Dave!

Please feel free to contact us again should you have further questions down the road.
Photo of debbym

debbym

  • 125 Posts
  • 2 Reply Likes
May I ask - do you have to do both step 1 and step 2, or is it one or the other.

Also, is this the most up to date advice on this?

Thanks
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
The first "step" is the styling instructions and the second step is the content so you do need both.

There would undoubtedly be many ways to modify this but all aesthetics. So I think it's OK to presume that it's current. The blockquote tag is still current HTML V 4.01.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Gop!
Photo of debbym

debbym

  • 125 Posts
  • 2 Reply Likes
Yes, thanks Gop for responding so quickly. However, I would like to be absolutely certain that this is the approved Yola method of doing this.

I have a couple of queries also. I am not sure where to drag over the HTML widgets. This is probably extremely dim of me but should the HTML widgets be inside text boxes or one on top of another? If they are not inside a text box, then the only way of editing them is to go back into the widget and retype, rather than doing it in a text box? Is this correct please? If you would like to go into my sitebuilder - as it is not published yet, you can see why this is an issue for me.

Would it not be possible to edit the HTML, insert the coding above, and use a text box?

Also, I do have a query about the "aesthetics". I want to change the style of the curly quotes to more square edged ones, and also remove the closing set of quotation marks. Could you please give me an idea about how to do that?

Many thanks.
Photo of debbym

debbym

  • 125 Posts
  • 2 Reply Likes
Just to add a little more to this, I have just had a quick look at the site in IE - I normally only use FF of course. The curly quotes I have produced on my sitebuilder in FF are not viewable in IE.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
There really aren't Yola approved methods for doing these kinds of things with code. It either works or it doesn't The approval is from the HTML standards. Published codes are seen as a legitimate source for such coding. Generally they work :) Yola always recommends trying the code out on a test site first. They can't take responsibility for code that may cause problems and your best bet is to try it out on such a test site.

There are millions of code snippets used around the traps so it would be un-feasible to keep track of what has worked even.

The HTML goes into HTML widgets. The styling generally goes into a widget placed at the top of the page. The content is placed where it is to be shown.
To answer your question about placing the code into a text box and editing it there is that would probably not work as the text is embedded within the code having said that you can always try this along with the code in your test site, then you will have the answer..

wrt your curly quotes; if they aren't a keyboard character (ie seen when typed) then your alternative is to add them as an image. To do that you would create a jpeg, gif or png of the characters and then place it with HTML into the HTML coding. There are other hidden ASCII codes that you may use and you can find these in any number of ASCII code reference sites.
Photo of debbym

debbym

  • 125 Posts
  • 2 Reply Likes
Is there any answer to this please?
Photo of debbym

debbym

  • 125 Posts
  • 2 Reply Likes
Thanks Gop - I didn't understand quite a lot of this explanation but I get the gist.

I must admit I was rather hoping for a member of the team to give me some official guidance, and that there would be an easier way to do this.

As the curly quotes I have done using the method described previously are not viewable in IE, I shall go down the route which I had already planned - ie use the .jpg that I have created already and embed that instead of trying to edit the text in the html function.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Debbym,

You can add HTML to a text widget by clicking into the widget so you get the text-editing tool bar, then click on the blue rectangle marked HTML at the far right side of the tool bar. Paste the code then you should be able to change the text as needed. Here is a code I found that was tested in IE 7 and did work.

First the CSS part. This can be added to an HTML Widget, or a Text Widget or if you have Silver, add to the Site CSS without the style tags. :


<style type="text/css">
.bqstart {
float: left;
height: 45px;
margin-top: -25px;
margin-left: 7px;
padding-right: 7px;
margin-bottom: 0px;
font-size: 700%;
color: #FF0000;
}
.bqend {
float: right;
height: 25px;
margin-top: 0px;
padding-top: 0px;
font-size: 700%;
color: #FF0000;
}
</style>


The HTML part which can go into a Text Widget:


<blockquote><span class="bqstart">“</span>Speech marks. Curly quotes. That annoying thing cool people do with their fingers to emphasize a buzzword, shortly before you hit them.<span class="bqend">”</span></blockquote><p>&nbsp;</p>


You may need to edit the margin and padding numbers.

Please let me know if you have any questions.
Photo of debbym

debbym

  • 125 Posts
  • 2 Reply Likes
Thank you Diane. If I could beg your indulgence again.....

First step, I have Silver so I have inserted the copied CSS into my CSS editor.

Second sttep, I then inserted the copied HTML into my text widget using the HTML blue button.

I then got red quotation marks with the text to be edited.

Please may I ask - I only want one quotation, much bigger, and I want the colour of them to be grey.

I have tried to edit it in the CSS, but without success.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Do you mean something like this?

The CSS part:



.bqstart {
float: left;
height: 45px;
margin-top: -25px;
margin-left: 7px;
padding-right: 7px;
margin-bottom: 0px;
font-size: 1000%;
color: gray;
}
.bqend {
float: right;
height: 25px;
margin-top: 0px;
padding-top: 0px;
font-size: 1500%;
color: gray;
}


The HTML part:



<blockquote><span>“</span>Speech marks. Curly quotes. That annoying thing cool people do with their fingers to emphasize a buzzword, shortly before you hit them.<span class="bqend">”</span></blockquote><p>&nbsp;</p>



or if you want the beginning quote instead:



<blockquote><span class="bqstart">“</span>Speech marks. Curly quotes. That annoying thing cool people do with their fingers to emphasize a buzzword, shortly before you hit them.<span>”</span></blockquote><p>&nbsp;</p>

Photo of debbym

debbym

  • 125 Posts
  • 2 Reply Likes
The very thing!!!

Thank you!
Photo of debbym

debbym

  • 125 Posts
  • 2 Reply Likes
Mission accomplished thank you.

Is it possible to make the quotes more 'rounder'? Presumeably it must be in the font used - eg if it was Georgia rather than Arial perhaps? Can I change that please.

Then I promise I won't bother you again!
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, debbym,

Just insert the following code above where the font size is in the CSS part:



font-family:Georgia;

Photo of debbym

debbym

  • 125 Posts
  • 2 Reply Likes
Thank you . I still have quotes at the end but I'll have to live with that.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Do you mean the little, regular ones? You can just delete those. For the ones at the end delete this code:


<span class="bqend">”</span>
Photo of debbym

debbym

  • 125 Posts
  • 2 Reply Likes
Thanks Diane - I have had to rebuild the curly quotes about 6 times now - for some reason the changes were not saving. Anyway, I will do as you suggest without further ado, and let's hope they stay.