Bild • •HERZLICH WILLKOMMEN BEI UNS IM FORUM!
****
GEORGE THOROGOOD & THE DESTROYERS - ROCK`N`ROLL CHRISTMAS
****
ADVENTSKALENDER - ADVENT CALENDAR
(For other language: Choose your flag above)

Fun experiment: Simple 3D Style

Forum Member Switzerland
Administrator
Beiträge: 3323
Registriert: Donnerstag 1. Juli 2010, 14:05
Vorname: Jutta
Wohnort: Zuchwil/SO
    Windows 10 Firefox
Kontaktdaten:

Fun experiment: Simple 3D Style

Beitrag von Forum Member » Freitag 9. November 2018, 18:00

Meine heutige Spielerei - Versuch eines simplen 3D Styles :lol2: Today's gimmick - try a simple 3D style
Das Problem ist nur, wie kommt die Beschreibung samt Search Header ins Bild :suisse-augen: The only problem is, how does the description and search header get into the picture?
Simple_uni.jpg
Simple.jpg
Simple hover.jpg
simple_ucp.jpg

Forum Member Switzerland
Administrator
Beiträge: 3323
Registriert: Donnerstag 1. Juli 2010, 14:05
Vorname: Jutta
Wohnort: Zuchwil/SO
    Windows 10 Firefox
Kontaktdaten:

Re: Fun experiment: Simple 3D Style

Beitrag von Forum Member » Sonntag 11. November 2018, 14:38

Heute habe ich einmal geschaut, ob die Icon Legend Ext. mit den Font Awesome Icons funktioniert. Zuerst wurde immer noch ein Bild Icon angezeigt. Nachdem ich jedoch überall ein Font Awesome Icon einfügte, stimmte das Ganze wieder.

Allerdings ist mein Header samt Headerbild entschwunden. Vermutlich sind die Events nicht korrekt eingefügt. Ich finde es ziemlich schwierig herauszufinden, wo ich denn nun die Events korrekt einfügen muss :scham2:

Habe jetzt alle Events nochmals kontrolliert und verschoben. Es hat sich nichts geändert. In der Icon Legende von Ongray wird in diesem Style kein Header-Headerbild angezeigt :schocked: Sondern nur noch eine schwarze Linie. Gleiches Problem mit dem Impressum.
icon legende header problem.jpg
simple-3d.jpg
about us problem in simple.jpg
Today I checked if the icon Legend Ext. works with the font Awesome icons. First I still got a picture icon. But after I inserted a Font Awesome icon everywhere, the whole thing worked again.
However, my header and header image disappeared. Probably the events are not inserted correctly. I find it quite difficult to find out where to insert the events correctly.

Now I checked and moved all events again. Nothing has changed. In the icon legend of Ongray no header header image is displayed in this style. :schocked: It's just a black line instead. Same problem with the about us extension.

Forum Member Switzerland
Administrator
Beiträge: 3323
Registriert: Donnerstag 1. Juli 2010, 14:05
Vorname: Jutta
Wohnort: Zuchwil/SO
    Windows 10 Firefox
Kontaktdaten:

Re: Fun experiment: Simple 3D Style

Beitrag von Forum Member » Montag 12. November 2018, 15:25

Den Morgen bis jetzt habe ich damit verplempert, dass der rechte Teil im Copyright ganz unten angezeigt wird. Hat nicht geklappt. Immerhin wird jetzt endlich bei Klick auf Icon-Legend, die Seite mit der Legende auch angezeigt. Responsive scheint das Copyright auch zu stimmen. Sogar das Legend-Bild wird minimalistisch angezeigt. Allerdings sieht es bei klick auf die Lupe ziemlich müstisch aus. Man muss extem auf alle Seiten scrollen(Könnte aber auch an der installierten Lightbox Ext. liegen, dass das responsive ist).
***
The morning until now I wasted with the fact that the right part is shown at the bottom of the copyright page. It didn't work. At least the page with the legend is finally displayed when clicking on Icon-Legend. Responsive also seems to have the copyright right. Even the Legend image is displayed minimalistically. But when you click on the magnifying glass it looks quite musty. You have to scroll extem on all pages (but it could also be due to the installed Lightbox Ext. that this is responsive).
bild legende im style.jpg
legend.jpg

Forum Member Switzerland
Administrator
Beiträge: 3323
Registriert: Donnerstag 1. Juli 2010, 14:05
Vorname: Jutta
Wohnort: Zuchwil/SO
    Windows 10 Firefox
