Logo mittig im Header

Thema wurde von TGbR, 13. Dezember 2016 erstellt.

  1. TGbR
    TGbR Aktives Mitglied
    Registriert seit:
    24. September 2016
    Beiträge:
    33
    Danke erhalten:
    3
    Danke vergeben:
    4
    #1 TGbR, 13. Dezember 2016
    Hallo,
    ich beschäftige mich seit gestern mit dem StyleEdit3 um das Layout für unseren neuen Shop umzusetzen.

    Nun hätte ich gerne das Logo mittig zwischen der Suche und dem Warenkorb und habe es in den frei gestaltbaren Bereich im Header eingefügt. Leider wird das Logo dort gestaucht, obwohl der Headerbereich hoch genug wäre (siehe Anhang).

    Im Testshop 1 habe ich gesehen, dass dort für den frei gestaltbaren Bereich eine Höhe angegeben werden kann, ich denke das würde das Problem lösen, aber bei mir existiert diese Eingabemöglichkeit nicht :-( Wie kann ich das sonst einstellen?

    Und gleich noch zwei Fragen: Wo kann die Schriftgröße der Topnavigation geändert werden? Und wo kann ich den Bereich ganz oben (wo der Username und Merkzettel steht) bearbeiten?

    Vielen Dank in voraus und einen schönen Abend
    Tanja Tomaske
     

    Anhänge:

  2. postel
    postel
    #2 postel, 13. Dezember 2016
    Probiere das mal aus, mit einer Anpassung der honeygrid/index.html
    aus:

    HTML:
            <div class="inside">

            <div class="row">
   
                {assign var="hideLogo" value={template_setting name="gx-hide-logo-col"}}
                {assign var="hideSearch" value={template_setting name="gx-hide-search-col"}}
                {assign var="hideCustom" value={template_setting name="gx-hide-custom-1-col"}}
                {assign var="hideCart" value={template_setting name="gx-hide-cart-col"}}
   

                    <div class="navbar-header" data-gambio-widget="mobile_menu">
                        {if !$hideLogo}
                            {include file="get_usermod:{$tpl_path}snippets/header/logo.html" logo_url=$logo_url logo_link=$logo_link}
                        {/if}
                        {include file="get_usermod:{$tpl_path}snippets/header/header_navbar_buttons.html"}
                    </div>

   
                {if !$hideSearch}
                    {$TOP_SEARCH}
                {/if}

                {if !$hideCustom}
                    {include file="get_usermod:{$tpl_path}snippets/header/header_custom_content.html" content={content_manager group=4321001}}
                {/if}
               
                {if !$hideCart}
                    {$SHOPPING_CART_HEAD=$SHOPPING_CART_HEAD|replace:"###SHOPPING_CART_DROPDOWN###":$SHOPPING_CART_DROPDOWN}
                    {$SHOPPING_CART_HEAD}
                {/if}

            </div>
           
        </div>
    ändern in:

    HTML:
            <div class="inside">

            <div class="row">
           
                {assign var="hideSearch" value={template_setting name="gx-hide-search-col"}}
                {assign var="hideLogo" value={template_setting name="gx-hide-logo-col"}}
                {assign var="hideCustom" value={template_setting name="gx-hide-custom-1-col"}}
                {assign var="hideCart" value={template_setting name="gx-hide-cart-col"}}
                
                {if !$hideSearch}
                    {$TOP_SEARCH}
                {/if}

                    <div class="navbar-header" data-gambio-widget="mobile_menu">
                        {if !$hideLogo}
                            {include file="get_usermod:{$tpl_path}snippets/header/logo.html" logo_url=$logo_url logo_link=$logo_link}
                        {/if}
                        {include file="get_usermod:{$tpl_path}snippets/header/header_navbar_buttons.html"}
                    </div>

                {if !$hideCustom}
                    {include file="get_usermod:{$tpl_path}snippets/header/header_custom_content.html" content={content_manager group=4321001}}
                {/if}
               
                {if !$hideCart}
                    {$SHOPPING_CART_HEAD=$SHOPPING_CART_HEAD|replace:"###SHOPPING_CART_DROPDOWN###":$SHOPPING_CART_DROPDOWN}
                    {$SHOPPING_CART_HEAD}
                {/if}

            </div>
           
        </div>
    und dort speichern als index-USERMOD.html, und dann über StyleEdit3 die Gridspalten anpassen
    (frei gestaltbar lässt du leer, wenn du da nichts brauchst)
    z.B. suche 3 - Logo 6 - custom(frei gestaltbar) 0 - warenkorb 3
    Habe das nicht getestet, versuche das einfach mal so in deinem Testshop.
     
  3. TGbR
    TGbR Aktives Mitglied
    Registriert seit:
    24. September 2016
    Beiträge:
    33
    Danke erhalten:
    3
    Danke vergeben:
    4
    #3 TGbR, 15. Dezember 2016
    Zuletzt von einem Moderator bearbeitet: 15. Dezember 2016
    Vielen Dank!
    Hat super funktioniert :)

    Über das eigene css hab ich das Logo dann noch mittig positioniert und die Schriftgröße der Top-Navi vergrößert:

    Code:
    #navbar-brand a {
    background-position: 50% 50%;
}

.navbar-categories {
  font-size: 1.8 em;
  }