Responsive theme customisation

Hi,

I wish to customise my amember front-end to display a responsive layout.
Has anyone been able to achieve this.
I would appreciate if you could share your experience.

Thanks.

Can you explain what this means?

David

Hi David.

I mean the front-end should be mobile friendly.
I installed amember in wordpress with the responsive theme, because the amember is built using fixed with, their is structual confilct betwwen amember and the responsive wordpress theme.

Hope this is clear enough?

Thanks.

It sounds like you think that amember design should somehow be configurable in wordpress like the theme you installed in wordpress? I know amember is working to make the design more GUI editable, like the forms are.

Or there is a conflict between the theme and amember? (contact amember support about this).

David

David,

You're not getting this. A responsive layout is a relatively new term that describes a templates ability to resize to any device, be it a smartphone, a tablet, a laptop, or a desktop.

Hope that helps.

Brian

Yep, now i understand. Have you tried editing layout.phtml?

David

Brian,

first check the CSS file in your responsive theme that handles the width differences. Usually, you'll find a media.css file next to style.css in the /css folder of the theme you are using.

The media.css looks something like this:

Code:

@media only screen and (min-width: 768px) and (max-width: 959px) {
#example {width:100%}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
#example {width:100%}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
#example{width:100%}
}

Using Firefox or Opera (Chrome doesn't support this yet), you can zoom in while viewing your website (if on PC press CTRL and press + several times), which will allow you to see how your page behaves on devices with smaller width than your own screen.

You'd need to know CSS and edit your media.css file in order to get good results. Inspect your page with Firebug (in Firefox) and see what DIVs are holding the content. Then, you would need to specify a new width for each and every DIV. Basically, the contents of the media.css file will overwrite anything specified in style.css.

I'm in the process of doing this myself. It's not hard, but you really need to know your CSS.

Hope this helps!

P.S. If you get stuck viewing your website zoomed in, press CTRL + zero

Been playing with responsive layout and following link, to my development site, shows current situation. (The displayed page will obviously change during course of next few weeks as development continues)

http://www.themanualslibrary.net/membership/member/index

All the changes so far have been carried out in CSS files and cause the two sections to be displayed horizontally, as normal, in wider screen widths but then display vertically as screen width narrows for mobile devices. (Go to linked page and then gradually reduce your browser width.)

Once I have managed to get as far as possible with just CSS changes will need to speak to Alex and aMember as several changes will need to be made to core program, such as:

1. Input field currently set to 15 characters within the actual element. This needs to be set in CSS
2. Width of the header image is too wide so width tracks until it drops to about 270px
3. Several changes need to be made to the core CSS file to change various elements from fixed to variable widths.

These can easily be changed locally but there is always a risk of changes to core files being over written during any upgrades.

Interested to learn if anybody else is trying to make aMember display responsive.

Hey,

I've done a complete responsive design on amember forms. It's possible.

1. Even though CGI has used "size=15" on all input fields, you can override this is CSS. Simply take the id of the input field and define the width in @media CSS area. Try this:

HTML:

#login, #pass, #sendpass {width: 200px!important;}

2. Not sure I understand this one. Can you explain?

3. Again, you can override any CSS value in your @media CSS area. Simply use !important, as you can see in the above example, to override a current CSS value. EDIT: Also, make sure your @media CSS is loaded AFTER the regular CSS expressions.

Hope this helps!

i'm using bootstrap...

modified the AM signup and forms..

PM me if you need help
steve

Fully aware changes CSS can be made to override existing CSS settings but would prefer to be able to avoid changes such as input field widths that are set in core code to 15.

Any changes made in the core code may well have to be repeated following any aMember upgrades

Hi Steve,

Just saw your note. I have a website built using boot strap. I am thinking of getting AM to create a free member section. Looks like you were able to customize AM for bootstrap. Could let me know roughly what you did and how much of an effort it was. Thanks.

Ameen

not really a whole lot to modify... just need to mod your login/signup/registration pages... the user guides on here is a good starting point in developing your own theme... i've basically heavily modified the layout.phtml to suit my needs.

customise forms: http://www.amember.com/docs/Custom_Signup_Forms
customise themes: http://www.amember.com/docs/Themes_and_Templates

i've added my layout.phtml code below, it maybe of some use as a guide

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <meta name="author" content="">       
       
        <?php $this->printLayoutHead(); ?>
 
        <link href="<?php p($this->_scriptCss('bootstrap.css'))?>" media="screen" rel="stylesheet" type="text/css">       
        <link href="<?php p($this->_scriptCss('bootstrap-responsive.css'))?>" media="screen" rel="stylesheet" type="text/css">
        <link href="<?php p($this->_scriptCss('glyphicons.css'))?>" rel="stylesheet"> 
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
        <link href="<?php p($this->_scriptCss('base.css'))?>" rel="stylesheet">
        <link href="<?php p($this->_scriptCss('blue.css'))?>" rel="stylesheet">
       
       
    </head>
<body>
    <?php echo $this->placeholder('body-start'); ?>
    <div class="body">
    <?php include $this->_script('_navbar.phtml'); ?>
   
        <div id="header">
          <div class="container"> 
            <div class="row">
              <div class="span12">
                <?php if (empty($this->layoutNoTitle)): ?>
                <h1><?php echo $title ?></h1>
                <?php endif; ?>
              </div>
            </div>
          </div>
        </div>
   
   
       
   
    <!-- content starts here -->
    <div class="container">
        <div>
        <?php echo $content ?>
        </div>
    </div>
   
    <?php echo $this->placeholder('body-finish'); ?>
    </div><!-- end of div.am-body -->
    </div>
   
        <div class="navbar navbar-fixed-bottom" id="copywrite">
          <div class="container">
            <div class="row">
              <div class="span12">
                <p class="powered">&copy; <a href="#">my site</a> 2012-<?php echo date('Y')?><?php include $this->_script('_top.phtml'); ?><span id="totop" class="pull-right">Back to Top <i class="icon-arrow-up icon-white"></i></span></p>           
              </div>         
            </div>     
          </div>     
        </div>
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="assets/js/jquery-1.8.3.min.js"><\/script>')</script>
    <script type="text/javascript" src="<?php p($this->_scriptJs('bootstrap.min.js')); ?>"></script>
    <script type="text/javascript" src="<?php p($this->_scriptJs('jquery.fitvids.js')); ?>"></script>
    <script type="text/javascript" src="<?php p($this->_scriptJs('jqBootstrapValidation.js')); ?>"></script>
    <script type="text/javascript" src="<?php p($this->_scriptJs('bounce.js')); ?>"></script>
 
    <script>
    jQuery(function($){
        $(".am-form-tooltip").tooltip({placement: "bottom", html: true});
    }(jQuery));
    </script>   
 
</body></html>

Hi,

I have a major issue with the display of my wordpress themed amember login page on mobile devices. The input fields are almost hidden and not available for members to input their usernames & passwords. Amember support say the new version will fix this but no date of release yet. Is anyone prepared to help me sort out this issue please? I am willing to pay for your help. The website works fine other than mobile devices. You can take a look at my website here to see how it looks on a mobile device.. www.betalchemist.com/amember/login

Thanks,
Nicky

Yeah I used bootstrap too, Integrated it into my Joomla theme and have a few pages working.

Only thing is, helpdesk doesnt seem to let you have its own theme? I dont want to design on the default one, if an update is going to erase it... Any ideas?

I don't understand why you're so afraid of customizing input fields with !important - create your own theme in /themes subfolder, set aMember to use that theme, and that way you've got your own css/html customizations carried throughout any future upgrades untouched.

And you only need a few dozen lines of code in theme.css (your custom one) to make the whole layout responsive.

We have our complete site custom, and even if you click on the sign up/login button in our top nav, this is all tied to AM. We also did not want to have to have people logging in go to the default amember pages...and our whole site is built with the responsive design, even all the amember forms.

If you want to see our site, just go to http://hubze.com/core. This is a WordPress theme with a custom theme, and then BBPress as our forum and the "Fitness Center" is our own custom built area to house our apps and the permissions all tie in with amember.

So far aside from some email sending issues, we love it.

I'm with miso on this one. No need for bootstrap when you can do the job in CSS, in a matter of minutes!

In case anyone is doubting what can be done with CSS only, here's an example of my own website, fully responsive WordPress and amember integration. All it takes is adding media queries in your CSS, as I've specified in my post above.

Both main page (WP) and amember pages acting responsively :
http://www.wpvideocoach.com
http://www.wpvideocoach.com/member/signup
http://www.wpvideocoach.com/member/login

Even better would be to create a Responsive First design, which would not load the entire code and CSS style for mobile devices, but that is the next step. For those of you interested in this approach, I would recommend the following article:
http://www.html5rocks.com/en/mobile/responsivedesign

With mobile taking up 25% of the traffic (and growing!), you can't afford not to go responsive.

Borise

Thanks for the responsive design pointers especially the HTML5 Rocks link, good article.

Aly

I've gone through this thread and I'm going to need help getting my aMember pages to be responsive. Here's a link to the website's signup form: http://behaviortech.net/amember4/signup/index/c/c-batt. It's unusable on an iPhone.

It seems to me that the most straightforward solution would be to create a unique stylesheet that is referenced by layout.phtml, containing the responsive styling for aMember to use. If that CSS file is called in the right sequence, then it would override default styling, right?

Would any of you be able to help with this?

Thanks,

Ryan