Easy one: align the title text and widget area in the header

Community Forums Forums Design Tips and Tricks Easy one: align the title text and widget area in the header

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  sebgates 1 year, 4 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #32224

    sebgates
    Participant
    Post count: 57

    I am using the Sample theme. I am trying to make  a wide style layout: http://irishherbalist.xl-websites.com/ . I removed the max width of the wrap and then added the ‘margin 0′ ‘max width 1152px’ to the other inner elements. Everything seems OK apart from the site title and the right hand widget area in the header. I have tried a number of tricks to get the site title to align left above the main body of text and the same with the right hand widget. Basically what I am trying to do is make the header, title and right hand widget behave the same way it does when the wrap is 1152px as if the page were a normal rectangle. Has anyone created a wide style site from the sample theme and worked out a way to resolve the problem I am having with the header?

     

    Thanks – Seb

    #32226

    braddalton
    Participant
    Post count: 9270

    Add this CSS code to the end of your child themes style.css file and change the values so you can align your widget text with your sites title:
    [css]
    #header .widget {
    padding-top:25px;
    padding-bottom:10px;
    padding-right:50px;
    padding-left:50px;
    }
    [/css]

    You can also move your title around using the same method.

    This is sample code which will need modifying.
    [css]
    #title {
    padding-top:25px;
    padding-bottom:50px;
    padding-right:50px;
    padding-left:50px;
    }
    [/css]

    I’d suggest you install Firebug addon for Firefox and inspect both elements if needed.

    Learn more about CSS padding http://www.w3schools.com/css/css_padding.asp


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #32231

    sebgates
    Participant
    Post count: 57

    Thanks Brad, that is not too far away from the solutions I was trying. The problem I get is when I scale the browser window down. The 2 elements seem to go all over the place. I could write seperate css rules for tablet and phone but I would rather try this:

    If I was creating this design in Dreamweaver of some similar program, I could create a new div inside the Header div, set the max width of this new div to 1152px and the float the title left within it and float the widget div right within it.

    I am relatively new to CMS development and I don’t know how to create new div additions within the Genesis layout. How would I add a new div in the Header to place the title and widget in? Or I guess you could describe it as behind the title and widget div’s?

    Thanks – Seb

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.