Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Help Changing CSS in Vigilance

  1. whitreed
    Member

    I am working with the Vigilance theme on my blog (www.us2photo.com). There are a few small changes that I need to make, but I don't know the CSS language to make these changes.

    1. I want to remove the title for my static home page (so that it doesn't say "home" at the top).

    2. I want to remove the sidebar completely.

    3. I want the content of the pages to be wider.

    4. I want the navigation menu to be right-aligned.

    5. There are two grey lines at the top of each page (beneath the title). I want to get rid of these lines.

    Thank you for any advice!

    The blog I need help with is us2photo.com.

  2. timethief
    Member

    Just mentioning that when 1 of the 2 volunteers who help with CSS arive here they will find your username linked to a blog wearing the Freshy theme. May I suggest you post the URL for the blog wearing the Vigilance theme that you are editing the CSS on?

  3. thesacredpath
    Staff

    This should do it. It looks as if you've already fixed #4.

    .home .pagetitle, #sidebar {
display: none;
}

#content {
width: 900px;
}

  4. whitreed
    Member

    Thank you so much. These worked beautifully. I still have one more question though :)

    On the homepage, we need to get rid of the navigation menu so that it looks more like a website. How do I get rid of the menu on JUST the homepage?

    (here is the link to the blog, @timethief: http://www.us2photo.com)

  5. timethief
    Member

    @whitreed
    I cannot help you with this. We have only 2 Volunteers who help with CSS editing. They are halluke and thesacredpath. Please be patient while waiting for them to locate this thread and help you.

    P.S. I am currently waiting for thesacredpath to check his email and contact me on a similar issue.

  6. thesacredpath
    Staff

    This should do it.

    .home #nav {
display: none;
}

  7. whitreed
    Member

    @thesacredpath, Thank you so much! Your responses have been so fast and helpful! Wish I had your know-how!

  8. thesacredpath
    Staff

    You are welcome and you will get there. Mine has been a path of first understanding the relationship between the markup (XHTML) and the CSS and then just plundering. One tool that makes me look much better than I am is the Firebug Add-on for Firefox which allows me to quickly identify what CSS is controlling an element and it allows me to try changes real-time. You should check it out.

  9. memeticstudios
    Member

    My blog layout is similar. But I cant get rid of the big grey line on the home page. How do I do this?

  10. memeticstudios
    Member

    the url is http://memeticstudios.com/

  11. thesacredpath
    Staff

    In #header, set the bottom border to "none."

  12. thesacredpath
    Staff

    And actually it looks really funny with the line gone since then the speech-bubble type graphics you have for the header and the navigation just float aimlessly on the page. There needs to be something in between them for them to point at and to provide a separation. That of course is just my opinion.

  13. memeticstudios
    Member

    hmm.. yeah now that I see it I agree. Any suggestions on what to fill that space with? Perhaps make the line shorter to be the same length as the header?

  14. thesacredpath
    Staff

    The problem is that the header image itself has white space on each side of the dark area, so the white on the left and right is part of the header width. If you redid the header image so that the black area was 920px wide (with no white on either side) then the dark bottom border would be the same width as the image.

  15. memeticstudios
    Member

    Thanks so much. I think I found something that I like. One more question.
    How do I make it so that when you are on the "Projects" and "Contacts" pages it doesn't say the name on the left hand side? Somehow I already did this on my blog page.

  16. thesacredpath
    Staff

    You need to hide the page titles in the CSS.

    h1.pagetitle, h2.pagetitle {display:none; }

  17. memeticstudios
    Member

    Now I'm trying to make it so my home page shows a summary (with picture) of my 5 most recent blog posts. Any ideas?

  18. thesacredpath
    Staff

    To summarize posts, use the "read more" tag in the post:

    http://en.support.wordpress.com/splitting-content/more-tag/

    To set the number of posts to show per page, go to settings > reading.

  19. memeticstudios
    Member

    I would like to have smaller links with pictures on my front page (no Summary). Like on this blog: http://philipbloom.net/.

  20. thesacredpath
    Staff

    Put in the image with an alignment of "none" (which will left-align with no text wrap) and then put the read more tag right after the image and before any text.

    As far as the size of the post title, change it to whatever size you want.

    .post-header h1, .post-header h2 {
font-size: 2.6em;
}

  21. memeticstudios
    Member

    Okay great. That should work. Now how do I put the footer (with the links) that I currently have on my homepage on to the footer of my blog page?

  22. memeticstudios
    Member

    ... sorry about all the questions.

    Really, what I want is for the front page to show a small feed that shows clip-its of my latest posts. Maybe even in a slide show format. Am I going about this the wrong way?

  23. thesacredpath
    Staff

    There are limits to what can be done here at wordpress.COM. With self-hosted blogs, the only limits are on either the availability of plugins to do what you want, a theme that does what you want, or your skill level with PHP to build your own theme or plugin.

    We can do slideshows here, but they are images only. You cannot link the images in a slideshow to a post.

    You can use an RSS widget to show your latest posts and configure it to show some of the text from the post. Typically it will pull the first XX number of characters or words (don't remember which) from the feed for each post. You can also configure the number of posts for it to display.

    http://en.support.wordpress.com/widgets/rss-widget/

    What links are you talking about on your "homepage"?

  24. memeticstudios
    Member

    the "projects, contact and blog" links that you see here :
    http://memeticstudios.com/

    also, I added the widget, but I can't see it on the home page...

  25. thesacredpath
    Staff

    You have the sidebar hidden right now. You will have to un-hide that ( .page #sidebar ) and then use positioning to move the RSS widget (or the entire sidebar) to the location you want it on that particular page. You will then have to decide if you want that to show on other pages as well (which you probably do not) and that will bring up having to specifically hide the sidebar on the other pages.

  26. thesacredpath
    Staff

    Projects, contact and blog are images that you have in the body of the page itself. For the other pages, you will have to add those images to the bodies of the other pages.

    For the blog page, you could add the images to perhaps the "alert" box, which will appear at the top of all posts (appearance > theme options. Just copy out the code and then put it into the alert box.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags