Need help? Check out our Support site, then


Customising "Chateau" theme

  1. I have been using the theme 'Chateau' on my WordPress blog (www.caravanchronicles.com) since january 2012.

    I have expanded the menu by adding more items and I find now that the menu is wrapping onto a second line. I also have a problem with the "go" button under the search box instead of at the side.

    I use a WordPress Hosted site, so I don't have access to the CSS but I can apparently add CSS revisions.

    I would like to be able to increase the default width which I think is 960 pixels to either a % width of the browser or a fixed width wider than the current setting so that hopefully the menu across the top will not wrap to a second line and the 'go' button will be to the right of the search box.

    I am not sure what this will do to the column spacing - I would like to retain the width of the left hand column but increase the width of the right hand column....

    I don't want to make any changes that would spoil the design but would welcome any advice about how I could alter the settings in the CSS revisions settings.

    Many thanks

    Simon

    The blog I need help with is caravanchronicles.com.

  2. Simon,

    You can try something like this in the CSS:

    #page-inner, #footer-inner, #copyright-inner {
    	max-width: 1250px;
    	padding-left: 120px;
    	padding-top: 30px;
    }

    You can use either a fixed max-width (like 1250px) or a relative max-width (like 90%).

  3. Hi @kristazaz
    Thank you ever so much, that is exactly what I was looking for.
    I have adjusted the px figures in your example and it works fine.

    Thanks

    Simon

  4. Hi @kristazaz
    Just a small problem....
    I now wish to correct the image in the header. The current size is 960 x 260 and I have an updated image 1100 x 260 however when I go to update the image the update process always wants me to re-crop to 960 x 260.
    Is there a way round this?
    If not, is there a way to centre the existing 960 wide image in the new 1100 wide header?

    Thanks

    Simon

  5. Hi, the following CSS will hide the existing header image and then reinserts the 1100 x 260 image from within the CSS. The code below is slightly different from what was given above and widens things to the width of your new image. I left out the padding for now. See what you think of this.

    #main-image img {
        visibility: hidden;
    }
    #main-image {
        background: url("http://caravanchronicles.files.wordpress.com/2014/07/caravanchroniclesheader02.jpg") no-repeat scroll 0 0 transparent;
        background-size: contain;
        height: 260px;
    }
    #page-inner, #footer-inner, #copyright-inner, #main-image {
        max-width: 1100px !important;
        width: 100%;
        padding-top: 30px;
    }
  6. You know on second thought, try this first by itself.

    #page-inner, #footer-inner, #copyright-inner, #main-image {
        max-width: 1100px !important;
        width: 100%;
        padding-top: 30px;
    }
  7. Hi @thesacredpath

    Absolutely wonderful !!!

    I copied your 'second thought' into the CSS edit and it solved all the layout concerns I had.

    I changed the 1100px to 1200 as clicking on two of the menu items the change of text that shows which link is active still caused the menu line to wrap which resulted in an 'image jerk' as the new page loaded. I also reduced the padding to 10px to recover some of the white space due to the slightly larger picture hight.

    My original picture works fine which is great as my re-cropped original to the intended 1100 lost some of the blue sky which lost the feel of the original.

    It still has the look, feel and balance of the original theme which I like.

    Many thanks @thesacredpath and @kristazaz for your time and skills.

    Kind regards.. from a happy wordpress blogger :o)

    Simon

  8. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic