Suche

[moeller]

Hallo!
Ich hätte gerne nur das Logo über die gesamte Breite. Der Text rechts soll weg.

Ich habe viel probiert, nichts hilf. Den Text kriege ich zwar weg aber die rechte Hälfte bleibt stur und öffnet sich nicht für das Logo.
Weiss jemand wie ich das machen muss?

[nudels64]

Nimm mal den Div Container in der theme.html raus:

Code Auswählen Erweitern

<div class="ui-block-b"><p class="mobile-head">{$sitename} </p></div>

[moeller]

Hallo nudels64,
das habe ich ja versucht, damit wird der Platz fürs Logo aber nicht frei. Oder der Platz vom Logo wird nicht breiter, wie auch immer.

[nudels64]

In der mobile.css legst Du die Größe des Logos fest oder setzt ein anderes Logo ein:

Code Auswählen Erweitern

/* Home page banner */
h2#banner {
background:transparent url(../images/kk_logo.png) no-repeat left 10px; //Ausrichtung des Logos
width:288px; // Breite des Logos
height:184px; // Höhe des Logos
margin:-10px auto -66px auto;
text-indent:-9999px;
}

[moeller]

Habe den Div Container in der theme.html rausgenommen.
In der mobile.css sieht das jetzt so bei mir aus:

Code Auswählen Erweitern


/* Home page banner */
h2#banner {
background:transparent url(../images/logo.png) no-repeat left 10px;
width:100%;
height:184px;
margin:-10px auto -66px auto;
text-indent:-9999px;
}


Habe auch Pixelangaben versucht.
Nur, jetzt wird das Logo nicht mehr angezeigt. Kann also nichts über die Breite des Fensters sagen.
Im pmx Admin ist auch logo.png angegeben.
Alle Caches sind geleert.

[nudels64]

Hier wird die Größe des Logos im Verhältnis zur Seite eingestellt:

Code Auswählen Erweitern

.mobile-logo {
max-width: 100%;
height: auto;

}

Also oben  in /* Home page banner */ nur mit Pixel arbeiten. Das logo.png in PMX ist ein anderes Theme. Du arbeitest jetzt im Mobile Theme welches mit alaMobile geliefert wurde. Du kannst jedoch den Pfad und den Namen Deinen Wünschen entsprechend anpassen.

Gib mal den Link zur Seite bitte.

[moeller]

Okay, ich habe im banner eine Pixelangabe gemacht, 400px. Trotzdem wird das Logo nicht gezeigt, da steht nur "Logo".

Wenn ich im Kopf den Bildpfad ändere in:

Code Auswählen Erweitern


<div class="ui-block-a"><img src="images/logo.png" alt="Logo" title="Logo" class="mobile-logo" ></img></div>

Habe ich das Logo wieder verkleinert auf der linken Hälfte des Kopfes.
Der Block ist also nicht breiter geworden.

[nudels64]

Hm, nimm mal das

Code Auswählen Erweitern

left 10px in der mobile.css weg.

[moeller]

Habe ich gemacht.

Ich habe immer noch den geänderten Bildpfad, sonst kann ich kein Logo sehen:

Code Auswählen Erweitern


<div class="ui-block-a"><img src="images/logo.png" alt="Logo" title="Logo" class="mobile-logo" ></img></div>


Jetzt wird das Logo gezeigt aber vekleinert, offenbar in der geringen Höhe des ui-block-a. Über den Block finde ich aber nichts.

[nudels64]

Ich hab das Teil nicht installiert. Ich glaube den Pfad zum Logo gibst Du im Admin Menü alaMobile unter Module an.
Hiermit

Code Auswählen Erweitern

margin:würde ich auch rumspielen, da dies den Abstand im Container zum nächsten Element regelt.

Hast Du einen Link zur Seite?

[moeller]

Mit folgenden Einstellungen habe ich das Logo jetzt in der richtigen Grösse, bei voller breite des Kopfes. Leider bis jetzt nur rechtsbündig im Kopf.
In der mobile.css

Code Auswählen Erweitern


h2#banner {
background:transparent url(../images/logo.png) no-repeat;
width:576px;
height:184px;
margin:-10px auto -66px 2auto;
}


Code Auswählen Erweitern


.mobile-logo {
max-width: 420px;
height: 100px;

}


In der theme.html

Code Auswählen Erweitern


    <!--  Kopf incl. Logo und evt. Schriftzug -->
    <div class="ui-grid-a">
  <div class="ui-block-a"><img src="images/logo.png" alt="Logo" title="Logo" class="mobile-logo" ></img></div>
    </div><!-- /grid-a -->



[nudels64]

Willi, ist die Seite geheim, oder warum stellst Du den Link hier nicht rein?

[moeller]

