Allmystery
Menschen Wissenschaft Politik Mystery Kriminalfälle Spiritualität Verschwörungen Technologie Ufologie Natur Umfragen Unterhaltung
weitere Rubriken
PhilosophieTräumeOrteEsoterikLiteraturAstronomieHelpdeskGruppenGamingFilmeMusikClashVerbesserungenAllmysteryEnglish
Diskussions-Übersichten
BesuchtTeilgenommenAlleNeueGeschlossenLesenswertSchlüsselwörter
Schiebe oft benutzte Tabs in die Navigationsleiste (zurücksetzen).

Do it yourself: CSS für Profil und Blog

6.817 Beiträge ▪ Schlüsselwörter: Allmystery, Hilfe, Welt ▪ Abonnieren: Feed E-Mail

Do it yourself: CSS für Profil und Blog

20.07.2016 um 07:05
@du_selbst
Zunächst mal fällt auf, dass du in deinem Code html-, body- und table- Tags eingebaut hast. Die ersten beiden kannst du vergessen, denn du baust ja keine neue Webseite. Eine Tabelle kannst du natürlich einbauen, aber dann komplett. Also auch mit dem Eröffnungstag und den tr's und td's für die Spalten und Zellen usw..

Dann hast du ein Formular (form) mit einem Textfeld (textarea) angelegt. Richtig ist, dass deine Besucher darin schreiben können. Aber wozu? Du hast keine Möglichkeit, diesen Text zu speichern wie z.B. im Gästebuch und es kann auch niemand diesen Text lesen. Außer dem User selbst und auch nur bei dieser Sitzung. Und beim Neuladen deines Profils ist alles wieder weg. Macht - in meinen Augen - also keinerlei Sinn. Aber gut... ist ja dein Profil :Y:

Zunächst müsstest du dringend mal deinen Code ausmisten und aufräumen, denn du hast dort u.a. 'ne Menge body- Anweisungen, die sich überlagern oder erst gar nicht funktionieren. Beginne dazu mit

.userfunction, .header, .tabnav, .head_links, .profile_links, .profile_pic, .profile_info, .gb_post_usericon, h1, h2, .footer, .infoleiste, #show_gb_post_wrap, ul#gb_posts, #more_entries_link, .more_entries_wrap, .user_view, .footer, iframe { display: none !important; }

um abzuschalten (display:none), was du von den Allmy-Elementen nicht benötigst und arbeite dich dann Stück für Stück weiter vor. Beginne dazu also zunächst mit dem body, der .page und .main:

body { padding-top: 0px !important; color: #454749 !important; font-family: Calibri,Verdana,Arial,sans-serif !important; font-size: 25px !important; font-weight: 400; background-image: url(mypic.png) !important; background-color: #000000 !important; background-position: center top; background-attachment: fixed; background-size: cover; } .page { width: 100% !important; max-width: 100% !important; min-width: 0px !important; margin: 0px auto; padding: 0; background: transparent; line-height: 1.5; } .main { width: 100% !important; max-width: 100% !important; padding-top: 0px !important; padding-left: 0px !important; margin-right: auto !important; margin-left: auto; text-align: center; background: transparent; }

und wenn du das erledigt hast, kannst du deine eigenen Container (div's) einbauen und frei gestalten bzw. formatieren.


melden

Do it yourself: CSS für Profil und Blog

20.07.2016 um 17:07
@du_selbst

vermutlich check ich nicht, was du vor hast :ask: aber ansonsten reicht:

<style> body { overflow:hidden; } :active, :focus { outline:0!important; outline:none!important; border:0!important; -moz-outline-style:none!important; } #ghost { position:fixed; z-index:40001; background:#000; top:0; left:0; right:0; bottom:0; padding:50px; } .ghost { resize:none; background:#000; width:100%; height:100%; border:0; padding:0; color:silver; font-size:2em; } </style> <textarea class="ghost">ghost...</textarea>


melden

Do it yourself: CSS für Profil und Blog

20.07.2016 um 17:14
@tAnEa
@YaaCool

Danke erstmal an euch beide, ich guck mal was ich hinkriege.


Als Erklärung: Ich arbeite mit schwarzen Spiegeln die ich beschrifte, und da ist es halt naheliegend, den Monitor ebenso als solchen zu gebrauchen. Ich kann zwar darauf nichts speichern dafür ist diese Form das schnellste was ich so kenne und für meinen Oldtimer PC eignet sich das Teil ausgezeichnet.

Ich hab erstmal dieses Teil einfach auf meinem PC gespeichert. Aber möchte es halt irgendwo auch im Netz hinterlegt haben.

Und so weiter.

Also wichtig ist bei der Sache nur das es komplett schwarz wird und man darauf komponieren ( schreiben ) kann. Ich mach mich mal an die Arbeit. Danke im vorraus.


melden

Do it yourself: CSS für Profil und Blog

20.07.2016 um 17:17
@du_selbst

yep, dafür sollte mein Codefetzen reichen :D


melden

Do it yourself: CSS für Profil und Blog

20.07.2016 um 17:19
Hey wow das ist ja spitze! Wenn alles immer so leicht und einfach wäre lach!

Grosses Dankeschön @tAnEa


melden

Do it yourself: CSS für Profil und Blog

20.07.2016 um 17:23
Wikipedia: KISS-Prinzip :Y:


melden

Do it yourself: CSS für Profil und Blog

20.07.2016 um 17:26
Ja vielen dank :D @tAnEa


Wenn du wüsstest wie lange ich geübt habe und es trotzdem nicht besser hinbekommen habe lololol


melden

Do it yourself: CSS für Profil und Blog

20.07.2016 um 17:27
@tAnEa
Mit dem KISS-Prinzip ist aber der Müllberg im Code noch nicht weggeschafft und der kann dann zum Problem werden ;)


melden

Do it yourself: CSS für Profil und Blog

20.07.2016 um 17:30
Der Müllberg wurde soeben durch ein Gespenst ersetzt :) @S_C


