Quote boxes
Friday, 27Mar2015 Filed in: Webmaster
I really like modular HTML and CSS.
I find bits and pieces that are close to what I need, I experiment and adapt. And once I finish, I put it in a tight piece and store it where it’s handy. Aside from my Mac trying to change quotes to smart quotes, it works pretty well.
I used to store these in a note file and called it HTML snippets, but RapidWeaver has it’s own way of storying snippets so I use that. I’ve even made note of the codes to replace brackets when I want to show HTML or CSS code.
Recently I finished some “clean” versions of the code I will use for quotes at Pagan Vigil and Technopagan Yearnings.
<blockquote style="border-top:1px solid white;border-right:1px solid white;border-bottom:1px solid white;border-left:3px solid #0A4F00; padding:13px;"><span style="font:15px ZapfDingbatsITC; color:#CCCCCC;">❝</span><span style="font:15px Courier, mono; color:#191919;">
For TPY. This is someone else’s quoted text here. You need to delete the extra spaces before and after the quoted text.
</span><span style="font:15px ZapfDingbatsITC; color:#CCCCCC;">❞</span></blockquote>
<blockquote style="border-left:3px solid #0A4F00;background-color:#FAEBD7;padding:13px;"><span style="font:15px ZapfDingbatsITC; color:#CCCCCC;">❝</span><span style="font:15px Courier, mono; color:#0A4F00;">
For TPY.This is my quoted text here. You need to delete the extra spaces before and after the quoted text.
</span><span style="font:15px ZapfDingbatsITC; color:#CCCCCC;">❞</span></blockquote>
<blockquote style="border-left:3px solid #0A4F00;background-color:#FAEBD7;padding:13px;"><span style="font:15px ZapfDingbatsITC; color:#CCCCCC;">❝</span><span style="font:15px Courier, mono; color:#0A4F00;">
For TPY.This is my quoted text here. You need to delete the extra spaces before and after the quoted text.
</span><span style="font:15px ZapfDingbatsITC; color:#CCCCCC;">❞</span></blockquote>
<blockquote style=";border-left:3px solid #78CEF6; background-color:#F5F5F5; padding:13px;"><span style="font:15px ZapfDingbatsITC; color:#CCCCCC;">❝</span><span style="font:15px Courier, mono; color:#0A4F00;">
For PV.This is my quoted text here. You need to delete the extra spaces before and after the quoted text.
</span><span style="font:15px ZapfDingbatsITC; color:#CCCCCC;">❞</span></blockquote>
Of course the colors don’t match to this site, but this will save me time. All the formatting is done, all I have to do is paste the new text and get rid of a couple of extra spaces.
I find bits and pieces that are close to what I need, I experiment and adapt. And once I finish, I put it in a tight piece and store it where it’s handy. Aside from my Mac trying to change quotes to smart quotes, it works pretty well.
I used to store these in a note file and called it HTML snippets, but RapidWeaver has it’s own way of storying snippets so I use that. I’ve even made note of the codes to replace brackets when I want to show HTML or CSS code.
Recently I finished some “clean” versions of the code I will use for quotes at Pagan Vigil and Technopagan Yearnings.
<blockquote style="border-top:1px solid white;border-right:1px solid white;border-bottom:1px solid white;border-left:3px solid #0A4F00; padding:13px;"><span style="font:15px ZapfDingbatsITC; color:#CCCCCC;">❝</span><span style="font:15px Courier, mono; color:#191919;">
For TPY. This is someone else’s quoted text here. You need to delete the extra spaces before and after the quoted text.
</span><span style="font:15px ZapfDingbatsITC; color:#CCCCCC;">❞</span></blockquote>
❝
For TPY. This is someone else’s quoted text here. You need to delete the extra spaces before and after the quoted text.
❞
<blockquote style="border-left:3px solid #0A4F00;background-color:#FAEBD7;padding:13px;"><span style="font:15px ZapfDingbatsITC; color:#CCCCCC;">❝</span><span style="font:15px Courier, mono; color:#0A4F00;">
For TPY.This is my quoted text here. You need to delete the extra spaces before and after the quoted text.
</span><span style="font:15px ZapfDingbatsITC; color:#CCCCCC;">❞</span></blockquote>
❝
For TPY.This is my quoted text here. You need to delete the extra spaces before and after the quoted text.
❞
<blockquote style="border-left:3px solid #0A4F00;background-color:#FAEBD7;padding:13px;"><span style="font:15px ZapfDingbatsITC; color:#CCCCCC;">❝</span><span style="font:15px Courier, mono; color:#0A4F00;">
For TPY.This is my quoted text here. You need to delete the extra spaces before and after the quoted text.
</span><span style="font:15px ZapfDingbatsITC; color:#CCCCCC;">❞</span></blockquote>
❝
For PV.This is someone else’s quoted text here. You need to delete the extra spaces before and after the quoted text.
❞
<blockquote style=";border-left:3px solid #78CEF6; background-color:#F5F5F5; padding:13px;"><span style="font:15px ZapfDingbatsITC; color:#CCCCCC;">❝</span><span style="font:15px Courier, mono; color:#0A4F00;">
For PV.This is my quoted text here. You need to delete the extra spaces before and after the quoted text.
</span><span style="font:15px ZapfDingbatsITC; color:#CCCCCC;">❞</span></blockquote>
❝
For PV.This is my quoted text here. You need to delete the extra spaces before and after the quoted text.
❞
Of course the colors don’t match to this site, but this will save me time. All the formatting is done, all I have to do is paste the new text and get rid of a couple of extra spaces.
blog comments powered by Disqus