Pagina 1 di 3 1 2 3 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 26

Discussione: Doppio CSS

  1. #1

    Doppio CSS

    Salve a tutti nel mio sito vorrei implementare una funziona che permette al visitatore di scegliere i colori del template e delle scritte, mi spiego meglio:

    Quando accedo al mio sito ci sono le scritte bianche nei contenuti e il logo è grigio, io attraverso un pulsante vorrei che se premuto fa diventare le scritte rosse ed il logo nero (esempio) in modo tale da permettere al visitatore la formattazione che più gli piace.

    L'ho visto in molti siti ed è una funzione veramente utile, sapete qualcosa a riguardo? qualche javascript, qualche codice... non saprei

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    intanto prepara alcuni file css (almeno due) che definiscano lo stile dei vari temi che vuoi poter far scegliere all'utente

    per la parte di switch (e nel caso fossi interessato/a per la parte di impostazione automatica in base al cookie) ti serve javascript.

    Se hai già i temi pronti da applicare ti sposto nel forum js.
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  3. #3
    ottimo allora li preparo, nel frattempo sposti ugualmente? ^^

  4. #4
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    Non so quanti browser lo supportino, ma potresti cavartela senza usare javascript assegnando l'attributo title...

    codice:
    <link href="static.css" rel="stylesheet" type="text/css">
    <link href="default.css" rel="stylesheet" type="text/css" title="Default Style">
    <link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
    <link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic">
    Con questo codice, ad esempio, in Firefox, nel menù Visualizza->Stile pagina, compariranno i tre fogli di stile Default Style, Fancy e Basic e l'utente potrà scegliere quale applicare. Il foglio di stile static.css invece, essendo privo dell'attributo title, non comparirà nella lista e non potrà essere disattivato dall'utente. Ma provalo anche con altri browsers.

    http://www.w3schools.com/tags/tag_link.asp


  5. #5
    No io vorrei farlo cambiare direttamente dalla mia home page, cliccando su delle immagini per esempio...

  6. #6
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    Prova così. Non ho fatto altro che imitare il comportamento del browser qualora l'utente utilizzasse il menu nativo del browser, di modo che lo script sia sempre sincronizzato con questo.

    Pagina HTML:

    codice:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Pagina vuota</title>
    <link href="static.css" rel="stylesheet" type="text/css">
    <link href="default.css" rel="stylesheet" type="text/css" title="Default Style">
    <link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
    <link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic">
    <script type="text/javascript">
    function chooseStyleSheet(sTitle) {
    	for (var iStyleSheetId = 0; iStyleSheetId < document.styleSheets.length; iStyleSheetId++) {
    		iStyleSh = document.styleSheets[iStyleSheetId];
    		if (iStyleSh.title) { iStyleSh.disabled = iStyleSh.title !== sTitle; }
    	}
    }
    </script>
    </head>
    
    <body>
    
    
    [ <span class="intLink" onclick="chooseStyleSheet('Default Style');">Default Style</span> | <span class="intLink" onclick="chooseStyleSheet('Fancy');">Fancy</span> | <span class="intLink" onclick="chooseStyleSheet('Basic');">Basic</span> ]</p>
    
    
    <span class="classeEsempio">Testo di esempio</span>
    
    
    
    </body>
    </html>
    static.css:

    codice:
    .intLink {
    	text-decoration: underline;
    	color: #0000ff;
    	cursor: pointer;
    }
    defult.css:

    codice:
    .classeEsempio {
    	color: inherit;
    	text-decoration: none;
    	font-style: normal;	
    	font-size: small;
    }
    fancy.css:

    codice:
    .classeEsempio {
    	color: red;
    	text-decoration: none;
    	font-style: italic;
    }
    basic.css:

    codice:
    .classeEsempio {
    	color: inherit;
    	text-decoration: none;
    	font-style: normal;
    }
    In questo esempio gli unici elementi a cambiare stile a ogni switch sono quelli con class="classeEsempio", ma puoi estendere i fogli di stile a tuo piacimento. Ricordati che puoi avere infiniti tag <link> con attributo rel uguale a stylesheet, ma purché i tag in questione non abbiano anche l'attributo title settato! Mentre invece tra quelli che fanno uso dell'attributo title, uno solo può (anzi, deve) avere l'attributo rel uguale a stylesheet, mentre gli altri devono avere l'attributo rel uguale a alternate stylesheet! Chiaro?

    P.S. Ovviamente lo switch sarà eseguito solo tra fogli di stile con attributo title...

  7. #7
    Non funziona.. xD

  8. #8
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    Maledetti browser che rimangono all'età della pietra Prova così:

    codice:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Pagina vuota</title>
    <link href="static.css" rel="stylesheet" type="text/css" />
    <link href="default.css" rel="stylesheet" type="text/css" title="Default Style" />
    <link href="fancy.css" rel="stylesheet" disabled="true" type="text/css" title="Fancy" />
    <link href="basic.css" rel="stylesheet" disabled="true" type="text/css" title="Basic" />
    <script type="text/javascript">
    function chooseStyleSheet(sTitle) {
    	for (var iStyleSheetId = 0, aLinkEls = document.getElementsByTagName("link"); iStyleSheetId < aLinkEls.length; iStyleSheetId++) {
    		iStyleSh = aLinkEls[iStyleSheetId];
    		if (iStyleSh.rel === "stylesheet" && iStyleSh.title) { iStyleSh.disabled = iStyleSh.title !== sTitle; }
    	}
    }
    </script>
    </head>
    
    <body>
    
    
    [ <span class="intLink" onclick="chooseStyleSheet('Default Style');">Default Style</span> | <span class="intLink" onclick="chooseStyleSheet('Fancy');">Fancy</span> | <span class="intLink" onclick="chooseStyleSheet('Basic');">Basic</span> ]</p>
    
    
    <span class="classeEsempio">Testo di esempio</span>
    
    
    
    </body>
    </html>
    Noterai delle modifiche (in rosso) che apparentemente sono in contraddizione con quanto ti avevo scritto precedentemente. Immagino capirai da solo perché la contraddizione è solo apparente. N.B. Copia tutto il codice, ché ho modificato anche la funzione!

    P.S. Con questa seconda versione potrai usare solo fogli di stile esterni (ovviamente quelli che servono allo scopo! i fogli di stile interni al documento potrai ancora utilizzarli, ma non ai fini dello switch).

  9. #9
    Funziona **

    solo che però quando clicco su un qualsiasi link ritorna come prima... puoi aiutarmi?

  10. #10
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    Non l'ho provato. In rosso le aggiunte. Fammi sapere... P.S. Credo che affinché funzioni debba trovarsi online!

    codice:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Pagina vuota</title>
    <link href="static.css" rel="stylesheet" type="text/css" />
    <link href="default.css" rel="stylesheet" type="text/css" title="Default Style" />
    <link href="fancy.css" rel="stylesheet" disabled="true" type="text/css" title="Fancy" />
    <link href="basic.css" rel="stylesheet" disabled="true" type="text/css" title="Basic" />
    <script type="text/javascript">
    function chooseStyleSheet(sTitle) {
    	if (!sTitle) { return; }
    	for (var iStyleSh, iStyleSheetId = 0, aLinkEls = document.getElementsByTagName("link"); iStyleSheetId < aLinkEls.length; iStyleSheetId++) {
    		iStyleSh = aLinkEls[iStyleSheetId];
    		if (iStyleSh.rel === "stylesheet" && iStyleSh.title) { iStyleSh.disabled = iStyleSh.title !== sTitle; }
    	}
    	localStorage.setItem("customStyle", sTitle);
    }
    </script>
    </head>
    
    <body onload="if(localStorage.hasOwnProperty('customStyle')){chooseStyleSheet(localStorage.getItem('customStyle'));}">
    
    
    [ <span class="intLink" onclick="chooseStyleSheet('Default Style');">Default Style</span> | <span class="intLink" onclick="chooseStyleSheet('Fancy');">Fancy</span> | <span class="intLink" onclick="chooseStyleSheet('Basic');">Basic</span> ]</p>
    
    
    <span class="classeEsempio">Testo di esempio</span>
    
    
    
    </body>
    </html>

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.