Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Where can I change the width of posts on The Columnist

  1. jesselili
    Member

    Hi all. I apologise in advance as I'm sure this is a silly question. I do understand how to change things with CSS and look for codes and add things on my stylesheet. The difficulty for me as a newbie is to understand where exactly are the things that I want to change placed.

    In that case, I would like to enlarge a little bit the width of the main column (with the text) on all of my posts but I don't know what the code starts with or under which family of my stylesheet it is (Content, Global, Theme?)

    Also, is that gonna affect the width of my homepage main column too or is that unrelated? I'm asking cause looking at them, they seem to be the same width but maybe that's just for style.

    Thanks a million to who is willing to point me in the right direction.

    The blog I need help with is hecticophilia.com.

  2. timethief
    Member

    Hi there,
    Here's the link to the stylesheet https://wpcom-themes.svn.automattic.com/the-columnist/style.css

  3. designsimply
    Happiness Engineer

    The difficulty for me as a newbie is to understand where exactly are the things that I want to change placed.

    Using the web inspector built in to modern browsers is unbelievably helpful for this. Right-click on something and select the "Inspect Element" option, and you should see the HTML of whatever you clicked on as well as all of the CSS that applies to it.

    In that case, I would like to enlarge a little bit the width of the main column (with the text) on all of my posts but I don't know what the code starts with or under which family of my stylesheet it is (Content, Global, Theme?)

    Definitely start with the method I mentioned above, it will show the CSS from all stylesheets in one view. Most browser tools also let you make local modifications so you can test out CSS updates right from the tool.

    To make the content area for single posts wider, start with this and adjust it as necessary:

    .single .entry-content,
#comments,
#comments #respond,
#content footer.entry-meta,
#content #nav-below {
	width: 625px;
}

#content footer.entry-meta,
#content #nav-below {
	margin-right: 0;
}

    Also, is that gonna affect the width of my homepage main column too or is that unrelated? I'm asking cause looking at them, they seem to be the same width but maybe that's just for style.

    In the case of The Columnist theme, they post content width is separate from the content area (right side) container width.

  4. designsimply
    Happiness Engineer

    I was also experimenting with changing the width of the home page as well, and it starts to get a bit involved, but here's the CSS in case it comes in handy for you or for someone else reading this thread later:

    #left-col {
	width: 190px;
	padding-right: 30px;
}

.site-footer .site-info {
	width: 220px;
}

#main:after {
	left: 280px;
	width: 680px;
}

.page #content, .single #content, .error404 #content {
	width: 685px;
}

#content {
	width: 680px;
}

#feed-wrap .page, #feed-wrap .post,
.three .widget-area, .four .widget-area {
	width: 150px;
}

.entry-header img {
	width: 100%;
	height: auto;
}

.single .entry-content {
	width: 685px;
}

#content footer.entry-meta {
	width: 670px;
}

#comments,
#comments #respond {
	width: 670px;
	margin-right: 15px;
}

    A lot of the widths in this theme seem to be pretty interdependent on each other.

  5. jesselili
    Member

    Hey guys, I'm trying tonight as soon as I'm back from work, thanks a million for your replies and taking the time to give me relevant tips. I'll keep you posted.

    THANK YOU AGAIN :)

  6. jesselili
    Member

    It works like a charm, than you again designsimply :)

  7. jesselili
    Member

    So I changed a bit the layout on my page and I really like it now, thank you again for taking the time to answer me.

    I tried doing the right click trick that you advise but it seems when I do it it gives me the code for the entire page and it doesn't help me narrow down the bits of code I need to play with to change things.

    Two more questions (the last ones, I promise).

    1) Where can I change the background colours of my left and central column on my homepage? I reckon for the left column it's this one, am I right?:

    #left-col {<br /> background-color: #fff;<br /> float: left;<br /> padding: 0 70px 30px 40px;<br /> width: 210px;

    For the central one however, the grey one, I looked for the word color in my stylesheet and there are just too many occurrences for me to try all of them so I'd rather ask.

    2)On a post page, at the bottom, the group of lines which includes the "Posted In" + "Tagged" + "Permalink" + "Leave a Comment", can I edit it? Which part of the CSS is it? I would like to make it aligned with the rest and to get rid of the "Leave a Comment" line since I already have a box appearing under it.

    Can you help?
    Cheers. Jesse.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags