Some Custom CSS favourites for layout - quotes etc

#1

I thought I would share some layout custom CSS which I use with the Tiddlywiki blockquote. I use the blockquote for everything from actual quotes and extracts from books to a container to float images left right with text flow around. I like it because it allows custom CSS to be applied to the blockquote which gives a wide range of potential uses.

I like to try to capture some of the professional looking layout from books and so on.

Here is a shot of the first two listed below.

Untitled
Untitled902×179 26.4 KB 

/* CSS */

blockquote.BOX { border: 1px solid #ddd; background-color:#eee; border-radius: 5px; } 

blockquote.BOX p { padding-left:10px; padding-right:10px }

Example markup


<<<.BOX
This is a quote from a wise sage 
<<< Source 'the chronicles of a wandering monk' p101 author Francis Pendle 1976


/* CSS - Experimental fancy quotes */
blockquote.Q { border: 0px solid #ddd; } 

blockquote.Q p::before,
blockquote.Q p::after {
   content: "“";
   font-family: Georgia;
   font-size: 2.5rem;
   margin: 0.5rem 0 0 -1.5rem;
   position: absolute;
   opacity: 1.0;
   color:#ff6a2b;

}

blockquote.Q p::after { content: "”"; margin: 0.5rem 0 0 0.0rem; }

Example markup

<<<.Q
This is a quote from a wise sage, it should have outsized orange quotation marks around it 
<<< Source 'the chronicles of a wandering monk' p101 author Francis Pendle 1976

/* My annotations */
blockquote.ANNOTATE { border: 0px solid #ddd; font-size:1.0rem;  color:#AAA; font-style:italic; background-color:#eee; padding-left:0} 

blockquote.ANNOTATE p { padding-left:10px; padding-right:10px }

blockquote.ANNOTATE::before{ 
display: inline-block;
width:100%;
padding-top: 4px;
padding:10px;
content:"My Note";
font-style:normal;
font-weight: bold;
/* text-decoration: underline; */
background-color:#e8e8e8;
}
blockquote.ANNOTATE::after{ 
display: inline-block;
width:100%;
content:" ";
font-style:normal;
}

Example markup

<<<.ANNOTATE
This is a comment I made in the middle of an article or text written by someone else. I want to make it clear that these are my comments and not those of the author. The CSS here will contain my text in a box but will also preceed whatever I write here with the string “My Note” in bold.
<<<

All of these are works in progress, I tidy or improve them periodically so not polished diamonds!

I will add a few more once I am sure that I have not made any silly errors in the way I have presented the CSS code and markup.

If you want to try but don’t know where to start you need a Custom CSS tiddler in which you will need to
paste the CSS statements. The markup appears in the tiddler you want to add the quote to.

7 Likes