melden

Do it yourself: CSS für Profil und Blog

20.07.2016 um 18:42
Irrsinn! @tAnEa


Ich hab mich jetzt mit deinem ultra kiss Code an meinen Blog gewagt, kriege aber den dreh nicht mehr so recht hin. Darf ich nochmal um Rat fragen?


Das ganze ist immer noch eine Bastelei, aber es hat sich schon sehr gebessert:


Hier ist der damalige Code:

<style> #show {position: absolute; top: 10px; left: -10%; right: 33%; bottom: -0px; visibility: visible;background-color:#transparent; overflow-y: visible; overflow-x: visible; font-size:25px; } iframe {display:none;} body { position:fixed; margin left:0%; padding-top:-10%; background-color:#transparent; color:#ffffff; font-size:50px; font-family:none;Calibri,Verdana,Arial,sans-serif; text-align:justify; text-decoration:none; background-image:url('')!important; background-size:100% 100%; background-color:#transparent; background-size:100% 100%; background-repeat:no-repeat; background-attachment:fixed; background-position:right bottom; top: -10%; width:100%; height:100%; font-size: 50px; } div.tabnav, div.userfunction, div.head_links, div.profile_links, div.profile_info, div.user_view, h2, div.footer, div.infoleiste {display:none!important;} .main {margin-top: 1px; visibility: hidden;} .blog-entry {visibility:hidden;} div#blog-entries {visibility:hidden;} em {display:none;} style, a.voteup, .header {display:none;} body, a { margin left:10%; padding-top:10px; background-color:#000000; color:#666666; font-size:25px; font-family:none;Calibri,Verdana,Arial,sans-serif; text-align:justify; text-decoration:none; } tr, th, td {font-size:20px; font-family:none;Calibri,Verdana,Arial,sans-serif; text-align:justify; text-decoration:none; } body { background-image:url('')!important; background-size:100% 100%; background-color:#000000; background-size:100% 100%; background-repeat:no-repeat; background-attachment:fixed; background-position:right bottom; } div, threads, td, tr, tbody {background-color:transparent;} .blog-entry, .blog-entries {background-color:#transparent;border:none;color:#999209;font-family:none;font-size:25px;color:#999209;text-align:justify;} h1 {font-size: 45px;} #green {background-color:#green;color:#000000;} #blue {background-color:#blue;color:#000000;} small a {visibility:visible;display:visible!important:} </style> <--html, body height 100%--> <style> html { overflow: hidden!important; } small a {position: fixed; visibility:visible!important;display:block;} </style> <style> img:hover { border-color: transparent !important; transform:scale(1.3) !important; -ms-transform:scale(1.3) !important; -moz-transform:scale(1.3) !important; -webkit-transform:scale(1.3) !important; -o-transform:scale(1.3) !important; transition: all 1s ease !important; -webkit-transition: all 1s ease !important; -moz-transition: all 1s ease !important; -o-transition: all 1s ease !important; -ms-transition: all 1s ease !important; } H1 { position: relative; -webkit-animation-name: bounce; -webkit-animation-duration: 0.4s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -moz-animation-name: bounce; -moz-animation-duration: 0.4s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; } @-webkit-keyframes bounce { 0% { opacity: 1; -webkit-transform: scale(0.997); } 100% { opacity: 1; -webkit-transform: scale(1.0); } } @-moz-keyframes bounce { 0% { opacity: 1; -moz-transform: scale(0.997); } 100% { opacity: 1; -moz-transform: scale(1.0); } } @keyframes bounce { 0% { opacity: 1; transform: scale(0.997); } 100% { opacity: 1; transform: scale(1.0); } } body { position:relative; left: 0%; -moz-transform: scaleY(1) scaleX(-1); -webkit-transform: scaleY(1) scaleX(-1); -o-transform: scaleY(1) scaleX(-1); -ms-transform: scaleY(1) scaleX(-1); transform: scaleY(1) scaleX(-1); clear: both; height: 100%; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 100%; } #show:hover { -moz-transition: all 2s ease; -moz-transform: rotate(0deg) scaleY(1) scaleX(-1) scaleZ(1) skew(0deg) translate(15px); -webkit-transition: all 2s ease-in-out; -webkit-transform: rotate(0deg) scaleY(1) scaleX(-1) scaleZ(1) skew(0deg) translate(15px); -o-transition: all 2s ease-in-out; -o-transform: scale(1, -1) rotate(0deg) skew(0deg) translate(15px); -ms-transition: all 2s ease-in-out; -ms-transform: scale(1, -1) rotate(0deg) skew(0deg) translate(15px); transition: all 2s ease-in-out; transform: rotate(0deg) scaleY(1) scaleX(-1) scaleZ(1) skew(0deg) translate(15px); } </style> <iframe width="0" height="0" src="http://spiegelschriften.wordpress.com/2014/03/07/geister-im-spiegel-beschworen/" frameborder="0"></iframe>


