[resolved] Sidebar problems (7 posts)

  1. ArrowmansPaper
    Posted 2 years ago #

    probably a lot of people already had the same question, but I can't get my sidebar to be the way I want it to be. My website is: http://www.arrowmanspaper.nl/blog
    As you can imagine this is definitely not how I want it to look like! I can't figure out how to get the content of my blogpage to the left side. I've already read a lot on this topic, but I can't find a solutions that works for me.

    I hope you can help me,

  2. Evan Herman
    Posted 2 years ago #

    You need to adjust the theme style file to float the elements in to the correct locations.

    Do you have any coding abilities?

    You'll need to locate style.css inside of your themes folder. Generally located in wp-content/themes/yourtheme/style.css

  3. ArrowmansPaper
    Posted 2 years ago #

    I've already tried to change the locations of the elements, but because there are so many in my css file I don't know where to begin or where to look.

    For the sidebar I used this code:
    #sidebar {float:right; width:300px; min-height:60px; }

    But for the rest of the content of my blogpage I don't know what I have to change.

    Here are some example codes:

    .home_post_box { float: left; margin: 25px 0px 0 0; width: 244px; height: 258px; position: relative; }
    .home_post_box img { width: 244px; height: 258px; }
    .home_post_box .home_post_title {font-family: 'Raleway', sans-serif; font-weight: 300;  position: absolute; bottom: 10px; left: 10px; width: 130px; font-size: 12px; color: #fff; text-transform: uppercase; background-color: #fff; padding: 3px; border-radius: 2px; }
    .home_post_box_last { margin-right: 0; }
    .home_post_title a { color: #222; text-decoration: none; }
    .home_post_title a:hover { text-decoration: underline; }
    .blog_box { float: left; margin-top: 25px; }
    .blog_box .left img { width: 614px; height: 337px; border-radius: 5px;  }
    .blog_box .right { font-size: 14px; width: 290px; background-color: #fff; padding: 15px 15px; height: 307px; }
    .blog_box .right h3 { font-size: 20px; margin-top: 0; font-weight: normal; }
    p.blog_date { margin-bottom: 20px; }
    .blog_box .read_more { display: inline-block; font-size: 13px; color: #fac600;  padding: 1px 1px; }
  4. Evan Herman
    Posted 2 years ago #

    You'll have to use an inspector in a modern browser to figure out which elements you need to target.

  5. ArrowmansPaper
    Posted 2 years ago #

    Thank you for the very fast answers, but I'm affraid I don't understand what you mean exactly.

  6. Evan Herman
    Posted 2 years ago #

    Here is a very helpful post from Andrea R

  7. ArrowmansPaper
    Posted 2 years ago #

    Wow, I think this is exactly what I need :)
    Thank you very much!

Topic Closed

This topic has been closed to new replies.

About this Topic