Mockup umsetzen mit Wordpress

    Hallo,

    da ich leider kein Theme finde was meinem Portfolio-Mockup (siehe Anhang) entspricht frage ich hier nach wie und ob man überhaupt in Wordpress sowas realiseren kann.:x

    Die Fotos sollen also immer horizontal nach rechts angeordnet sein und mit einem normalen scrollbalken anschaubar sein.

    Jedes Foto ist in seiner Höhe fest!
    Wichtig daran ist die variable Fenstergröße. Es darf also ruhig alles verschoben werden, nur die höhe der Fotos (und Breite) darf nicht beeinflusst werden.

    Eigentlich zu simple, aber ich hab keine Ahnung wo ich ansetzen könnte.

    Als i-Tüpfelchen würde ich gerne eine "Image-Caption" haben die mir die Bilder beschriftet (zum Beispiel links unten in einer kleinen grauen box) IM BILD. Also die Box im Bild wie ein Logo, nur das der Text von Wordpress etc. eingefügt wird und der Text auch kopierbar ist.
    Sowas in der Art halt ;)

    Kann mir jemand helfen?
    Ich danke schon mal im vorraus für eure Hilfe :)

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Natürlich geht das, da ist doch nichts bei, was man mit etwas HTML+CSS nicht umsetzen kann. Als Grundlage kannst Du ein ähnliches Theme nehmen oder besser vielleicht noch ein "leeres" Theme wie z.B.:
    http://speckyboy.com/2010/03/22/10-…or-development/

    Die Frage ist für mich eher, wo in Deinem Mockup denn nun die üblichen WP-Elemente zu finden sind. Verlinkt jedes Foto auf einen Beitrag? Auf eine statische Seite?

    Danke Ammaletu. Auf die Idee nach Blank-Themes zu suchen bin ich gar nicht gekommen :) Da ist ja schon was brauchbares dabei, versuch ich heute mal.

    Von den üblichen WP-Elementen würde ich eigentlich nur den Beitrag benutzen - für jedes Foto einen. Das wäre Theoretisch schön einfach. Wiederum ist das sortieren der Fotos in einem einzigen Beitrag wieder einfacher.
    Da ich ja ca. 4 Menüpunkte mit je einer eigenen Seite habe, wäre es wohl einfacher einfach jeden Menüpunkt mit einer Seite zu verlinken und dann einfach die Seite zu aktualisieren, oder? Da es ja ein Portfolio werden soll ändere ich da ja recht selten was.

    Ich probier mal mein Mockup mit einem leeren Theme von oben umzusetzen. Mal schaun was bei rauskommt (ich frag bestimmt bei der variablen Breite des "Fotostreifens" wieder nach....)

    Danke aber schon mal
    Tom

    Also ich hab es jetzt soweit fast (von der Idee her):

    http://tomzylla.com/

    Die Menüpunkte sind jetzt immer Seiten, das funktioniert für den Zweck prima. Bilder werden mit NextGen auf der Seite angezeigt.

    Aber: Warum werden die Bilder nicht nebeneinander angezeigt? Die Bilder sollen ja von rechts "rauskommen". Derzeit muss ich nach unten scrollen. Ich will aber nach rechts scrollen?

    Leider ist das mit der variablen Größe natürlich auch ein grauen. Das wusste ich. Aber ich wollte eigentlich sowas wie zu alten Frame zeiten mit frames <frameset cols="50%,*"> machen. Denn jetzt wird beim Fenster kleiner machen auch die linke freie Seite sofort proportional zum kleiner werdenden Fenster in der Breite kleiner. Bei Prozenten sieht das besser aus, ist halt nicht proportional. Bekomm ich das in WP auch hin?

    Alles, was Dir jetzt noch fehlt, ist reines CSS, denke ich. Das sollte kein Problem sein.

    Zitat

    Aber: Warum werden die Bilder nicht nebeneinander angezeigt? Die Bilder sollen ja von rechts "rauskommen". Derzeit muss ich nach unten scrollen. Ich will aber nach rechts scrollen?

    Dann musst Du das im CSS entsprechend konfigurieren, die Browser können ja nicht Gedanken lesen. ;-)

    Code
    .entry-content a {
  float; left;
  margin-right: 10px;
  display: block;
}

    Das floatet alle Links nach links, besser wäre es vermutlich, es auf Links einer bestimmten Klasse zu beschränken. Kann NextGen da immer eine Klasse dranhängen?

    Dann müsste man noch schauen, dass das nicht umbricht. Hm... Vielleicht so?

    Code
    .entry-content {
  white-space: nowrap;
  overflow: scroll;
}

    Naja, ich weiß nicht, ob das schon reicht. Da musst Du etwas experimentieren.


    Zitat

    Leider ist das mit der variablen Größe natürlich auch ein grauen. Das wusste ich. Aber ich wollte eigentlich sowas wie zu alten Frame zeiten mit frames <frameset cols="50%,*"> machen. Denn jetzt wird beim Fenster kleiner machen auch die linke freie Seite sofort proportional zum kleiner werdenden Fenster in der Breite kleiner. Bei Prozenten sieht das besser aus, ist halt nicht proportional. Bekomm ich das in WP auch hin?

    Wenn ich das in Deiner ursprünglichen Skizze richtig sehe, sollen links immer 100px frei sein und dann der Inhaltsbereich so breit wie das Fenster? Sollte das nicht gehen, wenn Du #main einfach keine width aber dafür einen margin-left: 100px gibst? Als Block dehnt sich das dann ja automatisch auf die Fensterweite aus.

    Einmal editiert, zuletzt von Ammaletu (20. Februar 2012 um 00:55)

    Mh, welche CSS nehm ich jetzt?
    Ich hab das Theme THEMATIC (ein blank theme von dem geposteten link)
    Da gibt's die Style CSS die nur ganz wenig enthält und auf verschiedene CSS verlinkt für default, images, reset etc. ...

    Zitat

    Mh, welche CSS nehm ich jetzt?
    Ich hab das Theme THEMATIC (ein blank theme von dem geposteten link)
    Da gibt's die Style CSS die nur ganz wenig enthält und auf verschiedene CSS verlinkt für default, images, reset etc. ...

    Es ist Dein Theme, Du musst selbst entscheiden, wie Du es organiseren möchtest. Da Thematic ab und an auch mal aktualisiert wird, wäre es eventuell auch eine Überlegung wert, ein Child-Theme anzulegen. Dann hast Du alle Deine Modifikationen schön gekapselt an einem Ort. Naja, kommt drauf an, wie viel Du an den Dateien änderst. Es lohnt nicht wenn Du jede einzelne Datei umschreibst.

    Zitat

    Vllt. isses doch einfacher das ganze mit Frames zu machen ohne CMS im Hintergrund

    Du könntest ein iFrame nehmen, aber das ist wirklich nicht nötig, siehe ja auch den von Dir geposteten Code.

    Zur Organisation des CSS: Leg Dir doch einfach ein eigenes Stylesheet an, das alle Deine Änderungen am Theme enthält. Das bindest Du in der style.css einfach als letztes ein, nach allen anderen includierten CSS-Dateien. Dann kannst Du auch alle anderen Angaben bei Bedarf überschreiben.


    Zitat

    Gerade das hier gefunden:
    Weiß aber nicht wo ich das einbinden könnte. Argh.



    Das ist eigentlich selbsterklärend: CSS-Code ins Stylesheet, HTML in die Theme-Datei :-).

    Also ich nutze jetzt Indexhibit. Bietet das nativ an. http://tomzylla.com
    Funktioniert für mein zweck super. Nicht genau nach Mockup, aber als alternative doch wirklich gut.
    Angeblich kann man das auch irgendwie Wordpress integrieren aber das wäre für meine Zwecke eh zu aufgeblasen.
    Vllt. werde ich mit nem iFrame meine alte Seite zippster.de in der neuen als Blog integrieren. Das ist glaube recht einfach zu realisieren.

    Danke trotzdem für deine Hilfe :)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden