Projektvorstellung mit mod. ULTRA

Hallo community,

dann stellen ich nun auch mal ein Projekt vor, welches ich gestern abgeschlossen habe.

Als Basis fungierte das ULTRA - Design, ein wenig modifiziert.

Inhaltlich bin ich dieses Mal, passend zur dynamischen Betreiberin der Website, in die vollen gegangen. Normalerweise ist die Branche eher konservativ, jetzt nicht mehr!

www.wegberg.versicherung

Feedback erwünscht.

Michael

Kompliment - sieht richtig klasse aus !

Wegberg - meine Heimat!!! Bin da geboren und habe 40 Jahre meines Lebens dort verbracht. Ist aber auch nur 15 km entfernt von MG.

Übrigens gut gelungen, sehr schöne Website!

Off-Topic:

Die meisten der neuen Top-Level Domains sind einfach nur das Grauen und überflüssig wie ein Kropf (.versicherung).

Farben sind abgestimmt (blau-grün), auch die Bilder. Sympathisches aufgeräumtes Auftreten. Die Smartphone-Ansicht könntest Du dahingehend (Farben) auch noch im _smartphone-Design anpassen od. evlt. eine Variante einbauen ...

 

Ja .. danke für die Blumen...

Für die Smartphone-Anpassung war der Geldbeutel zu klein

Deshalb habe ich die 990er Breite genommen, damit die Website auf Tablets in voller Breite angezeigt wird, zumindest bei den 10" Geräten.

Falls schon jemand das Smartphone-Design für optimiert hat, wäre ich interessiert.

Grüße

Michael

Hallo,

und vielen Dank für die Vorstellung der von Ihnen gestalteten Website. Ich musste lachen: Ein "wenig modifiziert" - wie Sie es nennen - kostet mich als Laien wohl eher Stunden und Tage

Trotzdem interessieren mich bei diesem Design Ultra zwei von Ihnen umgesetzte Modifizierungen brennend, die ich gerne übernehmen möchte:

a) Wie haben Sie es geschafft, die untere Menü-Übersicht von links nach rechts (bildschirmfüllend) farblich zu hinterlegen?

-> Mein Lösungsansatz war nach stundenlangem Rumprobieren und Foren lesen (natürlich nach Sicherung der Orginaldateien) in der style_design folgendes zu ergänzen:

#bottom {
    width: 960px;
    <cc:if cond="&site.properties.design.center">
    margin: 0 auto;
    <cc:else>
    margin: 0 0 0 20px;
    </cc:if>
    padding: 20px 0; background-color: #bfbfbf;
}

Ergebnis: Super, hat funktioniert, aber: Die Farbänderung wirkt sich nicht komplett aus, sondern nur im Bereich der Menüpunkte. Also habe ich mir Ihre Modifizierungen nochmals näher angesehen, und siehe da: Sie haben einen "Container" angelegt. So, und da bitte ich in diesem Punkt um Ihre Hilfestellung, da ich mit "Bordmitteln" und Halbwissen leider nicht mehr weiterkomme.

b) Der zweite Punkt ist die Anpassung der Farben in den Menütexten. Aber das habe ich nun schon selbst herausgefunden, wo ich die Farbcodes eingeben kann.

Ich würde mich sehr freuen, wenn Sie mir in dem einem Punkt eine Hilfestellung geben könnten. Dafür im Voraus recht herzlichen Dank für Ihre Mühe.

Ich wünsche Ihnen einen schönen Abend.

Hallo Cleopat

ich bin selber überfordert Dank einiger Forenkollegen, insbesondere Harlekin8 ( Ingo ), Paulemann ( Bernd ), Regine, Cojo, Thomas K., Urmel und noch ein paar andere Cracks habe ich mittlerweile ein wenig gelernt.

Das Layout ULTRA hat mich fasziniert und baue öfter daran: Weitere Beispiele bzw. NICHT fertige Aufträge:

Bitte immer mit http://   

test.dima-nrw.de
ultrabasis1.mell.es
kbv.vdva-vorsorge.de     und noch viele mehr

