Customising "Chateau" theme

  • Author
    Posts
  • #1961607

    simonpbarlow
    Member

    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.

    #1961917

    kristazaz
    Member

    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%).

    #1961924

    simonpbarlow
    Member

    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

    #1961925

    simonpbarlow
    Member

    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

    #1961962

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

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

    simonpbarlow
    Member

    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

    #1961992

    You are welcome.

The topic ‘Customising "Chateau" theme’ is closed to new replies.