Transparenter CSS

  • Seite 12 von 15
23.01.2015 18:25
avatar  King Kurt ( gelöscht )
#166 RE: Halbtransparente Bereiche im Forum
Ki
King Kurt ( gelöscht )

@Van: Hier kurz die XML, lösche ich gleich wieder

[[File:www-psychose-online-net-Designpreset.20150123.xml]]


 Antworten

 Beitrag melden
23.01.2015 18:27
avatar  TripleM
#167 RE: Halbtransparente Bereiche im Forum
avatar
Mitglied

Hui soviel zu lesen Muß nun erst mal wieder rein kommen. Werde mich morgen Intensiv damit beschäftigen da habe ich Zeit genug. Schön das alle an einen Strang ziehen. Wäre schön wenn man es lösen könnte.


 Antworten

 Beitrag melden
23.01.2015 18:31
avatar  King Kurt ( gelöscht )
#168 RE: Halbtransparente Bereiche im Forum
Ki
King Kurt ( gelöscht )

Ach Mensch, jetzt kann ich die XML nicht mehr löschen...kann @Ingmar das vielleicht für mich machen? Beitrag #166 bitte die XML löschen


 Antworten

 Beitrag melden
23.01.2015 20:21 (zuletzt bearbeitet: 23.01.2015 20:22)
avatar  Van
#169 RE: Halbtransparente Bereiche im Forum
Va
Van
Mitglied

Guten Abend noch mal =D

Also... ich hoffe, ich mache den Mund jetzt nicht zu weit auf, aber ich glaube, ich bin ein Stück weiter =)
Einmal hier schauen bitte:

http://vantestet.xobor.de/

Ich hab einfach das genommen, was ihr schon erarbeitet habt und nur ein wenig was weggelassen.
Das komplette CSS sieht im Moment folgendermaßen aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 

/* 01 Anweisung zu Hintergrundbild von Mario/Bil */
body {
background-attachment: fixed !important;
background-position: center !important;
background-repeat: no-repeat !important; }
/* 01 Anweisung zu Hintergrundbild von Mario/Bil Ende */
 

/* 02 Ab hier allgemeine Transparenz und Schatten nach Innen; alle weiße Flächen */
.c_r_cont1, .c_r_cont2, .c_r_cont3, .c_r_cont3 box, .nav_n {
background-color: rgba(255,255,255, 0.3) !important;
box-shadow: 0 1px 10px inset;
-moz-box-shadow: 0 1px 10px inset;
-o-box-shadow: 0 1px 10px inset;
-webkit-box-shadow: 0 1px 10px inset;
-khtml-box-shadow: 0 1px 10px inset; }
/* 02 Ab hier allgemeine Transparenz und Schatten nach Innen; alle weiße Flächen Ende */
 

/* 03 Ab hier Navi/Untermenüs transparent */
#nav_n.nav_n ul {
background-color: rgba(255,255,255, 0) !important;}

#nav_n.nav_n li {
background-color: rgba(255,255,255, 0) !important;}
 
.nav_userinfo, #nav_n.nav_n.dwn {
background-color: #transp;
background-image:url("http://up.picr.de/20724470km.jpg");
border: 1px solid #030003;
box-shadow: 0 2px 10px;
-moz-box-shadow: 0 2px 10px;
-o-box-shadow: 0 2px 10px;
-webkit-box-shadow: 0 2px 10px;
-khtml-box-shadow: 0 2px 10px; }
/* 03 Ab hier Navi/Untermenüs transparent Ende */
 

/* 04 Ab Hier Hintergrund im Hilfe-Kontext des Login-Menues */
#reg_help {
background-image: url("http://up.picr.de/20724470km.jpg"); }
/* 04 Hintergrund im Hilfe-Kontext des Login-Menues Ende */
 

