WordPress.org

Ready to get started?Download WordPress

Forums

Beginners questions about layout changes. (4 posts)

  1. akirax31
    Member
    Posted 5 years ago #

    I am sure some of these questions have been answerd somewhere, but as I am quite new to WordPress I am not even sure what kind of terminology to search for. So bear with me.

    I have setup a test site so far. For learning and tweaking and testing. And getting close to how I want it. But there are a few issues.

    I use WordPress 2.7 with K2 template and a norwegian translation.
    http://blogg.juicy.no/

    1. How can I push the right colum down so it aligns with the left main content?
    2. How can I remove the blue border that comes up around the images that are links?
    3. Can I ad more space between the posts? They are to cramped.
    4. Under the post heading it says: Publisert av admin07/01/2009. How can I ad space between admin and the date.

    I can get help with these I am pretty sure I can figure out a lot more on my own!

    Thanks for any help!

    AKIRA

  2. churchthemer
    Member
    Posted 5 years ago #

    1. Modify your stylesheet (style.css) for the theme you are using. Look for an entry for #sidebar-1 and add the code between the { } below to it. If you do not find an entry or you don't feel like looking for it add all of the below to the very bottom of your stylesheet:

    #sidebar-1{
      margin-top:60px;
      }

    2. Add this to the bottom of your style sheet:

    a:hover img {border:0;}

    3. Same directions as for 1. look for the .post style in your style sheet and add whats between the { } to it, if you can't find it, add the whole thing to the end of your style sheet.

    .post{
      margin-bottom:30px;
      }

    4.Your going to need to modify each template file where this appears. The main ones are index.php and single.php but it probably also appears in archive.php and search.php.

    Look in index.php for a line of code that looks like this (it should come right after the title is generated for each the post)

    <span class="meta-start">

    Right after that tag you will see a bunch of other <span>s <div>s and other tags. You can find the class of each of these tags and adjust their css definition as shown above by adding padding:0 5px; or you can cheat and just throw a bunch of &nbsp; where you want more spaces. Each &nbsp; is one space.

    Hope that helps.

  3. akirax31
    Member
    Posted 5 years ago #

    Thanks! This looks very helpfull. I wil have to look into this tonight.

    I have been mucking about the CSS files already, but I was having a hard time identifying the classes. I used developer toolbar to try and pinpoint it on my site but the refrences I found didnt show up in my CSS, but now I have some concrete things to look for!

    Thank you again!

    AKIRA

  4. jberghem
    Member
    Posted 5 years ago #

    1, 3, and 4 can all be done by editing (or adding) the margin and/or padding values of the desired element in the style.css file. Margin is the space between the element and the next element beside it. Padding is the space between the element and the element(s) within that element. You need to be aware that Internet Explorer 6 treats margins differently than other browsers. In IE6 margins don't overlap and in other browsers they do.

    1. the right column is inside <div id="sidebar-1"> so you find the #sidebar-1 selector in the style.css and change or add the margin or padding value.

    3. the posts are inside <div class="post"> so you find the .post selector in the style.css and change or add the margin or padding value.

    4. the date is inside <div class="entry-date"> so you find the .entry-date selector in the style.css and change or add the margin or padding value. Use only left margin or padding you don't want to add space to the top or bottom (i.e. margin-left: 1em; )

    You can remove the blue border around the images inside links by adding the following line to your style.css

    a img { border: none; }

    Which means if there is an image (<img>) inside a link (<a>) add no border.

Topic Closed

This topic has been closed to new replies.

About this Topic