Most egy olyan kódot hoztam nektek, amellyel egy 'CSS váltót' készíthettek. CSS kódokkal foglalkozó oldalakra szuper, hiszen enélkül nem nézhető át a teljes oldal élőben, hogy hogy is fog kinézni. Igy viszont nem kell többé próbamodulokkal, esetleg próbaoldalakkal küzedeni, egyetlen kattintásra megváltoztatható az oldal kinézete.

Aki ki szeretné próbálni, az itt megteheti: CSS váltó demó (A példa css kódokért köszönet Efruse-nak)

A kód a bővebben rész után található.

Az alábbi kódot egy oldalmodulba kell beilleszteni:

Mint általában, itt is van néhány rész, amit módosítanunk kell. Mivel itt az oldalon található alap CSS sok esetben zavaró (az új nem írja teljesen felül, stb), ezért nem árt eltávolítani. CSS kódot kétféleképpen is megadhatunk: Elhelyezhetjük oldalmodulban, vagy külső fájlként is hozzácsatolhatjuk az oldalhoz. Épp ezért mind a két módszerre írtam bele egy kis ellenőrzést, amit módosítani kell a saját oldalunk szerint:

Oldalmodulban lévő CSS kód esetén

/*  if( $( ' table[module_id="36921729"] ' ).length > -1 ){
        $('table[module_id="36921729"]').empty();
    } */

Az alábbi kódnál először is el kell távolítani a kommentező részt: /* és */ törüljük ki ezeket, különben nem fog végrehajtódni. Ezután a module_id= után, " " közé annak a modulnak az ID száma kell, amiben van az oldal CSS kódja. Fontos, hogy abban a modulban csak a CSS kód legyen, egyéb szkripteket át kell rakni egy másik modulban, különben azok is letörlődnek (persze csak ideiglenesen, nem kell megijedni, nem fog elveszni semmi, csak a felhasználó elől "tűnnek el").

Külső CSS fájl esetén

Az alábbi kódban a CSS fájl url-jét kell 2 helyen lecserélni arra az url-ra, amit használsz az oldaladon. 

// külső css fájl esetén a css fájlod nevét add meg itt
    if ( $( ' link[href="http://nikkiiworld.flaunt.nu/gp_css/css1.css"] ' ).length > -1 ){
        $( ' link[href="http://nikkiiworld.flaunt.nu/gp_css/css1.css"] ' ).remove();
    }

Végül a kód, amivel új CSS-t tudunk érvényesíteni:

<a href="#" onclick="changeStyle( ' //cssthemes.gportal.hu/portal/cssthemes/upload/770613_1459167035_05517.css ' )">CSS kipróbálása</a>

A changeStyle után ' ' jelek között kell megadni hozzá az új CSS fájl url címét.

És már működik is. :)