Transparenter CSS

  • Seite 4 von 15
18.01.2015 18:40 (zuletzt bearbeitet: 18.01.2015 18:48)
avatar  TripleM
#46 RE: Transparenter CSS
avatar
Mitglied

Da du auch den Talk nutzt bei dir sehe ich auch dort noch ein Problem. Ich habe bei mir mal einen angeschaltet. Und es ist nicht so einfach die Hintergründe aller antworten eines Talk Themas Trans zu bekommen weil sie Fortlaufende Nummern haben..



Das sind dann die Feinheiten die sich wie ein Roter Faden durch das Forum zieht. Habe nun eiiges in der CSS drin. Das was Trans muss habe ich und noch einige Anpassungen die ich alle beschriftet habe. Da kannst du dann später ja schauen was du behalten willst und was nicht (Das schmeist du dann einfach wieder raus.) Ist ja alles sauber Dokumentiert in der CSS.

Edit: Ich kann in den Farbeinstellungen die Unternavigation Ändern von Sagen wir mal Weiß auf Rot, aber trage ich dort Trans ein passiert gar nix?? Jemand ne ahnung woran das liegen könnte?


 Antworten

 Beitrag melden
18.01.2015 19:05
avatar  King Kurt ( gelöscht )
#47 RE: Transparenter CSS
Ki
King Kurt ( gelöscht )

Okay, also noch zwei Probleme: Unternavigation und Talk. Ja, das mit dem Talk stelle ich mir auch schwierig vor, der setzt sich aus mehreren Elementen zusammen.


 Antworten

 Beitrag melden
18.01.2015 19:52 (zuletzt bearbeitet: 18.01.2015 20:02)
avatar  .BiL.
#48 RE: Transparenter CSS
avatar
Mitglied

Ich habe für die Untermenüs eine Möglichkeit gefunden (Mario hat den Staffelstab übergeben.):

1
 
#nav_n.nav_n li {background-color: rgba(255,255,255, 0.5) !important;}
 



Edit: ich vergaß - man kann es hier sehen: http://bil-testet.xobor.de/

.
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
18.01.2015 20:09
avatar  TripleM
#49 RE: Transparenter CSS
avatar
Mitglied

Danke Birgit mach morgen weiter. Rechner ist für heute aus.


 Antworten

 Beitrag melden
18.01.2015 20:46 (zuletzt bearbeitet: 18.01.2015 20:48)
avatar  King Kurt ( gelöscht )
#50 RE: Transparenter CSS
Ki
King Kurt ( gelöscht )

Okay, danke euch beiden. Dann sehen wir morgen weiter

Möchte noch anmerken, dass ich auch einen Kalender habe. Im Moment kann ich leider nicht testen, ob man den ebenfalls im CSS auskommentieren muss. Bei eigenen HTML Seiten bin ich mir auch nicht sicher.

In dem Testforum von Bil ist die Halbtransparenz sehr schön umgesetzt, aber ich vermute, das ist das Business Template?

Grüße


 Antworten

 Beitrag melden
18.01.2015 20:59
avatar  .BiL.
#51 RE: Transparenter CSS
avatar
Mitglied

Nein, ich habe es extra auf Gaja umgestellt (auch weil wir grad die ToDoX auf Gaja testen müssen.)
Wie gesagt, Mario hat mir vorhin den Code gegeben und ich habe nur diese Zeile hinzugefügt für die Untermenüs (und aus den rötlichen transparenten Flächen weiße gemacht).

Mit dem Code, der jetzt aktuell da drin ist, ist der Kalender nicht wirklich transparent. Nur die Linien dazwischen. Kannst ja gucken.

.
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
18.01.2015 21:16
avatar  TripleM
#52 RE: Transparenter CSS
avatar
Mitglied

Birgit ich habe mir das nun angesehen. Die Transparenz würde ich auch weniger machen. Habe das erst mal nur so eingestellt. Da muss man dann schauen wenn es im Forum online ist wie man es einstellt. Ist ja Geschmackssache . Was ich bisher mit dem Handy sehen konnte schaut gut aus. Werde den Codes morgen mal abändern und im Testforum einbinden dann sieht es so aus wie Kingston Original.


 Antworten

 Beitrag melden
