Need help? Check out our Support site, then


Header alignment issues and hover size adjustments

  1. Hi, I have the website http://www.travellingassassin.com with the custom design element. (Imbalance2) What I want to know how to do this:

    1. To have my (already created and saved) custom menu of category pages to be in the top/middle right of the header. (directly opp gun nozzle) I have the menu and went into custom menu widget and the menu planted itself where the "search" button is and wont budge. How can I move it up and so that the text is vertical and straight rather than horizontal?

    2. With this custom menu, I want it in the header as a vertical menu, but I have sub categories as well. I do not want the subcategories to automatically show up - only when the reader hovers over the main category page. (as in "USA" is the main menu item and when you hover over it then the sub categories show like it would with the main menu)

    3. Is there anyway to get the same sidebar that was located on my last blog (Pilcrow - the right hand side sidebar)

    4. How do I make the last post I did larger than all of the others so it looks like a feature post?

    5. How do I get all of my front page images/boxes the same size? I dont mind having text there but I read people have used tags to make them all the same size rather than CSS. How would I go about doing this?

    6. Is there a way to reduce the size of the coloured hover on the front page? The black seems a bit too thick as it outlines each of my blog outlines.

    7. How do I get the header down the bottom to be the entire width of the page rather than packed in on the right hand side?

    8. How do I make the photos in each blog post span the entire width of the page? I have seen it in blogs such as the photographer theme, and I have played around with the resizing my images but it does not work.

    Sorry for so many questions but I have been searching for hours and can't find the answers. Thanks!!

    The blog I need help with is travellingassassin.com.

  2. *header down the bottom is the bottom footer :)

  3. 1. To have my (already created and saved) custom menu of category pages to be in the top/middle right of the header. (directly opp gun nozzle) I have the menu and went into custom menu widget and the menu planted itself where the "search" button is and wont budge. How can I move it up and so that the text is vertical and straight rather than horizontal?

    I can give you some CSS to get you started, and then you can adjust the numbers to move the menu around inside header area.

    #header {
    	position: relative;
    	border: 1px solid red;
    }
    #header-left {
    	position: absolute;
    	top: 20px;
    	right: 60px;
    	max-width: 200px;
    	border: 1px solid red;
    }
    #header-left div ul li {
    	clear: both;
    }

    I added red borders for clarity. Once the menu appears where you want in the live preview, remove the lines with "border: 1px solid red;" before publishing.

    If you edit the top and right values, you'll see how the menu can be moved. If you change the max-width value, you can see how the menu turns from vertical to horizontal. The "clear: both;" part makes each menu item appear on its own line.

  4. 2. With this custom menu, I want it in the header as a vertical menu, but I have sub categories as well. I do not want the subcategories to automatically show up - only when the reader hovers over the main category page. (as in "USA" is the main menu item and when you hover over it then the sub categories show like it would with the main menu)

    Sorry, I'm not sure I follow on this one. Do you mean you want submenu items on the main menu to only work when you're on a category page? It might be possible to set something like that up, but it would take a bit of work and a lot of CSS. I would recommend sticking to the normal menu functions across all pages.

    Also, just to make sure you're aware, did you know you can add submenu items directly into a custom menu by dragging them a little to the right below a main menu item until it pops into a submenu position? Here is an example: http://en.support.wordpress.com/menus/#changing-the-order-creating-sub-menus

  5. 3. Is there anyway to get the same sidebar that was located on my last blog (Pilcrow - the right hand side sidebar)

    Do you mean get the same widgets onto your new blog or do you mean you want to try to duplicate the formatting from one to the other?

    Each theme has unique, pre-defined widget areas. Moving them is possible, but can be tricky, especially when dealing with a theme like Imbalance 2 which uses a JavaScript script called masonry to arrange posts on the home page. I can guide you and point you in the right direction to help with learning CSS or basic CSS questions, but to make a major structural change to your site, you should contract the work from a designer such as the ones mentioned at http://en.support.wordpress.com/customize-my-site/request-theme-customization/

  6. 4. How do I make the last post I did larger than all of the others so it looks like a feature post?

    First, you should understand how the masonry script works. This article has a good visual example: http://www.wplover.com/1818/tutorial-using-jquery-masonry-with-wordpress/

    You cannot change the size of the images inside masonry boxes on the home page, which are set in the PHP code, but you can adjust the size of the outer box. Here is an example that targets the first post on the left using the :first-child pseudo selector.

    #boxes .box:first-child,
    #boxes .box:first-child .texts {
    	width: 400px;
    }

    If you are interested to learn more about about pseudo class selectors, you might like this article: http://css-tricks.com/pseudo-class-selectors/

  7. 5. How do I get all of my front page images/boxes the same size? I dont mind having text there but I read people have used tags to make them all the same size rather than CSS. How would I go about doing this?

    That isn't really how the theme was designed, so it might be better to pick a theme that works like a grid instead of a theme like Imbalance 2 which uses the masonry script. For example, check out TheStyle and Gridspace at http://theme.wordpress.com/themes/search/grid/

    Having said that, here is a way to edit the boxes to all be a height of 420px:

    #boxes .box,
    #boxes .box .texts{
        height: 420px;
    }

    I selected 420px because that height worked best for posts with portrait style images. You may want to try it out and select a different height, but be careful as some content may overlap if the height you choose isn't tall enough to accomodate all of your content and future content.

    Alternatively, using the masonry style for layout will make different sized posts all arrange themselves in such a way as to avoid extra white space for various sized posts.

  8. 6. Is there a way to reduce the size of the coloured hover on the front page? The black seems a bit too thick as it outlines each of my blog outlines.

    The bottom left color in the Appearance → Themes → Customize → Colors panel will adjust the box hover color.

  9. 7. How do I get the header down the bottom to be the entire width of the page rather than packed in on the right hand side?

    Give this a try:

    #footer {
    	position: absolute;
    	left: 4%;
    	width: 92%;
    }

    Adjust the percentages to your liking.

    Changing the positioning for the footer makes the stats smiley pop up and look a bit more visible. You can hide it by adding this:

    #wpstats {
    	display: none;
    }
  10. 8. How do I make the photos in each blog post span the entire width of the page? I have seen it in blogs such as the photographer theme, and I have played around with the resizing my images but it does not work.

    It helps very much to have an example post to look at. I found that your latest post has photos in it:
    http://travellingassassin.com/2013/05/28/how-to-save-money-on-mackinac-island-2013-season/

    Do you mean that you want to get rid of the left side margin that contains the previous/next links as well as the Gravatar images to the left of comments and then make the rest of the post expand to fit the space or do you just want photos to be big enough to fill the current given space for the post content area?

    If you're looking to adjust the left side margin, maybe start by reviewing this post since the questions are related and you could use that code to adjust the width of posts just like they did:
    http://en.forums.wordpress.com/topic/moving-previousnext-buttons?replies=13

    Here is an adjusted example using that thread as a starting point:

    .entry-content {
    	width: 960px;
    	margin: 0 auto;
    }
    .post_title {
    	width: 960px;
    	margin:0 auto;
    	overflow:visible
    }
    .post_title h1, .post_title h2 {
    	margin: 0;
    	padding-top:30px
    }
    #comments {
    	width: 960px;
    	padding: 0;
    	margin:0 auto
    }
    #content {
    	position: relative
    }
    #nav-above {
    	position: absolute;
    	text-align:left;
    	top:0
    }
    .post_title {
    	padding-top: 20px
    }

    The widths are set to 960px in this example, but you can adjust any of the number values to try out different things until you get the look you're after.

  11. Sorry for so many questions but I have been searching for hours and can't find the answers.

    Would you mind please posting each question (or small groups of similar questions) in separate threads next time? It helps to keep things organized, especially when any back-and-forth conversation continues on a thread.

Topic Closed

This topic has been closed to new replies.

About this Topic