Templates & Sprachen » Transparenter CSS

16.01.2015 00:36 (zuletzt bearbeitet: 16.01.2015 00:38)

vipfregger2012
#1 Transparenter CSS

vi

vipfregger2012

Ich hab mal ne Frage ich suche für mein forum freggersfaq.xobor.de ein css code wie dieses forum hier hat http://www.fregger-fans-forum.de/ da sieht man genau das hintergrund bild wer kann mir da helfen wäre sehr nett;)

Antworten

Beitrag melden

#2

16.01.2015 00:53

( gel�scht )
#2 RE: Transparenter CSS

Gast

( gel�scht )

.. kannst du das vielleicht etwas spezialisieren ? Ich versteh grad nicht genau, was Du haben willst ..

Antworten

Beitrag melden

#3

16.01.2015 06:34 (zuletzt bearbeitet: 16.01.2015 06:43)

TripleM
#3 RE: Transparenter CSS

TripleM

Er möchte die Transparenten Elemente haben so wie bei mir auch z.b.

http://ofn-testforumzwei.xobor.de/
Das ist aber mit einiger Arbeit verbunden und ist nicht mal eben so schnell macht.

Hier mal mein CSS Eintrag (Farben in den CSS Eintrag entsprechend anpassen.

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
 
/*--- 001-Ab hier - Transparente Umstellung und Hintergrund Bilder --- */ 
 

 
 
 

#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, 
 
#usercont_bottom.container, .fposts, .fstat, .foptions, .foptions2, #foptions_link2, #foptions_link, #revision_page_link.button, .xdl,
 
#quickreply.box, .threadnp, #legend_link, #legend.box, .category_wrap, .box, .tms2, .foptions3, .sidebar, .reply, 
 
 .content.page_user, .content.page_wiki_index, .fpages, .foptions4.toggler, #liveres.box, .icontd, 
 
.reshead, .resinfo, .resmain, #allpages.pstat.pages, .crtp.deac, #forum_search, #fpages.options, .mtext, .mtextcell, .xChatInp_div, .xChatBottom,  
 
#pm_search_input {background: url("https://files.homepagemodules.de/b2001010/a_866_1f19b0bd.png") !important;}
 
#breadcrumbs {background: url("https://files.homepagemodules.de/b2001010/a_866_1f19b0bd.png") !important;}
 

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

#blog-sidebar {background-image: url("https://files.homepagemodules.de/b2001010/a_866_1f19b0bd.png");
    border: 1px solid #030003;
    }
 

.blog-article-body {background-image: url("https://files.homepagemodules.de/b2001010/a_866_1f19b0bd.png");
    border: 1px solid #030003;
    }
 
.blog-article {background-image: url("https://files.homepagemodules.de/b541474/a_528_4bf5de80.jpg");
    border: 1px solid #030003;
    }
 
/*--- 001-Ab hier Ende   Transparente Umstellung und Hintergrund Bilder  --- */ 
 
 

Dann sind da noch Diverse Einstellungen unter Admin/Layout/Farben&Einstellungen/Farben

Dort habe ich bei Hintergrundfarbe des Fensters Keine Farbe angegeben und bei Hintergrundfarbe Boxcontent und Hintergrundfarbe Content habe ich es auf Trans gestellt indem in den Farbfeld trans steht.

Bei den CSS Einträgen muss man mal schauen was du alles brauchst davon. Ist ja nun auf mein Forum zugeschnitten der CSS Block für die Transparente Umstellung. Ich würde dir ein Testforum empfehlen. Dort kannst du Gefahrlos Testen ohne das deine User was davon mit bekommen. Und wenn es alles läuft wie es soll Überträgst du es einfach in dein Forum.

Bitte wähle in Zukunft einen Titel der Aussagekräftiger ist und beschreibe genau was du meinst. Denn CSS Transparent hilft nicht wirklich dabei dir deinen Wunsch zu erfüllen. Genaue Beschreibung welche Teile Trans werden sollen sind notwendig.
Am Besten mit ein Paar Screenshots die du mit dem Windows eigenen Snipping Tool (Zu Finden unter Start/Alle Programme/Zubehör) machen kannst. Dort dann einfach mit Paint (Ebenfalls in Windows dort zu Finden wo Snipping Tool ist) einfach ein Paar Pfeile einbauen in die Grafik die auf die Bereiche zeigen die du Transparent haben möchtest.

Habe mir dein Forum nun auch angesehen und da sind schon Diverse Bereiche Transparent.

Antworten

Beitrag melden

#4

16.01.2015 09:09 (zuletzt bearbeitet: 16.01.2015 09:10)

.BiL.
#4 RE: Transparenter CSS

.BiL.

Welches Forum hat vipfregger2012 denn? Ich sehe weder Forennummer noch einen Link dahin.

Hallo,

bitte gib uns deine Boardnummer (Admin -> Home -> im Kasten links unten) oder den Link zu deinem Forum - nur so können wir dein Problem nachvollziehen.

.
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

#5

