Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Adventure Journal Theme: remove theme images from menu & sidebar

  1. south11
    Member

    Hi, I'm super new to all this css stuff but I'm using the Adventure Journal theme & I have the CSS upgrade. Is there anyway to remove the paper image behind the menu bar; basically I'd just like to have the menu text without the paper background. Same questions for the sidebar/widget area, & Header. Also, can I add my own image behind the menu bar text? If so, what size should I make it?

    Another Question: how do I narrow the padding between the menu & header, and menu & content?

    Basically, the whole reason for this post is that I'd really just like the menu to flush right up to the bottom of the header image and look really clean and cohesive, is this possible? Thank you for any help you can provide!!!

    The blog I need help with is thesouthboy.com.

  2. designsimply
    Staff

    Is there anyway to remove the paper image behind the menu bar; basically I'd just like to have the menu text without the paper background.

    I checked http://thesouthboy.com/ and I found that you used the following CSS to accomplish that. Nice work!

    #menu {
background:none;
position:absolute;
right:80px;
top:425px;
}

#menu-wrap {
background:none;
}

#nav-right {
background:none;
}

  3. designsimply
    Staff

    Same questions for the sidebar/widget area, & Header.

    To remove the paper background from the widgets in the sidebar in the Adventure Journal theme, try this:

    #secondary .widget, #tertiary .widget {
background: none;
background-color: transparent !important;
}

    To remove the paper background from the header in the Adventure Journal theme, try this:

    #banner, #banner::after {
background: none;
border: none;
box-shadow: none;
}

  4. designsimply
    Staff

    Can I add my own image behind the menu bar text? If so, what size should I make it?

    If you use one image as a background behind the menu, what size is needed will depend on how many items you add to the menu. Currently, the menu at http://thesouthboy.com/ is taking up 514 x 46 pixels. You can see the spacing by adding the following CSS and clicking the Preview button:

    #menu-wrap {
background: yellow;
}

    If you had a 514 x 46 pixel image, you could set it as a background for the current menu with this CSS:

    #menu-wrap {
background: url(YOUR_IMAGE_URL) no-repeat;
}

    If you had a pattern image or a tile background image to use behind the menu, you could add CSS like this and the image would keep repeating:

    #menu-wrap {
background: url(YOUR_IMAGE_URL);
}

    Replace YOUR_IMAGE_URL with the image URL of an image you have uploaded to your media library.

  5. designsimply
    Staff

    How do I narrow the padding between the menu & header, and menu & content?

    You've setup your menu to be absolutely positioned below the header image. So to adjust where the menu sits on the page, you should adjust the "top" value in this CSS blog. Try changing it from 425px to 405px, like this:

    #menu {
background:none;
position:absolute;
right:80px;
top:405px;
}

    Then to reduce the padding below the menu, find this in your Appearance → Custom Design → CSS page (you've already added it to your custom CSS), and adjust the 445px to something smaller until it looks the way you'd like:

    #wrapper-content {
padding-top:445px;
}

  6. south11
    Member

    Wow!!! It worked!! This is SO rewarding!! Thank you so much for your help! A few more questions...

    Also, is there a way to add multiple images on top of the existing Adventure Journal background? I would like to add some swirlies on top of the wood on the right and left side of the main content area; maybe even some on top too. I may also/instead like to add another image that spans the width of the screen but is only maybe 400px high or something; like a decorative strip on top of the wood background?

    Thanks again for your help!

  7. south11
    Member

    Another question, is it possible to make the header space smaller? I'd really like it to be half the height it currently is and move my menu up higher. I'm really butchering this theme aren't I? :-)

    And, how do I add an image under the menu (so the menu sits on top) but that wraps the content area. Like a lot of websites have something that looks like a little banner that their menu sits on but wraps a little around the side of the content area.

    Thanks again, I hope I'm not being too bothersome.

  8. designsimply
    Staff

    is there a way to add multiple images on top of the existing Adventure Journal background?

    Yes, you can use CSS3 to set multiple backgrounds on the same element. Note that CSS3 is new and does not work on older browsers.

    Here is an example of how to set two images for the #content area in the Adventure Journal theme.

    #content {
background: url(YOUR_IMAGE_URL_1) left top no-repeat,url(YOUR_IMAGE_URL_2) right top no-repeat;
}

    Replace YOUR_IMAGE_URL_1 and YOUR_IMAGE_URL_2 with your image URLs.

    See this link for browser compatibility information:
    http://caniuse.com/#search=multiple%20backgrounds

  9. designsimply
    Staff

    Is it possible to make the header space smaller? I'd really like it to be half the height it currently is and move my menu up higher.

    You can make the header space smaller. If you do that, you'll need to adjust several other heights in your CSS such as where the #wrapper-content area falls because it has the background image for the middle part of the site and the #menu top value because you had previously moved it using absolute positioning.

    Here is an example of CSS you can add to make the banner image half its current size. You'll want to replace the #banner background url() value with an image URL that is sized to fit the final dimensions you choose. A background image of 920 x 190 pixels would work well in this example:

    #banner img {
display: none;
}

#banner {
display: block;
background: url(http://south11.files.wordpress.com/2012/03/sb_header-sample-3.gif?h=190);
width: 920px;
height: 180px;
}

#wrapper-content {
padding-top: 210px;
margin-top: -183px;
}

#menu {
top: 210px;
}

  10. designsimply
    Staff

    How do I add an image under the menu (so the menu sits on top) but that wraps the content area.

    That wraps the content area? I'm not totally sure what you're getting at--if you could post a similar example from another site, that would help. From what you described, it sounds to me like you would need to design a properly sized image first. It's no problem to place one once you have an image you'd like to use. You could just use a background property on #menu for that. The specific CSS would depend on the type of image though. Can you make an image and link to it?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags