• Resolved allursolve

    (@allursolve)


    I want to place Share Button below the Post instead of right side (like your another theme). Please help me!

Viewing 1 replies (of 1 total)
  • The CSS for the other theme’s sharing buttons is this:

    .post-sharrre { margin-top: 30px; }
    .sharrre { width: 25%; float: left; }
    .sharrre .box { display: block; padding: 15px 20px; border-top: 2px solid #222; }
    .sharrre .count { width: 50%; background: #eee; color: #fff; display: block; font-size: 15px; font-weight: 900; line-height: 30px; position: relative; text-align: center; border-radius: 6px; }
    .sharrre .count:after { content:''; display: block; position: absolute; right: -12px; width: 0; height: 0; border: solid 6px transparent; border-left-color: #eee; bottom: 9px; }
    .sharrre .share { width: 30%; margin-left: 20%; display: block; font-size: 24px; font-weight: 600; line-height: 32px; padding: 0; text-align: center; text-decoration: none; }
    .sharrre .share,
    .sharrre .count,
    .sharrre .count:after { float: left; -webkit-transition: all .3s ease; transition: all .3s ease; }
    .sharrre .box:hover .share {}
    .sharrre .box:hover .count { color: #fff!important; }
    
    .sharrre#twitter .box:hover { background: #eef6f9; }
    .sharrre#twitter .box { border-top-color: #24a5db; }
    .sharrre#twitter .box:hover .count:after { border-left-color: #24a5db; }
    .sharrre#twitter .count,
    .sharrre#twitter .share,
    .sharrre#twitter .box:hover .count { color: #24a5db; }
    .sharrre#twitter .box:hover .count { background: #24a5db; }
    
    .sharrre#facebook .box:hover { background: #f0f2f7; }
    .sharrre#facebook .box { border-top-color: #3b5998; }
    .sharrre#facebook .box:hover .count:after { border-left-color: #3b5998; }
    .sharrre#facebook .count,
    .sharrre#facebook .share,
    .sharrre#facebook .box:hover .count { color: #3b5998; }
    .sharrre#facebook .box:hover .count { background: #3b5998; }
    
    .sharrre#googleplus .box:hover { background: #fbf1f0; }
    .sharrre#googleplus .box { border-top-color: #cd483c; }
    .sharrre#googleplus .box:hover .count:after { border-left-color: #cd483c; }
    .sharrre#googleplus .count,
    .sharrre#googleplus .share,
    .sharrre#googleplus .box:hover .count { color: #cd483c; }
    .sharrre#googleplus .box:hover .count { background: #cd483c; }
    
    .sharrre#pinterest .box:hover { background: #fbf1f0; }
    .sharrre#pinterest .box { border-top-color: #ca2128; }
    .sharrre#pinterest .box:hover .count:after { border-left-color: #ca2128; }
    .sharrre#pinterest .count,
    .sharrre#pinterest .share,
    .sharrre#pinterest .box:hover .count { color: #ca2128; }
    .sharrre#pinterest .box:hover .count { background: #ca2128; }

    You’d need to apply/replace that css for Hueman. Look for “sharrre” in style.css. Then you may also need to remove the class that adds padding-right for the buttons.

Viewing 1 replies (of 1 total)
  • The topic ‘Share Button Below the Content’ is closed to new replies.