WordPress.org

Ready to get started?Download WordPress

Forums

Can the 'Register' button change appearance? (9 posts)

  1. trich1
    Member
    Posted 2 years ago #

    Gosh, I just cannot figure this one out.

    I am using the WP-FB-autoconnect plugin and basically the 'Register' button is too small and discreet.

    It's hidden in such tiny writing just above the Facebook login button - fair enough, that's how the typical WordPress register button usually appears, but is there any way to put it into a grey box like the 'Login' button, so that it is easier to see? Also, because so many people use tablets and touch screens now, fingers are quite clumsy so the grey box would help space it out and present it better too.

    It's a simple request, but I'm too much of a code noobe to figure it out by myself. I've been looking at it for weeks. Here's a more detailed explanation of how far I've got, am I even on the right lines?:

    http://stackoverflow.com/questions/7139396/how-to-change-the-appearance-of-the-wordpress-register-button

    I'd really appreciate some help, I'm desperate to present my site perfectly for everyone if I can.

    Thanks!

  2. NateJacobs
    Member
    Posted 2 years ago #

    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.

  3. trich1
    Member
    Posted 2 years ago #

    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.

  4. NateJacobs
    Member
    Posted 2 years ago #

    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?

  5. trich1
    Member
    Posted 2 years ago #

    Hi Nate,

    Yep, that's the plugin I'm on about. My website is http://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.

  6. NateJacobs
    Member
    Posted 2 years ago #

    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:
    3. .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.

  7. trich1
    Member
    Posted 2 years ago #

    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 =)

  8. NateJacobs
    Member
    Posted 2 years ago #

    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.

  9. trich1
    Member
    Posted 2 years ago #

    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.. =)

Topic Closed

This topic has been closed to new replies.

About this Topic