Looking for some help with the header area in News Pro

Community Forums Forums Design Tips and Tricks Looking for some help with the header area in News Pro

This topic is: resolved

This topic contains 2 replies, has 2 voices, and was last updated by  kichigai 8 months ago.

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

    kichigai
    Member
    Post count: 7

    I am a total neophyte with reading and interpreting CSS and PHP code so I am hoping that someone can help me with some pointers on how to address some problems I am having with the site that I am developing for my wife’s travel blog. To understand my questions you might need to look at the site – http://sixlegswilltravel.com.

    1. I figured out how to adjust the size of the header and I thought it was going to fit across the entire page but it seems not to go all the way to the left margin. How do I find the actual width of the page so I can adjust so the header fits all the way across?

    2. On the top and bottom of the header there is white space between the header block and the menus – I would like to be able to eliminate or significantly reduce the white space so the menus are in close proximity or touching the header block

    3. I had just started with News when News Pro came out – I switched because it was supposed to be a responsive theme. It does seem to work fine on my iPhone 4S but when I pull the site up on my iPad (retina display but iPad3) the header truncates on the LHS in landscape mode and on both sides in portrait mode.

    Wondering if anyone can point me in the right direction to get these issues resolved

    Many thanks in anticipation

    Simon

    #81032

    braddalton
    Participant
    Post count: 9308

    1. Firstly, you’ll need to add the first block of PHP code from this post at the end of your child themes functions.php file http://www.carriedils.com/customize-genesis-move-header/2182/

    Then you’ll need to increase the min-height value in this code from 90px to the height of your header which in this example is 200px. You’ll find this CSS code on Line 1062 of our child themes style.css file.

    [css]
    .header-image .site-title a {
    float: left;
    min-height: 200px;
    width: 100%;
    }
    [/css]

    2. You can also remove this CSS code which adds the white space (padding). You’ll find this code on line 1004 of our style.css file.

    [css]
    .site-header .wrap {
    padding: 40px 0;
    padding: 4rem 0;
    }
    [/css]

    After you do this, you can then add your header image.

    If you use the Custom Header functions under Appearance > Header, you will need to change the values to match you header image in this PHP code which you’ll find in your child themes functions.php file on line 35:

    [php]
    //* Add support for custom header
    add_theme_support( ‘custom-header’, array(
    ‘header_image’ => ”,
    ‘header-selector’ => ‘.site-title a’,
    ‘header-text’ => false,
    ‘height’ => 200,
    ‘width’ => 1140,
    ) );
    [/php]

    There’s other ways to add your header image including using CSS and PHP code.

    3. Once you have your header image working the way you like, then i suggest you start a new topic for your 3rd question.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #81208

    kichigai
    Member
    Post count: 7

    Brad:

    Thank you for your very comprehensive response – I followed through with each of your suggestions and found the following:

    The code added to the function.php did something rather unexpected as it moved the header from between the two menus to above the upper menu. While I have used this sort of format on another website that I put together I actually quite like what News-Pro did with the header sandwiched between the two menus. So after looking at that effect I decided to delete that code again. But I will certainly keep it in mind for another website that I have in mind to create when I can get this current one right.

    I followed up with your other suggestions and now have the header with the two menu closely banding the header as I had imagined it and in my opinion looks great getting a contrast between the dark brown of the menus and the parchment color in the header.

    Thank you for helping me to get this part sorted out. I will be following up with some additional questions regarding the responsiveness for an iPad once I get a bit further with some of the other design features I am trying to achieve.

    Simon
    simon@twowritehands.com and currently working on sixlegswilltravel.com

    • This reply was modified 8 months ago by  kichigai.
    • This reply was modified 8 months ago by  kichigai.
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.