16.01.2015 12:48

TripleM
#5 RE: Transparenter CSS

TripleM

Laut dem Eröffnungspost

freggersfaq.xobor.de

Antworten

Beitrag melden

#6

16.01.2015 13:55

.BiL.
#6 RE: Transparenter CSS

.BiL.

Tatsächlich. Hatte es nicht wahrgenommen, weil es kein Link ist. Danke fürs Brille putzen.

.
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

#7

17.01.2015 16:03

King Kurt ( gel�scht )
#7 RE: Transparenter CSS

Ki

King Kurt ( gel�scht )

@TripleM: Das würde mich auch interessieren. In den Layouteinstellungen kann ich zwar bestimmte Bereiche transparent anzeigen lassen, aber ich hätte es gerne halbtransparent, so wie in deinem Testforum. Das betrifft alle Elemente meines Forums, die zur Zeit einen weißen Hintergrund haben. Kannst du mir helfen, diesen weißen Hintergrund halbtransparent zu machen?

Grüße

Antworten

Beitrag melden

#8

17.01.2015 16:44

TripleM
#8 RE: Transparenter CSS

TripleM

Ich habe eine Grafik genommen die Teiltransparent ist. Ist in meinen CSS Codes zu sehen. Und eben unter Farben wurden 2 Bereiche auf Trans eingestellt. Da ich heute nicht mehr mit dem Rechner on bin kann ich morgen eben die besagten Bereiche nennen.

Antworten

Beitrag melden

#9

17.01.2015 17:22

TripleM
#9 RE: Transparenter CSS

TripleM

Also in den Farbeinstellungen habe ich das so gemacht

Dort siehst du was ich auf Trans stehen habe. Zuzüglich habe ich alle Bereiche die eben Teiltransparent sein sollen in der CSS angesprochen. Unten die letzten 3 Einträge bestimmen den HG im Blog. Falls es nicht gebraucht wird einfach weg lassen. Oder eben die Grafik Tauschen. In diesen Fall ist es eine Gebürstete Metalloptik.

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
 

 
.fdesc, .fnew, #login_wrap.box, #xActivityFeed.noimage.lastactions.forums, .box.grey.stats, #breadcrumbs, .inhalt, div.xchatBottom, .xChatInp, 
 
#usercont_bottom.container, .fposts, .fstat, .foptions, .foptions2, #foptions_link2, #foptions_link, #revision_page_link.button, .xdl,
 
#quickreply.box, .threadnp, #legend_link, #legend.box, .category_wrap, .box, .tms2, .foptions3, .sidebar, .reply, 
 
 .content.page_user, .content.page_wiki_index, .fpages, .foptions4.toggler, #liveres.box, .icontd, 
 
.reshead, .resinfo, .resmain, #allpages.pstat.pages, .crtp.deac, #forum_search, #fpages.options, .mtext, .mtextcell, .xChatInp_div, .xChatBottom,  
 
#pm_search_input {background: url("https://files.homepagemodules.de/b2001010/a_866_1f19b0bd.png") !important;}
 
#breadcrumbs {background: url("https://files.homepagemodules.de/b2001010/a_866_1f19b0bd.png") !important;}
 

 

 

#blog-sidebar {background-image: url("https://files.homepagemodules.de/b2001010/a_866_1f19b0bd.png");
    border: 1px solid #030003;
    }
 

.blog-article-body {background-image: url("https://files.homepagemodules.de/b2001010/a_866_1f19b0bd.png");
    border: 1px solid #030003;
    }
 
.blog-article {background-image: url("https://files.homepagemodules.de/b541474/a_528_4bf5de80.jpg");
    border: 1px solid #030003;
    }
 
 

Antworten

Beitrag melden

#10

17.01.2015 20:13

King Kurt ( gel�scht )
#10 RE: Transparenter CSS

Ki

King Kurt ( gel�scht )

@TripleM: Verstehe, du hast vorab eine halbtransparente Grafik eingebunden. So kann man das natürlich auch machen. Ich hätte jetzt eigentlich gedacht, dass man die Transparenz im CSS zusätzlich einstellen kann.

In meinem Fall müsste die Hintergrundfarbe der Elemente halbtransparent eingestellt werden. Im Adminbereich kann ich diesen Bereich aber nur komplett transparent einstellen oder eine bestimmte Farbe zuweisen. Ich habe mich für Weiß entschieden, entsprechend müssten alle weißen Elemente in meinem Forum halbtransparent sein, so hätte ich es gern. An sich ist das keine große Veränderung, der Farbton bleibt erhalten, nur die Transparenz wird etwas erhöht.

Hast du eine Idee, wie ich das machen kann bzw. wie ich das CSS ansprechen muss, um das hinzubekommen? Ich möchte ja keine bestimmte Grafik einbinden, nur einem vorhandenen Farbton eine globale Transparenz zuweisen. Vielleicht haben auch die Anderen einen Tipp?

Grüße

Antworten

Beitrag melden

#11

18.01.2015 09:40 (zuletzt bearbeitet: 18.01.2015 09:41)

