Benutzer-Werkzeuge
====== xtreme low-barrier widget ====== Problem:\\ Wenn man im widget ein eigenes stylesheet (low-barrier.css) im ChildtTheme verwenden will, funktioniert es nicht mehr. Der Fehler tritt schon auf, wenn man eine eigene css Datei im Ordner //ChildTheme/css/screen/low-barrier.css// hinterlegt hat. Als Basis eines eigenen css files sollte man sich am besten den entsprechenden part aus der //xtreme-one/css/screen/content.css// kopieren und diesen abändern. Zu beachten ist hierbei, das alle ''class'' Werte mit dem Anhang ''_auto'' von diesem befreit werden, da bei einem eigene Stylesheet dieser Wert nich in die class des ''<html>'' tags geschrieben wird. Hier als Beispiel mit den default Werten aus der content.css, welches nach Belieben angepasst und ergänzt werden können: <code css ChildTheme/css/screen/low-barrier.css> /* barrier free widget */ html.highcontrast body, html.highcontrast #header, html.highcontrast #primarynav, html.highcontrast #teaser, html.highcontrast #main, html.highcontrast #footer, html.highcontrast #siteinfo, html.highcontrast .comment, html.highcontrast pre, html.highcontrast code, html.highcontrast label { background-color: #000; background-image: none; color: #fff; border-color: #fff; } html.highcontrast a { color: #FFEA32; } html.highcontrast ul.xtreme_low_barrier li a.current span { color: #000; } .xtreme_low_barrier ul { margin: 0; } .xtreme_low_barrier ul li { margin: 0 3px 5px 0; height: 1.7em; vertical-align: middle; letter-spacing: normal; line-height: normal; text-transform: none; } .xtreme_low_barrier ul.horizontal li { float: left; } .xtreme_low_barrier ul li>span { display: inline-block; width: 4.5em; vertical-align: middle; } .xtreme_low_barrier ul li a { display: inline-block; width: 1.5em; height: 1.5em; text-align: center; vertical-align: middle; border: solid 1px transparent; font-weight: bold; margin-left: 3px; } #header .xtreme_low_barrier ul li a.current, .xtreme_low_barrier ul li a.current { border: solid 1px #FFA32B; background-color: #FFF1AD; color: #000; } .xtreme_low_barrier ul li a:hover { border: solid 1px #888; background-color: #ccc; color: #000; } .xtreme_low_barrier ul li a.original span { font-size: 100%; line-height: 140%;} .xtreme_low_barrier ul li a.medium span, .xtreme_low_barrier ul li a.themecontrast span, .xtreme_low_barrier ul li a.highcontrast span { font-size: 127%; line-height: 110%; } .xtreme_low_barrier ul li a.maximum span { font-size: 150%; line-height: 100%; } </code> **Jetzt muß man im Backend erst mal auf Theme generieren drücken, damit das eigene Stylesheet auch richtig eingebunden wird.** Die Kontrast Schaltung sollte nach diesem Schritt schon funktionieren, jedoch geht jetzt die Einstellung der Schriftgröße nicht mehr, falls man dies ebenfalls verwenden will.\\ Das liegt an einem Fehler in der Datei //xtreme-one/js/jquery/xtreme-one/jquery-low-barrier.min.js//. Hier wird die Funktion, welche dem ''<body>'' tag einen style mit der entsprechenden Schriftgröße geben soll, nicht mehr ausgeführt. Lange Rede, kurzer Sinn: Lade dier hier die zwei Dateien mit Klick auf den tab mit dem file Namen herunter und ersetze diese im Ordner //xtreme-one/js/jquery/xtreme-one///, dann funktioniert es auch mit den Schriftgrößen. <code jquery xtreme-one/js/jquery/xtreme-one/jquery-low-barrier.min.js> /** * Xtreme One * * @copyright Copyright 2010-2013, Inpsyde GmbH * @license see http://marketpress.com/agb/ * @link http://marketpress.com/product/xtreme/ * @package xtreme-one * * Modified by Sunflower to work with custom low-barrier.css * http://xfco.de/patch/155/xtreme-low-barrier **/ (function(e){var t=parseInt(e("body").css("font-size"));e.fn.extend({xtremeLowBarrier:function(n){var r={automatic:true,medium:150,maximum:200};this.options=e.extend(r,n);var i=this;return this.each(function(){var n=e(this);e("ul li a",n).click(function(n){n.preventDefault();e(this).blur();var r=e(this).attr("rel");if(e(this).hasClass("barrier-font")){if(!e("html").hasClass(r))e("html").removeClass("original").removeClass("medium").removeClass("maximum");e(".xtreme_low_barrier ul li a.barrier-font").removeClass("current");document.cookie="xfont="+r+"; path=/";var s=1;switch(r){case"medium":s=i.options.medium/100;break;case"maximum":s=i.options.maximum/100;break;default:s=1;break}e("body").css({"font-size":t*s+"px"});e("#imageheader .flex-media .flexslider .slides li a img").attr({width:"100%"});e('.xtreme_low_barrier ul li a.barrier-font[rel="'+r+'"]').addClass("current")}else if(e(this).hasClass("barrier-contrast")){if(!e("html").hasClass(r))e("html").removeClass("themecontrast").removeClass("highcontrast").removeClass("highcontrast_auto");e(".xtreme_low_barrier ul li a.barrier-contrast").removeClass("current");document.cookie="xcontrast="+r+"; path=/";e('.xtreme_low_barrier ul li a.barrier-contrast[rel="'+r+'"]').addClass("current");if(r=="highcontrast"&&i.options.automatic==true){r="highcontrast_auto"}}if(r!="original"&&r!="themecontrast")e("html").addClass(r)});var r=document.cookie.split(";");for(var s=0;s<r.length;s++){if(r[s].match(/^\s*xfont\s*=\s*/gi)){e("ul li a[rel='"+r[s].replace(/^\s*xfont\s*=\s*/gi,"")+"']",n).trigger("click")}if(r[s].match(/^\s*xcontrast\s*=\s*/gi)){e("ul li a[rel='"+r[s].replace(/^\s*xcontrast\s*=\s*/gi,"")+"']",n).trigger("click")}}})}})})(jQuery) </code> <code jquery xtreme-one/js/jquery/xtreme-one/jquery-low-barrier.js> /** XTREME THEME HEADER * Modified by Sunflower to work with custom low-barrier.css * http://xfco.de/patch/155/xtreme-low-barrier **/ (function($) { var initial_body_fontsize = parseInt($('body').css('font-size')); $.fn.extend({ xtremeLowBarrier: function(config) { var defaults = { automatic: true, medium: 150, maximum: 200 }; this.options = $.extend(defaults,config); var o = this; return this.each(function() { var el = $(this); $('ul li a', el).click(function(event) { event.preventDefault(); $(this).blur(); var html_class = $(this).attr('rel'); if($(this).hasClass('barrier-font')) { if(!$("html").hasClass(html_class)) $("html").removeClass('original').removeClass('medium').removeClass('maximum'); $('.xtreme_low_barrier ul li a.barrier-font').removeClass('current'); document.cookie = "xfont="+html_class+"; path=/"; // T.C. if (o.options.automatic == true) { var fac = 1.0; switch(html_class) { case 'medium': fac = o.options.medium / 100.0; break; case 'maximum': fac = o.options.maximum / 100.0; break; default: fac = 1.0; break; } $('body').css({ 'font-size' : (initial_body_fontsize * fac) +'px' }); // T.C. } $('#imageheader .flex-media .flexslider .slides li a img').attr({ 'width' : '100%'}); $('.xtreme_low_barrier ul li a.barrier-font[rel="'+html_class+'"]').addClass("current"); }else if($(this).hasClass('barrier-contrast')) { if(!$("html").hasClass(html_class)) $("html").removeClass('themecontrast').removeClass('highcontrast').removeClass('highcontrast_auto'); $('.xtreme_low_barrier ul li a.barrier-contrast').removeClass('current'); document.cookie = "xcontrast="+html_class+"; path=/"; $('.xtreme_low_barrier ul li a.barrier-contrast[rel="'+html_class+'"]').addClass("current"); if(html_class == 'highcontrast' && o.options.automatic == true) { html_class = 'highcontrast_auto'; } } if(html_class != 'original' && html_class != 'themecontrast') $("html").addClass(html_class); }); //execution of possible cookie settings var a = document.cookie.split(';'); for(var i=0; i<a.length; i++) { if (a[i].match(/^\s*xfont\s*=\s*/gi)) { $("ul li a[rel='"+a[i].replace(/^\s*xfont\s*=\s*/gi, '')+"']", el).trigger('click'); } if (a[i].match(/^\s*xcontrast\s*=\s*/gi)) { $("ul li a[rel='"+a[i].replace(/^\s*xcontrast\s*=\s*/gi, '')+"']", el).trigger('click'); } } }); } }); })(jQuery); </code> Um das default Verhalten wieder herzustellen, muß man das eigene low-barrier.css aus dem Ordner //ChildTheme/css/screen// wieder entfernen oder umbenennen und sollte im backend von xtreme-one das Theme neu generieren, damit der include des Stylesheets wieder entfernt wird. Hinweis an die Entwickler von MarketPress:\\ Im widget sollte man noch einen ergänzenden Hinweis aufnehmen, daß man das Theme neu generieren muß, damit das entsprechende file auch in die production.css aufgenomemmen wird, wenn ein eigenes low-barrier.css im Ordner //ChildTheme/css/sreen// enthalten ist.