Entwicklungsthread: Externe Allianzseite

    • Spiel

    • Entwicklungsthread: Externe Allianzseite

      Montor's Guide zu externen Allianzseiten




      Da ich die Menge an Informationen über die Gestaltung der externen Allianzseite im Allianz-Guide sehr gering finde, wollte ich hier mal kurz alles Wissenswerte zusammenfassen.




      Allgemein über die Externe:

      Wer den Allianzenguide gelesen hat, sollte bereits wissen, dass hier mit HTML und BBcode gearbeitet werden kann.
      Beide "Sprachen" müssen folgendes Schema einhalten:

      Source Code

      1. <Anfang mit Funktion> Text/Bild </Ende>




      Spezielles:



      1. Der Hintergrund:


      Es gibt zwei Möglichkeiten:
      • Farbe als Hintergrund
      • Bild als Hintergrund
      Die Farbe stellt ihr wie folgt ein:

      Source Code

      1. <div style="background-color:#000000;"> Text/Bilder </div>



      Text/Bilder steht hier für die Objekte oder den Text, der sich auf eurer externen Seite befinden soll.
      Die sechs Nullen stellen in diesem Beispiel die Farbe Schwarz dar.
      Weite Farbcodes findet ihr HIER


      ______________________________________________________________________________


      Das Bild als Hintergrund wird nun etwas komplizierter:


      Source Code

      1. <div style="background-image:url(Link zum Bild);"> Text/Bilder </div>


      Folgendes muss jetzt beachtet werden:
      Wollt ihr ein Muster als Hintergrundbild, so reicht es, die URL des gewünschten Bildes in den code einzufügen.
      Wollt ihr jedoch ein ganz bestimmtes (vielleicht selbst gemachtes Bild) als Hintergrund, so müsst ihr dieses
      erst zuschneiden.
      Wenn ihr das nicht könnt, bittet doch einfach jemanden aus der Grafik-Abteilung.
      Für die aber, die sich damit auskennen: Das Bild muss 650px breit sein.



      Achtung: Falls euer Hintergrundbild keinen Text enthält & nur als Muster gedacht ist solltet ihr den folgenden Schritt NICHT ausführen:

      Falls ihr nun das Problem habt, dass euer Hintergrundbild sich nicht über die ganze Seite erstreckt, so müsst ihr
      nach dem code den tag <p> einfügen.
      Dieser macht nichts weiter als euer Hintergrundbild um eine Zeile länger.
      Fügt diesen tag nun einfach so oft ein, wie ihr ihn braucht.






      2. Ein Bild einfügen

      Source Code

      1. <img src="Bild-URL">


      Das wäre nun über Bilder beinahe alles. :P


      Für Diejenigen unter euch, die es genauer machen wollen:
      Display Spoiler

      Im img-tag können weitere Eigenschaften des Bildes eingestellt werden.
      Die für uns interessanten sind:
      • width (Breite)
      • height (Höhe)
      • border (Rahmen)
      Sie sind wie folgt einzufügen:


      Source Code

      1. <img src="Bild-URL" width="650" height="1000" border="0" >


      Die Werte werden hier in pixeln angegeben.
      Die Eigenschaft border beschreibt die Breite des Rahmens um das Bild.
      Hier gilt:

      0 = Kein Rahmen
      1 = dünner Rahmen
      5 = sehr dicker Rahmen




      3. Die Schrift

      Die Schrift ist bei den meißten Externen mitunter das Wichtigste.

      Sie kann auf drei Weisen bearbeitet werden:
      • Größe
      • Schriftfarbe (Codes HIER)
      • Schriftart
      Größe Code:

      Source Code

      1. <font size="7">Ziemlich riesiger Text</font>
      2. <font size="1">Ziemlich winziger Text</font>



      Schriftfarbe Code:

      Source Code

      1. <font color="#FF0000">Knallroter Text</font>



      Schriftart Code:

      Source Code

      1. <font face="Avalon,Wide Latin">Das ist Text in Schriftart Avalon, oder, falls Avalon nicht darstellbar, in Wide Latin</font>





      4. Einen Button einfügen


      Um einen button im Ikariam-Stil einzufügen müsst ihr folgenden Code verwenden:

      Source Code

      1. <a class="button" href="Ziel-URL">Das steht auf dem Button</a>





      Über Bewertungen würde ich mich sehr freuen :)
      Ob das hier das richtige Forum ist weiß ich allerdings nicht - falls notwendig, bitte verschieben :)

      mfG Montor
      :verschoben: durch lagu aus dem Allgemeinen Bereich


      Stand:29.09.2015 - Version 0.6.10
      History:

    • Für einen Mod: der Code hier:

      Source Code

      1. <div style=&quot;background-image:url(Link zum Bild);&quot;> Text/Bilder </div>


      ist aus irgendeinem Grund kaputt gegangen. Da wurden die " in &quot; umgewandelt. Sollte man rückgängig machen, bevor noch jemand ohne Kenntnisse verwirrt ist ;)

      Source Code

      1. <div style="background-image:url(Link zum Bild);"> Text/Bilder </div>


      Ansonsten finde ich das ganze super, allerdings könnte man noch den Allianzguide verlinken, wenn man ihn schon nennt.
    • Tobbe wrote:

      Für einen Mod: der Code hier:

      Source Code

      1. Text/Bilder


      ist aus irgendeinem Grund kaputt gegangen. Da wurden die " in " umgewandelt. Sollte man rückgängig machen, bevor noch jemand ohne Kenntnisse verwirrt ist ;)

      Source Code

      1. Text/Bilder


      Ansonsten finde ich das ganze super, allerdings könnte man noch den Allianzguide verlinken, wenn man ihn schon nennt.

      Soweit ich weiß sollte der editor für die externe allianzseite die

      Source Code

      1. &quot


      in doppelte anführungszeichen umwandeln.

      Siehe HIER!


      Wo ich dir allerdings recht gebe ist dass ich den guide verlinken hätte sollen.

      Falls ein moderator hier mal drüber liest bitte ausbessern :)

      edit von Dawn Hearts: Drübergelesen und den Link eingefügt
    • Bis hierher als Guide veröffentlicht: Guide: Externe Allianzseite
      Die bereits bestehenden Entwicklungsthreads zum Thema Externe Allianzseite durchsucht und neue Informationen mit in den Guide eingefügt.

      edit: ausserdem den Startpost der Übersichtlichkeit halber angepasst und Schriftgrösse und Formatierung runtergeregelt im Guide
    • Danke vielmals :)

      falls neue informationen, die wichtig sein könnten hinzukommen, werde ich dich vermutlich kontaktieren und bitten den thread erneut zu überarbeiten :)
    • alles beisammen?

      Hallo Montor,

      ich habe das alles mit großen Interesse gelesen was du zu diesen Thema verfasst hast und ich habe eine Menge Material zusammengesammelt, um daraus evtl eine externe Seite gestalten zu können. Ich gebe die Hoffnung nicht auf, das dieses Material auch genügt, denn die Hoffnung stirbt bekanntlich zuletzt, würde mich aber freuen wenn ich weiß, das ich auf dem richtigen Weg bin.

      Danke falkenflug :3affen:
    • Bild als Hintergrund

      Hallo, das Bild als Hintergrund bekomme ich hin, aber irgendwie schaffe ich es nicht zu beschreiben. ich habe alles mögliche versucht aber nichts funktioniert. Gibt es vielleicht noch einen anderen Code was ich versuchen könnte?
    • Hatte diesen Code genommen: <div style="background-image:url<a href="http://www.directupload.net" target="_blank"><img src="http://s7.directupload.net/images/131211/sjfqlbex.jpg" title="Kostenlos Bilder und Fotos hochladen"><font color="#FF0000"><font size="4"><b><i>;"> mein text </div><font color="#FF0000"><font size="4"><b><i>
    • Probier mal folgendes:

      Source Code

      1. <div style="background-image: url(http://i55.servimg.com/u/f55/13/05/66/04/backgr10.jpg); color: #FF0000; font-size: 14pt; font-weight: bold; text-decoration: underline; height: 528px; width: 660px; background-repeat: no-repeat;">TEXT</div>

      Dabei musst du TEXT durch deinen Text ersetzen. Ich habe das Bild neu hochgeladen, da es zu breit für die externe Allianzseite war.
    • Verfeinerten Buttoncode eingefügt:

      Source Code

      1. <a style="background:#eccf8e url(buttonbild) repeat-x scroll 0 0;border-color:#C9A584 #5D4C2F #5D4C2F #C9A584;border-style:double;border-width:3px;color:#542C0F;font-size:12px;font-weight:bold;margin:0px auto;padding:2px 10px;text-align:center;white-space:nowrap;width:auto;" href="buttonlink"</a>
    • Montor wrote:

      4. Einen Button einfügen

      Um einen button im Ikariam-Stil einzufügen müsst ihr folgenden Code verwenden:


      Quellcode
      1
      Das steht auf dem Button
      Hey,
      super gemacht:)
      Ich muss mich in Acht nehmen, nicht zuviel davon auf meine Externe zu ballern ;D

      Hätte aber mal eine Frage:
      Wie muss ich den Link verändert, damit der Link auf dem Button in einem neuen Tab geöffnet wird & nicht die aktuelle Seite neu läd?

      mfg
      TT
    • TakeThiis wrote:

      Hätte aber mal eine Frage:
      Wie muss ich den Link verändert, damit der Link auf dem Button in einem neuen Tab geöffnet wird & nicht die aktuelle Seite neu läd?
      So viel ich weiß, geht das nicht. Du kannst die Verlinkung allerdings in einem neuen Fenster öffnen mit dem href-Tag

      Source Code

      1. target="_blank"


      Eigentlich ist es ein Unding, dass man auf der Externen mit HTML rummachen muss.
      Gibt so schöne einfache Editoren.
      Wir schätzen die Menschen, die frisch und offen ihre Meinung sagen. Vorausgesetzt, sie meinen dasselbe wie wir.
      (Mark Twain)
    • tabstop wrote:

      TakeThiis wrote:

      Hätte aber mal eine Frage:
      Wie muss ich den Link verändert, damit der Link auf dem Button in einem neuen Tab geöffnet wird & nicht die aktuelle Seite neu läd?
      So viel ich weiß, geht das nicht. Du kannst die Verlinkung allerdings in einem neuen Fenster öffnen mit dem href-Tag

      Source Code

      1. target="_blank"
      target="_blank" wird nach aktuellem Stand vom Parser nicht unterstützt. Dawn_Hearts Aussage ist also korrekt.