LOS GEHT`S

navigation.ccml

so schaut es im Original aus:

<div id="bottombar">&nbsp; <cc:print value="&site.properties.design.footertext"> &nbsp;</div>
<div id="bottom">

bei mir:

<div id="bottombar">&nbsp; <cc:print value="&site.properties.design.footertext"> &nbsp;</div>
<div id="bottomcontainer">
<div id="bottom">

Hier die Designeinstellungen: ( bitte Hintergrundfarben und Schriftfarben nach Bedarf anpassen) 

style_design:

#bottombar {
    width: 100%;
    z-index: 100;
    background: <cc:print value="&site.properties.design.color.bottombar">;
    color: #ffffff;
    line-height: 18px;
    padding: 8px 0px;
    <cc:if cond="&site.properties.design.center">
    text-align: center;
    <cc:else>
    text-align: left;
    </cc:if>
}

#bottomcontainer  {
    position: relative;
    width: 100%;
    margin: 0px auto;
    padding: 0 0 0px 0;
    background: <cc:print value="&site.properties.design.color.bottomcontainer">;
    bottom: 0px;
}

#bottom {
    width: 990px;
    <cc:if cond="&site.properties.design.center">
    margin: 0 auto;
    <cc:else>
    margin: 0 0 0 20px;
    </cc:if>
    padding: 20px 0;
}

#bottom ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#bottom li {
    margin: 0;
    padding: 0;
    float: left;
}

#bottom ul ul {
    width: 162px;
}

#bottom li a {
    display: block;
    padding: 6px 10px;
    width: 142px;
    text-decoration: none;
    font-size: 90%;
    font-weight: bold;
    text-transform: uppercase;
    color: #333333;
    transition-property: background-color;
    transition-duration: 1s;
}

#bottom li li a {
    font-weight: normal;
    text-transform: none;
    color: #333333;
}

#bottom a:hover {
    background-color: #f8f8f8;
    color: #333333;
}

Falls etwas fehlen sollte .. einfach mailen. www.konzeptfinder.de

Der Verweis auf andere Foren wird von uns nicht wirklich geschaetzt, Micha. Alle von dir erwaehnte Cracks und noch ein paar mehr sind -oft oder weniger oft- hier im Forum unterwegs, und helfen bei Bedarf auch hier.

Danke fuer dein Verstaendnis.

Guten Morgen Marjorie,

vielen Dank für den Hinweis. Zukünftig werde ich Verlinkungen vermeiden.

Trotzdem zwei Hinweise;
1. Ich habe mir die Nutzungsbedingungen und die Forenregeln durchgelesen, dann auswendig gelernt ... nun kannst du mich abfragen. Ich finde nirgends eine Zeile, dass ich nicht in eines der anderen beiden w2d &Siquando-Foren verlinken darf oder soll.

2. Kennst du den Spruch: "Wer im Glaskasten sitzt, sollte nicht mit Steinen werfen"?

Was damit gemeint ist, findest du hier .. in deinem eigenen "Fred"

http://forum.w2d-siquando.de/Forum/Allgemeine_Themen_Fragen_web_to_date_/Erledigt_Umlaute_und_Sonderzeichen_nicht_richtig_dargestellt-162?p=1#post1275

Aus allen Foren kenne ich dich als fairen Sportsmann ( Sportsfrau ), daher finde ich einen anlassbezogenen Link in andere Foren legitim. Mein Verweis war ziemlich "GLOBAL" und daher ...

ist alles Gut .. einen charmanten Tag dir

Michael

Guten Morgen,

vielen Dank für die ausführliche Information, die heute umzusetzen versuche. Ich freue mich schon auf das Ergebnis.

Beste Grüße an alle Mitleser

---> Edit 2016-01-28 / 11:15 Uhr

Hallo,

nochmals vielen Dank für die Beschreibung. Mittlerweile habe ich im Ausschlussverfahren schon mal gelernt, welche Befehle in der style_design.css was steuern - mein IQ steigt :))))

Leider hat das Anpassen der Dateien nach Ihrem Beispiel in meinem Fall nicht funktioniert. Aktuell bin ich soweit, dass der Menübereich unten komplett farbig ist (grau), jedoch links und rechts der Hintergrund, der über den body-Befehl gesteuert wird, nach wie vor weiß ist. 

Ich bin für weitere Vorschläge, wie ich das lösen kann, nach wie vor offen. Dafür jetzt schon im Voraus vielen Dank.

Viele Grüße an alle

Ich habe die Anleitung zwar nicht getestet, aber mMn steckt der Fehler hier:

1
2
3
4
5
6
7
8

#bottomcontainer  {
    position: relative;
    width: 100%;
    margin: 0px auto;
    padding: 0 0 0px 0;
    background: <cc:print value="&site.properties.design.color.bottomcontainer">;
    bottom: 0px;
}

Weil Michael nicht die erweiterte Eigenschaft verraten hat, aendere das bitte mal wie nachfolgend ab

1
2
3
4
5
6
7
8

#bottomcontainer  {
    position: relative;
    width: 100%;
    margin: 0px auto;
    padding: 0 0 0px 0;
    background: #cccccc; /* Diese Farbe kannst du nach deinen eigen Wunsch anpassen */
    bottom: 0px;
}

Guten Abend,

vielen Dank für Deinen Ratschlag - ich werde ihn morgen gleich mal ausprobieren.

Ich wünsche allen Mitlesern einen schönen Abend.

Hallo liebe Mitleser,

ich bin bei der Anpassung des Designs nun einen Schritt weitergekommen. Um Klarheit zu schaffen, wie das Design angepasst wurde, stelle ich den Code hier für die beiden entsprechenden Dateien des Designs Ultra der Allgemeinheit zur Verfügung. Vielen vielen Dank an renditefinder und Majorie für die tollen Hilfestellungen, insbesondere aber auch danke an das Siquando-Team, die mir letztendlich den "Schlüssel" zur Lösung des Problems geliefert haben.

Die für mich ersichtlichen Änderungen, um den von mir gewünschten Effekt zu erzeugen, sind fett hervorgehoben.

Hier der Code für die Navigation.ccml

1
2
3
4

<div id="bottombar">&nbsp; <cc:print value="&site.properties.design.footertext"> &nbsp;</div>
 
<div id="bottomwide">
<div id="bottom">

 Und hier der Code für die Style_design.css

1
2
3

#bottomwide {
    width: 100%;
    background-color: #bfbfbf;

Ich freue mich - es funktioniert. Nun arbeite ich daran, das obere Ausklappmenü dahingehend anzupassen, dass zwischen den Menüpunkten eine kleine Trennlinie eingefügt wird.

Viele Grüße an alle Mitleser

Ändere bitte deinen Beitrag und verwende für Codes den Knopf { } und schreibe bitte NUR die Änderungen hier hin. Aus Lizenzrechtlichen Gründe und die Scripts mit einen Urheberrecht haben ist es nicht erlaubt den totalen Code hier hin zu schreiben.

Vielen Dank für den Hinweis, ist soeben erledigt worden.

Viele Grüße

Danke. Jetzt braucht man wenigstens auch nicht mehr gefühlte 10 km runter zu scrollen

Hallo und Kompliment für die wirklich gelungene Seite!

Die Kosten würden mich interessieren? Was hat das komplette Projekt gekostet?

Danke und beste Grüße!

Gottfried Kraft

Hallo Gottfried,

habe dir eine PN geschickt.

Grüße

Michael