Und hier ist der jetztige Code:


<style> body { overflow:hidden; } :active, :focus { outline:0!important; outline:none!important; border:0!important; -moz-outline-style:none!important; } #show { position:fixed; z-index:40001; background:#000; top:0; left:0; right:0; bottom:0; padding:50px; } .show { resize:none; background:#000; width:100%; height:100%; border:0; padding:0; color:grey; font-size:25px; font-weight:bold; font-family:none!important; text-align:justify; } </style> <style> img:hover { border-color: transparent !important; transform:scale(1.3) !important; -ms-transform:scale(1.3) !important; -moz-transform:scale(1.3) !important; -webkit-transform:scale(1.3) !important; -o-transform:scale(1.3) !important; transition: all 1s ease !important; -webkit-transition: all 1s ease !important; -moz-transition: all 1s ease !important; -o-transition: all 1s ease !important; -ms-transition: all 1s ease !important; } H1 { position: relative; -webkit-animation-name: bounce; -webkit-animation-duration: 0.4s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -moz-animation-name: bounce; -moz-animation-duration: 0.4s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; } @-webkit-keyframes bounce { 0% { opacity: 1; -webkit-transform: scale(0.997); } 100% { opacity: 1; -webkit-transform: scale(1.0); } } @-moz-keyframes bounce { 0% { opacity: 1; -moz-transform: scale(0.997); } 100% { opacity: 1; -moz-transform: scale(1.0); } } @keyframes bounce { 0% { opacity: 1; transform: scale(0.997); } 100% { opacity: 1; transform: scale(1.0); } } body { position:relative; left: 0%; -moz-transform: scaleY(1) scaleX(-1); -webkit-transform: scaleY(1) scaleX(-1); -o-transform: scaleY(1) scaleX(-1); -ms-transform: scaleY(1) scaleX(-1); transform: scaleY(1) scaleX(-1); clear: both; height: 100%; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 100%; } #show:hover { -moz-transition: all 2s ease; -moz-transform: rotate(0deg) scaleY(1) scaleX(-1) scaleZ(1) skew(0deg) translate(15px); -webkit-transition: all 2s ease-in-out; -webkit-transform: rotate(0deg) scaleY(1) scaleX(-1) scaleZ(1) skew(0deg) translate(15px); -o-transition: all 2s ease-in-out; -o-transform: scale(1, -1) rotate(0deg) skew(0deg) translate(15px); -ms-transition: all 2s ease-in-out; -ms-transform: scale(1, -1) rotate(0deg) skew(0deg) translate(15px); transition: all 2s ease-in-out; transform: rotate(0deg) scaleY(1) scaleX(-1) scaleZ(1) skew(0deg) translate(15px); } </style> <style> div.tabnav, div.userfunction, div.head_links, div.profile_links, div.profile_info, div.user_view, h2, div.footer, div.infoleiste {display:none!important;} em {display:none;} style, a.voteup, .header {display:none;} h1, tr, th, td {font-size:20px; font-family:none!important; text-align:justify; text-decoration:none; } </style>

Hier ist das was ich bereits rausgeschnippselt habe:

