But if you want to add some style to the site, let the visitors choose, or you want to adjust the style of the site, and before making a decision to let visitors first, this is also a good way to avoid the pain of always switching themes.
Switch effects refer to this site.
1. Toggle the style of the button code:
Copy Code code as follows:
<div id= "Style-switch" >
<ul>
<li><a href= "#?style=white" rel= "white" class= "Styleswitch White" >Day</a></li>
<li><a href= "#?style=black" rel= "Black" class= "Styleswitch" >Night</a></li>
</ul>
</div>
The above button code is placed according to your website design. For example, I put it in the header.php file here.
2. Style Reference Code:
Copy Code code as follows:
<?php if ($_cookie[' style '] = = ' black '):?>
<link rel= "stylesheet" type= "Text/css" href= "<?php bloginfo" (' Template_url '); ">/black.css" title= "BLACK" media= "Screen"/>
<link rel= "Alternate stylesheet type=" Text/css "href=" <?php bloginfo (' Template_url ');? >/white.css "Title=" White "media=" screen "/>
<?php Else:?>
<link rel= "stylesheet" type= "Text/css" href= "<?php bloginfo" (' Template_url ');? >/white.css "title=" white " media= "Screen"/>
<link rel= "Alternate stylesheet type=" Text/css "href=" <?php bloginfo (' Template_url ');? >/black.css "Title=" Black "media=" screen "/>
<?php endif;?>
Here I briefly explain:
Because in the back of the JS code will be in the browser cookie part of the cookie record "style", so here I will let the browser according to the record of the style call (here for two styles, a "white", another "black").
When the browser has a "style" cookie record and is recorded as "Black", read the Black.css file first, which can be said to be the main style file, and then read the auxiliary style (which is for the style needed to switch), White.css.
If the browser does not have any "style" style cookie records, or if the style cookie for "style" is recorded as "white," the topic reads the WHITE.CSS file and then reads the Black.css file.
What you need to add here is that using a cookie from PHP can be more efficient than using a cookie read in JS. Because I used to use JS to read the cookies, but because JS loading or need a little time, so in the switch style after the page is not perfect browsing. If you have previously found that choosing a black theme, and then browsing the page, there will be the first moment of the white theme, then the black theme of the phenomenon. That's what I'm going to explain. There is no such problem with PHP code now.
3. JavaScript Part code: (Note that you have called the jquery Library in the website)
Copy Code code as follows:
(Function ($)
{
$ (document). Ready (function () {
$ ('. Styleswitch '). Click (function () {
$ (' body '). Append (' <div id= "overlay"/> ");
$ (' #overlay ')
. css ({
Display: ' None ',
Position: ' Absolute ',
top:0,
left:0,
Width: ' 100% ',
Height: ' 2000% ',
zindex:1000,
Background: ' Black '
})
. FadeIn (500);
Switchstylestyle (This.getattribute ("rel"));
$ (' #overlay '). fadeout (500);
return false;
});
});
function Switchstylestyle (stylename)
{settimeout (function () {
$ (' link[@rel *=style][title] '). Each (function (i)
{
This.disabled = true;
if (This.getattribute (' title ') = = StyleName) this.disabled = false;
});}, 500;
Createcookie (' style ', stylename, 365);
}
}) (JQuery);
The above section is the Click Action Section. I added a #overlay block style in the middle to make a light box effect during the switching process, which is more natural than a sudden switch.
You will then need to add the functional code that produces the cookie record:
Copy Code code as follows:
function Createcookie (name,value,days)
{
if (days)
{
var date = new Date ();
Date.settime (Date.gettime () + (days*24*60*60*1000));
var expires = "; Expires= "+date.togmtstring ();
}
else var expires = "";
Document.cookie = name+ "=" +value+expires+ "; path=/";
}
There is also a feature code to add the delete cookie record:
Copy Code code as follows:
function Erasecookie (name)
{
Createcookie (Name, "",-1);
}
To this end, the completion of the above three can be, I hope you see understand.
