Need help? Check out our Support site, then


Add vertical lines

  1. I use the theme Publish and I have added a yellow vertical line between the menu on the left and the posts, but I want this line to appear on the sites "om" and "kontakt" and "fittforfights stuff ´n tuff" as well. How do I do?
    Also, I have added a horizontal line between posts instead of a thin grey line that is in the theme originally, but this also only shows on the first page. What am I doing wrong?

    Here's the code I have added:

    #content .post {
    border-bottom: 15px solid #fcfcb0;
    border-left: 27px solid #fcfcb0;
    padding-left: 20px;
    }

    I guess it´s something with #content.post that I have to change. What?

    Last question, I do not want the vertical line on smart phones, but the horizontal lines should still be there. Anyone?
    I tried this one, but nothing seems to have changed:

    body.mobile-theme {
    border-bottom: 15px solid #fcfcb0;
    }

    The blog I need help with is fittforfight.wordpress.com.

  2. It's common for different types of pages to have slightly different HTML structures or body classes, so all you have to do is figure out what the structure is on the "om" and "kontakt" and "fittforfights stuff ´n tuff" pages and add some CSS to work on those pages since they are a different structure.

    In your example, you are adding a left border to "#content .post" but on the "om" page, the class name is ".page" instead of ".post" and there is also a comments section which is not present on the home page. I made an example for you that will add a yellow border to the left of the page content and the comments and a yellow border to the bottom of the comments that you can try out:

    #content .page,
    #content #comments {
    	border-bottom: 0;
    	border-left: 27px solid #fcfcb0;
    	padding-left: 20px;
    }
    
    #content #comments {
    	border-top: 1px solid #fff;
    	border-bottom: 15px solid #fcfcb0;
    	margin-top: 0;
    }

    Try changing around the colors and margin numbers to see how each rule affects the page.

    Note that you can preview any page by opening the Customize option under your site name in the gray toolbar while you are on that page. So, if you go to the "om" page first and then go straight to the Customize option, you will be able to use the live preview feature while you add CSS so you can see how it affects the page as you go.

    You might also like:
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

  3. Thank you!!!

  4. You're welcome. :)

Topic Closed

This topic has been closed to new replies.

About this Topic