latest stable versions: v150827 (changelog)
top⇑

Old Forums (READ-ONLY): The community now lives at WP Sharks™. If you have an s2Member® Pro question, please use our new Support System.

Customize Pro Forms with Authorize.net

Home › Forums › Community Forum › Customize Pro Forms with Authorize.net

This topic contains 12 replies, has 3 voices. Last updated by  Steve Schueth 4 years, 3 months ago.

Topic Author Topic
Posted: Tuesday Sep 18th, 2012 at 5:26 pm #25730
Steve Schueth
Username: firstaffirmative

Hello ~

I am trying to figure this out again, and didn’t have any luck with the responses to the previous question I posted. I am hoping you can help because I have to get this site launched asap.

I need help with modifying the Authorize.net Pro Form. The default form has a lot of space above and below the title, and the font is completely different from the rest of my site. I would like to access the css and made a few modifications.

I followed the instuctions here: Pre Sale FAQs » Is it possible to modify s2Member® Pro Form templates?
and here: (http://www.s2member.com/faqs/#s2-faqs-pro-form-template-mods)

However, when I pasted the css into my theme’s stylesheet nothing happened, and the form stayed stripped of its code.

At this point, I am unable to locate where in the administration panel I click to turn on and off the S2member default css styles. Can you please direct me to that location because I’ve scoured the backend and can’t locate it anymore. I believe that is where I also found the css to paste into my stylesheet, but cannot locate that either.

Please help!

Thank you.

But when I pasted the css into my stylesheet nothing shifted.

List Of Topic Replies

Viewing 12 replies - 1 through 12 (of 12 total)
Author Replies
Author Replies
Posted: Wednesday Sep 19th, 2012 at 6:29 am #25761
Raam Dev
Username: Raam
Staff Member

Hi Steve,

Please see How can I prevent s2Member® Pro from loading it’s default CSS?
Posted: Wednesday Sep 19th, 2012 at 9:49 am #25797
Steve Schueth
Username: firstaffirmative

Hi Raam,

I guess I didn’t add that link into my original question, but I did follow those instructions, and when I pasted the css into my theme stylesheet it stayed stripped of code.

Would you be willing to answer my other questions as well – where do I find the checkbox to turn on/off the default css, and the link to find the default code?
Posted: Wednesday Sep 19th, 2012 at 1:38 pm #25826
David Welch
Username: dwbiz05

This may be a stupid question, but looking at your theme header code, is the wp_head(); function before or after your stylesheet?

If it’s after, then that might be why it’s overriding your css in your stylesheet.

If not, then I’ll have to think about it some more… lol.

Hope that helps,

Dave
Posted: Wednesday Sep 19th, 2012 at 1:40 pm #25831
David Welch
Username: dwbiz05

Also, I don’t know of any option to turn off styles in the admin panel, unless that is a new function in a recent upgrade that I may not have.

Dave
Posted: Wednesday Sep 19th, 2012 at 3:51 pm #25846
Steve Schueth
Username: firstaffirmative

Hi David,

Hmmm.. there are a few references to the stylesheet here in the header code. I tried moving the wp_head(); function up above all of them (right under the tag), but the form still stayed stripped of code. Below is the header code if you want to check it out (un-modified). I can’t figure out where I found the default css for the form. Do you have an idea?

———————————————

<html xmlns="http://www.w3.org/1999/xhtml&quot; >

<meta http-equiv="Content-Type" content="; charset=UTF-8″ />

<link rel="alternate" type="application/rss+xml" title="RSS2.0" href="” />
<link rel="pingback" href="” />
<link rel="stylesheet" type="text/css" media="all" href="” />

<link rel="shortcut icon" href="” />

<link rel="stylesheet" type="text/css" href="/css/styles//.css” />

<link rel="stylesheet" type="text/css" href="/css/fixed.css” />

li > a’] = $menuFont;

