How render the "Follow" button more obvious?

  • Unknown's avatar
    proustmatters · Member ·

    My theme is Twenty Twelve with CSS.
    As far as I understand , the Follow button is a little pipsqueak on the very lower right hand corner of the screen.

    Can I make it more obvious? or, can I place it elsewhere, say in the widget areas?

    thank you – as always.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    You can set up email subscriptions here > Appearance > Widgets > Follow Blog Widgets by using this guide > http://en.support.wordpress.com/widgets/follow-blog-widget/

    If you would like a follow button to appear on the bottom right hand corner of your site for those who do not have WordPress.com accounts go to > Settings > Reading and scroll down to Follower Settings:

    These settings change emails sent from your blog to followers.
    Logged out users __ Show follow button to logged out users.

    Checking this will present a follow button to logged out users in the bottom corner of their screen.

    Find Friends Who Use WordPress > http://en.blog.wordpress.com/2012/05/01/find-friends/

    You can customize the contact form with multiple fields, change the email address where you’ll be notified, and mark feedbacks as spam from your dashboard. http://en.support.wordpress.com/contact-form/

  • Unknown's avatar
    timethief · Member ·

    Oh no! I was in a hurry and did not notice this was a CSS Forum thread. I’m sorry I interjected here. :(

  • Unknown's avatar
    proustmatters · Member ·

    ahhhh! Thanks for catching that so quickly; I was struggling to understand! Anyway, what is your (or anyone’s) counsel now – given the CSS context?

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, here is an example for you to work from to make it more visible. I included a good number of styling options which you can use or not use as you see fit. 

    #bit a.bsub {
    background: none repeat scroll 0 0 #65cc00;
    box-shadow: 0 -1px 5px #cc0000;
    color: #ffffff;
    font-size: 140%;
    text-shadow: 1px 1px 1px #000000;
    font-weight: bold;
}
  • Unknown's avatar
    proustmatters · Member ·

    Thankyou sacredpath! I tried it; it works as you have it; I can now tinker with it … (Yay, my struggle [and it is a struggle] to learn a little CSS is starting to pay off.)

    New: Can I move that follow button up a little (from its current position way down on the right hand bottom of the page). Can I even place it somewhere else? say, to the sidebar or widget area? Or is this a non-CSS issue?

    I wonder if my two other open questions (on another thread) have fallen into the crack. (1. how to eliminate the blank line following a comment but before the reply 2. how to make the font of the comment smaller.)

    (I hope I’m not being a pest. I appreciate everything y’all have done and I don’t want to outwear your hospitality.)

  • Unknown's avatar
    thesacredpath · Member ·

    Since the follow button, when clicked, causes the follow panel to expand upward, moving the button would be a little difficult, and on responsive width themes, it would also end up overlaying some of the content on narrower screens and browser windows.

    1. how to eliminate the blank line following a comment but before the reply 2. how to make the font of the comment smaller.)

    Sorry that got lost. :( The first CSS below controls the spacing between reply/edit and the comment. The second controls the spacing between the bottom double line and the reply/edit link. 

    .entry-content p, .entry-summary p, .comment-content p, .mu_register p {
    margin-bottom: 1.0rem;
}
.comments-area article {
    padding-bottom: 1.0rem;
}

    You are most definitely NOT being a pest. We are here to help you with your CSS questions and also to help you learn. Your site is looking very good.

  • Unknown's avatar
    thesacredpath · Member ·

    Oops, I forgot the font size request above (#2). Replace the first rule above with the following and you can also adjust the font size.

    .entry-content p, .entry-summary p, .comment-content p, .mu_register p {
    margin-bottom: 1.0rem;
    font-size: 90%;
}
  • Unknown's avatar
    proustmatters · Member ·

    Yay!! What I’m Yaying about is your fine help AND my first foray into CSS on my own. Your correction above caused all text to be smaller. I just wanted the comment smaller. Hence I reasoned that I needed to place the font-size not in .entry-content but in .comments-area. So I placed “font-size 90%;” within the .comments-area article. It worked!

    1. But, is there a nicer way to do it?
    2. how do you know the names of the target areas? I mean, e.g. where did you get the names like .comments-area? Is that from the theme? 

    /* eliminate blank line after comment and before reply.  Make comment font smaller. */
.entry-content p, .entry-summary p, .comment-content p, .mu_register p {
    margin-bottom: 1.0rem;
}
.comments-area article {
    padding-bottom: 1.0rem;
		font-size:80%;
}
  • Unknown's avatar
    thesacredpath · Member ·

    See, you are smarter than me!!!! I forgot to edit the selectors and check that I didn’t break anything else.

    Where you placed the font size is absolutely fine. Nice sleuthing!!!

  • The topic ‘How render the "Follow" button more obvious?’ is closed to new replies.