Neuigkeiten:

moziloCMS verwendet Cookies. Wenn Sie auf unserer Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu Datenschutzerklärung
moziloCMS Layouts
moziloCMS Plugins

Hauptmenü

searchicon PNG

Begonnen von Thorstn, 03. August 2016, 00:13:41

« vorheriges - nächstes »

Thorstn

Standardmäßig ist für das Searchicon (Symbol) die GIF-Datei (searchicon.gif) in moziloCMS vorgesehen. Für grafisch anspruchsvollere Symbole würde die (zusätzliche) Definition PNG als Format sehr viel Sinn machen.

Bisher behelfe ich mir mit einem Eingriff in das CMS-System, was dauerhaft (bei Updates) mühselig ist.

Kurz und gut: ist es möglich, .PNG Grafiken - als Alternative zur .GIF Grafik - im Layout-Ordner als das Standard-Symbol zu packen und dass es vom moziloCMS verarbeitet wird?

Gruß,
Thorsten
www.mad-it.de - Wir lösen keine Probleme. Wir machen sie.
Webdesign aus Bochum

djr

@Thorstn: Hilf Dir doch per CSS.


/* Skizze */
#searchfieldset {
    position: relative;
    overflow: hidden;
}
input.searchbutton {
    position: absolute;
    padding-left: 999px;
    background-image: url("/pfad/zur/grafik.png");
    background-repeat: no-repeat;
}


Warum auch immer mozilo hier ein <input type="image" ... benutzt?!?

Aggi

Hei,

öffne die SearchClass.php bei Zeile 264 searchicon.gif auf .png ändern und bei Zeile 288 auch ändern.
Es ist noch kein Meister vom Himmel gefallen.

djr

Zitat von: Aggi am 05. August 2016, 16:56:07
Hei,

öffne die SearchClass.php bei Zeile 264 searchicon.gif auf .png ändern und bei Zeile 288 auch ändern.
Zitat von: Thorstn am 03. August 2016, 00:13:41
Bisher behelfe ich mir mit einem Eingriff in das CMS-System, was dauerhaft (bei Updates) mühselig ist.

Thorstn

Danke für den Tipp, Aggi, aber wie djr bereits richtig zitiert hat, behelfe ich mir mit genau dieser Maßnahme (Eingriff in die SearchClass.php)  ;)

Dauerhaft wäre es besser, wenn das CMS sowohl .gif als auch .png von Hause aus berücksichtigen würde. Eine Lösung könnte sein, dass das CMS (zwar) nach beiden Formaten "sucht", aber nur das nimmt, welches im /grafik Ordner des Layouts hinterlegt ist. Der/die Layouter werden sich dann (zukünftig) an ein einziges Format halten, schätzungsweise der .png Datei. Oder anders ausgedrückt: es darf nur ein einziges searchicon Symbol im Layouts-Ordner vorhanden sein, .gif oder .png

Wäre super, wenn das (dauerhaft) möglich wäre  :)
www.mad-it.de - Wir lösen keine Probleme. Wir machen sie.
Webdesign aus Bochum

djr

Zitat von: Thorstn am 09. August 2016, 22:51:25
Dauerhaft wäre es besser, wenn das CMS sowohl .gif als auch .png von Hause aus berücksichtigen würde.
... und .jpg und .svg und font-icons. ;)

Der Fehler ist, dass hier von mozilo ein <input type="image"...> statt eines button gesetzt wird.
Ein type="image" hat an dieser Stelle keine direkte Funktion (d.h. die übergebenen x-y-Koordinaten werden nicht genutzt).
Und für die Gestaltung ist CSS und nicht HTML zuständig.

@Thorstn: probier' es mit CSS.

Wichtig hierbei ist:

  • Den searchbutton-Inhalt mit padding zu verdrängen. Damit der Bereich noch klick-bar ist.
  • Das, den Such-Button umschließende, Element mit overflow: hidden; und einer Größenangabe zu versehen.
  • Dein gewünschtes Bild als Hintergrund einbauen.

Bei Fragen: fragen.

Thorstn

Danke @ djr, ich probiere das mal aus mit CSS  ;)
www.mad-it.de - Wir lösen keine Probleme. Wir machen sie.
Webdesign aus Bochum

marusti

Ist zwar schon etwas länger her aber falls es noch aktuell ist, könnte man sowas in der Art machen und in die nächste Version als Standard einbauen. Vielleicht kann man auch noch etwas mehr machen, zb. wenn kein Icon vorhanden den HTML Tag ändern und auf Button könnte man vielleicht auch gleich umstellen.
SearchClass.php ab Zeile 259 ersetzen
function getSearchForm() {
        global $language, $LAYOUT_DIR, $LAYOUT_DIR_URL, $CatPage, $SEARCH_REQUEST;
        $search_icon= glob($LAYOUT_DIR.'/grafiken/searchicon.*');
        $draft = '';
        if(DRAFT)
            $draft = '<input type="hidden" name="draft" value="true" />';
        $query = str_replace(array('"',"'","[","]","{","}"),array("&quot;","&apos;","&#091;","&#093;","&#123;","&#125;"),trim(rawurldecode($SEARCH_REQUEST)));
        return '<form accept-charset="'.CHARSET.'" method="get" action="'.$CatPage->get_Href(false,false).'" class="searchform">'
                .'<fieldset id="searchfieldset">'
                .$draft
                .'<input type="hidden" name="action" value="search" />'
                .'<input type="text" name="search" value="'.$query.'" class="searchtextfield" />'
                .'<input type="image" src="'.$search_icon[0].'" alt="'.$language->getLanguageHtml("message_search_0").'" class="searchbutton" />'
                .'</fieldset>'
                .'</form>';
    }
Funktioniert mit folgenden Einschränkungen: Icon muss als Bilddatei vorhanden sein (keine Webfonts) und wenn mehrere mit dem Namen "searchicon" vorhanden sind, wird das erste genommen (Alpabetisch der Dateiendung nach(

marusti

oder ganz anders um es optisch noch ein bisschen aufzuwerten
    function getSearchForm() {
        global $language, $CatPage, $SEARCH_REQUEST;
        $draft = '';
        if(DRAFT)
            $draft = '<input type="hidden" name="draft" value="true" />';
        $query = str_replace(array('"',"'","[","]","{","}"),array("&quot;","&apos;","&#091;","&#093;","&#123;","&#125;"),trim(rawurldecode($SEARCH_REQUEST)));
        return '<form accept-charset="'.CHARSET.'" method="get" action="'.$CatPage->get_Href(false,false).'" class="searchform">'
                .$draft
                .'<input type="hidden" name="action" value="search" />'
                .'<input class="searchtextfield" type="text" name="search" value="">'
                .'</form>';
    }
und dann CSS als Beispiel
.searchtextfield{
border: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path fill='%23838D99' d='M13.22 14.63a8 8 0 1 1 1.41-1.41l4.29 4.29a1 1 0 1 1-1.41 1.41l-4.29-4.29zm-.66-2.07a6 6 0 1 0-8.49-8.49 6 6 0 0 0 8.49 8.49z'></path></svg>");
background-repeat: no-repeat;
background-position: 10px 5px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .05);
border-radius: 5px;
padding: .5em 1em .5em 2.5em
}
Das Icon kann dann innerhalb der CSS geändert werden über "background-image" (kann auch eine normale Bilddatei sein) und auch die Position über "background-position".

hheigl

Gute Idee!  Ich würde vorschlagen, dies in die nächste Rev. einzubauen!