separate excerpt boxes with social media button

  • max@unlockchiropractic

    (@maxunlockchiropractic)


    11 years, 8 months ago

    For the life of me, I can’t even find a solution. I have come to a wall or dead-end without proper example or instruction.

    I want excerpt boxes separating multiple posts on front page of the website. example of what i want to achieve (pay attention to multiple posts with excerpts in boxes separating http://www.backpackingmatt.com/ This is my favorite type of boxes with borders inside including comments and small “read this article” link. I want to achieve this same style.

    also, with that included, i want a social media button added to each posts within the boxes ..for example : http://dapazze.com/ (pay attention to social media button next to the posts excerpt)

    here’s my website : http://www.unlockchiropractic.com

    you can see how each posts excerpt are being seperate with a border. but there is no boxes. i want to keep the background consistent. i want to break each posts apart into boxes with social media button.

    can you please help me rectify this? Thank you so much! 🙂

Viewing 4 replies - 1 through 4 (of 4 total)
  • Nobita

    (@gleezer)

    11 years, 8 months ago

    First things first.
    For the boxes you need to dive into your CSS stylesheets.
    In this case open your style.css file in a code editor a reach #post-content around line 567. Remove some declarations such as background, padding and border. You’ll end up with this:

    #post-content {
float: left;
width: 630px;
}

    So that div will be transparent and will just become an ‘invisible container’ of your posts, with the page background showing through.

    Then around line 574 find .post and try entering something like:

    .post {
margin-bottom: 20px;
padding: 20px;
border: 1px solid #EEE;
background: #D3D3B9; /*edit this color as you wish */
}

    The result should be something like what you’re trying to achieve, and a good starting point for you to style your posts.

    Thread Starter max@unlockchiropractic

    (@maxunlockchiropractic)

    11 years, 8 months ago

    that didnt work 🙁

    Nobita

    (@gleezer)

    11 years, 8 months ago

    Have you found those lines of code in your style.css?
    Have you deleted them?
    Have you replaced them with the code I suggested?

    If you do it then here’s what you get.

    Thread Starter max@unlockchiropractic

    (@maxunlockchiropractic)

    11 years, 8 months ago

    Thanks!! I put the code in the Custom CSS plugin…that’s what i did wrong. I am sorry.

    If you do not mind my asking, i have couple questions.

    How can i insert a comment counter or comment in the excerpt?

    also, how can i add social media bookmark in each excerpt posts (in each boxes)?

    that’s all that is left and it will be perfect!

    for example: in this site, http://www.backpackingmatt.com/ you can see “5 comments” and “read article..” i like to include those.

    thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘separate excerpt boxes with social media button’ is closed to new replies.