Bild • •HERZLICH WILLKOMMEN BEI UNS IM FORUM!
****

Das Leben ist für einige äusserst nette Menschen, leider viel zu kurz.....

Life is for some very nice people, unfortunately much too short.....


Style DEMO Board

[BETA] ColoredWelcome

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

[BETA] ColoredWelcome

Beitrag von Forum Member » Dienstag 12. Februar 2019, 21:00

Style Version: 3.2.5_BETA2
phpbb Version: 3.2.5
Prosilver version 3.2.5 must be installed
Download:
ColoredWelcome_BETA2.zip
(402.98 KiB) 9-mal heruntergeladen
Important:
Larger style changes are too difficult for beginners with this style!

However, any description length is possible, if the forum title is too long, the header doesn't look good in smaller displays.
Therefore this style is not recommended for forums with a long title!

The style width is fixed. Otherwise most of it would have to be adapted, also in the responsive (The Style consists of 3 Wraps).
I will definitely not give support for changes in the style width. That's too time consuming!

If you want to change the header background, you should also change the tabs, navigation and buttons.
Because everything is adjusted to the header background.

A logo can be inserted in the header, but a whole header image is not responsive.
The logo has to be inserted in two sizes in the image file of the style.
If you want the logo to be much bigger, you have to create 3 logos and adjust the responsive.

Info:
If you do not want to display a forum title, a small black border is displayed.
If you don't want this you have to replace the whole code in colored_welcome.css line 26, with this code:

Code: Alles auswählen

h1 {
    color: #E9967A;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.6em;
    text-align: center;
    text-shadow: #000 1px 1px 0;
    width: 60%;
    padding-top: 2px;
    padding-bottom: 4px;
    margin: -40px auto 10px;
}
NOTE: You can't just delete the whole code part and write a display:none. Otherwise the whole header will be moved and not correct anymore. With this code change it looks okay in every display. But it also looks good with the small black border (See below in the corresponding picture).

******
coloredwelcome_index.jpg
coloredwelcome_inside.jpg
innen2.jpg
coloredwelcome_ucp.jpg
no_forentitel.jpg
rules.jpg
coloredwelcome_dropown.jpg
coloredwelcome_cookiewindow.jpg
There are alternative icons for the icon topic_hot
coloredwelcome_alternative-icons.png
Das ist nicht der aktuelle Download siehe oben
ColoredWelcome_3.2.5_BETA.zip
(459 KiB) 4-mal heruntergeladen

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

Re: [BETA] ColoredWelcome

Beitrag von Forum Member » Freitag 15. Februar 2019, 07:44

Einige Header Änderungsbeispiele
simple.jpg
blue.jpg
sun.jpg
silver.jpg
sunshine.jpg
mixte.jpg
red.jpg

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

Re: [BETA] ColoredWelcome

Beitrag von Forum Member » Sonntag 17. Februar 2019, 13:15

Simple-türkis