.main {margin-top: 1px; visibility: hidden;} .blog-entry {visibility:hidden;} div#blog-entries {visibility:hidden;} body, a { margin left:10%; padding-top:10px; background-color:#000000; color:#666666; font-size:25px; font-family:none;Calibri,Verdana,Arial,sans-serif; text-align:justify; text-decoration:none; } body { background-image:url('')!important; background-size:100% 100%; background-color:#000000; background-size:100% 100%; background-repeat:no-repeat; background-attachment:fixed; background-position:right bottom; } div, threads, td, tr, tbody {background-color:transparent;} .blog-entry, .blog-entries {background-color:#transparent;border:none;color:#999209;font-family:none;font-size:25px;color:#999209;text-align:justify;} h1 {font-size: 45px;} #green {background-color:#green;color:#000000;} #blue {background-color:#blue;color:#000000;} small a {visibility:visible;display:visible!important:} </style> <--html, body height 100%--> <style> small a {position: fixed; visibility:visible!important;display:block;} </style> iframe {display:none;} body { position:fixed; margin left:0%; padding-top:-10%; background-color:#transparent; color:#ffffff; font-size:50px; font-family:none;Calibri,Verdana,Arial,sans-serif; text-align:justify; text-decoration:none; background-image:url('')!important; background-size:100% 100%; background-color:#transparent; background-size:100% 100%; background-repeat:no-repeat; background-attachment:fixed; background-position:right bottom; top: -10%; width:100%; height:100%; font-size: 50px; }

Aber da war wohl was zuviel mit dabei, wenn sich das Teil dreht sollte der Hintergrund natürlich komplett schwarz sein.


Bevor ich jetzt wieder jedes Element einzeln verstecke frage ich daher lieber erst nochmal in die Runde ob es wohl möglich ist alles auf einmal auszublenden?

Und so sollte das Ganze am Ende ungefähr aussehen:

https://www.allmystery.de/blogs/du_selbst/nothingland

Wenn möglich natürlich zentriert. ;-)


melden

Do it yourself: CSS für Profil und Blog

20.07.2016 um 19:30
@du_selbst

jo, ich guck mir jez den Code nicht so genau an ;)

probier erstma das:

im ersten <style>blabla</style> wieder alle show mit ghost ersetzen und dem .ghost das hinzufügen: -moz-transform: scaleY(1) scaleX(-1); -webkit-transform: scaleY(1) scaleX(-1); -o-transform: scaleY(1) scaleX(-1); -ms-transform: scaleY(1) scaleX(-1); transform: scaleY(1) scaleX(-1); im zweiten <style>blabla</style> das body{blabla} entfernen und dann in deinem HTML-Code die beiden ghost-Rahmen drumherum platzieren: * dein Kram * blabla * dein Kram *

mal sehen, wie das dann aussieht :D


melden

Do it yourself: CSS für Profil und Blog

20.07.2016 um 20:44
@tAnEa
Scheint zu klappen!
Du Genie du!

Whupsala!

Hab den dritten style auch gleich geschmissen :) schick und schlank - danke dir! jetzt muss ich nur nochmal über jede einzelne seite lach und den html code ändern aber easy, ghost rockt!


melden

Do it yourself: CSS für Profil und Blog

21.07.2016 um 02:47
@gamerwolf

Rot
Gelb
Grün


melden

Do it yourself: CSS für Profil und Blog

21.07.2016 um 02:52
@S_C


Grün ok


melden

Do it yourself: CSS für Profil und Blog

21.07.2016 um 02:55
@gamerwolf
Alles klar, viel Spaß :Y:


melden

Do it yourself: CSS für Profil und Blog

21.07.2016 um 03:00
@S_C

danke


melden

Do it yourself: CSS für Profil und Blog

01.08.2016 um 00:16
Für die SchmetterlingsliebhaberInnen unter euch, habe ich einen per CSS animierten Schmetterling speziell für Allmy Profile oder Blogs gefrickelt:

taef238 butterflyOriginal anzeigen (0,3 MB)

Infos + Details + Links zu Live-Demos (<- NEU!) findet ihr im Thread Code- und Designerecke für Allmy Profile und Blogs.


melden

Do it yourself: CSS für Profil und Blog

02.08.2016 um 16:11
@S_C

Genial! So was habe ich erst vor Kurzem gesucht. Danke Dir.


melden

Do it yourself: CSS für Profil und Blog

07.08.2016 um 19:42
@S_C

Erstmal danke für die ganzen einsichten! Top. Ich hätte ne kleine Frage weis nicht ob es schonmal jemand geposted hat, ist es möglich die Allmy Soundbar auszublenden und trotzdem Hindergrundmusik zu bekommen?


melden

Do it yourself: CSS für Profil und Blog

08.08.2016 um 22:11
@S_C

Hat sich erledigt ;)


melden