Can the 'Register' button change appearance?

wp_register() lets you add in html markup before and after the link is displayed. By default it displays between <li>...</li> tags.

For example, to add a class="my-register-class" to the list item you would do wp_register('<li class="my-register-class">','</li>');. I am not familiar with that plugin and which class or id it uses to style the button so you will have to try and match the class or id of the login button. Alternatively, you can add a css style to your stylesheet like .my-register{font-size:25px;} which would increase the font size of the link to 25px.

Hi Nate, thanks for the info.

I’m still not sure how to do this though: The wp-fb-autoconnect plugin simply calls the usual

<?php wp_register(”, ”); ?>

command, which I have played around with and have noticed changes but still remain unsuccessful in putting it inside a typical grey button shape.

I take it this kind of thing needs to be handled in the style.css file for my theme, but I can’t find the register command anywhere in style.css, nor do I have any idea what to alter it to when I do find it.

Eurgh, what a headache.

There are a couple different steps to accomplish what you want. First though, could I have a link to the site with the plugin enabled so I can see what style you specifically want.

Step 1 is to add a class to the wp_register function like i demonstrated above. You will need to match the class used by the button to give it its style. You are not looking for the register command in the stylesheet. It will make more sense once if I can see your site and understand what style you wan to mimic.

To make sure I am on the same page, this is the plugin you are talking about?

Hi Nate,

Yep, that’s the plugin I’m on about. My website is https://tokyoclock.co.uk. The developer of the plugin directed me to FAQ #3 on his homepage which explains that it is a CSS issue, but I’m just a bit too amateurish to figure it out ;-P

Still, I’m in it to learn.

To help with style identification I use the Web Inspector that is part of Safari and Chrome. For Firefox there is Firebug.

The login button is being styled using the default browser styles. You can recreate this look by targeting any webkit browser (Safari, Chrome, Mobile Safari, Android, WebOS) with the browser specific property (-webkit-appearance).

There are a couple different ways to change the style of your links.
If you don’t mind your “Forget?” link and possibly your Facebook Connect button being styled the same you can add this line into your style.css: #loginform a {color: #2E3233;-webkit-appearance: push-button;}. This will only change the style for webkit browsers. To change the style for all browsers (but won’t look exactly the same as the login button):

#loginform a {	display: inline-block;
  	padding: 0.5px 5px;
  	background: #E2E3DF;
  	-webkit-border-radius: 8px;
  	-moz-border-radius: 8px;
  	border-radius: 8px;
  	border: 1px solid #93A4AA;
  	-webkit-appearance: push-button;
  	color: #2E3233;
        text-decoration:none;
}

This way any plugin updates won’t destroy any of your style customizations.

However, if you want only your register link to be styled like a button you will need to do this.

1. Open the widget.php file in the plugin folder. Change the line that says <?php wp_register('', ''); ?> to <?php wp_register('<li class="my-register-class">','</li>'); ?>
2. In style.css add the following:

.my-register-class {
	display: inline-block;
 	padding: 0.5px 5px;
  	background: #E2E3DF;
  	-webkit-border-radius: 5px;
  	-moz-border-radius: 5px;
  	border-radius: 5px;
  	border: 1px solid #93A4AA;
  	-webkit-appearance: push-button;
}
.my-register-class a {color: #2E3233;}
.my-register-class a:hover {text-decoration:none;}

Each time the plugin is updated you will need to do step 1.

Gosh, thanks so much for all this info, I will get on it ASAP!

I think I will just change the register button as you laid out in your last two steps – I don’t mind repeating the first step each time there’s an update to the plugin, it’s a simple enough thing to do fo the sake of getting my site how I want it. So do I just add the code in step 2 anywhere in style.css? Like at the end of the file? Or does it need to go somewhere specific?

Sorry about the dumb sounding question, I’m new to all this but really want to learn as much as I can =)

You can add the code anywhere in style.css.

No such thing as a dumb question as you are learning. To get a good base of knowledge I would suggest watching some of these videos.

Hey Nate!

Sorry it took me so long to reply, it’s been a funny week. Can I just say you’re a legend?

You’re a legend. My register button now looks EXACTLY how I want it to, thank you so much! I did re-size it a bit, but that was easy enough to do.

Also, thanks for the videos, anyone else with the low level of HTML knowledge that I have should really check them out, they’re so intuitive. I will be having a watch over them again to keep refreshing the lessons. Hopefully the team behind them will keep making more.

You’ve been of great help to me, and helped me learn a lot this past week – knowledge is the greatest gift of all.. =)