Kontaktdaten:

Re: Fun experiment: Simple 3D Style

Beitrag von Forum Member » Dienstag 13. November 2018, 11:35

Hat lange gedauert, bis ich dahinter gekommen bin wo das Problem, mit den doppelten Backgrounds liegt.
Warum der Code allerdings nur greift, wenn ich den Code für die Gradient-Farbe direkt in der color.css einfüge und nicht, wenn er in der common.css eingefügt ist, ist mir ein Rätsel. Eigentlich gehörte das ja in die common.css.

Took me a long time to figure out where the problem lies with the double backgrounds.
Why the code only works if I insert the code for the gradient color directly into the color.css and not if it is inserted into the common.css is a mystery to me. Actually that belonged in the common.css.

Code: Alles auswählen

html, body {
	background: -moz-linear-gradient(top, rgba(206,206,206,0.97) 0%, rgba(168,168,168,0.98) 24%, rgba(178,178,178,0.99) 58%, rgba(142,142,142,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(206,206,206,0.97) 0%,rgba(168,168,168,0.98) 24%,rgba(178,178,178,0.99) 58%,rgba(142,142,142,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(206,206,206,0.97) 0%,rgba(168,168,168,0.98) 24%,rgba(178,178,178,0.99) 58%,rgba(142,142,142,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7cecece', endColorstr='#8e8e8e',GradientType=0 ); /* IE6-9 */
	color: #3D3D3D;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
}
Resultat:
behobenes seiten farbproblem.jpg
Vorher mit Code in der common.css / Before with code in the common.css
seiten farbproblem.jpg
Das Problem, dass der Background im unteren Teil nicht angezeigt wird, besteht auch in validierten Styles auf .com.
The problem that the background is not displayed in the lower part also exists in validated styles on .com.

In meinen Styles ist das allerdings nur so, mit Gradient-Background ohne eingefügtes Bild. Sobald ich den Hintergrund mit einem Bild einfüge, stimmt es bei mir überall ohne den zusätzlichen Code.
In my styles this is only so, with gradient background without inserted picture. As soon as I insert the background with an image, it's true everywhere without the additional code.
Warum das so ist - ich komme nicht dahinter woran das liegt :o .
Why that is - I can't figure out why that is :o .

Das Erstellen der Icons war ziemlich zeitaufwendig. Ich musste ja auch die ganze Iconlegende Ext. anpassen. Und wie man sieht: auf dem Bildschirmfoto wird wieder ein zweifarbiger Hintergrund angezeigt :schocked: Die mini Icons unten stimmen noch nicht komplett mit meinen Icons überein. Ausserdem fehlen die zwei PN Icons.

Creating the icons was quite time consuming. I also had to adapt the whole icon legend Ext. And as you can see: the screenshot shows a two-colored background :shocked: The mini icons below do not yet match my icons completely. Also the two PN icons are missing.
definitive Icons.jpg

Forum Member Switzerland
Administrator
Beiträge: 3323
Registriert: Donnerstag 1. Juli 2010, 14:05
Vorname: Jutta
Wohnort: Zuchwil/SO
    Windows 10 Firefox
Kontaktdaten:

Re: Fun experiment: Simple 3D Style

Beitrag von Forum Member » Dienstag 13. November 2018, 22:52

Den ganzen Tag habe ich versucht, dass das online/offline Icon angezeigt wird. Geht nicht, wenn das Postprofile umgefärbt ist. Das gif entschwindet im Hintergrund.
Jetzt halt die Vollkrass-Lösung :lol2:
profil.jpg
profil beiträge.jpg
profil beiträge.jpg (28.39 KiB) 117 mal betrachtet
Man muss nur aufpassen, dass es auch in der responsiven Ansicht noch zu erkennen ist. Mit ein paar Änderungen geht auch das. Sieht einfach etwas mystisch aus.

Die Icons für die Kontaktdaten habe ich auch, so gut es ging an Font Awesome passend geändert. Bei allen ging es nicht. Ob sie nun alle korrekt angezeigt werden, kann ich leider nicht testen. Ich habe nur YT - Email sowie Webseite.

Forum Member Switzerland
Administrator
Beiträge: 3323
Registriert: Donnerstag 1. Juli 2010, 14:05
Vorname: Jutta
Wohnort: Zuchwil/SO
    Windows 10 Firefox
Kontaktdaten:

Re: Fun experiment: Simple 3D Style

Beitrag von Forum Member » Donnerstag 15. November 2018, 15:02

Style ist so gut wie fertig - war ja nichts Gravierendes zum Anpassen :girl-brille:
Jetzt noch alles in die style.css verschieben - das dürfte die grösste Arbeit an diesem Style werden.
Mir dämmert grad, dass ich die Pollfarben sowie Forenregel nicht angepasst habe.
simple-3d with social icons.jpg
simple-3d with social icons hover.jpg
simple-3d inside2.jpg
simple-3d inside.jpg
simple-3d inside3.jpg

Forum Member Switzerland
Administrator
Beiträge: 3323
Registriert: Donnerstag 1. Juli 2010, 14:05
Vorname: Jutta
Wohnort: Zuchwil/SO
    Windows 10 Firefox
Kontaktdaten:

Re: Fun experiment: Simple 3D Style

Beitrag von Forum Member » Freitag 16. November 2018, 11:58

Ein äusserst komisches Problem ist das:

Das Font Awesome Icon Fa-Home wird minimalistisch angezeigt. Der Code für die Font Awesome Icons, greift in diesem Style nicht :confused:

Code: Alles auswählen

.icon, .button .icon, blockquote cite::before, .uncited::before {
    display: inline-block;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-family: FontAwesome;
    font-size: 15px;
    line-height: 1;
    text-rendering: auto;
}
home icon minimalistisch.jpg
Ich muss dieses Icon in der simple.css extra konfigurieren. Erst dann wird es in korrekter Grösse angezeigt.

Code: Alles auswählen

.fa-home::before {
	content: "\f015";
	font-size: 19px;
	color: #395F93;
	vertical-align: middle;
}
home icon korrekt.jpg
Das hatte ich definitiv noch in keinem Style. Dieser Style Simple-3D ist nichts anderes als mein Style Keyboard sowie MyTaste und da gibt es mit diesem Icon keine Probleme.

Wenn ich dann allerdings mit Firefox auf "Element Untersuchen" klicke, wird nicht mein Code angezeigt, sondern der Standard Code für die Font Awesome Icons. Font-size ist nicht mal gestrichen, obwohl ja jetzt die von mir konfigurierte Grösse angezeigt wird. Ich werde noch wahnsinnig ob diesem icon :suisse-augen:

Code: Alles auswählen

.icon, .button .icon, blockquote cite::before, .uncited::before {
    display: inline-block;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-family: FontAwesome;
    font-size: 15px;
    line-height: 1;
    text-rendering: auto;
}
.fa-fw {
    width: 1.28571429em;
    text-align: center;
}
Woran kann das denn nun blos liegen? Ist doch nicht normal so was!

Forum Member Switzerland
Administrator
Beiträge: 3323
Registriert: Donnerstag 1. Juli 2010, 14:05
Vorname: Jutta
Wohnort: Zuchwil/SO
    Windows 10 Firefox
Kontaktdaten:

Re: Fun experiment: Simple 3D Style

Beitrag von Forum Member » Samstag 17. November 2018, 15:18

Symbole.jpg
***
smile.jpg
:lol2: :lol2: :lol2:

Forum Member Switzerland
Administrator
Beiträge: 3323
Registriert: Donnerstag 1. Juli 2010, 14:05
Vorname: Jutta
Wohnort: Zuchwil/SO
    Windows 10 Firefox
Kontaktdaten:

Re: Fun experiment: Simple 3D Style

Beitrag von Forum Member » Mittwoch 28. November 2018, 14:04

Style Red
red.jpg
Download für phpbb 3.2.4 (RC)
Style Prosilver der phpbb Version 3.2.4 muss installiert sein!
Simple-3D_3.2.4_Red.zip
(3.24 MiB) 15-mal heruntergeladen

Style Blue (BETA)
Leider funktionierte bisher kein Code / keine Lösung, damit die Icons mit Background in der Navigation automatisch alle gleich gross sind. Weshalb ich den Style in BETA änderte ( alle Icons in der Navigation sind einzeln angepasst im Moment. Das ist logisch ziemlich mühsam, wenn man viele Extension installiert hat, die in der Navigation angezeigt werden)

Unfortunately no code / solution worked so far, so that the icons with background in the navigation are automatically all the same size. That's why I changed the style to BETA (all icons in the navigation are adjusted individually at the moment). This is logically quite tedious, if you have installed many extensions, which are displayed in the navigation)
blue.jpg

Antworten

Zurück zu „Fun experiment: SIMPLE-3D STYLE“