Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2017-08-05 19:10:36

Rainer Goergen
Member
From: Trier, Germany
Registered: 2016-05-01
Posts: 254
Website

Pages - change from Okapi to Pangolin

Hi, now I have changed my index site form okapi to pangolin.
I am not able to fix the design. Rod wrote in an other posting, that there are problems with formating like - align middle - etc..

Who can help?

Okapi: http://www.rainer-goergen.de

Pangolin: http://www.rainer-goergen.de/Test.php

Last edited by Rainer Goergen (2017-08-05 19:30:44)

Offline

#2 2017-08-05 23:02:10

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

Re: Pages - change from Okapi to Pangolin

the html you're using on both pages is deprecated. You'd be better off using inline css. For example,
<font color="#FF6347">Boinx FotoMagico Pro 5</font>
is deprecated in HTML5. Rather, you should be using:
<span style="color: #FF6347;">Boinx FotoMagico Pro 5</span>

same with the align attributes on the images. And hspace (https://www.w3schools.com/tags/att_img_hspace.asp)
instead of hspace=30 use margin: 0 30px;
Same with border. use inline styling.

Also, the images are block level elements, which means they want to be on their own line. You can use inline css to change to display: inline; rather than the current display: block;

So the html for one of those images might look like this (not tested):

<a href="https://www.adobe.com/de/products/photoshop-lightroom.html" target="_blank"><img style="display: inline; margin: 0 30px; border: 0;" src="photos/lr.png" height=63 width=63></a>

Actually, instead of that, I think I'd put those images in their own div using the TTG Responsive Grid Framework. That way when the browser resizes or if the viewer is using a mobile device, the images will realign better than they do now.

I don't know why your code works in an Okapi page.

And as just a matter of reading the code, I wouldn't use as many line breaks. If you want two line breaks, use a paragraph tag instead.


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

Offline

#3 2017-08-05 23:36:51

Rainer Goergen
Member
From: Trier, Germany
Registered: 2016-05-01
Posts: 254
Website

Re: Pages - change from Okapi to Pangolin

Thanks Rod, first step I will test.

The formating was from my first site years ago with ttg pages and poor html code.

Rainer

Offline

#4 2017-08-06 20:36:46

Rainer Goergen
Member
From: Trier, Germany
Registered: 2016-05-01
Posts: 254
Website

Re: Pages - change from Okapi to Pangolin

Hi Rod - done. It was a lot work until I have understood it. For the font color the right formating is <span style="color: #FF6347;">.
And I had to insert in the page copy - <html><body> and </html></body>.

For viewing on a mobile device I don't know like this functions.

Rainer

Offline

#5 2017-08-06 22:40:30

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

Re: Pages - change from Okapi to Pangolin

You should not need to insert the <HTML> or <body> tags, those are already there.


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

Offline

#6 2017-08-06 23:21:49

Rainer Goergen
Member
From: Trier, Germany
Registered: 2016-05-01
Posts: 254
Website

Re: Pages - change from Okapi to Pangolin

If you don't insert them, there is no formating with colors. Test it!

Rainer

Offline

#7 2017-08-07 00:00:16

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

Re: Pages - change from Okapi to Pangolin

I have. Many times. I only need to wrap text in a span element and style it. See: http://pangolin.barbeephoto.com/home/

My guess is that there were other html errors on that page. But there's nothing to look at on that page at the moment.


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

Offline

#8 2017-08-07 00:57:58

Rainer Goergen
Member
From: Trier, Germany
Registered: 2016-05-01
Posts: 254
Website

Re: Pages - change from Okapi to Pangolin

I have checked it online, so long that there are no errors. But the hole page with backlight - there are a lot of errors.

https://validator.nu/

I pasted my code into the page copy. There was no formating of the font until I inserted the html and body tag.

Rainer

Offline

#9 2017-08-07 01:25:16

Matthew
Administrator
From: Seoul, South Korea
Registered: 2012-09-24
Posts: 4,914
Website

Re: Pages - change from Okapi to Pangolin

Why on earth are you opening new html and body tags in your page content?

<html>
<body>

<h3>Willkommen auf meiner Homepage !</h3>
...

The content section of Backlight's pages is setup so that you need the least amount of code. Or none at all. You're swinging wide to other side of things, injecting way too much code into your content.

Why do you have sets of empty P tags, i.e. <p></p> ????


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

#10 2017-08-07 02:10:49

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

Re: Pages - change from Okapi to Pangolin

The only reason I can think of for the colors not changing in your page would be some html errors. I've always been able to use spans or any other html in page copy.
If you want to create a page without using those extra html and body tags, we could probably find the problem.

In fact, I was able to re-create your home page on my test site by rewriting your html to include spans and to remove some extra things that aren't needed (like getting rid of double <br/> tags and instead wrapping text in p tags as well as eliminating a couple of closing anchor tags that had no opening tag.


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

Offline

#11 2017-08-07 02:47:44

Rainer Goergen
Member
From: Trier, Germany
Registered: 2016-05-01
Posts: 254
Website

Re: Pages - change from Okapi to Pangolin

I don't know what happened. Now I have deleted the html and body tag and now the site looks ok. Maybe cache or - I don't know.

The empty P tags I use, because Rod says

rod barbee wrote:

And as just a matter of reading the code, I wouldn't use as many line breaks. If you want two line breaks, use a paragraph tag instead.

@Rod: I have deleted double <br /> tags and changed to <p> tags.

Don't use the test site, use: http://www.rainer-goergen.de/

@Matt: Seems you are angry - why? I am not a programmer and I try to learn with the help of all. And I have all to translate to German. There is no documentation of backlight how to program all the needed things like css and php. I have to read in English and German for days and hours to understand all the things. The ability to program is required. I am proud to have learned so much in the last few days. Special thanks to Rod smile

Rainer

Last edited by Rainer Goergen (2017-08-07 02:58:57)

Offline

#12 2017-08-07 03:42:36

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

Re: Pages - change from Okapi to Pangolin

Rainer Goergen wrote:

I don't know what happened. Now I have deleted the html and body tag and now the site looks ok. Maybe cache or - I don't know.

The empty P tags I use, because Rod says

rod barbee wrote:

And as just a matter of reading the code, I wouldn't use as many line breaks. If you want two line breaks, use a paragraph tag instead.

@Rod: I have deleted double <br /> tags and changed to <p> tags.



Rainer

What I meant was to wrap the text in <p> tags rather than putting <br/><br/>. Sorry I wasn't clearer.
Like this:

<p>Schon als kleiner Junge wollte ich immer die Welt entdecken und andere L&auml;nder und Leute kennen lernen.<br />
Mit meiner ersten Trekking-Tour im Jahr 1998 in den kleinen Himalaya Staat Nepal fing alles an.<br />
Ich verliebte mich sofort in Land und Leute und habe dort mittlerweile viele Freunde.<br />
Da die Welt bekanntlich gross ist, kamen nach und nach auch andere L&auml;nder hinzu.<br />
Seitdem bin ich vom Reisevirus infiziert und m&ouml;chte Euch in meinen Bildergalerien meine interessantesten Fotos pr&auml;sentieren.<br />
Sie dokumentieren meine Touren und vielleicht motivieren sie Euch, ebensolche Reisen zu unternehmen.</p>

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

Offline

#13 2017-08-07 06:11:12

Rainer Goergen
Member
From: Trier, Germany
Registered: 2016-05-01
Posts: 254
Website

Re: Pages - change from Okapi to Pangolin

Thanks, now I understand what you've meant.

- done -

Rainer

Last edited by Rainer Goergen (2017-08-07 07:30:06)

Offline

#14 2017-08-07 09:28:55

Matthew
Administrator
From: Seoul, South Korea
Registered: 2012-09-24
Posts: 4,914
Website

Re: Pages - change from Okapi to Pangolin

I'm not angry; just confused. Using Backlight, you will NEVER need to write your own <html> or <body> tags. That's all done for you. In fact, you can use Backlight without writing any code at all, and we encourage that. Basic formatting can be achieved using Markdown syntax, which is super easy to learn and use.

Span tags and some basic styling (color) can be useful if you want to color text, but really you shouldn't need to use much else, if anything.

It just seems to me you're making things far more difficult for yourself than they need to be.


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

#15 2017-08-07 16:20:35

Rainer Goergen
Member
From: Trier, Germany
Registered: 2016-05-01
Posts: 254
Website

Re: Pages - change from Okapi to Pangolin

Thanks Matt, seems so. It was only for my old index page to format it for pangolin with all grafics and colors. When Rod says, that there are errors in the code for html 5, I tried to fix it. And now it is done.

Rainer

Last edited by Rainer Goergen (2017-08-07 16:21:31)

Offline

#16 2017-08-08 00:30:29

akaufer
Member
From: Santiago de Chile
Registered: 2013-08-05
Posts: 16
Website

Re: Pages - change from Okapi to Pangolin

Rainer,

I just want to second what Matt said: Backlight produces very nice pages out of the box with the available options.
Using markdown (md) language for all text on the pages is really an advantage and worth the small effort to learn the simple syntax.
No html editing needed! Yes, for text colour you need html. But text colour and blinking text etc is anyway discouraged by (most) web designers.

I know it's hard to give up old designs you got used to. But when migrating to Backlight I started my page from scratch just maintaining the few elements required to "recognise" my page for returning visitors. With that I got a perfectly working and nice looking page out of the box in very short time!

Only **after** that was achieved I refined the look and feel by adding custom html, css and php code. And that was the first time I enjoyed doing that because it was not required but just to improve.

Hope this helps (you made a remark on my page showcase about design ... that's why I comment on this here.)

Viel Spaß
Andreas

Offline

#17 2017-08-08 01:42:00

Rainer Goergen
Member
From: Trier, Germany
Registered: 2016-05-01
Posts: 254
Website

Re: Pages - change from Okapi to Pangolin

Ok, noch nie was von markdown language gehört. Wollte nur die perfekt formatierte Indes Seite haben. Ist sowieso nur Spielerei und Hobby, da sich sowieso niemand für meine Seite interessiert. Macht jedenfalls Spass sich mit dem ganzen Programmieren rum zu schlagen.
Jetzt muss ich auch noch Dein Posting uebersetzen um die Fachausdruecke genau zu verstehen.

Edit: Done

You are right and I will change my programming. But I wanted absolutely first the same design in Backlight like my old Homepage. So I was able to learn a lot of programming.

Gruesse aus Trier,

Rainer

Last edited by Rainer Goergen (2017-08-08 01:48:18)

Offline

Board footer

Powered by FluxBB