Responsive theme customisation

Discussion in 'Templates customization' started by terungwa, Mar 23, 2013.

  1. terungwa

    terungwa New Member

    Joined:
    Mar 17, 2013
    Messages:
    2
    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.
  2. davidm1

    davidm1 aMember User & Partner

    Joined:
    May 16, 2006
    Messages:
    4,435
    Can you explain what this means?

    David
  3. terungwa

    terungwa New Member

    Joined:
    Mar 17, 2013
    Messages:
    2
    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.
  4. davidm1

    davidm1 aMember User & Partner

    Joined:
    May 16, 2006
    Messages:
    4,435
    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
  5. glrfcentral

    glrfcentral aMember Pro Customer

    Joined:
    Mar 19, 2007
    Messages:
    27
    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
  6. davidm1

    davidm1 aMember User & Partner

    Joined:
    May 16, 2006
    Messages:
    4,435
    Yep, now i understand. Have you tried editing layout.phtml?

    David
  7. borise

    borise Member

    Joined:
    Jan 3, 2013
    Messages:
    42
    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 ;)
    amyaturnersb likes this.
  8. thehpmc

    thehpmc Member

    Joined:
    Aug 24, 2006
    Messages:
    901
    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.
    microlinx likes this.
  9. borise

    borise Member

    Joined:
    Jan 3, 2013
    Messages:
    42
    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!
    amyaturnersb likes this.
  10. steveclarke

    steveclarke New Member

    Joined:
    Nov 27, 2012
    Messages:
    17
    i'm using bootstrap...

    modified the AM signup and forms..

    PM me if you need help
    steve
  11. thehpmc

    thehpmc Member

    Joined:
    Aug 24, 2006
    Messages:
    901
    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
  12. aaca

    aaca New Member

    Joined:
    Jun 7, 2013
    Messages:
    1
    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
  13. steveclarke

    steveclarke New Member

    Joined:
    Nov 27, 2012
    Messages:
    17
    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>
    amyaturnersb likes this.
  14. nickydoyle

    nickydoyle New Member

    Joined:
    Aug 16, 2012
    Messages:
    2
    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
  15. wallpaper_01

    wallpaper_01 Member

    Joined:
    Mar 9, 2011
    Messages:
    116
    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?
  16. miso

    miso aMember Pro Customer

    Joined:
    Aug 22, 2006
    Messages:
    542
    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.
  17. dreamorigin

    dreamorigin aMember Pro Customer

    Joined:
    Feb 28, 2007
    Messages:
    13
    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.
  18. borise

    borise Member

    Joined:
    Jan 3, 2013
    Messages:
    42
    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.
  19. karyng01

    karyng01 aMember Pro Customer

    Joined:
    Jul 30, 2008
    Messages:
    56
    Borise

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

    Aly
  20. ryanbsmith

    ryanbsmith Member

    Joined:
    Apr 29, 2008
    Messages:
    31
    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

Share This Page