Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
When placing text images etc. within the Page Copy of a page design, is there any documentation on how to do this, that takes advantage of the design of Backlight, or should a user scour the net for tutorials on adding and positioning text etc.?
For eg. If I want to increase the font size, I can do it in a few different ways:
1. Adding # in front.
2. Using <font size="number">
3. Or this:
<body>
<p style="font-size:30px">This is one size.</p>
<p style="font-size:11px">This is another.</p>
</body>
Offline
1st, don’t include <body>. All pages already are contained in a body tag and adding another could mess things up.
2nd, don’t use <font size=“xx”>, That’s deprecated html.
If you need to change font size for words or phrases, use a span element with inline styling:
<span style=“font-size: 1.5em;”>this is the styled text</span>
If you need a whole paragraph, you can use similar inline styling in a <p> tag
For using inline images: http://ttg-tips-and-tricks.barbeephoto. … lock-text/
You can size fonts with ox, em, rem. Google “css font size” for more.
If you know that you’re going to increase font size in several places, you can create a custom css class and add the rule to custom css
Apply the class to spans or p tags or divs as needed.
If you’re going to be doing css customization, I highly recommend CSS: The Missing Manual.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
I wouldn't go crazy with different font sizes. It's usually good practice in the design world to keep things pretty uniform, or within a set of defined rules, rather than having arbitrarily sized text all over the place. I've put a lot of work into crafting our typography rules to adhere to good design practices. So, here's what you can do:
Use headers where appropriate. This will give you large titles for sections. Usually H1 for a headline, then H2 and H3 for sub-headings. In Markdown, that's:
# An H1 Heading
## An H2 Heading
### An H3 Heading
In general, I would recommend practicing writing using only Markdown. I think Markdown's simplicity lends itself to good writing practice. Here's an overview: https://guides.github.com/features/mastering-markdown/
And if you do want smaller text, then we've got style for that:
Here's some normal text, and <small>here's slightly smaller text</small>.Offline
I agree with not going crazy with different sizes, and knowing I can simple add #'s in front is really useful. I didn't know that was a specific method to TTG, but know I know, I'll use it!
Right now, I think I use just a heading as a slightly larger font.
I'm going to look at the markdown stuff when I get a chance...
Offline
Markdown is easy. Don't wait until you "get a chance". It literally takes five minutes. The headings above are Markdown syntax, and we encourage writing with Markdown in copy areas. You can also download a Markdown editor if you'd like; there are many available to Google.
Offline
I tried it out and it may seem simple to you, but coding is still something I know so little about.
For eg. I added a couple of ## in front of some text, but it just displayed wysiwyg.
The problem was to do with the paragraph being contained within <center> & </center>
So what happens now, is I either have to research why that happened, or just go without the ## and use what was working:
<p style="font-size:20px"> </p>
I did spend a bit of time looking at that site (more than 5 mins.) and I could not find a solution to the above.
Again, I may come across as a bit dumb, but it's not something I do every day. In fact, once the website is done, I may not touch it for another 3 years. So the return on learning stuff that is like a foreign language to me, has little return long term.
I'm sure for the casual coder, the benefits are well worth it.
Offline
<center> is also deprecated html, so avoid it. Use inline css (text-align: center;) if alignment controls the are not available in the Backlight Designer.
And I don’t believe Markdown works inside of html anyway.
More on Markdown can be found in the ttg docs here: http://backlight.theturninggate.net/doc … h_markdown
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Installed and ran MarkdownPad2 - it opens up with sample text on the left and in the window on the right, reports 'This view has crashed'
I try, but I just can't do this anymore...
Offline
Hi Peter,
It seems to me you're making this more difficult on yourself than it's meant to be.
1. Markdown cannot be used inside of HTML. If you start writing HTML, then you need to keep writing HTML.
2. Stop using depreciated HTML. If you're unaware what HTML is depreciated, then either stop writing HTML altogether, or you've got some studying to do.
3. I recommend you begin by just writing Markdown. If you don't want to learn the syntax, then get a Markdown editor and just start writing. If MarkdownPad2 is crashing, then I guess try another one. Here's a bunch you can choose from:
https://www.slant.co/topics/1852/~markd … or-windows
Markdown Edit is free and sounds promising.
http://mike-ward.net/markdownedit/
For the sake of example, straight Markdown looks like this:
## This is an H2 heading
And this is a paragraph. I think most pages will have paragraphs. From here, nonsense: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac ultricies sapien. Sed pellentesque ac arcu id egestas. Integer ac orci id libero efficitur porta. Pellentesque velit nibh, elementum vitae mi eu, tristique vulputate tellus.
<!-- now some HTML -->
<div style="text-align:center;">
<p>I can put HTML into my Markdown, but I cannot use Markdown in here.</p>
<p>So, as long as I'm inside of this DIV, I will have to continue writing HTML.</p>
</div>With the above DIV closed, I can now start to use Markdown again.
Let's make a list of things:
* Thing 1
* Thing 2
* Thing 3Here's a link to [Google Image Search](https://images.google.com/).
If you copy and paste that into Backlight, it will render as correct HTML.
Offline
here's something else that might help:
http://backlight-rb-test.barbeephoto.com/typography/
it's on my Backlight 1.1 (okapi) test site, but Markdown is still Markdown.
The page contains a mix of html and Markdown.
There’s a link in the page tray to download the text file. You can then copy and paste into one of your own pages.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Ok thanks for all the comments.
Here's what I have learned:
'Deprecated' attributes should not be used. Here's a link on what they are, and why they shouldn't be used:
https://www.codehelp.co.uk/html/deprecated.html
Markdown is an easy way to change the typography, but it has rules in how it can be used.
For eg., it cannot be inside html, but can be used outside of it.
The links to sample usage is really, really helpful!
Cheers.
Offline
When I tried entering this CSS into a Page Copy:
<style>
img {
height: 100px;
vertical-align: middle;
]
</style>
<img src="http://www.marlajenkinsphotography.com/test/backlight/designer/?c=page&a=image&p1=23" >
<span>test</span>
My text appears under the image, not aligned to the side.
Entering this into one of the 'Try it yourself' pages on this site: https://www.w3schools.com/ will place the text to the right and middle (as expected).
Why is that?
Offline
first, you don't need to use vertical-align. and you don't need to use the <style> tags either, just add the inline styling to the image tag.
also, you've ended the css rule with a square bracket ] rather than a curly brace }
see this for a lot more about using images inline: http://ttg-tips-and-tricks.barbeephoto. … lock-text/
(note the updates for Backlight in that post)
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Thanks Rod,
I'm trying this out, but I don't know why I am getting the code and not image when I cut & paste your sample into my page:
I used this as a base line:
UPDATE FOR ce4 and Backlight: <img src=”path-to-image/your-image.jpg” width=”300″ class=”alignleft” alt=”some descriptive text” title=”More descriptive text” style=”border: 2px red solid; padding: 0px; margin-top: 8px;“>
and edited it to this:
<img src=”http://www.marlajenkinsphotography.com/test/backlight/designer/?c=page&a=image&p1=23” width=”300″ class=”alignleft” alt=”some descriptive text” title=”More descriptive text” style=”border: 2px red solid; padding: 0px; margin-top: 8px;“>
This is my test page:
http://www.marlajenkinsphotography.com/test/Portfolio/
What did I do wrong?
Note: I was trying to do this before this post, with the 'float' command, but couldn't get it to work. Then I saw your page with the correct syntax. So that would explain one of my earlier failures!
Last edited by peter (2017-11-20 08:45:43)
Offline
how are you writing the html? are you first pasting it into a word processor and then copy/pasting into the content area of the page?
If so, instead, use a plain text editor. It looks like you've got some clurly or slanted quote marks. The should probably be straight (unformatted by a word processor)
Paste your code into plain text editor (Notepad ++ for Windows is great, I can't remember a good Mac text editor off the top of my head) and replace all the single and double quotes with those from the text editor.
Or you can do that right in the content area of the page in Backlight.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Ah - I see when I paste it into Notepad++ and switch to ansi I can see some extra stuff:
<img src=â€http://www.marlajenkinsphotography.com/test/backlight/designer/?c=page&a=image&p1=23">
I'll work on it.
It's only taking me HOURS to plonk some text next to an image...
Offline
So there is no way of knowing easily (unless you place the text into Notepad++) about these 'gotchas'
I've cut & pasted lots of times and this is first time I've seen this problem - I don't paste into an editor, I just paste from the ref. web page directly into Backlight.
Do you see how frustrating it can be for us no-programmers?
Offline
I'm not a programmer either; it's just something you learn as you go. I've been bit by it before. After a couple of times, you stop getting bit.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
BBEdit is a decent MAC editor fwiw.
Charlie
www.stalkinglight.com
Offline
BBEdit is a decent MAC editor fwiw.
I'm on PC
So I'm still having trouble with the copying of the text from your examples into Backlight Rod.
How do I remove the extra characters that are buried within?
Thanks.
Oh - I see, search & replacing " is all that's needed?
Edit
No wait. That didn't fix it.
Last edited by peter (2017-11-20 09:34:35)
Offline
I usually use search and replace. Or if it’s just a few instances I’ll just replace the quotes manually
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Looks like I needed this inside <style> </style>
Offline
Looks like I needed this inside <style> </style>
No, you don't.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Just looked at your home page. Lots of problems. For one, don't use the <style> tags. It's just messy and not needed. And html doesn't belong inside style tags anyway:
<style>
<img src="http://www.marlajenkinsphotography.com/test/backlight/designer/?c=page&a=image&p1=23" width="200?
class="alignleft" alt="Text" title="Title text">
<img src="http://www.marlajenkinsphotography.com/test/backlight/designer/?c=page&a=image&p1=23" width="300? class="alignleft" alt="some descriptive text" title="More descriptive text" style="border: 2px red solid; padding: 0px;">
</style>if you want some help cleaning this up, can you describe what you'd like to have happen. I think I see what you want to do, and the html and styling isn't difficult.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Now I don't know what the h is going on.
Starting from scratch, I typed this in Notepad++ set to ANSI:
<img src="http://www.marlajenkinsphotography.com/test/backlight/designer/?c=page&a=image&p1=23" width="200?
class="alignleft" alt="Text" title="Title text">
Pasted it into this page:
http://www.marlajenkinsphotography.com/test/Portfolio/
And I just see the code.
What is going on?
So frustrating...
Actually, I typed this in to Backlight directly.
Last edited by peter (2017-11-20 10:01:22)
Offline