Chateau Theme – CSS coding needed – Move Menu Bar etc

  • Unknown's avatar
    htiireland · Member ·

    Hi there,

    I have just acquired the custom upgrade feature.

    I can not find how to centre the header image.
    (Currently I have it floating to the right.)

    I reduced the size of the image to height 260 px due to the image then forcing the text onto the pattern of the background image.
    Is there any way to fill the width of the page and avoid this happening again?

    I wish to move the menu bar to below the header image.
    Once I have applied the coding for this, does that then mean that the drop down / child pages over lap the content text on each of the pages?

    Is there a way to highlight the rollover on the drop down menu by perhaps a solid box around it as its very faint?

    Any feedback would be greatly appreciated.

    http://thebritishsocietyofhypnotherapists.wordpress.com/

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, to center your header image, remove the float from #main-image and then add margin-left and margin-right to it with a value of “auto” like this: 

    #main-image {
    max-height: 260px;
    max-width: 630px;
    margin-left: auto;
    margin-right: auto;
}

    To move the menu below the header, add the following. 

    #branding {
    position: relative;
    min-height: 450px;
}
#menu {
    position: absolute;
    bottom: 0;
}

    To give a border to the submenu, add the following. I also set the color of the background on the submenu to a solid white so that other text doesn’t show through it from behind and cause confusion.

  • Unknown's avatar
    htiireland · Member ·

    They all worked absolutely perfect, thank you so much!

    Is there an option to centre the menu bar too?

    I tried adding
    margin-left: auto;
    margin-right: auto;

    instead of absolute but no joy – im a complete novice at this.

    Does wordpress offer tutorials – I most definitely need them!

  • Unknown's avatar
    htiireland · Member ·

    Also I am curious to learn as to why my background image has now become cropped at the bottom footer section.

    Is there any way to adjust this so that it is fully visible again?

    Many thanks

    Jane

  • Unknown's avatar
    thesacredpath · Member ·

    Jane, there is some code that works as long as the menu is not over one line. With two lines or more it reverts back to the default alignment.

    On the image issues, I would suggest cutting the bottom scroll away from the columns. The columns can remain as a body background image, and then the scroll can be put into #page. If you look around at your pages like this one with longer text, you will see the text and/or sharing buttons overlap the scroll. By putting the scroll at the bottom in #page, you can space things so that the scroll is always at the very bottom of the page below comments and the sharing stuff. To do that, upload the image to your media library, get the URL of that image and replace URL_OF_IMAGE between the quote marks with the URL of your new image. I included some bottom padding, which you can adjust so room can be made for the scroll.

    #page {
background: url("URL_OF_IMAGE") no-repeat scroll center bottom transparent;
padding-bottom: 200px;
}

    Shorter pages where the content ends before the bottom of the columns, may require setting a minimum height for #page-inner so that the scroll artwork doesn’t ride up and into the columns.

  • Unknown's avatar
    htiireland · Member ·

    Hi there

    I have been searching through the forums and I have tried several codes for centering the page titles on my blog that has the custom upgrade, for ex

    .page .entry-title {
    text-align: center;
    }

    And it does not effect the page title and centre it.

    Also I have tried several attempts to remove the Leave a reply and comment box through the several option settings and also through the discussion menu area below appearance and I still can not remove it from all pages except the contact page.

    I have reconsidered my menu bar after your advise on how it can not centre when it flows into two lines so my next work will be to, only have 3 buttons and the rest as drop downs and then I will need to learn how to increase the font size of the menu bar titles.

    Many thanks

    Jane

    http://thebritishsocietyofhypnotherapists.wordpress.com/

  • Unknown's avatar
    htiireland · Member ·

    p.s. I thought with the custom upgrade there was adds on the page? I currently have several appearing at one time inc hypperlink adds.

    any info to erase these would be greatly appreciated

  • Unknown's avatar
    htiireland · Member ·

    p.p.s Is it possible to have all of the sharing option buttons at the bottom in one row?

    Thanks

    Jane

  • Unknown's avatar
    hallluke · Member ·

    This will centre your titles:

    .post-title h1 {
  text-align:center;
}
  • Unknown's avatar
    htiireland · Member ·

    great thank you hallluke for helping me with that section of my questions :-)

  • The topic ‘Chateau Theme – CSS coding needed – Move Menu Bar etc’ is closed to new replies.