Customizing the 'Follow' Button

  • allisonhudson929 · Member ·

    Hello – I’d like to update the ‘Follow’ button to match the ‘Read More’ buttons that accompany each post. I’d also like the ‘Follow’ text to match the header text of each post.

    Below is the CSS I have to date, I am hoping this might help re what I’ll need to enter to accomplish this request…

    Thank you! Sincerely, Allison Hudson Stockamore

    .featured-content-detail {
    background: none repeat scroll 0 0 rgba(0,0,0,0.3);
    }

    .main-navigation {
    background: none !important;
    }

    .sf-menu a, .sf-menu a:visited {
    color: #333333 !important;
    border: none;
    }

    .sf-menu a:hover, .sf-menu a:focus, .sf-menu a:active {
    background: none repeat scroll 0 0 #f2fbc2;
    color: #000 !important;
    }

    .sf-menu li.prepend_item span {
    border: none;
    }

    .sf-menu ul li {
    background: none repeat scroll 0 0 #f2fbc2;
    }

    .sf-menu ul a {
    border-color: #ffffff;
    color: #ffffff !important;
    }

    .sf-menu li.append_item span {
    border: none;
    }

    .sf-menu li.current-menu-item > a, .sf-menu li.current-menu-item > a:visited, .sf-menu li.current-menu-parent > a, .sf-menu li.current-menu-parent > a:visited, .sf-menu li.current_page_item > a, .sf-menu li.current_page_item > a:visited, .sf-menu li.current_page_parent > a, .sf-menu li.current_page_parent > a:visited {
    background-color: #f2fbc2;
    color: #ffffff !important;
    }

    a.toggle-menu, a.toggle-menu:visited {
    color: #666666;
    }

    #pageslide {
    background-color: #ffffff;
    color: #333333;
    }

    .mobile-navigation a, .mobile-navigation a:visited, .mobile-navigation a:hover {
    color: #3D3D3D;
    }

    /*.site-branding .container {
    background-image: url(‘//summitdaytoday.files.wordpress.com/2014/12/photo-74-version-2.jpg’);
    background-position: right;
    background-repeat: no-repeat;
    background-size: 100px 100px;
    }*/
    .more-link:hover, .more-link:focus, .more-link:active {
    background-color: #516600;
    color: #f2fbc2;
    }

    #infinite-handle span:hover, #infinite-handle span:focus, #infinite-handle span:active {
    background-color: #516600;
    color: #f2fbc2;
    }

    .sd-like-gravatars {
    display: none;
    }

    .single-post .entry-meta-header ul li:first-child {
    display: none;
    }

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

  • designorbital · Theme Author ·

    Hello,

    I’d like to update the ‘Follow’ button to match the ‘Read More’ buttons that accompany each post.

    Please try the following CSS Code Snippet in the Custom CSS.

    .widget_blog_subscription input[type="submit"] {
  background: #F4FAD2;
  border: 1px solid #F4FAD2;
  border-radius: 4px;
  box-shadow: none;
  color: #686868;
  cursor: pointer;
  display: block;
  font-size: 14px;
  font-size: 1.4rem;
  padding: 6px 18px;
  text-shadow: none;
  -webkit-appearance: button;
}
.widget_blog_subscription input[type="submit"]:hover,
.widget_blog_subscription input[type="submit"]:focus,
.widget_blog_subscription input[type="submit"]:active {
  background: #51650d;
  color: #fff;
}

    Thanks

  • The topic ‘Customizing the 'Follow' Button’ is closed to new replies.