Nee, ist nicht geheim, ist im Aufbau.
Trotzdem, ich habe schlechte Erfahrungen mit dem rauslegen von Links gemacht.
Ich kann mich erinnern, dass ich einmal Hilfe für eine Seite hier im Ort brauchte. Auf der Seite war auch ein Link zu einem Fitness Center. Die hatten plötzlich 520 scheinbare Anmeldungen aus Deutschland. Das war nicht lustig.
Ich hab dir die Adresse als PM gesendet.

[nudels64]

Ok, ich schau jetzt mal

[nudels64]

In der theme.html ist das der Container

Code Auswählen Erweitern

<div class="ui-grid-a">

für den gesamten Kopf. Der

Code Auswählen Erweitern

<div class="ui-block-a">.../code]

und der

[code]<div class="ui-block-b">

hängen dort drin. Ich würde alle überflüssigen Container entfernen. Also nur einen verwenden.[/code]

[moeller]

Wenn ich dich richtig verstehe, habe ich das ja.
Ich habe nur das Logo da stehen, nicht mehr denn Schriftzug.

Code Auswählen Erweitern


   <!--  Header  -->
   <div data-role="header">
     <!--  Kopf incl. Logo und evt. Schriftzug -->
     <div class="ui-grid-a">
   <div class="ui-block-a"><img src="images/logo.png" alt="Logo" title="Logo" class="mobile-logo" ></img></div>
     </div><!-- /grid-a -->


[nudels64]

Ja, aber der

Code Auswählen Erweitern

ui-block-a ist nur für die linke Seite beschränkt. Deshalb wird das Logo auch nur links angezeigt. Ich bin noch am Suchen, wo die Beschränkung liegt. Was ist denn, wenn Du den Container

Code Auswählen Erweitern

ui-block-a raus nimmst und das Logo in den

Code Auswählen Erweitern

ui-grid-a einbaust?

[moeller]

Nur im grid-a wird das Logo wieder bis auf die Mitte zusammengepresst.
Das habe ich wieder zurück gestellt auf:

Code Auswählen Erweitern


     <!--  Kopf incl. Logo und evt. Schriftzug -->
     <div class="ui-grid-a">
   <div class="ui-block-a"><img src="images/logo.png" alt="Logo" title="Logo" class="mobile-logo" ></img></div>
     </div><!-- /grid-a -->


Das steht ja gut so, eben nur nicht zentriert.
Wenn man das Telefon hochkant stellt ist das Logo auch über die Mitte hinaus zu sehen.

[nudels64]

In der mobile.css ist noch die Option "margin" in "h2#banner" aktiviert. Nimm die mal ganz raus.

[moeller]

Keine Änderung zu sehen. 

[nudels64]

Versuch mal den Container mit

Code Auswählen Erweitern

<div align="center in die Mitte zu setzen.

[moeller]

Habe ich schon probiert, auch img align="center". Habs trotzdem noch mal versucht. Das ist fast zum Verzweifeln.

[nudels64]

Das Logo kannst Du in der Mitte lassen, aber das

Code Auswählen Erweitern

<div class="ui-block-a">... in

Code Auswählen Erweitern

<div align=center class="ui-block-a">... ändern.

[moeller]

Hatte ich schon probiert, bringt nichts.

[nudels64]

Hm, dann weiß ich auch nicht. Und wenn Du noch einmal nur mit einem Container arbeitest und den in die Mitte setzt. Dann zerreisst es das Logo nicht mehr?
Denn man sieht ja, das der Logobereich immer nur begrenzt bis zur Mitte des Kopfes ist. Egal was man da einstellt.

[moeller]

Der Logobereich geht ja jetzt über die Mitte hinaus. Der Block ist bis zum rechten Rand offen.
Ich kann das Logo auch in die Mitte schieben, indem ich den transparenten Hintergrund des Logos breiter oder schmaler mache. Das hilft aber nichts wenn das Telefon gedreht wird. Das Logo ist dann entweder in der horizontalen des Telefons in der Mitte oder in der vertikalen.
Ich danke dir jedenfalls für deine Geduld und deinen Einsatz.
Wir haben das Logo ja wenigstens sichtbar und in der richtigen Grösse hingekriegt. 

[nudels64]

Schade. Hier kann wohl nur einer helfen, der in der Materie steckt. Wünsch Dir schönes Wochenende.

[alaniso]

Hallo "moeller",

bei der Entwicklung zum Modul alaMobile habe ich auch ein alternatives theme erstellt, welches das Logo zentriert in der oberen Mitte darstellt - der zusätzliche Text wird nicht angezeigt.

Weiterhin wird hier - abweichend zum Standard-theme - die Button-Leiste für "home" und "Account" nicht unter dem Logo, sondern am unteren Bildschirmrand verankert.

Vielleicht hilft das bei der Lösung Deines Problems.

Das Theme kann auf der Demo-Seite für alaMobile heruntergeladen werden:

http://alaniso.bplaced.net/demo/modules.php?name=Downloads&op=view&lid=2

Viel Erfolg damit,
André

[moeller]

Hmm, bei dem neuen Theme ist bei mir gar kein Header mehr zu sehen.