foreach ($fonts as $value => $key)
{
if($key != ‘off’ && $key != ”){
$api_font = str_replace(” “, ‘+’, $key);
$font_name = font_name($key);

echo ”;
echo “”.$value.”{ font-family: ‘”.$key.”‘ !important; }”;
}
}
?>

<body >

<a href="”>

<img src="” alt=”” class=”logo” />



Stay informed with our email updates.


‘primary_nav’,
‘container’=>’div’,
‘depth’ => 4,
‘container_id’ => ‘menu’,
‘container_class’ => ‘dd’,
‘menu_class’ => ‘sf-menu’
)
);
else:
?>
    Posted: Wednesday Sep 19th, 2012 at 5:48 pm #25859
    David Welch
    Username: dwbiz05

    Could you re-add that code and wrap it with the “code” or “code w/hilite” tags (green buttons, far left)?

    I think just pasting it in is messing it up and making some of it unreadable.

    Dave
    Posted: Wednesday Sep 19th, 2012 at 6:07 pm #25860
    David Welch
    Username: dwbiz05

    Just took a look at your site… I think you accidentally commented out your own code…

    /*********** Salesforce Form - Page ***********\

/*********** Salesforce Form - Sidebar ***********\

/*********** S2 Member Pro Forms ***********\

    Should be 

    /*********** Salesforce Form - Page ***********/

/*********** Salesforce Form - Sidebar ***********/

/*********** S2 Member Pro Forms ***********/

    See if that fixes your issue.

    Dave
    Posted: Thursday Sep 20th, 2012 at 11:31 am #25963
    Steve Schueth
    Username: firstaffirmative

    yes, here it is:

    <!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"  <?php language_attributes( ) ?>>
<head>
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=UTF-8" /> 
	
	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
       <?php wp_head(); ?>
	<link rel="alternate" type="application/rss+xml" title="RSS2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<link rel="stylesheet" type="text/css"  media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

	<?php  $al_options = get_option('al_general_settings'); ?>
	
   	<?php if(!empty($al_options['al_favicon'])):?>
	<link rel="shortcut icon" href="<?php echo $al_options['al_favicon'] ?>" /> 
 	<?php endif?>
    <!--[if IE ]><link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() ?>/css/ie.css" /><![endif]-->
  	
   <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

   
    <!--[if lte IE 6]><script src="<?php echo get_template_directory_uri() ?>/js/ie6/warning.js"></script><script>window.onload=function(){e("<?php echo get_template_directory_uri()  ?>/js/ie6/")}</script><![endif]-->
  
    <?php if (isset($al_options['al_skin']) && $al_options['al_skin'] != '' ): $patcolor =  isset($al_options['al_patterncolor']) ? $al_options['al_patterncolor'] : 'blue'?>
       	<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() ?>/css/styles/<?php echo $al_options['al_skin']?>/<?php echo $patcolor?>.css" /> 	
  	<?php endif ?>
    <?php if (isset($al_options['al_layout']) && $al_options['al_layout'] == '1' ): ?>
    	<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() ?>/css/fixed.css" />
    <?php endif ?>
    
	<?php include (TEMPLATEPATH . '/css/dynamic-styles.php'); ?>
   	    <?php 
   		$bodyFont = isset($al_options['al_body_font']) ? $al_options['al_body_font'] : 'off';
		$headingsFont =(isset($al_options['al_headings_font']) && $al_options['al_headings_font'] !== 'off') ? $al_options['al_headings_font'] : 'off';
		$menuFont = (isset($al_options['al_menu_font']) && $al_options['al_menu_font'] !== 'off') ? $al_options['al_menu_font'] : 'off';
	
		$fonts['body, p, a'] = $bodyFont;
		$fonts['h1, h2, h3, h4, .callouttext'] = $headingsFont;
		$fonts['.sf-menu > li > a'] = $menuFont;
		
		foreach ($fonts as $value => $key)
		{
			if($key != 'off' && $key != ''){ 
				$api_font = str_replace(" ", '+', $key);
				$font_name = font_name($key);
				
				echo '<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family='.$api_font.'" />';
				echo "<style type=\"text/css\">".$value."{ font-family: '".$key."' !important; }</style>";			
			}
		}
	?>
