Responsive Opt-Out allows visitors of your site to switch between the flexible and fixed width layout.
This simple setup creates a body class called “responsive” and “fixed-width” both are added to the body class of your Theme. These two classes are used to define whether or not visitor wants a “responsive” environment.
Here is a demo site that I have created using Responsive:
This the code you use for the switch buttons.
<a href="#" onclick="return FixedWidth();" class="fixed-width-link">Fixed Width</a> <a href="#" onclick="return Responsive()" class="responsive-link">Reponsive</a>
This CSS would display the right button in the right view.
.responsive .fixed-width-link {
display: block!important;
}
.responsive .responsive-link {
display: none!important;
}
.fixed-width .fixed-width-link {
display: none!important;
}
.fixed-width .responsive-link {
display: block!important;
}
Here I was working in a child theme so was unable to edit the parent media queries but was still able to get a good result resting the css in the media queries.
The basic fixed width CSS needed for Responsive would be:
/* =Fixed Width
-------------------------------------------------------- */
.fixed-width #container,
.fixed-width #footer {
width: 960px!important;
}
.fixed-width .grid,
.fixed-width .grid-right,
.fixed-width .menu ul,
.fixed-width .menu li,
.fixed-width .footer-menu li,
.fixed-width .sub-header-menu li {
float: left!important;
}
.fixed-width .top-menu {
float: right!important;
}
.fixed-width #logo {
float: left!important;
}
.fixed-width .tinynav {
display: none!important;
}
.fixed-width .sb-holder {
display: none!important;
}
.fixed-width .menu {
display: block!important;
}
.fixed-width #featured p {
font-size: 18px!important;
line-height: 27px!important;
}
.fixed-width .featured-title {
font-size: 60px!important;
}
.fixed-width .featured-subtitle {
font-size: 2.25em!important;
}
.fixed-width .call-to-action a.button {
font-size: 24px!important;
padding: 15px 35px!important;
}
.top-widget {
float: right!important;
}
.fixed-width .top-widget area,
.fixed-width .top-widget select,
.fixed-width .top-widget textarea,
.fixed-width .top-widget input[type="text"],
.fixed-width .top-widget input[type="password"] {
width: auto!important;
}
.fixed-width .widget-title,
.fixed-width .widget-title-home h3 {
font-size: 24px!important;
height: 23px!important;
line-height: 23px!important;
text-align: left!important;
}
.fixed-width .main-nav #responsive_current_menu_item {
display: none!important;
}
.fixed-width .main-nav .menu {
top: 0;
}
.fixed-width .main-nav .menu a {
font-weight: 700!important;
}
.fixed-width .main-nav .menu li a {
color: #fff;
border: none;
}
.fixed-width .main-nav .menu li.current_page_item,
.fixed-width .menu .current_page_item a,
.fixed-width .menu .current-menu-item a,
.fixed-width .main-nav .menu li {
background-color: transparent;
}
.js .fixed-width .main-nav .menu li a:hover,
.js .fixed-width .main-nav .menu li li a:hover {
background-color: #808080;
background-image: -webkit-gradient(linear,left top,left bottom,from(#808080),to(#363636));
background-image: -webkit-linear-gradient(top,#808080,#363636);
background-image: -moz-linear-gradient(top,#808080,#363636);
background-image: -ms-linear-gradient(top,#808080,#363636);
background-image: -o-linear-gradient(top,#808080,#363636);
background-image: linear-gradient(top,#808080,#363636);
color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#808080,endColorstr=#363636);
}
You can also find the plugin on github.
Extra
I would be interested to see how many visitor use the button. You can track the number of click of the buttons with the use of Google analytic events. The results can be viewed in the Google Analytic dashboard. The html for these buttons will look like this.
<a href="#" onclick="_gaq.push(['_trackEvent', 'Click', 'Responsive Opt-Out', 'Fixed Width']); return FixedWidth();" class="fixed-width-link">Fixed Width</a> <a href="#" onclick="_gaq.push(['_trackEvent', 'Click', 'Responsive Opt-Out', 'Responsive']); return Responsive()" class="responsive-link">Reponsive</a>
Thank you Andrew for supporting this plugin.
Ulrich this is amazing!
Thank you for creating the plugin and for this great post/tutorial as well.
Emil
Thank you for your kind words.
Upon resetting responsive having selected fixed width the three widget areas align vertically rather than horizontally. No amount of moving and reloading can coax it to display as it should.
Please post your question here.
http://wordpress.org/support/plugin/responsive-opt-out
Thanks
Thank you so much for taking the initiative to create this plugin – works great in themeid responsive theme.
After researching several responsive and mobile themes, I found it actually shocking how rare it is to actually find this feature.
When using mobile themes in the past, with no opt-out option, we’ve received too many complaints from site visitors. I think people often like to control their own website experience, not have you control it for them.
Our website has a program for monitored online visitors (for chat support). Just the other day, when I glanced at the online visitors, I noticed that 4 out of 15 users were choosing to use the responsive opt-out feature. There’s the proof!
Thanks for great information
Your welcome!
you might want to edit the in-page-code switch buttons to reflect the “onclick” state.
<a href="#" rel="nofollow">Fixed Width</a><a href="#" rel="nofollow">Reponsive</a>
greg
I am not sure I understand you.
I installed the opt-out plugin, and then added the button code above (and the very helpful CSS code above, thank you), but nothing happened. So I read the plugin readme.txt [more closely] and I saw a difference in the button code mentioned in the readme.txt file. The readme.txt buttons have the – onclick=”return FixedWidth();” – and – onclick=”return Responsive()” code; the button code above does not have that code and did not work at all.
The readme.txt button code sort-of worked; my demo site has the opt-out links (desktop | mobile) in the header http://gregory-george.com but the opt-out is not consistent.
Site is mobile responsive by default, click desktop then move through some pages, then click back to mobile and move through some pages. The site should be mobile responsive, but some pages remain fixed desktop.
I have tested on a virgin wordpress 3.5.1 with responsive 1.9.1 child theme, same result.
I did fix some other menu issues in the virgin install… added after “Header Menu (Primary)”
/* fix for fixed width menu
———————————————— */
.menu {
margin: 0 auto;
text-align: left;
}
.menu li {
display: inline-block;
float: none;
width: auto;
}
.menu li li {
display: block;
text-align: left;
}
.menu li li a {
display: block;
float: none;
text-align: left;
}
.menu ul {
left: auto;
}
Thanks, I corrected the html code in the post. I have also updated the plugin. There was a cookie issue.
I am not sure about the menu css that you shared.
You might want to read this post too.
http://themeid.com/docs/adding-css-to-the-child-theme/
Thanks for the 0.2 update. Your efforts are appreciated. I cleared my cache in six windows browsers IE8, IE9, CM26, OP12, SF5 and FF20; Firefox 20 is the only browser that recognized the cookie fix. The update was tested on virgin localhost WP install and live gregory-george.com
I would try to work the issue to help, but my code skills do not run that deep.
The “menu css” I shared fixed a problem I was having with the tinynav menu staying open upon entering the page after installing the opt-out plugin. (virgin wordpress 3.5.1 with responsive 1.9.1 child theme)
In your case the cookie is not being set what your preference is. I will look into it. I think it would be best if you started a support ticket.
http://wordpress.org/support/plugin/responsive-opt-out
top menu code needs fixing too.
.fixed-width .grid,
Thanks I fixed that.