I am creating two themes for a wordpress site. One for desktop users and one for mobile users. I am using a simple plugin ("Mobile theme switch") to detect the mobile devices and switch to mobile theme.
I have registered some widgets area in the mobile theme to put some links with images in footer area.
Also assigned the widgets to those widget areas by activating the mobile theme.
When i activate the desktop theme and open the site in the mobile device, mobile theme is activated but footer widgets does not appear.
Does any body know how to solve this issue?
An other thing i noticed, when i activate the mobile theme from admin panel and open the site in the mobile device, it works fine and show the footer widgets.
Thanks in advance.
Here is the code of that plugin to switch the theme.
add_filter('stylesheet', 'getTemplateStyle');
add_filter('template', 'getTemplateStyle');
function getTemplateStyle(){
$mobiletheme = get_option('mobiletheme');
$themes = get_themes();
foreach ($themes as $theme_data) {
if ($theme_data['Name'] == $mobiletheme) {
return $theme_data['Stylesheet'];
}
}
}
Related
I have questions about off-canvas menu for mobile phone and tablet. My website is burak.expandingcode.com
Mobile side:
When I navigate the website using my mobile phone (Iphone7) in portrait and landscape mode in off-canvas menu, I want to add a logo under the flags.
(mobileportrait.png, mobilelandscape.png)
Tablet side:
When I navigate the website using my tablet (Samsung Galaxy Tab S) in landscape mode, I want to add off-canvas menu instead of mega menu like portrait mode. (tabletlandscape.jpg)
Could you please help me about these subjects?
For your first problem:
You can add a new menu item with your logo at the beginning of the menu, and then hide it on desktop using #media and css selector first-child
I'm using the Responsive theme ( Theme Url https://demo.gavick.com/joomla25/simplicity/ ) for one of my site and have used the built-in menu manager (Joomla platform), with everything appearing as should on web and iPhone and android devices.
However, on Blackberry it does not display the 'header-menu', where as all of the other menus - footer, top, etc are appearing fine.
Anyone know what could be going wrong?
FYI - Blackberry Curve 9320.
I have an application using XPages Mobile Controls for iOS.
My customer has Blackberry devices (9900/9800/9320) in his environment and I don't know if IBM provides a custom BBerry theme. These devices have a very small screen and the app navigation is too bad.
The Android/BBerry default theme seems the same of iOS using black/gray colors.
Have anyone ran into this situation in a project?
I am creating a responsive web app using Angular and ui-router. I need different states to be loaded depending on what size a user's browser window is via CSS media queries.
e.g. For the main page state, the nav bar will contain different elements depending on what media query is active:
Mobile browser (320px - 480px) the nav bar contains 2 buttons (search & icon logo)
Tablet browser (480px - 770px) the nav bar contains 4 buttons (search, full logo, user profile, settings/options link)
Desktop browser (770px and 1500px) the nav bar contains 6 buttons (full logo, search, upload, user profile, settings/options, log out/in)
So I know I can just load all 6 buttons and just hide certain ones for the mobile and tablet browsers via CSS styles but I am seeking a more elegant approach. I want to load in only what is needed for each window width (media query). Is there a way to do this with Angular and ui-router?
I was lucky enough that a friend showed me this article https://medium.com/opinionated-angularjs/adaptive-web-design-and-angularjs-78e0837fa92 which basically will allow me to do what I need but not by media queries but by feature detection via Modernizr.
Here is the Github project https://github.com/ghengeveld/angular-adaptive-templating
Hi
Suppose I have menu A, menu B...Menu F in desktop version, I want to display only menu A and menu B in mobile version. The quickly way is using CSS with display:none, but is there any Drupal's API that I can use for this situation?
On the other hand, I want to redirect to http://xxx/product instead of http://xxx/index.php for home page in mobile version, any idea?
Thanks
You could use the mobile tools module to detect the device and switch themes accordingly. Each theme could then have a different menu configured to display.