19.01.2015 06:48 (zuletzt bearbeitet: 19.01.2015 06:53)
avatar  TripleM
#53 RE: Transparenter CSS
avatar
Mitglied

Danke noch mal an Birgit. Das die Unternavi bei mir nicht Teiltrans war lag an der Position in der CSS Box. Sobald ich etwas Über den Eintrag drin habe Funktioniert es nicht. Warum das so ist entzieht sich meiner Kenntnis. Also hier nun mal das Ergebnis. Scheint nun alles zu Funktionieren. Solltest du noch irgendwo etwas feststellen muß man noch mal schauen.

Hier nun der CSS Code.

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
 
.xFeedContainer h2:first-child { visibility:hidden; line-height:0px; }   .xFeedContainer h2:after  { visibility:visible; content: url(https://files.homepagemodules.de/b583841/a_225_831f9b15.png); background-repeat: no-repeat; } 
 

 



/*--- 020-Ab hier Navigationshintergrund Transparent ---*/

#nav_n.nav_n li {background-color: rgba(255,255,255, 0.6) !important;}
 

/*--- 020-Ab hier Navigationshintergrund Transparent Ende ---*/
 

/*--- 022-Ab hier Schatten nach innen im Body ---*/
body {
box-shadow: 0 1px 16px inset;
-moz-box-shadow: 0 1px 16px inset;
-o-box-shadow: 0 1px 16px inset;
-webkit-box-shadow: 0 1px 16px inset;
-khtml-box-shadow: 0 1px 16px inset;
}
/*--- 022-Ende Schatten nach innen im Body ---*/


/*--- 021-Ab hier Rahmen und Schatten um Zitate in den Beitraegen ---*/
blockquote {
border-color: #e6e6e6;
border-radius: 10px 10px 10px 10px;
border-style: solid;
border-width: 8px 2px;
box-shadow: 0 2px 15px;
-moz-box-shadow: 0 2px 15px;
-o-box-shadow: 0 2px 15px;
-webkit-box-shadow: 0 2px 15px;
-khtml-box-shadow: 0 2px 15px;
}
/*--- 021-Ende Rahmen und Schatten um Zitate in den Beitraegen ---*/

/*--- 020-Ab hier Schatten um Forenkorpus, sowie den Beiträgen und dem grossen Chat ---*/
.c_r_content1, .c_r_content2, .c_r_content3, .a_r_content2 {
box-shadow: 0 2px 10px inset;
-moz-box-shadow: 0 2px 10px inset;
-o-box-shadow: 0 2px 10px inset;
-webkit-box-shadow: 0 2px 10px inset;
-khtml-box-shadow: 0 2px 10px inset;
}
/*--- 020-Ende Schatten um Forenkorpus, sowie den Beiträgen und dem grossen Chat ---*/


/*--- 018-Ab hier horizontalen Hauptlinien fuer Uebersicht und Beitraege von 1px auf 2px erhoeht und Schatten --- */
hr {
box-shadow: 2px 2px 8px;
-moz-box-shadow: 2px 2px 8px;
-o-box-shadow: 2px 2px 8px;
-webkit-box-shadow: 2px 2px 8px;
-khtml-box-shadow: 2px 2px 8px;
border-bottom: medium none transparent;
border-top: 2px solid #e6e6e6;
}
/*--- 018-Ab hier horizontalen Hauptlinien fuer Uebersicht und Beitraege von 1px auf 2px erhoeht und Schatten --- */


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

/*--- 014-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;
}
/*--- 014-Ende Hintergrund und Rahmen fuer das Menue -Gehe zu- unterhalb der Beitraege ---*/

 


/*--- 006-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;
}
/*--- 006-Ende Hintergrundfarbe, Grafik und Rahmen im WYSIWYG-Editor --- */

.nav_userinfo {
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;

}

.button_reply, .button_edit {
bottom: -14px; ! important;
}

 
/*--- 020-Ab hier Allgemeine Transparenz ---*/

 
body {

background-attachment: fixed !important;
background-position: center !important;
background-repeat: no-repeat !important;
}

.c_r_top1 div, .c_r_top2 div, .c_r_top3 div, .a_r_content2 div, .c_r_bottom1, #pagewidth.page, .content {
height: 0px; ! important;
}

.c_r_top1, .c_r_top2, .c_r_top3, .a_r_content2, .c_r_bottom1, #pagewidth.page, .content {
height: 0px; ! important;
}

