Image • •HERZLICH WILLKOMMEN BEI UNS IM FORUM!
****
****
Luca Hänni - She Got Me - Switzerland - LIVE - Second Semi-Final - Eurovision 2019
Only the white suit is missing, then the Swiss colours would be perfect. :-) Definitely the best song without much bells and whistles next to the singer!
Uf jede Fall viel besser, als dä DJ Bobo 2007!!! Go Luca! :suisse-augen:
***
«Eurovision Song Contest 2018: Destino Lisboa» - Was erleben die Künstler

[BETA] ColoredWelcome

Forum Member Switzerland
Administrator
Posts: 3443
Joined: Thursday 1. July 2010, 14:05
Surname: Jutta
Location: Zuchwil/SO
    Windows 10 Firefox
Contact:

[BETA] ColoredWelcome

Post by Forum Member » Tuesday 12. February 2019, 21:00

Style Version: 3.2.5_beta3
phpbb Version: 3.2.5
Prosilver version 3.2.5 must be installed
ColoredWelcome_beta3.zip
(986.95 KiB) Downloaded 15 times
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: Select all

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) Downloaded 5 times
Download:
ColoredWelcome_BETA2.zip
(402.98 KiB) Downloaded 15 times

Forum Member Switzerland
Administrator
Posts: 3443
Joined: Thursday 1. July 2010, 14:05
Surname: Jutta
Location: Zuchwil/SO
    Windows 10 Firefox
Contact:

Re: [BETA] ColoredWelcome

Post by Forum Member » Friday 15. February 2019, 07:44

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

Forum Member Switzerland
Administrator
Posts: 3443
Joined: Thursday 1. July 2010, 14:05
Surname: Jutta
Location: Zuchwil/SO
    Windows 10 Firefox
Contact:

Re: [BETA] ColoredWelcome

Post by Forum Member » Sunday 17. February 2019, 13:15

Simple-türkis

Code: Select all

	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: Select all

	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: Select all

	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: Select all

	
	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: Select all

	
	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: Select all

	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: Select all

	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
Posts: 3443
Joined: Thursday 1. July 2010, 14:05
Surname: Jutta
Location: Zuchwil/SO
    Windows 10 Firefox
Contact:

Re: [BETA] ColoredWelcome

Post by Forum Member » Tuesday 19. February 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!

Forum Member Switzerland
Administrator
Posts: 3443
Joined: Thursday 1. July 2010, 14:05
Surname: Jutta
Location: Zuchwil/SO
    Windows 10 Firefox
Contact:

Re: [BETA] ColoredWelcome

Post by Forum Member » Wednesday 27. March 2019, 11:37

Style should be ready by now. I might have missed something.
Maybe it would be better if there were also no shadow border in the header wrap in the phone with large displays? (Feedback in this regard would be good - :suisse-augen: )
That's why I leave the style as Beta

Changes in version 3.2.5_beta3:

* Fixed / moved an event in overall_header
* The responsive completely new adapted
* body_wrap width changed from px to %
* Some colors changed / new adjusted
* Box-shadow inserted in footer_wrap

* Additional iconset in the colors of the headers

Forum Member Switzerland
Administrator
Posts: 3443
Joined: Thursday 1. July 2010, 14:05
Surname: Jutta
Location: Zuchwil/SO
    Windows 10 Firefox
Contact:

Re: [BETA] ColoredWelcome

Post by Forum Member » Saturday 11. May 2019, 11:31

Style ist an 3.2.7 angepasst
Styleversion 3.2.7_beta

Prosilver der Version 3.2.7 muss installiert sein.
ColoredWelcome_3.2.7_beta.zip
(1.91 MiB) Downloaded 3 times
Änderungen in 3.2.7
* Icon-color-green Farbe geändert
* PN Border-color geändert

Post Reply

Return to “ColoredWelcome”