Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2017-01-02 04:19:39

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 12,563
Website

Examples of typography

split from another topic....

radmax wrote:

One other think. Do you know if somebody as create a BACKLIGHT page or a template like CE4 "Typography preview"?

There is some setting typography that i haven't good test and understand.

Thank

this should be easy enough for you to do for yourself.
Create a page template and call it something like Typography Demo

Create a page (if you have the Pages Module, otherwise create an album or album set template) and name it Typography Demo.

In the page copy area of the page (or album or album set template) you created, put examples of the various items that the Typography settings control:

place some regular text, some heading text (h1, h2, etc), hyperlinks, blockquotes, a table, a form.
You can use Markdown or html as appropriate or needed.

Here's some table markup from Matt: http://community.theturninggate.net/vie … hp?id=6724

you can find other markup, like lists, easily enough with a search.

Add form. If you have the Pages Module, just insert a form into your page.

if you want to see what the Haiku class does, then place some text inside paragraph tags with the Haiku class:

<p class="haiku"><span>Your text.</span></p>

Once you've done all this, look at your page in a browser (if it's an album or album set, just publish one and open it in a browser)
In a separate window or tab, go to the typography settings in the page template and start changing things.
Go back to your page and refresh to see the changes. You can also click the auto refresh button at the bottom of your demo page to see the changes take place as soon as you make them in Backlight.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight test site

Offline

#2 2017-01-02 14:22:36

radmax
Member
From: Paris - FRANCE
Registered: 2012-10-27
Posts: 30

Re: Examples of typography

Ok I have understand the steps

rob barbee wrote:

place some regular text, some heading text (h1, h2, etc), hyperlinks, blockquotes, a table, a form

rob barbee wrote:

You can find other markup, like lists, easily enough with a search .

Don t it be easier to copy paste à text file off thé typography préview from TTG CE4

Offline

#3 2017-01-02 14:57:53

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 12,563
Website

Re: Examples of typography

radmax wrote:

Ok I have understand the steps

Don t it be easier to copy paste à text file off thé typography préview from TTG CE4

If there was one.
It's just as easy to create your own. You can use Markdown: http://ce4.theturninggate.net/docs/doku … 4_markdown
or HTML.
Either way, you'll need to learn one or the other to write your page copy. Markdown is easiest for things like headings, hyperlinks, making text bold or italic. It can do lists too.
HTML is needed for things like tables or if you need to use inline styling or want to add images to the copy areas or apply classes. Or if you need text columns using the responsive grid: http://ttg-tips-and-tricks.barbeephoto. … backlight/


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight test site

Offline

#4 2017-01-04 20:34:07

radmax
Member
From: Paris - FRANCE
Registered: 2012-10-27
Posts: 30

Re: Examples of typography

Ok Rob I have create a page test

Page test Typography

I use StackEdit

I have jsut a problem with

Icon missing

Do i need to upload icon? I don't see a link in the code.

Offline

#5 2017-01-04 20:41:34

radmax
Member
From: Paris - FRANCE
Registered: 2012-10-27
Posts: 30

Re: Examples of typography

Other think
I understand the title font size H1, H2 ,H3...

In Backlight Backoffice i have just find
Template page > Typography> Font-weight and Bold/Strong Font-weight

But no Font size

In Template Page> Navigation>Font size   OK

Thank's

Offline

#6 2017-01-04 22:22:18

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 12,563
Website

Re: Examples of typography

radmax wrote:

Ok Rob I have create a page test

Page test Typography

I use StackEdit

I have jsut a problem with

Icon missing

Do i need to upload icon? I don't see a link in the code.

the code you're using won't work without the stylesheet for those icons. It looks like StackEdit assumes you're using certain resources.

Backlight comes with Font Awesome: http://fontawesome.io/icons/


On the Font Awesome site, click on an icon to get the code needed.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight test site

Offline

#7 2017-01-04 23:46:38

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 12,563
Website

Re: Examples of typography

radmax wrote:

Other think
I understand the title font size H1, H2 ,H3...

In Backlight Backoffice i have just find
Template page > Typography> Font-weight and Bold/Strong Font-weight

But no Font size

In Template Page> Navigation>Font size   OK

Thank's

the base font-size is 16px (set in the css).

html {
  font-size: 16px; /* @basefontsize */

Most other font sizes (headings, for example) are set using em (For example, H1 is set to 2em)
There is no control in the Designer to change the base font size. If you want it changed, you'll need to use custom css.

If you want to see the Backlight css, see this: http://community.theturninggate.net/vie … 012#p44012


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight test site

Offline

#8 2017-01-06 05:55:37

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 12,563
Website

Re: Examples of typography

For anyone interested, here are the basics of making your own typography demo page
http://ttg-tips-and-tricks.barbeephoto. … w-page-in/


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight test site

Offline

Board footer

Powered by FluxBB