.c_r_bottom1 div, .c_r_bottom2 div, .c_r_bottom3 div, .a_r_content2 div, #pagewidth.page, .content {
height: 0px; ! important;
}

.c_r_bottom1, .c_r_bottom2, .c_r_bottom3, .a_r_content2, #pagewidth.page, .content {
height: 0px; ! important;
}


#foptions_extend2.foptions_list_flist, .foptions_list, .foptions3 {background-color: #DBDBDB !important;}

.fdesc, .fnew, #login_wrap.box, #xActivityFeed.noimage.lastactions.forums, .box.grey.stats, #breadcrumbs, .inhalt, div.xchatBottom, .xChatInp, .c_r_bottom1, .c_r_content1, .forumtable, .c_r_cont3, .c_r_top3, .c_r_content3, .c_r_cont1_head, .c_r_top1_head, .c_r_cont2, .c_r_top2, .c_r_content2, #msg_1.topicContainer, .tree_message_content, .tree_message_header, #answer_conversation1, #answertotopic1_iconbar.iconbarContainer, .tree_answer, #answertotopic1, #msg_2.answerContainer, .nav_close,

#usercont_bottom.container, .fposts, .fstat, .foptions, .foptions2, #foptions_link2, #foptions_link, #revision_page_link.button, .xdl, .c_r_cont1, .c_r_top1, .c_r_content1, .firsttd, .nav_close, .dwn,

#quickreply.box, .threadnp, #legend_link, #legend.box, .category_wrap, .box, .tms2, .foptions3, .sidebar, .reply, .boxheader, #nav_n, .nav_n, #link_index, #nav_userinfo_li, .close, .firsttd,

.content.page_user, .content.page_wiki_index, .fpages, .foptions4.toggler, #liveres.box, .icontd, .c_r_cont1, .forumtable,

.reshead, .resinfo, .resmain, #allpages.pstat.pages, .crtp.deac, #forum_search, #fpages.options, .mtext, .mtextcell {background-color: rgba(255,255,255, 0.5) !important;}

/*--- 020-Ab hier Allgemeine Transparenz Ende ---*/
 
 




Hier die Farbeinstellungen Allgemein:



Und hier für die Navigation die Farben:



Somit hast du alles was du zum Umstellen brauchst. Habe in der CSS die Allgemeinen Sachen zusammen gestellt und alles andere Dokumentiert. Was du davon nicht haben möchtest kannst du ja wieder raus nehmen von dem Dokumentierten. Wichtig ist der Erste Eintrag nach deinen der muß an der Position sein. Also wenn du mal was nachtragen möchtest bitte nicht darüber sondern darunter. Weil sonst die Teiltransparenz der Unternavigation nicht mehr Funktioniert. Warum das so ist weiß ich nicht wirklich.
Hier noch mal der Link zum Testforum und wie es nun ausschaut und ein screen weil ich in ein zwei Tagen wieder alles umstelle.



http://gaiaofn.xobor.de/

Wie gesagt wenn noch irgendwo etwas zwickt und nicht 100%ig ist muß man noch mal nachbessern aber zu 97% steht es nun.
Die Transparenz kannst du nach deinen Geschmack anpassen. Dazu einfach dort wo rgba(255,255,255, 0.5) steht die 0.5 ändern Tiefer weniger Trans höhere Zahl mehr Trans. Das musst du einmal unten bei allgemein machen und einmal ganz oben der erste Eintrag von mir für die navigation.


 Antworten

 Beitrag melden
19.01.2015 08:40
avatar  .BiL.
#54 RE: Transparenter CSS
avatar
Mitglied

Dann war es Zufall das es bei mir funktioniert hat, weil ich neue Einträge grundsätzlich oben drüber schreibe ... manchmal muss man auch Glück haben.

Zum Transparenzwert noch ein Tipp: 0.1 ist wie Glas und 0.9 ist quasi undurchsichtig.

.
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
19.01.2015 09:01 (zuletzt bearbeitet: 19.01.2015 09:07)
avatar  King Kurt ( gelöscht )
#55 RE: Transparenter CSS
Ki
King Kurt ( gelöscht )

Hallo,

vielen Dank, dass ihr euch so viel Mühe gegeben habt.

