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.