Forum - Benutzertitel

Hallo Wolfgang und liebe User.

Ich habe mir seit Tagen den Kopf zerbrochen, wie ich es einfach gestalte, es gut aussieht und eine Alert-Nachricht dazu bekommt. Ich habe mich ran gesetzt und getüftelt. Ich bin mit dem Ganzen, wie ihr mitbekommen habt noch blutiger Anfänger.

Ich habe mir ein Button erstellt, den man benennen kann, wie man möchte. Auch eine Alert-Nachricht kann man eingeben, nur nicht zu lange Nachrichten. Da hapert es schon bei mir, da weiß ich nicht weiter.

Ich finde es meiner Meinung nach schön und schlicht, ich dachte mir das hat ja nicht jeder, mit den Button. Ich weiß, Geschmäcker sind verschieden.

Ich stelle mal den Code hier rein. Ich hoffe das ich soweit keine Fehler drin habe.Für Hilfe und Erklärungen bin ich sehr gerne bereit, weil mich das alles sehr interessiert. Wenn der Code fehlerfrei ist und den jemand für sich benutzen möchte, darf es gerne tun.

   <button type="button" onclick="alert('Admin von seinem Forum oder anderen Text !')"> Co-Admin! </button>
 

   <center><p><div style="background-color:#4d4d4d;padding:2px;padding-left:2px;border:2px solid #f0efee;color:#4d4d4d;border-radius:12px; width:30%;overflow:auto"><span style="color:#ffffff;">Co Admin</p></center><div class="Mitglieder">
 

Finde ich sehr gut und sicherlich auch interessant wenn es eingebaut wird bei mir, wenn das funktioniert

Dankeschön Wolfgang für die Erklärung. Da habe ich zu viel mit den padding drin und zu viele p 2 x nicht geschlossen. Hinten mit dem div class = Mitglieder wollte ich nur testen, ob man das als Gast nicht sieht, nur als angemeldetes Mitglied.

Ich teste da ja noch damit rum.

Ich habe ja angegeben, ohne weitere Funktion. Ich weiß, ich wollte eine Idee umsetzen, aber irgendwie bekomme ich das nicht hin. Ideen hat man genug, nur das Umsetzen ist sehr schwer, wenn man sich mit der Materie nicht auskennt.
Ich bedanke mich sehr für die Hilfe und die Erklärungen, vielen lieben Dank.

Jetzt noch eine Frage.
Wenn ich den hinteren Code, mit der class "Mitglieder" einsetzen möchte, wie müsste der Code geändert werden? Da die Codes anders aussehen, wie die Codes mit vielen Klammern und es gibt ja verschiedene ID Codes. Wie diese richtig ausgesprochen werden weiß ich nicht. Ich hoffe, du verstehst, was ich meine. Oder muss man da noch ein CSS-Code dazu schreiben?

Hier habe ich ein Update zum Benutzertitel.

Ich habe mir seit Tagen den Kopf zerbrochen, wie ich es einfach gestalte, es gut aussieht und eine Alert-Nachricht dazu bekommt.
Ich denke, Wolfgang wird das noch nachschauen. Wenn es wer möchte, kann er es gerne für sich nehmen, solange sich keine Fehler eingeschlichen hat.

Wer den Button in der Größe anpassen möchte muss es in der CSS tun, in Zeile 15 und 16. Zeile 15 mit "width: 70px" bestimmt die Breite und Zeile 16 mit "height: 30px" die Höhe. Ich habe es nach meinem Wünschen angepasst, ist nur ein Tipp. Falls es jemand ändern möchte, kleiner haben möchte oder größer.

Hier der CSS Code:

 /* ab hier Beginnt der Admin Button mit neuem Design */
 
.glow-on-hover {
width: 70px;
height: 30px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, 
#ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #4d4d4d
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
@keyframes glowing {
0% { 
background-position: 0 0; 
}
50% { 
background-position: 400% 0; 
}
100% { 
background-position: 0 0; 
}
}
 
/* Ab hier endet der Admin Button mit neuem Design */ 
 

<button class="glow-on-hover" type="button" onclick="alert('Co-Admin von die-verstrahlten-vier !')">Co-Admin! </button>  
 

Bild 1 - So sieht es normal aus

Mit der Maus beim Drüberfahren (Hover-Effekt)

Hier das Ergebnis beim Draufklicken und die Nachricht ist dieselbe

Hallo, ich habe auch hier wieder etwas Neues geschrieben. Heute sitze ich seit heute morgen 11 Uhr daran bis jetzt, mit vielen Pausen, Einkaufen und so und wichtige Sachen erledigen. Nun ja, bin damit jetzt erst fertig geworden.

Ich habe es auch mit CSS geschrieben. Manche können mich für verrückt halten oder denken, hat er keine Zeit für etwas anderes?

Ich habe einfach meine Gedanken freien Lauf gelassen und meine Inspirationen einfach springen lassen.

Ich weiß, Geschmäcker sind verschieden.

Na ja, es ist für mich dezent gestaltet und schlicht, ich mag halt sehr das Leuchten.

Hier seht ihr es mal als Bild:

1
 

  <center><div class="admin_body"><div class="admin_title">Administrator!</div></div></center>  
 

Schließen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 

.admin_body {
width: 105px; 
height:auto; 
border-radius: 20px; 
border: solid 1px #FFFFFF; 
box-shadow:#D6D7EB 0px 0px 10px; 
text-shadow: 0px 0px 16px #000000; 
background-image: url('https://img.homepagemodules.de/bh/files/big/e7ct-9.jpg');
}
.admin_title {
font-family: Pristina; 
font-size:15px; 
text-shadow:0px 0px 20px #000000; 
color:#FFFFFF;
}
  
 

Schließen