Wenn ich das richtig sehe, muss an den Farbeinstellungen nichts verändert werden, lediglich die Hintergrundfarbe der Elemente muss transparent sein. Die schwarzen Trennlinien möchte ich nicht übernehmen, das hat mir vorher besser gefallen.

Spontan sind mir ein paar Kleinigkeiten aufgefallen: Warum sind die Felder in der Navigation weiß hinterlegt? Bei unserem gestrigen Versuch war die Navigationsleiste komplett halbtransparent, kannst du das vielleicht noch ändern?

Lässt sich der Rahmen im Activity Feed noch entfernen? Ist das eine Farbeinstellung oder muss man den im CSS ansprechen?

Wenn ich das richtig sehe, ist der Kalender nicht halbtransparent und eigene HTML Seiten auch nicht? Das schaue ich mir nachher mal an, mal sehen, wie das in meinem Forum aussieht. Zum Beispiel habe ich eine eigene HTML Seite mit den Nutzungsbedingungen und im Portal habe ich eine Schlagwortwolke. Diese beiden Elemente sind vermutlich nicht halbtransparent.

Grüße


 Antworten

 Beitrag melden
19.01.2015 09:12 (zuletzt bearbeitet: 19.01.2015 09:20)
avatar  .BiL.
#56 RE: Transparenter CSS
avatar
Mitglied

Im ersten Moment hätte ich gedacht, es fehlt die Zeile:

1
 
#nav_n.nav_n {background-color: rgba(255,255,255, 0.6) !important;}
 

Es ist nur:

1
 
#nav_n.nav_n li {background-color: rgba(255,255,255, 0.6) !important;}
 

da.

Aber auch mit dieser Zeile sind die Buttons nicht transparent ... schade.

.
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
19.01.2015 09:37
avatar  King Kurt ( gelöscht )
#57 RE: Transparenter CSS
Ki
King Kurt ( gelöscht )

Sehe ich das richtig, dass der Wert für die Transparenz 0.5 beträgt? Diesen Wert hatten wir gestern auch, aber heute ist das Forum viel weniger transparent als gestern. Sieht so aus, als ob da unterschiedliche Werte zusammenkommen. Die Navigationsleiste hat im rechten Bereich die richtige Transparenz, aber der Rest vom Forum ist fast gar nicht transparent. Woran liegt das?


 Antworten

 Beitrag melden
19.01.2015 09:43
avatar  .BiL.
#58 RE: Transparenter CSS
avatar
Mitglied

Zitat
Die Navigationsleiste hat im rechten Bereich die richtige Transparenz, aber der Rest vom Forum ist fast gar nicht transparent. Die Navigationsleiste hat im rechten Bereich die richtige Transparenz, aber der Rest vom Forum ist fast gar nicht transparent.

Rechts ist nur der Hintergrund. Links liegen die Buttons noch drauf. Entweder siond die noch gar nicht angesprochen oder 2x halbtransparent = nicht transparent.

Zitat
Diesen Wert hatten wir gestern auch, aber heute ist das Forum viel weniger transparent als gestern.

Das ist mir auch auf gefallen. In meinem Testforum habe ich 0.6 und da ist es transparenter. Aber die Navi habe ich auch nicht transparent bekommen.

.
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
19.01.2015 10:11
avatar  King Kurt ( gelöscht )
#59 RE: Transparenter CSS
Ki
King Kurt ( gelöscht )

Ja, das gesamte Forum ist nicht halbtransparent, das betrifft nicht nur die Buttons in der Navigation. So kann ich das Design leider nicht verwenden.

Wir hatten das ja gestern bereits hinbekommen. Irgendwo in diesem Thread liegt noch der alte CSS Code herum, wo alles gut funktionierte. Gestern war der Code allerdings noch unvollständig, d.h. es fehlten einige wichtige Elemente (Unternavigation, Forumsbeiträge, Talk).


 Antworten

 Beitrag melden
19.01.2015 10:48
avatar  .BiL.
#60 RE: Transparenter CSS
avatar
Mitglied

Also am Code liegt es nicht. Ich habe ihn mal bei mir reinkopiert und alles (was ich überblicken kann) ist transparent (außer Navi-Hauptpunkte und Kalender, also auch Beiträge, Talk und Unternavigation).

.
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
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!