/* 05 Ab hier Hintergrund und Rahmen fuer das Menue -Gehe zu- unterhalb der Beitraege */
.jumpTo {
background-image: url("http://up.picr.de/20724470km.jpg");
border-left: 1px solid #030003;
border-right: 2px solid #030003;
border-top: 1px solid #030003;
border-bottom: 2px solid #030003;}
/* 05 Hintergrund und Rahmen fuer das Menue -Gehe zu- unterhalb der Beitraege Ende */
 

/* 06 Ab hier Hintergrundfarbe, Grafik und Rahmen im WYSIWYG-Editor */
.xob_subiconlist {
background-color: #transp;
background-image:url("http://up.picr.de/20724470km.jpg");
border: 1.5px solid #030003; }
/* 06 Ende Hintergrundfarbe, Grafik und Rahmen im WYSIWYG-Editor */
 

/* 07 Antwortbutton */
.button_reply, .button_edit {
bottom: -14px; ! important; }
/* 07 Antwortbutton Ende */
 

/* 08 Button im Blogbereich sichtbar*/
.buttonLink {
background: #b8a282 !important; color: black !important;}
/* 08 Button im Blogbereich sichtbar Ende*/
 

/* 09 Ab hier Rahmen und Schatten um Zitbox */
blockquote {
border-color: #8B795E;
border-radius: 6px 6px 6px 6px;
border-style: solid;
border-width: 5px 2px;
box-shadow: 0 2px 15px;
width: 82%;
-moz-box-shadow: 0 2px 15px;
-o-box-shadow: 0 2px 15px;
-webkit-box-shadow: 0 2px 15px;
-khtml-box-shadow: 0 2px 15px; }
/* 09 Rahmen und Schatten um Zitatbox Ende */
 
 


Wenn die Navi keinen Schatten haben soll, dann muss man es etwas anders schreiben:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 

/* 01 Anweisung zu Hintergrundbild von Mario/Bil */
body {
background-attachment: fixed !important;
background-position: center !important;
background-repeat: no-repeat !important; }
/* 01 Anweisung zu Hintergrundbild von Mario/Bil Ende */
 

/* 02 Ab hier allgemeine Transparenz und Schatten nach Innen; alle weiße Flächen */
.c_r_cont1, .c_r_cont2, .c_r_cont3, .c_r_cont3 box {
background-color: rgba(255,255,255, 0.3) !important;
box-shadow: 0 1px 10px inset;
-moz-box-shadow: 0 1px 10px inset;
-o-box-shadow: 0 1px 10px inset;
-webkit-box-shadow: 0 1px 10px inset;
-khtml-box-shadow: 0 1px 10px inset; }
 
.nav_n {
background-color: rgba(255,255,255, 0.3) !important; }
/* 02 Ab hier allgemeine Transparenz und Schatten nach Innen; alle weiße Flächen Ende */
 

/* 03 Ab hier Navi/Untermenüs transparent */
#nav_n.nav_n ul {
background-color: rgba(255,255,255, 0) !important;}

#nav_n.nav_n li {
background-color: rgba(255,255,255, 0) !important;}
 
.nav_userinfo, #nav_n.nav_n.dwn {
background-color: #transp;
background-image:url("http://up.picr.de/20724470km.jpg");
border: 1px solid #030003;
box-shadow: 0 2px 10px;
-moz-box-shadow: 0 2px 10px;
-o-box-shadow: 0 2px 10px;
-webkit-box-shadow: 0 2px 10px;
-khtml-box-shadow: 0 2px 10px; }
/* 03 Ab hier Navi/Untermenüs transparent Ende */
 

/* 04 Ab Hier Hintergrund im Hilfe-Kontext des Login-Menues */
#reg_help {
background-image: url("http://up.picr.de/20724470km.jpg"); }
/* 04 Hintergrund im Hilfe-Kontext des Login-Menues Ende */
 