</head>

<body  <?php body_class(); ?>>
<?php //include (TEMPLATEPATH . '/optionspanel.php'); ?>
<!-- Top menu begins -->
<div id="topnav">
	<div class="container">
		<?php echo do_shortcode($al_options['al_header_left']) ?>
        <?php echo do_shortcode($al_options['al_header_right']) ?>
  		<div class="clear"></div>
	</div>
</div>

<!-- Header begins -->
<div id="header">	
    <a href="<?php echo site_url() ?>">
		<?php if(!empty($al_options['al_logo'])):?>
            <img src="<?php echo $al_options['al_logo'] ?>" alt="<?php echo $al_options['al_logotext']?>" class="logo" />
        <?php else:?>
            <?php echo isset($al_options['al_logotext']) ? $al_options['al_logotext'] : 'Miriam' ?>
        <?php endif?>
    </a>
    <div class="topBanner"><a href="http://daynasaraya.com/join-now/"><img src="http://daynasaraya.com/wp-content/uploads/2012/07/join-today.png"></a><br /><div align="center" style="margin-top:8px;"><a href="http://daynasaraya.com/subscribe/">Stay informed with our email updates.</a></div>
		<?php echo do_shortcode($al_options['al_header_banner']) ?>
	</div>
</div>


<!--Main Bar-->
<div id="nav">
	<div class="container">
    <!--Main Nav--> 
        <?php 
            if(function_exists('wp_nav_menu')):
                wp_nav_menu( 
                array( 
                    'menu' =>'primary_nav', 
                    'container'=>'div', 
                    'depth' => 4, 
                    'container_id' => 'menu',
                    'container_class' => 'dd',
                    'menu_class' => 'sf-menu'
                    )  
                ); 
            else:
                ?>
                <div id="menu">
                    <ul class="sf-menu top-level-menu"><?php wp_list_pages('title_li=&depth=4'); ?></ul> 
                </div>
                <?php
            endif; 
        ?>
        
        <div class="clear"></div>
       
    </div>
    
</div>
    Posted: Thursday Sep 20th, 2012 at 11:33 am #25965
    Steve Schueth
    Username: firstaffirmative

    oh wow, didn’t see your last post Dave – that worked! thanks so so so much!
    Posted: Thursday Sep 20th, 2012 at 12:04 pm #25967
    Steve Schueth
    Username: firstaffirmative

    Dave – I am now scouring the css of the form to decrease the space at the top of the page, and below the decription, and am not having much luck. Could you take a look at this page and let me know if you see how to tighten this form up? http://daynasaraya.com/subscribe-2/

    thanks!
    Posted: Thursday Sep 20th, 2012 at 2:35 pm #25982
    David Welch
    Username: dwbiz05

    One issue is that everywhere s2member prints a commented code:

    <!-- with something here -->

    wordpress is adding paragraph tags to them, which increase the space used.

    I’m not sure why it’s doing that, but you might try something like this to keep them from affecting your spacing:

    #s2member-pro-authnet-checkout-form p { display: none; }

    Hope that helps some. I might check on it later to see if there are other suggestions.

    Dave
    Posted: Thursday Sep 20th, 2012 at 4:28 pm #25990
    Steve Schueth
    Username: firstaffirmative

    Dave, that helped. Thank you. I have another form on a different page that still has a lot of space at the top: http://daynasaraya.com/subscribe/

    If you have any other suggestions I’d appreciate it.
    Viewing 12 replies - 1 through 12 (of 12 total)

    This topic is closed to new replies. Topics with no replies for 2 weeks are closed automatically.

    Old Forums (READ-ONLY): The community now lives at WP Sharks™. If you have an s2Member® Pro question, please use our new Support System.

    Contacting s2Member: Please use our Support Center for bug reports, pre-sale questions & technical assistance.