TripleM
#11 RE: Transparenter CSS

TripleM

Ok also ich hoffe ich habe dich Richtig verstanden. Ich habe nun mal die Grafik weg genommen und dafür eine Transparente Farbe eingestellt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
#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, 
 
#usercont_bottom.container, .fposts, .fstat, .foptions, .foptions2, #foptions_link2, #foptions_link, #revision_page_link.button, .xdl,
 
#quickreply.box, .threadnp, #legend_link, #legend.box, .category_wrap, .box, .tms2, .foptions3, .sidebar, .reply, .boxheader,
 
 .content.page_user, .content.page_wiki_index, .fpages, .foptions4.toggler, #liveres.box, .icontd, 
 
.reshead, .resinfo, .resmain, #allpages.pstat.pages, .crtp.deac, #forum_search, #fpages.options, .mtext, .mtextcell, 
 
#pm_search_input {background-color: rgba(255,0,0, 0.5)  !important;}
 
 

In der letzten Zeile ist die Farbangabe bei rgba(255,0,0,0.5) und hier kannst du dir Farben anschauen.

http://www.farbenundleben.de/webdesign/w...SLa_opacity.htm

Hier nun mal zu sehen habe nun ein Heftiges Rot genommen um es besser zu zeigen:

http://ofn-testforum.xobor.de/

Die Grafik wurde nun entfernt für die Bereiche wie du am CSS Code sehen kannst

Antworten

Beitrag melden

#12

18.01.2015 10:05 (zuletzt bearbeitet: 18.01.2015 10:08)

King Kurt ( gel�scht )
#12 RE: Transparenter CSS

Ki

King Kurt ( gel�scht )

@TripleM: Danke dir, aber das funktioniert nicht. Ich habe deinen Code ins CSS eingetragen und das Rot durch Weiß ersetzt. Dieser Code hat allerdings keine Auswirkungen auf mein Forum, es ändert sich nichts.

Vielleicht sollte ich noch dazu sagen, dass ich das Gaia Template verwende.

Oder muss ich die Farben erstmal im Layoutbereich entfernen, da ist ja noch alles beim Alten.

Grüße

Antworten

Beitrag melden

#13

18.01.2015 10:14

King Kurt ( gel�scht )
#13 RE: Transparenter CSS

Ki

King Kurt ( gel�scht )

@TripleM: Ah, es funktioniert doch, ich musste nur vorher die Hintergrundfarbe der Elemente transparent machen, sonst hat dein Code nämlich keine Auswirkungen auf das Forum. Allerdings werden nicht alle Bereiche halbtransparent dargestellt. Ich habe dir einen Screenshot hochgeladen. Im Portal ist alles in Ordnung, aber im Forum müsste man die Unterforen noch irgendwie ansprechen;

Antworten

Beitrag melden

#14

18.01.2015 10:50 (zuletzt bearbeitet: 18.01.2015 11:06)

TripleM
#14 RE: Transparenter CSS

TripleM

Ok das habe ich nicht bedacht. Ich habe bei dir mal geschaut und ich denke die ID ist diese hier .c_r_cont1

Also nehme den code mal zum Probieren

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
#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, 
 
#usercont_bottom.container, .fposts, .fstat, .foptions, .foptions2, #foptions_link2, #foptions_link, #revision_page_link.button, .xdl,
 
#quickreply.box, .threadnp, #legend_link, #legend.box, .category_wrap, .box, .tms2, .foptions3, .sidebar, .reply, .boxheader,
 
 .content.page_user, .content.page_wiki_index, .fpages, .foptions4.toggler, #liveres.box, .icontd, .c_r_cont1,
 
.reshead, .resinfo, .resmain, #allpages.pstat.pages, .crtp.deac, #forum_search, #fpages.options, .mtext, .mtextcell, 
 
#pm_search_input {background-color: rgba(255,0,0, 0.5)  !important;}
 
 
 

Da ich kein Gaia zum Testen habe werden wir uns da langsam ran tasten müssen.

Da wo die Blaue Makierung ist das sollte deinen Bereich ansprechen. Werde gleich mal schauen ob ich eins meiner Testforen umstellen kann auf gaia

Also ich habe ein Gaia Testforum aber das ist dann ein ziemliches suchen um alle Elemente und id`s anzusprechen. Aber Funktionieren Tut auch das.

http://gaiaofn.xobor.de/

Bildanh�nge

screenshot-www.psychose-o

download

Antworten

Beitrag melden

#15

18.01.2015 11:09 (zuletzt bearbeitet: 18.01.2015 11:12)

King Kurt ( gel�scht )
#15 RE: Transparenter CSS

Ki

King Kurt ( gel�scht )

Hey,

das hat es gebracht, es ist fast fertig Lediglich oben die Navigation und unten die Statistiken müssen jetzt noch angesprochen werden.

Kannst du mir dabei noch behilflich sein?

P.S. Unten rechts der Schnellzugriff für den Chat fehlt auch noch