/* 05 Ab hier Hintergrund und Rahmen fuer das Menue -Gehe zu- unterhalb der Beitraege */
.jumpTo {
background-image: url("http://up.picr.de/20724470km.jpg");
border-left: 1px solid #030003;
border-right: 2px solid #030003;
border-top: 1px solid #030003;
border-bottom: 2px solid #030003;}
/* 05 Hintergrund und Rahmen fuer das Menue -Gehe zu- unterhalb der Beitraege Ende */
 

/* 06 Ab hier Hintergrundfarbe, Grafik und Rahmen im WYSIWYG-Editor */
.xob_subiconlist {
background-color: #transp;
background-image:url("http://up.picr.de/20724470km.jpg");
border: 1.5px solid #030003; }
/* 06 Ende Hintergrundfarbe, Grafik und Rahmen im WYSIWYG-Editor */
 

/* 07 Antwortbutton */
.button_reply, .button_edit {
bottom: -14px; ! important; }
/* 07 Antwortbutton Ende */
 

/* 08 Button im Blogbereich sichtbar*/
.buttonLink {
background: #b8a282 !important; color: black !important;}
/* 08 Button im Blogbereich sichtbar Ende*/
 

/* 09 Ab hier Rahmen und Schatten um Zitbox */
blockquote {
border-color: #8B795E;
border-radius: 6px 6px 6px 6px;
border-style: solid;
border-width: 5px 2px;
box-shadow: 0 2px 15px;
width: 82%;
-moz-box-shadow: 0 2px 15px;
-o-box-shadow: 0 2px 15px;
-webkit-box-shadow: 0 2px 15px;
-khtml-box-shadow: 0 2px 15px; }
/* 09 Rahmen und Schatten um Zitatbox Ende */
 
 



Ich hab leider keine Ahnung, wie es sich auf das Portal auswirkt... Das müsste sich @KingKurt dann mal ansehen. Wenn noch Fehler bestehen, einfach melden =)
Ich hoffe, ich hab das übersichtlich genug sortiert, damit jeder versteht, was ich da gemacht habe... ^-^

mfg

Van


 Antworten

 Beitrag melden
23.01.2015 20:43
avatar  .BiL.
#170 RE: Halbtransparente Bereiche im Forum
avatar
Mitglied

Ja super, dass du das schon umgesetzt hast. Also sind nun die untenteren Content-Ebenen (cont1 bis cont3 usw.) formatiert. Ich überblicke nur grad nicht, wie du die darüber liegenden Ebenen weggeblendet hast?

Damit sind jedenfalls auch gleich die lästigen Rundungen weg.

.
Viele Grüße .BiL.
Friends of Xobor

Fragen zu Plugins und Pluginideen bitte nicht per PN, sondern öffentlich oder im FoXum stellen.

 Antworten

 Beitrag melden
23.01.2015 20:51
avatar  King Kurt ( gelöscht )
#171 RE: Halbtransparente Bereiche im Forum
Ki
King Kurt ( gelöscht )

@Van: Wow, das hast du sehr, sehr gut gemacht

Alles perfekt, auch im Portal. Freue mich, jetzt bin ich wunschlos glücklich mit dem Design.

Tausend Dank, ich melde mich später noch per PN..bis denne


 Antworten

 Beitrag melden
23.01.2015 20:59
avatar  Van
#172 RE: Halbtransparente Bereiche im Forum
Va
Van
Mitglied

Huhu =)

Da über die Layout-Einstellungen in der Admin alles auf komplett transparent eingestellt ist (also durchsichtig) habe ich sie einfach gar nicht weggeblendet. sondern nur den Teilen Farbe/Schatten gegeben, die sie auch brauchen =D

Wenn man c_r_content nicht färbt und mit Schatten dekoriert, muss man auch den Eintrag von Olaf nicht einsetzen, denn c_r_cont liegt unter den ganzen Elementen und es reicht, dort (also ganz unten) einfach das weiß und den Schatten zu definieren =)
Damit erledigt sich übrigens auch der Abstand zu den Forenüberschriften.

mfg

Van


 Antworten

 Beitrag melden
23.01.2015 21:07 (zuletzt bearbeitet: 23.01.2015 21:10)
avatar  .BiL.
#173 RE: Halbtransparente Bereiche im Forum
avatar
Mitglied

Zitat von Van im Beitrag #172
Huhu =)

Da über die Layout-Einstellungen in der Admin alles auf komplett transparent eingestellt ist (also durchsichtig) habe ich sie einfach gar nicht weggeblendet. sondern nur den Teilen Farbe/Schatten gegeben, die sie auch brauchen =D

Wenn man c_r_content nicht färbt und mit Schatten dekoriert, muss man auch den Eintrag von Olaf nicht einsetzen, denn c_r_cont liegt unter den ganzen Elementen und es reicht, dort (also ganz unten) einfach das weiß und den Schatten zu definieren =)
Damit erledigt sich übrigens auch der Abstand zu den Forenüberschriften.

mfg

Van
Das war ja die Hoffnung. Dann ist aber bei Mario offensichtlich nicht alles weggeblendet: http://gaiaofn.xobor.de/
Ok. Ich schau dann mal, was alles noch weg kann.

Na und die kleinen Hakser hier am Rand bekommen wir sicherlich auch noch weg:

.
Viele Grüße .BiL.
Friends of Xobor

Fragen zu Plugins und Pluginideen bitte nicht per PN, sondern öffentlich oder im FoXum stellen.

 Antworten

 Beitrag melden
23.01.2015 21:12
avatar  Van
#174 RE: Halbtransparente Bereiche im Forum
Va
Van
Mitglied

