Pages - change from Okapi to Pangolin

Rainer Goergen · 2017-08-05 19:10:36

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)

rod barbee · 2017-08-05 23:02:10

the html you're using on both pages is deprecated. You'd be better off using inline css. For example,
Boinx FotoMagico Pro 5
is deprecated in HTML5. Rather, you should be using:
Boinx FotoMagico Pro 5

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.

Rainer Goergen · 2017-08-05 23:36:51

Thanks Rod, first step I will test.

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

Rainer

Rainer Goergen · 2017-08-06 20:36:46

Hi Rod - done. It was a lot work until I have understood it. For the font color the right formating is .
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

rod barbee · 2017-08-06 22:40:30

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

Rainer Goergen · 2017-08-06 23:21:49

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

Rainer

rod barbee · 2017-08-07 00:00:16

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.

Rainer Goergen · 2017-08-07 00:57:58

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

Matthew · 2017-08-07 01:25:16

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. ????

rod barbee · 2017-08-07 02:10:49

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 tags and instead wrapping text in p tags as well as eliminating a couple of closing anchor tags that had no opening tag.

Rainer Goergen · 2017-08-07 02:47:44

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 tags and changed to 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

Rainer

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

rod barbee · 2017-08-07 03:42:36

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 tags and changed to tags.

Rainer

What I meant was to wrap the text in tags rather than putting . 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>

Rainer Goergen · 2017-08-07 06:11:12

Thanks, now I understand what you've meant.

- done -

Rainer

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

Matthew · 2017-08-07 09:28:55

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.

Rainer Goergen · 2017-08-07 16:20:35

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)

akaufer · 2017-08-08 00:30:29

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

Rainer Goergen · 2017-08-08 01:42:00

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)

Community @ The Turning Gate

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

Pages - change from Okapi to Pangolin

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

Re: Pages - change from Okapi to Pangolin

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

Re: Pages - change from Okapi to Pangolin

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

Re: Pages - change from Okapi to Pangolin

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

Re: Pages - change from Okapi to Pangolin

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

Re: Pages - change from Okapi to Pangolin

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

Re: Pages - change from Okapi to Pangolin

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

Re: Pages - change from Okapi to Pangolin

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

Re: Pages - change from Okapi to Pangolin

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

Re: Pages - change from Okapi to Pangolin

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

Re: Pages - change from Okapi to Pangolin

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

Re: Pages - change from Okapi to Pangolin

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

Re: Pages - change from Okapi to Pangolin

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

Re: Pages - change from Okapi to Pangolin

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

Re: Pages - change from Okapi to Pangolin

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

Re: Pages - change from Okapi to Pangolin

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

Re: Pages - change from Okapi to Pangolin

Board footer