Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag27.06.2007 um 20:37 (UTC)    
Titel: [Tutorial] Der Introbutton

Viele finden den Introbutton nicht schön und möchten diesen durch ein eigenes Bild ersetzten.Ich erkläre euch wie.
Wichtig vorher folgendes machen.

Hier den Punkt

auf

stellen und editieren.


Nun aktivieren wir das Intro.
Dann haben wir folgende Fenster:


Nun fügen wir bei Text vor dem Introbutton folgendes ein:
Zitat:
<style type="text/css">
<!--
input {visibility: hidden;}
-->
</style>

<div align="center">
<a href="URL zu Deiner Startseite" target="_self"><img border="0" src="URL zu dem Bild"></a>
</div>


zur Erklärung.Das blaue lässt euren Button verschwinden.Das rote ist die URL auf die das Bild linken soll.Und das grüne ist die URL des Buttons.


Viel Spaß damit
Chris

Die Buttons sind von coolplace
______________
[img:5bd8876af8]http://img.webme.com/pic/c/chris-schreiber/banner.gif[/img:5bd8876af8]
[img:5bd8876af8]http://img.webme.com/pic/g/geldleicht-test/mp_banner.jpg[/img:5bd8876af8]
Beitrag27.06.2007 um 20:47 (UTC)    
Titel:

WICHTIG:
Vom Intro aus, darfst du nicht nur auf eine andere Seit verlinken. Man muss von der Introseite des HPBK auf deine HPBK-Seite gelangen und auf keine andere.
----------------------------------------
ich ergänze mal mit einem anderen tutorial
eines, um den submit button zu ändern, es hat ja ungefähr das gleiche thema, nur eben nicht für das intro
ich wollte nicht für jede kleinigkeit, die nur ein bisschen anders ist, einen neuen thread aufmachen


Leider geht es nicht beim Intro, da bisher dort der Submit-Button keiner Klasse zugewiesen wurde.
Wenn mich dabei jemand verbessern kann, soll er/sie dies gerne tun.
Wenn du aber den button im Intro verändern möchtest, siehe da bitte den oberen Post.

Wie verändere ich die Grafik eines Submit-Buttons - Methode 1
Diese Methode lässt viele verschiedene Buttons zu. Verwende diese aber nur, wenn du häufig andere Buttons verwenden willst, also nicht immer dem selben, auch wenn er ein neuer ist.
Wenn also jeder Submit-button von dir anders aussehen soll. Wenn du immer den gleichen Benutzen willst, verwende bitte die untere Methode (Methode 2).

- Einloggen
- Eigenes Seiten editieren
- editiere oder erstelle eine Seite, wo du deinen Submit-Button haben möchtest
- füge als Code für den Submit-Button, den du verwenden möchtest, folgenden Code ein:
Zitat:
<input type="submit" value="Text" style="background-image:url(Buttonbild-Adresse);width:66px;height33px;border:0px;" />

Was muss ich am code verändern?
Buttonbild-Adresse
Dies müsst ihr durch die Adresse zu dem Bild ersetzen, welche euer Submit-Button darstellen soll.
Beispiel: http://www.boema-interactive.de/go.PNG

66
Dies ist die Breite des Buttons.
Verändert diese immer genau in die Breite, die euer gewolltes Button-Bild hat.

33
Dies ist die Höhe des Buttons.
Verändert diese immer genau in die Höhe, die euer gewolltes Button-Bild hat.

- Seite abspeichern und fertig ist es.


Wie verändere ich die Grafik eines Submit-Buttons - Methode 2
Diese Methode legt einen neuen Standart fest. Hiermit legt ihr ein neues Bild fest und verwndet dies wahrscheinlich immer wieder.
Natürlich könnte man mehrere von diesen Codes benutzen, um verschiedene buttons darzustellen, jedoch solltet ihr, wenn ihr immer einen anderen Button verwenden wollt, oder dies zumindest oft vorhabt, die obere Methode (Methode 1) benutzen.
Nützlich ist es, wenn du immer den gleichen verwendest und diesen dann plötzlich ändern möchtest. Wenn du also nicht immer jeden code einzelnd verändern willst, sondern nur einen, um alle zu verändern, versuche es mit dieser Methode.

Schritt 1: Konfiguration
- Einloggen
- Einstellungen
- Ganz unten "Erweiterte Designeinstellungen anzeigen?" auf "Ja" stellen

- Einstellungen editieren (= Speichern)


Schritt 2: Code einfügen
- Zurück zum Start
- Design einstellen
- Den gleich folgenden code bearbeiten und bei "Text über dem Design" einfügen:
Zitat:
<style type="text/css">
<!--
input.button{
background-image:url(Buttonbild-Adresse);
width:66px;
height:33px;
border: 0px;
}[/color]
-->
</style>

Was muss ich an diesem code verändern?
Buttonbild-Adresse
Dies müsst ihr durch die Adresse zu dem Bild ersetzen, welche euer Submit-Button darstellen soll.
Beispiel: http://www.boema-interactive.de/go.PNG

66
Dies ist die Breite des Buttons.
Verändert diese immer genau in die Breite, die euer gewolltes Button-Bild hat.

33
Dies ist die Höhe des Buttons.
Verändert diese immer genau in die Höhe, die euer gewolltes Button-Bild hat.

Jetzt das ganze nurnoch abspeichern und wir kommen zun letzten Schritt...


Schritt 3: Button verändern
Wenn ihr euren Submit-Button einfügt, müsst ihr nicht mehr viel machen.
Im Code des Submit-buttons muss lediglich etwas weiteres hinzugefügt werden. Wenn ihr also den neuen button, den ihr ausgewählt habt, nutzen wollt
Zitat:
<input type="submit" class="button" value="Text" />

Hier ist nur das rot markierte wichtig, dies sollte immer drin sein, wenn du den Button auf diese Methode verändert haben möchtest.
Alle anderen Parameter kannst du nach belieben ändern.
Was muss ich am code verändern?
Text
Diesen Text müsst ihr dementsprechend anpassen. Ersetzt ihndurch die Beschriftung des Buttons, die ihr haben wollt.
Wenn doch euer neuer Button den Text schon mit auf der Grafik hat, lasse ihn frei, schreibe also
value=""
______________
Mit freundlichen Grüßen,


Zuletzt bearbeitet von ryuuzaki am 27.06.2007, 22:21, insgesamt 2-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de