Moin!

Mir ist noch was aufgefallen bei KingKurt:

Im Talk ist der Hintergrund nicht weiß - da müsste man die class noch ins CSS einfügen. Ich muss nur eben suchen welche =D. Ich meld mich noch mal...

lg


 Antworten

 Beitrag melden
23.01.2015 21:16
avatar  .BiL.
#175 RE: Halbtransparente Bereiche im Forum
avatar
Mitglied

Inzwischen habe ich radikal alles auf trans gestellt, was mir unter die Finger kam. Was soll ich sagen, das Richtige war dabei. Ich hatte nun nicht die Geduld, alles einzeln zu probieren. (Und die Hakser sind dadurch auch weg!)

Was mir noch aufgefallen ist: die Untermenüs sind mir persönlich zu durchsichtig und der Kalender ist nicht transparent. Aber es kann sein, dass der auch so bleiben sollte.

.
Viele Grüße .BiL.
Friends of Xobor

Fragen zu Plugins und Pluginideen bitte nicht per PN, sondern öffentlich oder im FoXum stellen.

 Antworten

 Beitrag melden
23.01.2015 21:21
avatar  King Kurt ( gelöscht )
#176 RE: Halbtransparente Bereiche im Forum
Ki
King Kurt ( gelöscht )

@Van: Oh ja der Talk, das habe ich erst gar nicht gesehen. Gut, dann tragen wir das gleich noch nach.

@.Bil. Nein der Kalender ist nicht transparent. Das war ja in eurem Eintrag bisher nicht vorgesehen. Hätte nichts dagegen, wenn der Kalender auch transparent wäre.


 Antworten

 Beitrag melden
23.01.2015 21:21 (zuletzt bearbeitet: 23.01.2015 21:23)
avatar  Van
#177 RE: Halbtransparente Bereiche im Forum
Va
Van
Mitglied

Also erst mal Talk:

Hier:

/* 02 Ab hier allgemeine Transparenz und Schatten nach Innen; alle weiße Flächen */
.c_r_cont1, .c_r_cont2, .c_r_cont3, .c_r_cont3 box, .nav_n, Hier einfügen!!{
background-color: rgba(255,255,255, 0.3) !important;
box-shadow: 0 1px 10px inset;
-moz-box-shadow: 0 1px 10px inset;
-o-box-shadow: 0 1px 10px inset;
-webkit-box-shadow: 0 1px 10px inset;
-khtml-box-shadow: 0 1px 10px inset; }
/* 02 Ab hier allgemeine Transparenz und Schatten nach Innen; alle weiße Flächen Ende */

entweder:
.topicContainer, .answerContainer
dann ist jede Nachricht und jede Antwort einzeln umrahmt

oder:
.treetalk_conversations box
dann ist jede Nachricht mit ihren Antworten umrahmt =) wies besser gefällt!


 Antworten

 Beitrag melden
23.01.2015 21:27
avatar  King Kurt ( gelöscht )
#178 RE: Halbtransparente Bereiche im Forum
Ki
King Kurt ( gelöscht )

Super @Van, danke dir. Würde es sehr viel Arbeit machen, den Kalender auch transparent zu machen?


 Antworten

 Beitrag melden
23.01.2015 21:30
avatar  Van
#179 RE: Halbtransparente Bereiche im Forum
Va
Van
Mitglied

Mein Kalender ist in Ordnung... http://vantestet.xobor.de/calendar.php
was möchtest du denn? Ein Link zu eurem Kalender wär nicht schlecht =D


 Antworten

 Beitrag melden
23.01.2015 21:45 (zuletzt bearbeitet: 23.01.2015 21:47)
avatar  King Kurt ( gelöscht )
#180 RE: Halbtransparente Bereiche im Forum
Ki
King Kurt ( gelöscht )

@Van: Hier ist mein Kalender: http://www.psychose-online.net/calendar.php

Kann man den auch noch transparent machen? Also vielleicht so, dass die braunen Flächen auch halbtransparent sind? Der Farbton lautet #B8A282 - vielleicht kann man das ein bisschen durchsichtig machen? Die Tage, die nicht zum aktuellen Monat gehören, sind ja schon transparent.

Edit: Ich muss mir das selber erstmal überlegen. Vielleicht sieht es ja auch gut aus, wenn ich einfach alle Tage transparent mache.

Ist eigentlich in Ordnung so. Brauchst du nicht verändern.


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!