Code: Alles auswählen

	background: -moz-linear-gradient(90deg, #008080 0%, #008080 1%, #99DAFF 49%, #008080 100%); /* ff3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #008080), color-stop(51%, #99DAFF), color-stop(99%, #008080), color-stop(100%, #008080)); /* safari4+,chrome */
	background: -webkit-linear-gradient(90deg, #008080 0%, #008080 1%, #99DAFF 49%, #008080 100%); /* safari5.1+,chrome10+ */
	background: -o-linear-gradient(90deg, #008080 0%, #008080 1%, #99DAFF 49%, #008080 100%); /* opera 11.10+ */
	background: -ms-linear-gradient(90deg, #008080 0%, #008080 1%, #99DAFF 49%, #008080 100%); /* ie10+ */
	background: linear-gradient(0deg, #008080 0%, #008080 1%, #99DAFF 49%, #008080 100%); /* w3c */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008080', endColorstr='#008080',GradientType=0 ); /* ie6-9 */ 
Blue

Code: Alles auswählen

	background: rgb(58,78,213); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(58,78,213) 0%, rgb(58,157,213) 32%, rgb(58,207,213) 51%, rgb(58,157,213) 70%, rgb(58,78,213) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(58,78,213) 0%,rgb(58,157,213) 32%,rgb(58,207,213) 51%,rgb(58,157,213) 70%,rgb(58,78,213) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(58,78,213) 0%,rgb(58,157,213) 32%,rgb(58,207,213) 51%,rgb(58,157,213) 70%,rgb(58,78,213) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a4ed5', endColorstr='#3a4ed5',GradientType=0 ); /* IE6-9 */
Sun

Code: Alles auswählen

	background: rgb(117,34,1); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(117,34,1) 0%, rgb(191,110,78) 24%, rgb(240,183,161) 51%, rgb(191,110,78) 82%, rgb(117,34,1) 99%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(117,34,1) 0%,rgb(191,110,78) 24%,rgb(240,183,161) 51%,rgb(191,110,78) 82%,rgb(117,34,1) 99%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(117,34,1) 0%,rgb(191,110,78) 24%,rgb(240,183,161) 51%,rgb(191,110,78) 82%,rgb(117,34,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#752201', endColorstr='#752201',GradientType=0 ); /* IE6-9 */	
Silver

Code: Alles auswählen

	
	background: -moz-linear-gradient(90deg, #000000 0%, #000000 1%, #ffffff 47%, #000000 100%); /* ff3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(53%, #ffffff), color-stop(99%, #000000), color-stop(100%, #000000)); /* safari4+,chrome */
	background: -webkit-linear-gradient(90deg, #000000 0%, #000000 1%, #ffffff 47%, #000000 100%); /* safari5.1+,chrome10+ */
	background: -o-linear-gradient(90deg, #000000 0%, #000000 1%, #ffffff 47%, #000000 100%); /* opera 11.10+ */
	background: -ms-linear-gradient(90deg, #000000 0%, #000000 1%, #ffffff 47%, #000000 100%); /* ie10+ */
	background: linear-gradient(0deg, #000000 0%, #000000 1%, #ffffff 47%, #000000 100%); /* w3c */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* ie6-9 */ 
Sunshine

Code: Alles auswählen

	
	background: -moz-linear-gradient(90deg, #800000 0%, #ffff00 50%, #800000 100%); /* ff3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #800000), color-stop(50%, #ffff00), color-stop(100%, #800000)); /* safari4+,chrome */
	background: -webkit-linear-gradient(90deg, #800000 0%, #ffff00 50%, #800000 100%); /* safari5.1+,chrome10+ */
	background: -o-linear-gradient(90deg, #800000 0%, #ffff00 50%, #800000 100%); /* opera 11.10+ */
	background: -ms-linear-gradient(90deg, #800000 0%, #ffff00 50%, #800000 100%); /* ie10+ */
	background: linear-gradient(0deg, #800000 0%, #ffff00 50%, #800000 100%); /* w3c */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#800000', endColorstr='#800000',GradientType=0 ); /* ie6-9 */ 
Mixt

Code: Alles auswählen

	background: -moz-linear-gradient(90deg, #008080 0%, #FFFFFF 25%, #05C1FF 50%, #FFFFFF 75%, #005757 100%); /* ff3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #005757), color-stop(25%, #FFFFFF), color-stop(50%, #05C1FF), color-stop(75%, #FFFFFF), color-stop(100%, #008080)); /* safari4+,chrome */
	background: -webkit-linear-gradient(90deg, #008080 0%, #FFFFFF 25%, #05C1FF 50%, #FFFFFF 75%, #005757 100%); /* safari5.1+,chrome10+ */
	background: -o-linear-gradient(90deg, #008080 0%, #FFFFFF 25%, #05C1FF 50%, #FFFFFF 75%, #005757 100%); /* opera 11.10+ */
	background: -ms-linear-gradient(90deg, #008080 0%, #FFFFFF 25%, #05C1FF 50%, #FFFFFF 75%, #005757 100%); /* ie10+ */
	background: linear-gradient(0deg, #008080 0%, #FFFFFF 25%, #05C1FF 50%, #FFFFFF 75%, #005757 100%); /* w3c */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005757', endColorstr='#008080',GradientType=0 ); /* ie6-9 */ 
Red

Code: Alles auswählen

	background: -moz-linear-gradient(90deg, #000000 0%, #ff0000 48%, #000000 100%); /* ff3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(52%, #ff0000), color-stop(100%, #000000)); /* safari4+,chrome */
	background: -webkit-linear-gradient(90deg, #000000 0%, #ff0000 48%, #000000 100%); /* safari5.1+,chrome10+ */
	background: -o-linear-gradient(90deg, #000000 0%, #ff0000 48%, #000000 100%); /* opera 11.10+ */
	background: -ms-linear-gradient(90deg, #000000 0%, #ff0000 48%, #000000 100%); /* ie10+ */
	background: linear-gradient(0deg, #000000 0%, #ff0000 48%, #000000 100%); /* w3c */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* ie6-9 */ 

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

Re: [BETA] ColoredWelcome

Beitrag von Forum Member » Dienstag 19. Februar 2019, 13:58

Style wäre jetzt bald fertig.
Allerdings gibt es da ein riesen Problem. Der nette IE10 kann keine Gradient-Border anzeigen.
Tweaks samt Code habe ich im Style eingefügt, damit er einfarbigen Border anzeigen soll, Aber er zeigt keinen Border an.
Bleibt die Frage: Kann man keine tweaks für IE10 im Style einfügen?

Mr. Google hat bisher auch keine brauchbare Lösung geliefert.
Ich bekomme langsam Zustände :confused:

Mit einer vermutlich nicht ganz astreinen Lösung, habe ich den IE10 nun dazu bewegen können, einen einfarbigen Border anzuzeigen :lol2:
Bei mir stimmen immerhin die Farben in den alten IE Browsern, was man nicht von allen validierten Styles sagen kann!

Style would be ready soon.
But there is a huge problem. The nice IE10 can't display gradient borders.
I inserted tweaks and code in the style to show monochrome borders, but it doesn't show borders.
The question remains: Is it not possible to insert tweaks for IE10 in style?

Mr. Google hasn't provided a workable solution yet either.
I'm slowly getting states :confused:

With a probably not quite flawless solution, I was able to get IE10 to display a monochrome border now :lol2:
After all, the color is right in all old IE browsers. Which isn't the case in all validated styles on .com!

Antworten

Zurück zu „ColoredWelcome“