Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Chunk Theme - Spacing, Menu, Divider Lines

  1. ellenmooreplus
    Member

    I'm using the Chunk theme with the custom design activated. I have scoured the forum looking for CSS assistance for a few issues, but have not come across the code yet. If this is a repeat, I apologize in advance.

    1. I would like to minimize the space between the menu and the page header (i.e. ABOUT)
    2. I would like to minimize the space between the end of the content on each page and the footer space
    3. I would like to have my menu run left to right. I know I can change the order of the pages, but that does not work for my homepage (ABOUT). I would like page 1 to appear on the far left, then 2, and so on with the last page appearing on the right side of the menu.
    4. I would like to change the color of the divider lines that appear above the header graphic, below the menu, to the left of the content and above and below the footer.

    http://ellenmooreplus.com/

    Thank you very much for your help!

    The blog I need help with is ellenmooreplus.com.

  2. ellenmooreplus
    Member

    One more thing...

    I have this code for my background gradient image.

    body {
    background:url('http://ellenmooreplus.files.wordpress.com/2012/02/background21.gif?w=1500') no-repeat scroll 0 0 transparent;
    color:#231f20;
    }

    Seems to work fine except I just noticed one of my longer pages' content extends past the bottom of the graphic. I have the width at 1500.

    What do you suggest I add to that code to ensure the graphic covers the content on the SPORT MANAGEMENT page?

    Thanks!

  3. designsimply
    Staff

    1. I would like to minimize the space between the menu and the page header (i.e. ABOUT)

    Some of the padding for that area comes from the padding on #main in the Chunk theme. To minimize it, use the following CSS:

    .hentry .main {
padding: 0px 5px 15px 15px;
}

    The first value in the list is the top padding value. See http://www.w3.org/TR/CSS2/box.html#propdef-padding

  4. designsimply
    Staff

    2. I would like to minimize the space between the end of the content on each page and the footer space

    There are various empty elements causing there to be extra space there. You could use display:none to hide them, but that would make it so some of the options of the blog wouldn't work later if you wanted to change them and I'm not sure if you do or not. If you remove the top and bottom margin from several of the elements, it will shorten up the spacing and then you will still be able to see things like the navigation or widgets if you add more content to them but you may just need to re-adjust the spacing for them after that. Try this out:

    .hentry .main, .main, #comments, .navigation, #widgets, .widget-area .widget, #footer {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

  5. designsimply
    Staff

    3. I would like to have my menu run left to right. I know I can change the order of the pages, but that does not work for my homepage (ABOUT). I would like page 1 to appear on the far left, then 2, and so on with the last page appearing on the right side of the menu.

    You should use a custom menu for that. You can add any pages you'd like to the custom menu, including a Home custom menu item that points to your home page URL. See http://en.support.wordpress.com/menus/

  6. designsimply
    Staff

    4. I would like to change the color of the divider lines that appear above the header graphic, below the menu, to the left of the content and above and below the footer.

    To adjust the border color above and below the header graphic in the Chunk theme, try this:

    #menu {
  border-bottom: 1px solid red;
  border-top: 1px solid red;
}

    To adjust the border color to the left of the content:

    #contents {
  border-left: 1px solid red;
}

    To adjust the border color for the footer:

    #widgets {
  border-top: 1px solid red;
}
#footer {
  border-top: 1px solid red;
}

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

  7. designsimply
    Staff

    What do you suggest I add to that code to ensure the graphic covers the content on the SPORT MANAGEMENT page?

    I would suggest that you change the graphic so it fades from white to blue back to white and then remove "no-repeat" from the background rule.

    Also, note that since it's a gradient, you don't need it to be wide. The image could be 1 pixel wide and repeated and it would look just as good and you could save space on the file size of the background image.

  8. ellenmooreplus
    Member

    designsimply - Thank you so much for your help!

  9. designsimply
    Staff

    Cheers! :)

  10. pepejim
    Member

    Hi guys, I saw this thread was for the Chunk Theme and I've searched others with no luck to my question/problem.

    "How do I remove those grayish borders from my photos?!"

    I can't seem to find a way. Please help. Thanks in advance.
    :)

  11. designsimply
    Staff

    To remove borders from images in the Chunk theme, use this CSS:

    .entry-content a img {
border: none;
}
.entry-content a:hover img {
border: none;
}

  12. jasminemjblogs
    Member

    Hi!

    I can see there is some great questions and assistance on the Chunk theme which I really like. I'm wondering if its possible to add widgets into left-hand column using CSS? I am yet to purchase the custom design as I'm am unsure if it's possible.

    Also, can I customise and then host my site elsewhere with all the desired customisation in tact?

    Help would be appreciated.

    Thanks!

    http://firstaidwoman.com

  13. designsimply
    Staff

    Thanks!

    The left column in Chunk is not really a sidebar column, and so you cannot add widgets to it. CSS can change appearance, but not the built in functions of a theme.

    I've seen some people try moving the footer widgets to the right side of the Chunk theme, so I know that's doable if you're interested in something like that as an alternative.

    If you customize, you can take your customizations with you if you manually copy them to your new setup. You can get a very similar CSS editor in a WordPress.org setup using the Custom CSS plugin.

  14. lightemotionmediablog
    Member

    Hello!

    How do you change the Font type and colors in the Chunk theme?

  15. designsimply
    Staff

    How do you change the Font type and colors in the Chunk theme?

    For questions like this in the future, could you please start a new thread? It helps keep things easier to find and easier to help with when the existing thread is already long.
    http://en.forums.wordpress.com/forum/css-customization#postform

    For any WordPress.com theme, you can change the font type using the Appearance → Custom Design → Fonts page if you have purchased the Custom Design upgrade.

    There are several different color settings and they are done in CSS. To get help with your colors question, please start a new CSS thread and include a link to your WordPress.com site that is using the Chunk theme so we can take a closer look.

  16. fanniczinder
    Member

    hi there!

    i have some problem with my page.
    (im new in this blogging thing, so maybe i just simply missed something)

    made some pages, and when in want to upload pictures in them, it does not appear.
    its just not inserting it. showing me its there but its not. please help me to solve it.

    thank you

  17. fanniczinder
    Member

    somehow it works now, im sorry for bothering.
    anyway im in love with the template :))))))

    have a nice weekend :)

  18. designsimply
    Staff

    Glad you figured it out! If you need additional help, please start a new thread.

  19. jshbldt
    Member

    Excellent advice in this thread. You mentioned it was possibly to move the footer widgets to the right side. That would be great. How might I do that?

  20. designsimply
    Staff

    @jshbldt, this thread is already very long. Could you please please start a new thread and include a link to the WordPress.com blog you're working on?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags