Jump to content

Größe Logobereich

Tanja_HU
 Share

Recommended Posts

Tanja_HU Apprentice

Tanja_HU

Posted
Posted

Vorab..... ich bin lediglich Anwender, habe null Ahnung und kenne mich mit Fachbegriffen dementsprechend auch gar nicht aus. Nehmt bitte Rücksicht! :) :)

Ich habe die Presta Version 1.7.6.1 und es läuft auch alles soweit. Nur ein Problem bekomme ich einfach nicht gelöst. 

Das Logo auf der Startseite ist zu groß, ich bekomme es einfach nicht kleiner und habe keinen blassen Schimmer, wo ich die Logogröße einstellen kann. 

Weiterhin "läuft" der Logobereich immer mit und verdeckt mir so die halbe Seite. 

Kann ich das irgendwo abstellen? Das das logo oben fix stehen bleibt? image.thumb.png.4ea7aa0dfedfa58501b2eb80b12f1c8f.png

Anbei ein Bild damit man hoffentlich versteht was ich meine!

Vielen lieben Dank für die Hilfe!

 

Link to comment
Share on other sites
rictools Mentor

rictools

Posted
Posted

Vom originalen Prestashop-Layout ist hier nicht viel zu erkennen, ist das jetzt am PC oder an einem größeren Smartphone? Nutzt du das Standard-Template?

Generell kannst du natürlich einfach eine nicht so große Bilddatei als Logo einstellen, im originalen Demo-Shop sind es 100 x 28 Pixel, das ist allerdings sehr klein. mein Logo z. B. ist 319 x 103 Pixel groß.

Wenn dein Shop online ist, wäre ein Link sehr viel besser für eine Beurteilung als ein (auch noch Schlüsselloch-) Screenshot.

Link to comment
Share on other sites
Tanja_HU Apprentice

Tanja_HU

Posted
  • Author
Posted

Danke für die Rückmeldung. Der Screenshot ist vom PC. Mobil ist alles in Ordnung.

Nein, nicht das Originale Template. Ich müsste schauen, wie es heißt.

Ja, Shop ist online. www.hundum-minden.de 

Wäre super, wenn Du da mal schauen könntest. 

 

 

Link to comment
Share on other sites
rictools Mentor

rictools

Posted
Posted (edited)

Dein Logo: http://hundum-minden.de/img/hundum-minden-logo-1650725272.jpg ist halt so groß, bring die Grafik einfach in einem Grafikprogramm auf ein vernünftiges Maß und lade sie neu als Logo hoch.

Du kannst das Logo aber auch per CSS verkleinern, z. B. in die custom.css die folgende Anweisung setzen: 

#header .logo {
    max-width: 50%;
}

Der Fixed Header ist wohl in einem Modul konfiguriert. Auch hier ist eine CSS-Anweisung in der custom.css möglich: 

.header-top.fixed {
    position: relative;
}

Evtl. mußt du danach erst Caches löschen.

Edited by rictools (see edit history)
Link to comment
Share on other sites
SchmidtSon Enthusiast

SchmidtSon

Posted
Posted

Wie unser ric hier schreibt, kannst du es machen ich würde das Logo aber eher in der custom.css so formatieren: 

#header .logo {
	max-width: 100%;
	max-height: 65px;
}

Ich würde deinen Header Bereich aber generell mal etwas aufräumen, da das Menü hier in 2 Zeilen läuft was sehr unschön ist und dir auch das Problem mit dem fixierten Bereich beschert.

Du kannst dein Layout in deinem Layout Ordner anpassen, insofern du etwas HTML Kenntnisse hast:

\themes\DeinTemplate\templates\layouts\layout-both-columns.tpl

 

Link to comment
Share on other sites
Tanja_HU Apprentice

Tanja_HU

Posted
  • Author
Posted

Vielen Dank für die Infos. Wie gesagt.... ich bin jemand, der einfach nur anwendet und von Programmieren so viel Ahnung hat wie eine Kuh von Quantenphysik. :(

Ich habe diese verflixte Datei nun gefunden. Könnt ihr mir noch sagen, was genau ich ändere?

 

 

 <head>
    {block name='head'}
      {include file='_partials/head.tpl'}
    {/block}
  </head>

  <body id="{$page.page_name}" class="{$page.body_classes|classnames}">

    {block name='hook_after_body_opening_tag'}
        {hook h='displayAfterBodyOpeningTag'}
    {/block}

    <main id="page">
      {block name='product_activation'}
        {include file='catalog/_partials/product-activation.tpl'}
      {/block}

      <header id="header">
        {block name='header'}
          {include file='_partials/header.tpl'}
        {/block}
      </header>

      {block name='notifications'}
        {include file='_partials/notifications.tpl'}
      {/block}
                  
      <section id="wrapper">
      {hook h="displayWrapperTop"}
      
      {block name='breadcrumb'}
        {include file='_partials/breadcrumb.tpl'}
      {/block}
        <div class="{if $page.page_name == 'index'}home-container{else}container{/if}">          
          
  

Link to comment
Share on other sites
rictools Mentor

rictools

Posted
Posted (edited)
vor 17 Minuten schrieb SchmidtSon:

Wie unser ric hier schreibt, kannst du es machen ich würde das Logo aber eher in der custom.css so formatieren: 

#header .logo {
	max-width: 100%;
	max-height: 65px;
}

Ich würde deinen Header Bereich aber generell mal etwas aufräumen, da das Menü hier in 2 Zeilen läuft was sehr unschön ist und dir auch das Problem mit dem fixierten Bereich beschert.

Du kannst dein Layout in deinem Layout Ordner anpassen, insofern du etwas HTML Kenntnisse hast:

\themes\DeinTemplate\templates\layouts\layout-both-columns.tpl

 

Dieser Code ist natürlich sinnvoll wenn man einmal ein anderes Logo einstellt.

Um die Menupunkte in einer Zeile darzustellen reicht auch folgender CSS-Eintrag: 

#header-top .menu {
    width: 85%;
}

@Tanja_HU
Um so etwas herauszufinden rufst du im Browser (meist per Rechtsklick) die "Untersuchen"-Funktion aus, damit kannst du die verschiedenen CSS-Anweisungen für die verschiedenen Elemente sehen und testweise ändern.

Edited by rictools (see edit history)
Link to comment
Share on other sites
rictools Mentor

rictools

Posted
Posted
vor 5 Minuten schrieb Tanja_HU:

Vielen Dank für die Infos. Wie gesagt.... ich bin jemand, der einfach nur anwendet und von Programmieren so viel Ahnung hat wie eine Kuh von Quantenphysik. :(

Ich habe diese verflixte Datei nun gefunden. Könnt ihr mir noch sagen, was genau ich ändere?

Das Bearbeiten der tpl-Datei dürfte doch etwas aufwändiger sein, außerdem ist die Änderung nach einem Update des Templates möglicherweise wieder weg. Deshalb würde ich die Einträge in der custom.css bevorzugen. Noch einfacher geht's mit diesem kostenlosen Modul:

Generell muß man aber sagen, daß man als Prestashop-User schon über einige technische Grundkenntnisse verfügen bzw. sie sich aneignen sollte, alternativ kann man diese Aufgaben natürlich auch delegieren.

Link to comment
Share on other sites
SchmidtSon Enthusiast

SchmidtSon

Posted
Posted

Hey ric so einfach ist es leider nicht, wenn du möchtest, dass das Theme und die Container sich nicht überschneiden. Der Theme-Designer hat sich hier Gedanken gemacht, warum er es auf 65% begrenzt hat.

Um solch einem Problem zu entgehen kommt Sie nicht drum rum in der Theme Layout.tpls zu schreiben. Hier benötigt man aber etwas mehr Kenntnis wie nur Anwenderstufe.

Ich habe euch mal 2 Screenshots angehangen, in denen ich lediglich die Prozentwerte verändert habe und da wird das Dilemma dann sichtbar.

Screenshot 2022-04-24 214554.png

Screenshot 2022-04-24 214624.png

Link to comment
Share on other sites
SchmidtSon Enthusiast

SchmidtSon

Posted
Posted
2 minutes ago, rictools said:

Das Bearbeiten der tpl-Datei dürfte doch etwas aufwändiger sein, außerdem ist die Änderung nach einem Update des Templates möglicherweise wieder weg. Deshalb würde ich die Einträge in der custom.css bevorzugen. Noch einfacher geht's mit diesem kostenlosen Modul:

Generell muß man aber sagen, daß man als Prestashop-User schon über einige technische Grundkenntnisse verfügen bzw. sie sich aneignen sollte, alternativ kann man diese Aufgaben natürlich auch delegieren.

Das Bearbeiten der tpl-Datei dürfte doch etwas aufwändiger sein, außerdem ist die Änderung nach einem Update des Templates möglicherweise wieder weg.

Da bin ich nicht so im Thema, da wir die Themes unserer Kunden komplett selber schreiben.
Aber ich weiß, dass kaum einer unserer Kunden zuvor sein gekauftes Theme upgedatet hat, maximal die Shopversion und somit das Standart Theme, aber nicht das Third-Party Theme.

 

 

 

Link to comment
Share on other sites
SchmidtSon Enthusiast

SchmidtSon

Posted
Posted
5 minutes ago, rictools said:

Es ist kein Dilemma, wenn man nicht die Vorschläge zweier Autoren mischt, bei max-width: 50% für's Logo bleibt dieses in einer eigenen Zeile und die CSS-Anweisung funktioniert.

Deine Version im ANhang 😉 hier ist das Logo aber viel zu groß und nur aus dem Grund ist es in einer eigenen Zeile, denn wenn du dir den Code genau anschaust ist ein float:left; befehl da der das Logo eigentlich nach links schieben soll, ich denke aber das aufgrund der Größe der Grafik diese eben so groß ist und eine eigene Zeile durch den FLoatbefehl erhält.

 

Screenshot 2022-04-24 220058.png

Link to comment
Share on other sites
SchmidtSon Enthusiast

SchmidtSon

Posted
Posted
29 minutes ago, Tanja_HU said:

Vielen Dank für die Infos. Wie gesagt.... ich bin jemand, der einfach nur anwendet und von Programmieren so viel Ahnung hat wie eine Kuh von Quantenphysik. :(

Ich habe diese verflixte Datei nun gefunden. Könnt ihr mir noch sagen, was genau ich ändere?

 

 

 <head>
    {block name='head'}
      {include file='_partials/head.tpl'}
    {/block}
  </head>

  <body id="{$page.page_name}" class="{$page.body_classes|classnames}">

    {block name='hook_after_body_opening_tag'}
        {hook h='displayAfterBodyOpeningTag'}
    {/block}

    <main id="page">
      {block name='product_activation'}
        {include file='catalog/_partials/product-activation.tpl'}
      {/block}

      <header id="header">
        {block name='header'}
          {include file='_partials/header.tpl'} <--- DIESE DATEI MUSST DU BEARBEITEN
        {/block}
      </header>

      {block name='notifications'}
        {include file='_partials/notifications.tpl'}
      {/block}
                  
      <section id="wrapper">
      {hook h="displayWrapperTop"}
      
      {block name='breadcrumb'}
        {include file='_partials/breadcrumb.tpl'}
      {/block}
        <div class="{if $page.page_name == 'index'}home-container{else}container{/if}">          
          
  

Du musst diese Datei bearbeiten bzw. mir schicken dann kann ich dir evtl sagen was du anpassen musst bzw ergänzen musst.

\themes\DeinTheme\templates\_partials\header.tpl

Link to comment
Share on other sites
rictools Mentor

rictools

Posted
Posted

@SchmidtSon

OK, jetzt müßten wir raten was der TE will, die Vorgabe war "kleiner" und nicht "ganz klein links neben die Kategorien". Mir scheint das Logo in dieser Größe stimmig zu sein.

@Tanja_HU

Warum das Ergänzen der custom.css oder das Installieren des von mir empfohlenen kostenlosen Moduls eine zu große Hürde sein soll ist mir jetzt nicht ganz klar, die Fixed-Funktion müßte sich aber auch im BackOffice deaktivieren lassen, wahrscheinlich gibt es ein mit dem Template mitgeliefertes Modul "Fixed Header" oder so oder eine Seite mit Template-Einstellungen.

Link to comment
Share on other sites
rictools Mentor

rictools

Posted
Posted

Das mit dem Logo sieht jetzt schon besser aus, ist aber immer noch zu groß und mit dem riesigen Fixed Header geht das so gar nicht (kann auch rechtliche Probleme geben weil evtl. Teile von Texten nicht gelesen werden können).

Generell ist es mit dem bloßen "Anwender"-Dasein leider nicht getan, so muß auch rechtlich an dem Shop noch verschiedenes gemacht werden. Ohne Grundkenntnisse oder Hilfe kann man einen Prestashop nicht betreiben! Sicherheitshalber solltest du den Shop zunächst in den Wartungsmodus versetzen.

Link to comment
Share on other sites
SchmidtSon Enthusiast

SchmidtSon

Posted
Posted (edited)

@rictools

da gebe ich dir recht, stimmig sieht es aus aber funktioniert nur mit einem Shrink-Befehl der das Logo auch beim runterscrollen dann verkleinern lässt etc. naja wie gesagt ist auf jeden Fall eine größere Baustelle und meines Erachtens nicht ohne Programmierkenntnisse umsetzbar.

Mit etwas grafischen Verlusten dafür wesentlich einfacher ist diese Lösung.

kopiere es einfach in deine Custom.css 

#header .logo {
	max-width: 100%;
	max-height: 65px;
}

.header-top .menu {
	float: left;
	width: 100%;
	display: block;
	text-align: center;
	padding: 0;
	margin: 0;
}

\themes\DeinTheme\assets\css\custom.css

hier sollte die Datei custom.css zu finden sein, falls nicht einfach mit diesem namen erstellen und den obigen Code da rein kopieren.

 

PS Ric hat recht dein Shop ist aktuell extrem Abmahngefährdet, du solltest diesen echt besser in den Wartungsmodus versetzen.

 

Einstellungen > SHop einstellungen und dann oben den Reiter WARTUNG dort kannst du den SHop dann in den Wartungsmodus versetzen. Füge Deine IP hinzu und so kannst du das Frontend weiter anschauen, wichtig die IP Adresse muss dann regelmäßig erneuert werden, da dein Router dir bei jeder Einwahl eine neue zuweist.

so bin nun off gute Nacht zusammen.

Edited by SchmidtSon (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...