As we all know, alex has done wonders on aMember 4. It is so much more organized, done using MVC, and is really beautiful all around. We all want to create beautiful looking websites to please existing clients and possibly attract new ones. This being said, maybe we need to help out a little with the documentation - a little community effort on the wiki? Would anyone be interested in collectively working on documenting the theme creation process? In MVC, you have the object that holds the form data, the form, and the controller. These basics of creating a theme are here: http://v4.amember.com/docs/Themes_and_Templates However, when it comes to say, the signup form specifically, I'm a little confused as to how to actually completely customize the styles of the form. Can anyone lend some insight? In application/default/views, I see _form.phtml, then in /signup I see signup.phtml and in application/default/controllers I see SignupController.php. The drawback with something like PHP vs JAVA is documentation: it's a tough time to find where all the hidden gems are to fully customize. Maybe this is already done and I'm just rambling now. Looking forward to any responses.
Yes, Version 4 is good stuff! The level of commitment the aMember staff has put into V4 is amazing. I have seen Alex and Alexander in the forums as early as 8:00 AM and as late as 2:00 AM. Where else can you get the lead programmers that are willing to personally fix your site? I can't code so I helped (around 20 hours or so) with the WordPress documentation so they could keep coding. They were extremely appreciative. Let Alex know what you have in mind. We would likely set you up with authoring rights in the Wiki.
After spending a couple of days studying the code I'm starting to realize how this all works. Everything depends on mod_rewrite to redirect requesting urls to the appropriate controller files through the file amember/public.php. There are a number of controller classes that are sub-classed from a parent Zend object. If I have it right, these controllers build and feed content ($content) to a template file that acts as the final compositor for the output page by attaching headers and footers and scripts. We only get to control the final compositor by creating a theme file which subclasses the template file. So I think the first thing we need is a flow chart to show which template manage which data, and especially which pseudo-url's go with which templates. Me too, and by the cart form too. It looks, though, like maybe the cart functionality is not finished. Are there cart form templates that we can edit? I mean for 'cart/index/view-baske't and 'cart/index/checkout' for instance. Also, can we eliminate or edit jscript? For instance, the first product input field(s) on the signup form is 'required' by javascript so my user cannot submit a multi-product form based on that signup form without always buying the first product. What are the rules we must obey when we edit forms? Great system, tough to figure out.
I would like to contribute somehow. If we can get some discussion going here, I wouldn't mind compiling a master page (tutorial style?) start to finish on customizing a theme. As long as we can get some real modification suggestions here. Modifying the login page template, signup forms, CSS, and pretty much anything that needs to be modified in order to create a custom user experience. It's not that I don't like the default aMember, but the style isn't for everyone... I think you are completely right. After looking through myself, this seems to definitely be the case. Can you post your findings about templates to data along with URLs? I'm more concerned with the client side templates more than admin for now. I have also found saved_form table in the database which is controlled by http://members.stockguy22.com/admin-saved-form if you're looking for editing the GUI. The default signup form "fields" has: Code: [{"id":"product-0","class":"product"},{"id":"paysystem","class":"paysystem"},{"id":"name","class":"name","hide-if-logged-in":true},{"id":"email","class":"email","hide-if-logged-in":true},{"id":"login","class":"login","hide-if-logged-in":true},{"id":"password","class":"password","hide-if-logged-in":true}] It seems once we can get this down on paper or documented, theme creation will be pretty simple. This is what I want to know.
Due to the technical nature of this subject, it might be better to draft up the documentation and have someone from aMember go over it before it goes into the Wiki. If you have technical questions about this, I am sure Alex, or someone from the aMember staff, would help with this. If he doesn't reply to this thread, I would suggest you send him a PM.
The original reason for posting this was to get some community effort in to the theme development documentation. I have reached out about it a few nights ago but I realize they are both working hard on completing the development of aMember 4. That being the case, I am taking it upon myself to reach out to the community, give my input, ideas, and findings, and hopefully get something in return. They do a lot of work on this for such a small price, so I thought it would be helpful to compile something and I know that they would review it for inaccuracies or clarifications.
Bump Looking for signup theme documentation. I got a very thin response from support, and I do understand that they are busy. Relevant files: /library/Am/Form/* /library/Am/Form.php These are core files with all of the functions needed by aMember for forms. /application/default/views/signup/* signup.phtml should be the template. This is the default view, which can be upgraded during a core upgrade. Now on to your custom theme in /application/default/themes/YOURTHEME Anything you create in this directory will override the /application/default/views/ file. So I created a signup directory in my themes directory, so /application/default/themes/YOURTHEME/signup Also in the root is the _forms.phtml, which is the form renderer I believe. Now, to actually customize this form (CSS, add divs, modify AJAX messages, I suppose I'm a little lost.
Bumping this again. I can't be the only one who wants to customize the theme... I'm taking a look in /library/Am/Form.php. This is the total user signup form controller. This file, from what I can tell, is used to generate a membership type radio button randomly. Below you will find the function to generate the radio button: Start at line 238 in /library/Am/Form.php: PHP: function renderRadios() { $out = ""; $num = 0; foreach ($this->optionContainer as $option) { $id = $this->getName() . '---' . $num++; $attrs = ""; foreach ($option['attr'] as $k => & $v) $attrs .= "$k=\"".Am_Controller::escape($v)."\" ";[B] $out .= sprintf('<input type="radio" name="%s" %s id="%s"%s>'.[/B][B] '<label for="%s" class="radio">%s</label>',[/B][B] htmlentities($this->getName()),[/B][B] $attrs,[/B][B] $id, $option['attr']['value'] == $this->getValue() ? ' checked="checked"' : '',[/B][B] htmlentities($id), $option['text'][/B] ); $out .= $this->separator; } return $out . '<br />'; } function setSeparator($string) { $this->separator = $string; }} The lines with PHP: [B] next to them are used to print hte radio button and also its value. All the radio buttons and text box values are returned to the below code in the same file: Start at line 936 in /library/Am/Form.php PHP: $this->setJavascriptBuilder(new Am_Form_JavascriptBuilder); $this->setTemplateForClass('html_quickform2_element', '<div class="row" id="row-{id}"><div class="element-title"><label for="{id}"><qf:required><span class="required">* </span></qf:required>{label}</label><qf:label_2><div class="comment">{label_2}</div></qf:label_2></div><div class="element<qf:error> error</qf:error>">{element}<qf:error><br /><span class="error">{error}</span></qf:error></div></div>'."\n"); $this->setTemplateForClass('html_quickform2_container_group', '<div class="row" id="row-{id}"><div class="element-title"><label><qf:required><span class="required">* </span></qf:required>{label}</label><qf:label_2><div class="comment">{label_2}</div></qf:label_2></div><div class="element group<qf:error> error</qf:error>">{content}<qf:error><br /><span class="error">{error}</span></qf:error></div></div>'."\n"); $this->setTemplateForClass('html_quickform2', '<div class="am-form">{errors}<form{attributes}>{content}{hidden}</form><qf:reqnote><div class="reqnote">{reqnote}</div></qf:reqnote></div>'."\n"); $this->setTemplateForClass('html_quickform2_container_fieldset', '<fieldset{attributes}><qf:label><legend id="{id}-legend"> {label}</legend></qf:label>{content}</fieldset>'."\n"); I can modify these lines in /application/default/themes/stockguy/_form.phtml by setting the $renderer variable and echoing $renderer to create the form. Now my question is, I want to customize the form by adding divs, changing styles. I still haven't found a way to make it happen...
>> can't be the only one who wants to customize the theme I'm working on it too but first I want to help the developers to make it work properly. It's a little rough in a couple of places and feeding back these issues is more of a priority than skinning it. >>I want to customize the form by adding divs, changing styles. Have you tried adding them in the form editor? It takes html. Maybe make a custom css and reference the classes in the page editor.
Products | Protect Content | Pages You don't get bricks with amember fields but you can at least make some pages that look and feel the same. The only problem is your use has to be logged in to see them.
Definitely not what I want to do. http://members.stockguy22.com Customized for the most part, but we want to customize our signup form.. and other things. Like when users login, etc. edit: Signup form is at http://members.stockguy22.com/signup/index/c/ I am currently printing $renderer so I can see the output and try to find out how to theme it
NMB but wouldn't you be better off hiring one of the amember developers to theme it for you and spend your time trading instead of programming? Anyway, good approach to figuring it out.
There's 3 of us. Two trade, 2 program. I deal with server administration and infrastructure, along with minimal coding. Like figuring this out, which should be trivial IMO.
aMember Pro uses HTML_QuickForm2 library to create, render and validate forms. It makes editing forms via GUI easy task, I hope you already love this ability However, it also makes editing form templates not as easy as it has been in version 3. If you know PHP, and you ready to deal with problems, I am ready to describe what to do. I will talk here about signup form. Other forms are similar. aMember Pro assigns $form object (it is an HTML_QuickForm2 instance) to the views/signup/signup.phtml template. It is then rendered to a string and displayed (it happens inside views/_form.phtml). If you REALLY want to heavily customize the output, there it the hard way: We can force form to output labels, errors, and HTML for each form element into an array. Then you can output the array, determine elements and insert these elements where and as you wish. There is a short example showing how to do that: DISCLAIMER: Do not try to copy/paste this code if you do not understand its meaning and if you do not know PHP basics. It will simply do not work. Customize CSS or ask CGI-Central team instead. The customized file application/default/views/signup/signup.phtml : PHP: <?phpif (empty($title)) $title=___('Sign-up');$this->setLayout('layout.phtml');include $this->_script('_error.phtml');$this->headScript() ->appendFile(REL_ROOT_URL . '/application/default/views/public/js/jquery/jquery.validate.js');?><div class="am-signup"><?php echo $this->blocks('signup/login/before') ?><?php include $this->_script('signup/_login.phtml'); ?><?php echo $this->blocks('signup/login/after') ?><?php echo $this->blocks('signup/form/before') ?><?php// we commented out default form rendering (next line)://include $this->_script('_form.phtml');$renderer = HTML_QuickForm2_Renderer::factory('array');$formArray = $form->render($renderer)->toArray(); // render to array// print_rr($formArray); // uncomment this line to review array elements// now you can display your HTML as you want and insert the input elements as below:echo "<form " . $formArray['attributes'] . '>'; // start form tagecho implode("\n", $formArray['hidden']); // echo hidden elementsforeach ($formArray['elements'] as $el){ if (!empty($el['elements'])) { // this element contains nested elements without labels printf("[ %s ] %s ", @$el['label'], @$el['error']); foreach ($el['elements'] as $ell) echo $ell['html']; echo "<br />"; } else { // output simple element printf("[ %s ] %s %s<br />", @$el['label'], @$el['error'], $el['html']); }}echo '</form>';?><?php echo $this->blocks('signup/form/after') ?></div><?php include $this->_script('js.country_state.js'); ?>
However, I do not think there is a good usage for the code I shown above. Please describe me your needs, i.e. what exactly would you like to customize in form HTML and I will be happy to explain how to do it with CSS, or will add ability to this customization into aMember core. I appreciate any feedbacks regarding this, feel free to PM me.
Alex - thank you so much for your post. I know it will be easier if I actually knew the Zend framework. Zend is a language in itself, so much is done automatically and tracing code without knowing Zend is very difficult. It looks like the formArray is an array of the elements in the form. I am going to look at those elements and do things based on their names because there are different elements in different places. Do you recommend I do it your way (this is an obvious answer), or say, since I don't quite understand this yet - I create my own form, dump $form_array, find the IDs to the fields I want (paysys_id, name_f-0, name_l-0, e-mail-0, etc), and just make my own form? I have sent you an e-mail to support about what I want it to look like ...
Alex, can you provide anymore insight on how to fully customize the output of the HTML / CSS without modifying core files? That is the goal.
I'm trying to style the login forms, and when I try to target am-layout-two-coll to git rid of the background image, it's not over-riding the default. Am I missing something here? It must be something simple. my css: http://students.spilledmilkuniversi...ation/default/themes/smu/public/css/theme.css page in question: http://students.spilledmilkuniversity.com/smu-admin/login It looks like amember.css is loading before my style. Shouldn't it be the other way around?