Okay,
So I figured out on my own how to make a mobile site out of an Artisteer template.
Basically, I changed the sheet to 100% fluid width, minimum 300 px, one column, got rid of the menu and replaced it with a vertical menu, got rid of most of the blocks or put them under the vertical menu, made everything smaller and simpler. Smaller fonts, got rid of most of the padding except for 3px, made the header shorter, made the vertical menu bars tall enough to press with a finger, etc. My new mobile-friendly site looks great.
So now what? Do I export it as a WordPress theme and then have two installations of WordPress for every website?
Or do I export it as html, use a redirect WordPress plugin, an add an RSS feed?
Hmm...I think I may try html, but would love some feedback anyhow.
You definitely don't want two installations of Wordpress... double the admin overhead, duplicate content etc - not the way to go.
Easiest way IMO - and indeed, this is the way recommended by some commercial mobile theme developers - is to use a plugin like http://wordpress.org/extend/plugins/mobile-theme-switcher/ which simply detects the user agent of the client's device and switches to your mobile theme if it's a mobile device. So one Wordpress installation, two themes.
I know recommending a pluign isn't really the SO way :) - you can always look through the code and integrate it directly into your theme if you needed to.
Related
I'm in the process of adding Google CAPTCHAs to 3 different Gravity Forms on a Wordpress website. I've integrated everything successfully and all appears to be working, but I am running into problems overriding Google's CSS in order to customize the CAPTCHA appearance. This is particularly problematic when it comes to sizing, as the CAPTCHAs aren't mobile responsive and in one instance it spills over my sidebar and into the site content (which I've removed for now, while troubleshooting).
Any guidance you can offer about how to go about changing the style/size of the CAPTCHA would be much appreciated!
I'm working on a Wordpress website which is completely made out of Visual Composer.
On one page I must use parallax effect which includes 4 different
sliders with one slide (I'm using it that way as the template that I've imported is looking the same as my client want).
But the thing is, parallax effect is so laggy and totally ruining the
looks. On example, the slider looks normally but when I change slider
layers than it becomes laggy. Any thoughts how to fix this?
Thx
Make sure you use the correct picture dimensions (... px x ... px)
I also compress my images before uploading it to my Wordpress website (kraken.io has a good free online tool for this)
I use W3 Total Cache (or WP Super Cache) to speed up my websites. (Don't forget to exclude the revslider in the minify js: wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js?ver=4.6.92 => number depends on you'r version or revolution slider)
There are a lot of other things to keep in mind (version Wordpress, other plugins, hosting, ...)
Is it possible to put logo and a custom graphic in the "top-header" (ie. To the left of the phone number) in the popular ElegentThemes Divi template.
http://www.elegantthemes.com/demo/?theme=Divi
I have tried using absolute positioning and setting the container/body to relative. The code can be accessed by inpect-element.
To answer your question: yes, it is possible. Changing the structure (i.e. the HTML) of a theme, however, is not recommended for many reasons: you may break other parts of the site and/or when you update the theme, any changes you made will be lost. Furthermore, looking at the theme with the link you provided, there is already a place for the logo.
I have a big old site that I have been growing over the years,
www.vintagewatchstraps.com. Almost all pages validate as HTML5.
Now Google has started grumbling that it isn't mobile friendly. I can add the "meta name=viewport" business, and I understand that I will need to change things like widths to be in % rather than pixels, but the thing that is bothering me most is the navigation.
I have been reading up about making a mobile friendly CSS navigation bar, at Medialoot and Lisa Catalano, but the examples they give have only a few pages. If I displayed my navigation as a vertical list on a small screen as they suggest, my 70+ navigation links would go on forever. All the examples of adapting a site to mobile that I have found just don't cover sites having lots of content and pages.
Any suggestions as to how to deal with this would be gratefully received.
Kind regards - David
Some ideas:
do you actually need all those links in the menu? Try only including the main things people want to see, as people aren't likely to read your entire website on a mobile device anyway.
have two layers of menus: a heading reveals another slide out menu with subcategories
put a search box at the top of your menu
how do i go about doing it?
there is one solution that i thought would work..
my theme allows me to turn of responsive design..
i copied the whole theme folder and renamed it to theme-mobile..
so now i have 2 exact same themes but with different names..i go in theme settings and turn of responsive design on one of the themes..
then i tried to use this plugin to switch theme when someone is using mobile device
but the problem is even if i have two themes they share the settings..if i turn off responsiveness on one theme..the other one gets turned off too..
any help would be really appreciated..
Here is a plugin that will get you half way there.
http://wordpress.org/plugins/responsive-opt-out/
It does everything in the front end so you can do it all with css.
There is a javascript fix using JQuery.
here is some pseudo code
LINK.onclick .find "<meta name="viewport" content="width=device-width">" .replace ""
essentially you javascript will listen for the event of a mouse click on your view desktop link it will search the DOM for some html that should be something like which is what make the site responsive on a mobile (you would still need the stylesheets) upon finding that bit of html it would replace it with a blank string so the site is no long mobile responsive. (it would still appear responsive in desktop browsers as you scale them)