Modify Member Profile Form (#!*^'in tables!)

[MODassic]

I have a client who insists upon nicely formatted forms. Thats not a problem in itself, I was able to copy the checkout forms to the theme dir and modify away. I also added custom styles. It worked great!
Nice Job!

But the profile editing form uses a table in the markup , and that prevents me from stacking fields next to each other . I have been looking for a where that shortcode lives, to see if I could modify it, but I just can't find it...

So... Edit profile form

Current:
*field*
*field*
*field*
*field*
*field*
*field*
(submit)

What I am looking for:
*field*
*field* *field*
*field* *field*
*field*
(submit)

Thanks in advance Cristian and Jason! (And anyone else who lends a hand. ^_^)

Excellent plugin, it has quite a learning curve... But I think thats what makes it so powerful and great.

[Bruce C]

I don't believe s2Member currently supports that, but:

You could probably use some javascript and use the document.getElementById (http://www.tizag.com/javascriptT/javasc ... ntbyid.php) to resize and float the elements to where you want them.

Something like

Code: Select all

<script type="javascript">
document.getElementById('custom-form').style.width = "25%";
document.getElementById('custom-form').style.float = "right";
</script>


This could be put in the HTML editor just above or below the [s2Member-Profile /] shortcode.

If you're using FireFox, Firebug (http://getfirebug.com/) can help you find the element names.

Hope that helps!

[MODassic]

Thanks for the Tips Ace.

I am still looking for the action/hook or template that will let me modify the code being output, but I see the direction you were suggesting. In case anyone else has this issue I would like to expand and explain my thoughts on your method.

First, I would not be adding styles with javascript, the site uses a custom template, so adding s2member styles to the stylesheet is not an issue. I would just add the css instead of using javascript. However, I do think I could use javascript to remove the table markup. Also, I wanted to mention that I would suggest using JQuery instead of regular javascript, since JQuery is part of s2member (and pure js can be brutal to develop if you need cross browser support).

Code: Select all

<script>
$(document).ready(function(){
$("td").each(function () {
    $(this).replaceWith($(this.childNodes));
});
$("tr").each(function () {
    $(this).replaceWith($(this.childNodes));
});
$("tbody").each(function () {
    $(this).replaceWith($(this.childNodes));
});
$("table").each(function () {
    $(this).replaceWith($(this.childNodes));
});
});


[MODassic]

Alright, That last post was a little off, I am having trouble adding scripts to that page. I am using the popup version of the profile editor, and it does not use any files from my theme. So, another approach:

I found the file that outputs the profile page.
/plugins/s2member/includes/classes/profile-in.inc.php
I could directly edit this page to remove the table markup...

There is a hook at the end of the class:

Code: Select all

do_action ("ws_plugin__s2member_after_profile", get_defined_vars ());

So I made a filter:

Code: Select all

function s2_fix_profile_markup ($content) {
    $table_stuff = array('<td>','<tr>','</tr>','</td>');
    $content=str_ireplace($table_stuff,'',$content);
    return $content;   
}
add_filter('ws_plugin__s2member_after_profile', 's2_fix_profile_markup');

But the filter is not working, I dont think that hook actually has the table data, because that file echo's out the information instead of storing it to be echo'ed out later... I'm not too fond of directly editing the plugin files. Do you guys know if there is a hook to filter that output? Or perhaps I bungled my code above... Anyways, help would be greatly appreciated!

Thanks,

[Cristián Lávaque]

The problem is that the table is just echoed, not built in a var first. You'll need to hack that file for now, until a better approach is avaialble.

[MODassic]

Here's a non-destructive way to edit the output, This is the solution that I have settled on. It's a page template that uses do_shortcode(); to access the profile markup.

Code: Select all

<?php
/**
* Template Name: Edit Profile
*/

get_header(); ?>

      <div id="content" role="main">

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

         <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <h1 class="entry-title"><?php the_title(); ?></h1>

            <div class="entry-content">
               <?php
                  
                  function s2_fix_profile_markup ($content) {
                      $table_stuff = array('<td>',/* '<tr>','</tr>', */'</td>', '<table cellpadding="0" cellspacing="0">', '<tbody>', '</tbody>', '</table>');
                      $content = str_ireplace($table_stuff,'',$content);
                      $div_stuff = array('');
                      $content = str_ireplace('<tr>', '', $content);
                     $content = str_ireplace('</tr>', '', $content);
                     $content = str_ireplace('<br />', '', $content);
                      return $content;   
                  }
                  $profile = do_shortcode('[s2Member-Profile /]');
                  $profile = s2_fix_profile_markup($profile);
                  echo $profile;
                  
               ?>
               <?php the_content(); ?>
            </div><!-- .entry-content -->
         </div><!-- #post-## -->

<?php endwhile; // end of the loop. ?>

      </div><!-- #content -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

[Cristián Lávaque]

Oh, cool. And it worked? Nice tip! I'll keep it in mind.

Is there a particular reason for the order in which you replaced the tags or was it just random?

Code: Select all

echo str_ireplace(array('<td>', '</td>', '<table cellpadding="0" cellspacing="0">', '<tbody>', '</tbody>', '</table>', '<tr>', '</tr>', '<br />'), '', do_shortcode('[s2Member-Profile /]')); 

[MODassic]

No Reason for the order. It works in any order.

[Cristián Lávaque]

Cool. Thanks.