Help Changing CSS in Vigilance

  • Author
    Posts
  • #560079

    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.

    #560234

    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?

    #560250

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

    .home .pagetitle, #sidebar {
    display: none;
    }
    
    #content {
    width: 900px;
    }
    #560344

    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)

    #560346

    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.

    #560348

    This should do it.

    .home #nav {
    display: none;
    }
    #560350

    whitreed
    Member

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

    #560351

    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.

    #560502

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

    #560503
    #560504

    In #header, set the bottom border to “none.”

    #560505

    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.

    #560506

    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?

    #560507

    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.

    #560508

    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.

    #560509

    You need to hide the page titles in the CSS.

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

    #560513

    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?

    #560514

    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.

    #560515

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

    #560516

    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;
    }

The topic ‘Help Changing CSS in Vigilance’ is closed to new replies.