[Pro] Custom CSS Blockquote Style

I’m trying to replicate and indented blockquote, very similar

to this.

This is a piece of cake in Markdown, but how do I implement it in FW? I’ve tried pasting this bit of code, as I like the subtle effect. But I’m doing something wrong.

I’ve tried pasting the code in the extended attributes field of the text style I’m working with (called ‘blockquote’.) But it doesn’t seem to be having any affect at all.

Thanks!

Doty

http://invertministries.com/blog/index.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

This is how I used to do it, though perhaps the process has evolved/changed since then, I’m not sure.

You need to create 3 separate tag-only styles, blockquote, blockquote:before etc. (as shown in the example) using the main Styles editor. Then you need to add the Name/Value for each and every property listed (line-height, vertical-align etc.) for each of the 3 styles. Make sense?

Todd


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You need to create 3 separate tag-only styles

Or - like in this example - http://deltadesign.co/FW7Test/blockquote.html

Go to Page>Html Markup and choose the before section and paste in.

<style type="text/css">
blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "201C""201D""2018""2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}
</style>

Now in the styles Editor create a new Tag only style (with the Tag ‘blockquote’) making sure it has a paragraph attribute. (A Tag only style has nothing in the ‘Name’ box).

And then apply that style to the para that you want to turn into a Blockquote.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There are two methods I’ve used - first, the text-apply tag-style that both
Todd and Dave mention… I used that for years, but a while back I switched
to putting my blockquote content into an inline div and then applying
Walters HTML Element action to which he graciously added a blockquote
element.

The text-apply method only let’s you have a single paragraph and no other
tags. It literally replaces the text tags with the blockquote tags - which
leaves the content as tagless, unsemantic text and will require additional
styling. That kind of spare and primitive code was okay way back when, but
not in the modern semantic world. Using the action-apply method allows you
to have multiple paragraphs, text tags (other than strong and em) as well
as image or other content.

Here’s a quick example to show the difference using the same css-tricks
code in Freeway 6 - thebigerns.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you everyone for the responses! I love learning new things! Thanks again for sharing your wisdom with the FW community!

Doty


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Have the same issue, thanks this great communities


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Great example, Ernie – thanks for sharing. I’ve put it up on our social network channels. Hope that’s ok!

Joe

On 21 Oct 2014, at 03:00, Ernie Simpson email@hidden wrote:

There are two methods I’ve used - first, the text-apply tag-style that both
Todd and Dave mention… I used that for years, but a while back I switched
to putting my blockquote content into an inline div and then applying
Walters HTML Element action to which he graciously added a blockquote
element.

The text-apply method only let’s you have a single paragraph and no other
tags. It literally replaces the text tags with the blockquote tags - which
leaves the content as tagless, unsemantic text and will require additional
styling. That kind of spare and primitive code was okay way back when, but
not in the modern semantic world. Using the action-apply method allows you
to have multiple paragraphs, text tags (other than strong and em) as well
as image or other content.

Here’s a quick example to show the difference using the same css-tricks
code in Freeway 6 - thebigerns.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Great example, Ernie – thanks for sharing. I’ve put it up on our social
network channels. Hope that’s ok!

Thanks Joe – I went back and expanded the copy, added images and links,
and then had some fun with styling it all, responsively, using only Freeway
Pro.

http://cssway.thebigerns.com/workbench/blockquote/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That’s superb. Thanks!

Joe

On 26 Oct 2014, at 19:50, Ernie Simpson email@hidden wrote:

Great example, Ernie – thanks for sharing. I’ve put it up on our social
network channels. Hope that’s ok!

Thanks Joe – I went back and expanded the copy, added images and links,
and then had some fun with styling it all, responsively, using only Freeway
Pro.

thebigerns.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options