Need help? Check out our Support site, then


Post Pages and About Page issues with Meta and post titles

  1. Hello, I am new to CSS and am having issues trying to figure out two things:

    1. When at the page of a single post, the title of the post entry will appear center above the image rather than on the left above the date in the left column the way it appears on the home page. Why is this happening and how can I make the post page look exactly the way it does on the "home" page.

    2. On the "about" page, I can't figure out how to change color and font of the left column (about, date) items as well as the entry font and color. How do I work with the css for this page and any other pages in case I add them. How can I edit the css for the post entry and image on this page as well.

    Thanks for your time!

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

  2. 1. When at the page of a single post, the title of the post entry will appear center above the image rather than on the left above the date in the left column the way it appears on the home page. Why is this happening and how can I make the post page look exactly the way it does on the "home" page.

    I see that you are using the Titan theme. In that theme, the home page is displaying posts and the about page is a page, and those two types of pages are styled differently in Titan.

    See http://en.support.wordpress.com/post-vs-page/

    By nature, pages don't have dates, so there's not an easy way to make the about page appear the same as the post on the home page which displays a date to the left of the content area.

    If you just care about making them match, then a static front page might be a good solution for you. See http://en.support.wordpress.com/pages/front-page/

  3. 2. On the "about" page, I can't figure out how to change color and font of the left column (about, date) items as well as the entry font and color. How do I work with the css for this page and any other pages in case I add them. How can I edit the css for the post entry and image on this page as well.

    Pages don't have dates. To adjust the headings and body text color for the entire blog, you can use the Appearance → Custom Design → Fonts page. Will that work?

    To adjust the color of titles on pages in the Titan theme, add this:

    .pagetitle {
      color: red;
    }

    To adjust the color of the body text, add this:

    body {
      color: red;
    }

    Change "red" to a color of your choice. See http://www.w3.org/TR/css3-color/#svg-color

  4. Thanks for trying to help. I am using the Blogum theme and I have been using custom design to modify the theme. It's just that the about page that comes up when clicking "about" on the menu below the title, the font and font color appears different from post body font and color on the static front page.

    I changed the fonts and colors for the static front page, it's just the about page that has slight differences and I don't know why that is. Whatever I modified on the static front page looks the same on the about page, it's just the "About" on the left column which is on this page and not the static front page and the body text that is showing as a different font and color from what I customized on the static front page. Sorry if I'm a bit confusing, I'm trying to be as clear as possible and I've kept my page private until I launch it. Thanks again for trying to help me!

    Also, when clicking to go to a single post entry, the post title will show up centered rather than left aligned the way it is left aligned on the static front page. Do you know why it is different on it's own page? Hope that helps!

  5. Ah, okay. I had looked at the blog linked to your username before, and that is using the Titan theme. CSS is theme specific.

    Try adding this to the bottom of your Appearance → Custom Design → CSS page:

    .post-meta h1 {
    color:#696969;
    font-weight:bold;
    text-transform:uppercase;
    text-decoration:none;
    font-size:15px;
    margin-left:-60px;
    }
    
    .post-meta h1 a {
    color:#696969;
    font-weight:bold;
    text-transform:uppercase;
    text-decoration:none;
    font-size:15px;
    }
  6. Thank you again for trying to help. That helped me out a lot to figure out which code modifies the left column header on the about page but I still have these problems:

    1. The "ABOUT" in the left column on the about page is uppercase and the color I'd like, but I can't get it to bold now, and I have bold in there so I don't know what I'm doing wrong?!

    2. I can't figure out how to change and make the margin spacing even above and below my content on the "about" page.

    3.How can I make sure I have the same amount of space between the border bar and the post content on the home static page and the about page.

    3. On the "about" page, I just can't figure out why my content paragraph won't change to the same color as the rest (#696969).

    Thanks again! I'm getting there...

  7. Okay, I may have more questions than answers on some of these. :)

    1. The "ABOUT" in the left column on the about page is uppercase and the color I'd like, but I can't get it to bold now, and I have bold in there so I don't know what I'm doing wrong?!

    The "ABOUT" on this page is already bold. Maybe it doesn't look bold to you because it's light gray?
    http://nudeandgrey.wordpress.com/about/

  8. 2. I can't figure out how to change and make the margin spacing even above and below my content on the "about" page.

    The spacing above the content on the "about" page can be adjusted by modifying the space below the header area:

    #header {
      padding-bottom: 0;
    }

    The spacing below the content on the "about" page depends on two things: the bottom padding on the .page element and the bottom margin on the .sidebar element. You can adjust which ever one is taller. Right now, the sidebar is staller, and so it makes more space below the content area the taller the sidebar gets.

    To adjust the bottom padding on both pages and posts:

    .post, .middle .page {
      padding-bottom: 0;
    }

    To adjust the bottom margin on the .sidebar element:

    .sidebar {
      margin-bottom: 0;
    }
  9. 3.How can I make sure I have the same amount of space between the border bar and the post content on the home static page and the about page.

    First, note that you don't have a static home page. Your home page is setup to display posts. See the "Front page displays" option on your Settings → Reading page. Also see http://en.support.wordpress.com/pages/front-page/

    You can adjust the spacing below the header and it will adjust the same amount for all pages:

    #header {
      padding-bottom: 0;
    }
  10. 3. On the "about" page, I just can't figure out why my content paragraph won't change to the same color as the rest (#696969).

    On the about page, this CSS is controlling the font color:

    .post-content p, .post-content li, .post-content dd, .post-content dt, .post-content pre, .post-content address, .post-content div, .post-content kbd, .post-content tt, .post-content var {
    color: black;
    font-size: 12px;
    line-height: 1.5;
    }

    On the home page (which is a post), this CSS is controlling the color:

    .format-image .post-content p {
    color: #888;
    }

    If you want all of the paragraphs inside the post-content areas (which actually works for posts AND pages) to be the same color:

    Change this:

    .format-image .post-content p {
    color: #888;
    }

    To this:

    .post-content p {
      color: #888;
    }
  11. I was finally able to change the paragraph text color to match the rest, thank you! That was driving me mad...Sorry for the incorrect terminology, I'm very new to this!

    1. I wasn't very clear on questions 2-3 - There is a bar:(border-top:1px solid #e9e9e9; float:right;) that is just above my post content, below the header and directly above my image and text on both the home page and about page. What I can't figure out is how to get identical spacing between that bar and my image and text on all pages.

    2. I'd also like to know how to get the space that is between the bottom of the image and text on the post "Sand Bar Lounging" to be identical to the space that is between the top of the image and that border bar (border-top:1px solid #e9e9e9).

    3. If I click on a post to go to it's own page, the title of that post shows up in the center with the image rather than on the side column the way it appears on the home page, is there any way I can keep it on the side above the meta info on both the home page and the post page? I actually would prefer the post to look exactly the way it does on the home page, if possible.

    4. I also changed the size of the maximum width of images to 800. I just wanted to make sure that if I upload images larger than the one I currently have on the site that it won't alter the rest of the site and that it will fit in proportionately with the rest.

    p.s. I changed the bolding in the fonts tab of the custom design shortly after writing you and saw that that worked! Thanks again!!!!!

  12. I actually just tried adding this in:
    .post-content p {
    margin-top:-6px;
    }
    and it seemed to get the content between the borders on the about page to have equal spacing above the photo and below the photo between the two border bars. Though I'm not sure that that's the right solution for the long-term, especially since it didn't help the spacing beneath the post image and post text on the home page! Please let me know when you have a moment. Thanks!

  13. 1. I wasn't very clear on questions 2-3 - There is a bar:(border-top:1px solid #e9e9e9; float:right;) that is just above my post content, below the header and directly above my image and text on both the home page and about page. What I can't figure out is how to get identical spacing between that bar and my image and text on all pages.

    It looks like you've made some changes since the last time you wrote in, but I checked the spacing between the gray line below the header and the post or page content on http://nudeandgrey.wordpress.com/ and http://nudeandgrey.wordpress.com/about/ and the spacing is exactly the same on both. Do you still need help with this?

  14. 2. I'd also like to know how to get the space that is between the bottom of the image and text on the post "Sand Bar Lounging" to be identical to the space that is between the top of the image and that border bar (border-top:1px solid #e9e9e9).

    Can you please provide a link starting with http:// where I can look?

  15. 3. If I click on a post to go to it's own page, the title of that post shows up in the center with the image rather than on the side column the way it appears on the home page, is there any way I can keep it on the side above the meta info on both the home page and the post page? I actually would prefer the post to look exactly the way it does on the home page, if possible.

    Can you please provide a link starting with http:// where I can look?

  16. 4. I also changed the size of the maximum width of images to 800. I just wanted to make sure that if I upload images larger than the one I currently have on the site that it won't alter the rest of the site and that it will fit in proportionately with the rest.

    Changing the limit width setting on the Appearance → Custom Design → CSS page should not affect the size of already present images that were inserted individually with this method: http://en.support.wordpress.com/images/

  17. I actually just tried adding this in:
    .post-content p {
    margin-top:-6px;
    }
    and it seemed to get the content between the borders on the about page to have equal spacing above the photo and below the photo between the two border bars.

    I tried this and taking the margin-top away affects content on posts and pages the same in my tests.

    Maybe what you're noticing is a small amount of extra spacing between the top of the image on the about page and the top of the first line of text in the first paragraph. That is happening because the image is in it's own separate paragraph and the paragraph has some spacing. You can see what I mean if you use the html editor tab to look at the first few lines of the about page. Notice how the image is surrounded by paragraph tags like the following?

    <p> </p>

  18. Hello designsimply, thanks for getting back to me. Since you last helped me, I actually had my blog at a place that I felt ready to add posts to and now have the following conundrums, which I recently posted in a new forum:

    I had a sample post in my blog so that I could see how the changes I made would be affecting any posts and I finally had my blog to a place where I felt ready to upload new posts.

    http://nudeandgrey.wordpress.com/

    1. Well, I took down my sample post and tried to post it again and for some reason when I previewed the blog, the recently uploaded post showed up on the site in a different format (the way it would look when clicking the title of the post and going to it's own page when I was modifying the blog). And then when I click "home" on the top menu below the title, it says "NOTHING FOUND."

    2. Also, when I put tags for my photos, they would show up on the left column of the post and run over each other where you could make out a word though it was obvious that text was overlapping each other. How can I make the tags show up on the bottom of the post as opposed to the side column beneath the date.

    3. I am trying to figure out a way to get my font to show up on other devices the way it shows up on mine (since I have the font on my computer and others won't) and am having no luck finding out how to, if it's possible to do on wordpress.com. anyfont and cufon are plug ins that I have had trouble with activating and I'm not even sure they are able to be used with wordpress.com. Are there any other solutions other than type kit?

    Thank you so much for your time!!!!!!

  19. I feel totally incompetent but I "fixed" my problem, the things was I was only in preview mode so the post wasn't showing up on the front page but rather just showing me the post page as a preview.

    My problem now is just #3:

    3. I am trying to figure out a way to get my font to show up on other devices the way it shows up on mine (since I have the font on my computer and others won't) and am having no luck finding out how to, if it's possible to do on wordpress.com. anyfont and cufon are plug ins that I have had trouble with activating and I'm not even sure they are able to be used with wordpress.com. Are there any other solutions other than type kit?

    And also, my categories on the left column of my post are overlapping each other and I would like for them to be a list separated by columns and spaced to match the date above and the "leave a comment" link beneath that. Thanks!!!!!

  20. It's best not to post duplicate questions if you can avoid it. They make the forums hard to read, follow, and support. Plus, very long threads also tend to get hard to read through and keep up with.

    See http://en.forums.wordpress.com/topic/new-posts-showing-up-on-separate-page-from-home-title-font?replies=6

Topic Closed

This topic has been closed to new replies.

About this Topic