[NODEBB] Help for my custom CSS

phenomlab

@DownPW After spending a lot of time on the theme switcher (see referenced post above), I re-wrote some of it as found that there were caching issues with CSS as it always calls the same version number. The new function below resolves that issue.

I also removed the website prefix, as with relative paths, this is not required

// ------------------------------------------
// Theme Switcher
// ------------------------------------------
// On choisit une chaine de caractère aléatoire pour affecter un numéro de version au fichier CSS. 
// The function below creates a random string which we use for CSS versioning to prevent cache conflicts
function generateRandomString(length) {
    var text="";
    var possible="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    for (var i=0;
    i < length;
    i++) {
        text+=possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return text;
}

$(document).ready(function () {
    var string=generateRandomString(10);
    $("#random_string").text(string);
    // This variable gets the theme ID 
    // Cette variable obtient l'ID du thème
    var whichTheme=localStorage.getItem("theme");
    // This variable gets the active theme's actual URL
    //Cette variable obtient l'URL réelle du thème actif
    var activeTheme=localStorage.getItem("activeTheme");
    // This variable appends the dropdown list to the existing panel
    // Cette variable ajoute la liste déroulante au panneau existant
    var panel=$('<li id="switcher" class="dropdown text-center"> \
<label for="theme-control-list-check" class="dropdown-toggle" data-toggle="dropdown" id="theme_dropdown" title="" role="button" data-original-title="Theme" aria-expanded="false"> \
<a class="btn-link" title="Theme Switcher" href="#"><i id="ticon" class="fa fa-fw fa-lightbulb-o"></i><span class="visible-xs-inline">Theme Switcher</span></a> \
</label> \
<ul id="theme" class="dropdown-menu"> \
<li><a id="default" href="#" rel="/assets/client.css?v=e02phpkima0">Default</a></li> \
<li><a id="default dark" href="#" rel="/assets/customcss/default_dark.css">Default Dark</a></li> \
<li><a id="Light Flat" href="#" rel="/assets/customcss/testflat.css">Light Flat</a></li> \
<li><a id="Dark Flat" href="#" rel="/assets/customcss/testflat.css">Dark Flat</a></li> \
<li><a id="Dark Neon Aqua" href="#" rel="/assets/customcss/dark_neon_aqua.css">Dark Neon Aqua</a></li> \
<li><a id="Dark Neon Blue" href="#" rel="assets/customcss/dark_neon_blue.css">Dark Neon Blue</a></li> \
<li><a id="Dark Neon Green" href="#" rel="/assets/customcss/dark_neon_green.css">Dark Neon Green</a></li> \
<li><a id="Dark Neon Solary" href="#" rel="/assets/customcss/dark_neon_solary.css">Dark Neon Solary</a></li> \
<li><a id="Dark Neon White" href="#" rel="/assets/customcss/dark_neon_white.css"">Dark Neon White</a></li> \
<li><a id="Eva 00" href="#" rel="/assets/customcss/eva_00.css">Eva.00</a></li> \
<li><a id="Eva 01" href="#" rel="/assets/customcss/eva_01.css">Eva.01</a></li> \
<li><a id="Eva 01 Purple Green"href="#" rel="/assets/customcss/eva_01_purple_green.css">Eva.01: Purple-Green</a></li> \
<li><a id="Eva 02" href="#" rel="/assets/customcss/eva_02.css">Eva.02: Red-Orange</a></li> \
</ul> \
</div> ');
    // See if there is an active theme selected in localStorage. If none selected, use the default. If there is a theme in localStorage, use that and apply it
    // Regarde s'il y a un thème actif sélectionné dans "localStorage". Si aucun n'est sélectionné, utilise la valeur par défaut. 
    // S'il y a un thème dans localStorage, on l'utilise et on l'applique.
    if (whichTheme) {
        $("head").append("<link href='" + activeTheme + '?version=' + string + "' type=\"text/css\" rel=\'stylesheet\' />");
    }
    else {
        // No need to include anything here as there's no CSS to add.
        // Pas besoin d'inclure quoi que ce soit ici car il n'y a pas de CSS à ajouter.
    }
    $('ul#logged-in-menu').prepend(panel);
    $('ul#logged-out-menu').prepend(panel);
    if (utils.findBootstrapEnvironment()==='xs') {
        $('#menu').prepend(panel);
    }
    $(document).ready(function () {
        // Listen to the NAV dropdown for any changes
        // Écoute la liste déroulante NAV pour tout changement de thème
        $("#theme li a").on("click change", function () {
            // If we detect a change, append the selected CSS file into the DOM 
            // Si un changement est détecté, on ajoute le fichier CSS sélectionné dans le DOM (Document Object Model)
            var thishref=$(this).attr('rel');
            $("link[rel=stylesheet]").attr('href', thishref + "?version=" + string + "");
            //location.reload();
            //$("head").append("<link href='" + $(this).attr("rel") + $(this).attr("id") + " type=\'text/css\' rel=\'stylesheet\' />");
            location.reload();
            // This variable stores the selected theme ID
            // Cette variable stocke l'ID du thème sélectionné
            var selected=$(this).attr("id");
            // This variable stores the selected theme link 
            // Cette variable stocke le lien du thème sélectionné
            var theTheme=$(this).attr("rel");
            // This variable updates the selected theme ID
            // See if "default" has been selected. If it has, then...
            // Cette variable met à jour l'ID du thème sélectionné
            // Regarde si "default" a été sélectionné. Si c'est le cas, alors...
            if (selected==='default') {
                localStorage.setItem("theme", "");
                // This variable will strip the current appeneded theme ID
                // Cette variable supprimera l'ID du thème actuellement ajouté
                localStorage.setItem("activeTheme", "");
                // This variable will strip the current appeneded theme URL (HREF)
                // Finally, we have to reload the page to effect the changes
                // Cette variable supprimera l'URL actuelle du thème ajouté (HREF)
                // Enfin, on recharge la page pour effectuer les modifications
                location.reload();
            }
            // If any other theme is selected, carry on as normnal, and update localStorage
            // Si un autre thème est sélectionné, continuez normalement et mettez à jour localStorage
            else {
                localStorage.setItem("theme", selected);
                // This variable updates the actual href of the CSS file
                // Cette variable met à jour le href réel du fichier CSS
                localStorage.setItem("activeTheme", theTheme);
                //window.location.href = window.location.href
            }
            // We use return false to prevent the browser from reloading or following any HREF links
            // On utilise la fonction "return false" pour empêcher le navigateur de recharger ou de suivre les liens HREF
            //return false;
        }
        );
    }
    );
}

);
// When hovering over the #switcher element, target the i class and add 'themeoff'
// Lorsque du  survol de l'élément #switcher, on cible la classe CSS "i" et on ajoute le CSS "themeoff"
$(document).on('mouseenter', '#switcher', function() {
    $('#switcher i').addClass("themeoff");
}

);
// When leaving the however state, target the i class and remove 'themeoff'
// Lorsque l'on quitte l'état, on cible la classe CSS "i" et on supprime le CSS "themeoff"
$(document).on('mouseleave', '#switcher', function() {
    $('#switcher i').removeClass("themeoff");
}

);

DownPW

– The modification for resolve cache problem/CSS number version is very great

– I have just change the CSS class for change icon on JS Script here :

var panel = $('<li id="switcher" class="dropdown text-center"> \
<label for="theme-control-list-check" class="dropdown-toggle" data-toggle="dropdown" id="theme_dropdown" title="" role="button" data-original-title="Theme" aria-expanded="false"> \
<a class="btn-link" title="Theme Switcher" href="#"><i id="ticon" class="fa fa-fw fa-toogle-o"></i><span class="visible-xs-inline">Theme Switcher</span></a> \

– I have light and dark theme, so I prefer a universal button like toogle ON/OFF

Toogle Off icon on Default Theme :
Toogle On icon on each other theme :

– ACP/CSS :

/*Switch toogle Off (Off:204 - On:205*/
.fa.fa-toogle-o:before {
    content: "\f204";
    font-size: 16px;
}

– Each theme CSS :

/*Switch toogle Off (Off:204 - On:205*/
.fa.fa-toogle-o:before {
    content: "\f205";
    font-size: 16px;
}

I have trad comment line too !!

I put the topic on solved status but it’s not excluded that I return here to ask questions about CSS that I will have trouble finding for future themes if it does not bother !

phenomlab

@downpw some really nice enhancements there !

DownPW

I forgot this.

– On position text and icon of theme switcher, I have added padding-top to ventilate the surrounding area and align all icon :

/*Smartphone*/
@media all and (max-width: 1024px)
{
/*VIOLENCE: BUGFIX: Placement du "Theme Switcher" */
    #switcher {
    list-style: none;
    margin-left: -80px;
    padding-top: 15px;
}
}

– And I also improved the space between the icon and the text :

@media all and (max-width: 1024px)
{
#switcher .fa-fw {
    text-align: center;
    width: 1.25em;
    padding-right: 25px;
}
}

– Result:

phenomlab

@downpw another great addition

DownPW

@phenomlab

An idea for CSS code for that button (Abandon) after click ?

phenomlab

@downpw Can you expand on that ?

DownPW

color, background color and after a click on the abandon button

phenomlab

@downpw Ok. Do you have a mock-up in terms of what you’d be looking for ? I think I understand, but it will require jQuery

DownPW

@phenomlab

I don’t think so JQuery are necessary becausei hav not that on other themes. Maybe a focus button ?

I want to fix this color background after a click on “Discard” Button when I reply to a topic.

For example you don’t have this on sudonix.com

Just to find the correct CSS code i guess

I have the same problem on login button

phenomlab

@downpw Something like this ?

button.btn.btn-default.composer-discard:focus {
    background: red;
}

DownPW

Very odd @phenomlab

alt text

phenomlab

@downpw Expected, because the CSS class is :focus so on mouseout event, the focus is lost and the CSS will no longer apply. This is why you (probably) need jQuery

DownPW

Nope, I don’t think so because I haven’t got the problem on an another themes and here too

phenomlab

@downpw Can you provide the same example with another theme ?

DownPW

@phenomlab

alt text

phenomlab

@downpw So (for example) do you want the Discard button to turn red if you you click Confirm, or am I off track here ? Not entirely sure what you’re after

DownPW

@phenomlab Never mind already found the right CSS property would be nice

phenomlab

@downpw Do you mean this one

button.btn.btn-default.composer-discard:focus {
    background: red;
}

Or another ?

DownPW

@phenomlab Another I think

[NODEBB] Help for my custom CSS

Did this solution help you?

Related Topics

CSS code customization for the link preview plugin

Nodebb design

Sidebar Widget is no longer on the side!

Difficult to move posts now, on mobile.

Plugin reaction Bug

ineffecient use of space on mobile

[NodeBB] Import custom Font

[NODEBB] Stats

[NODEBB] Help for my custom CSS

Did this solution help you?

Related Topics

Individual Categories