Startseite im Menü gegen Icon ändern

skijo · March 24, 2016, 4:47pm

Hallo zusammen,

ich bin neu hier und bin seit zwei wochen dabei meinen Test Shop so zu gestalten wie ich es gerne möchte. Teilweise tue ich mich schwer, weil ich bis vor kurzem noch mit xt:modified gearbeitet habe.

Danke des Forums konnte ich schon einiges selber erstellen/ändern.

Nun zu meinem Problem:
Ich habe das Azure Theme als Basis genommen…
Einige Farbgestaltungen konnte ich schon umsetzen…

Nun möchte ich im Menü oben das Wort “Startseite” gegen ein Icon in vorm von einem Haus einfügen.

Wie setze ich das um?

vanilla_thunder · March 24, 2016, 5:08pm

Alle Anpassungen von Aussehen und Struktur der Seiten, die über einfache CSS Manipulationen hinausgehen, müssen direkt in den Templates erfolgen.
In diesem Fall wäre es categorylist.tpl:

github.com

OXID-eSales/oxideshop_ce/blob/b-5.3-ce/source/application/views/azure/tpl/widget/header/categorylist.tpl#L12


[{oxscript add="$('#navigation').oxTopMenu();"}]
[{oxstyle include="css/libs/superfish.css"}]
[{assign var="homeSelected" value="false"}]
[{if $oViewConf->getTopActionClassName() == 'start'}]
[{assign var="homeSelected" value="true"}]
[{/if}]
[{assign var="oxcmp_categories" value=$oxcmp_categories }]
[{assign var="blShowMore" value=false }]
[{assign var="iCatCnt" value=0}]
<ul id="navigation" class="sf-menu">
<li [{if $homeSelected == 'true' }]class="current"[{/if}]><a [{if $homeSelected == 'true'}]class="current"[{/if}] href="[{$oViewConf->getHomeLink()}]">[{oxmultilang ident="HOME"}]</a></li>
[{foreach from=$oxcmp_categories item=ocat key=catkey name=root}]
  [{if $ocat->getIsVisible() }]
    [{foreach from=$ocat->getContentCats() item=oTopCont name=MoreTopCms}]
        [{assign var="iCatCnt" value=$iCatCnt+1 }]
        [{if $iCatCnt <= $oView->getTopNavigationCatCnt()}]
            <li><a href="[{$oTopCont->getLink()}]">[{$oTopCont->oxcontents__oxtitle->value}]</a></li>
        [{else}]
            [{assign var="blShowMore" value=true }]
            [{capture append="moreLinks"}]
                <li><a href="[{$oTopCont->getLink()}]">[{$oTopCont->oxcontents__oxtitle->value}]</a></li>

skijo · March 24, 2016, 6:22pm

Danke vanilla thunder für deine schnelle Antwort.

Nun sitze ich vor dieser Datei habe mir Zeile 12 ein dutzend mal angeschaut und ich komme nicht drauf wie ich das umsetzen soll.

Vll bin ich auch einfach zum döm…

vanilla_thunder · March 24, 2016, 6:38pm

Das ist der link für die Startseite. Den musst du ändern wie du willst.

skijo · March 24, 2016, 7:41pm

reicht es wenn ich das <a class=“home-button-white” > am ende einfüge und in der css den rest mache?

skijo · March 24, 2016, 8:39pm

Habe nun folgendes geändert mit minimalem erfolg…

in der categorylist.tpl in Zeile 12:

<li [{if $homeSelected == 'true' }]class="current"[{/if}]><a [{if $homeSelected == 'true'}]class="current"[{/if}] href="[{$oViewConf->getHomeLink()}]"> <a class="home-button-white" ></a></li>

in der oxid.css ganz am ende eingefügt:

.home-button-white {
	background: url(../../img/basic-home-icon.png) no-repeat 0px 0px;
}

Das Ergebniss siehe Bild…

Vll jemand ein Tipp wie ich das Icon sichtbar bekommen. Kann gerne in dem Lila bleiben nur das man das Haus auch sieht…

skijo · March 24, 2016, 8:41pm

Bild vergessen

vanilla_thunder · March 24, 2016, 9:04pm

warum packst du das Bild nicht als ein echtes Bild rein?
<im src="…/home-icon.phng" />

skijo · March 25, 2016, 12:04pm

Hallo,

alles mögliche versucht aber es will einfach nicht. Unterhalb sieht man ein teil vom Haus aber das dach wird von dem Lila überblendet…

Schönen Karfreitag!