Help increasing custom header size on Enterprise theme with CSS

  • Unknown's avatar
    ccabbage · Member ·

    Hello, I am blogging with the Enterprise theme at maxpotentialsports.com. The theme supports custom headers but the height of the area is too small for my logo header to fit there. Is there a way to make it bigger with CSS? I do have the upgrade but not a whole lot of experience with CSS. Though I do have a friend who might be able to help me if someone could give me some general directions? Thanks!

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

  • Unknown's avatar
    fabianapsimoes · Member ·

    Hi @ccabbage,

    Give this CSS bit a try:

    #header {
    height: 200px;
}

    By tweaking the “200px” value, you can adjust the height of your header to your needs.

    If you are interested in CSS, here is a tip: In order to change how an element appears on your page, you need to target it with a CSS selector. A selector is usually an id or class that is applied to the element on its HTML tag. For example, in your page, if you take a look at your page’s source code, you’ll see that the HTML element that contains your header has id equals to “header”. That’s why I used “#header” in the CSS above.

    To find selectors for your elements, you can right click on the element you want to style and select the “Inspect Element” option. This will show a panel with the HTML code for the element you clicked, along with the CSS rules applied to it on the right. See https://dailypost.wordpress.com/2013/07/25/css-selectors/ for more information on how to find CSS selectors.

  • Unknown's avatar
    ccabbage · Member ·

    fabianapsimoes,
    I have read that daily post article you suggested and the one before it, but I think it’ll take me awhile to catch on! And thank you! The code you gave me definitely made the header area bigger. The only problem is when I then go to Appearance –> Header in my dashboard and upload the logo header that I want, it still forces me to crop it to the same small size. So while the area is bigger, I still cant make my logo bigger because of the crop. Any Ideas? Again, thank you! One step closer.

  • Unknown's avatar
    justpi · Member ·

    First make sure the image is 960px wide. Then upload it to your blog via Media > Add New, and once it’s uploaded click Edit and copy its URL from the File URL field of the Save Module. Then add this in the CSS editor: 

    #header {
    background: url("IMAGE URL HERE") no-repeat scroll 0 0 transparent;
    height: 200px;
}

    Replace 200 with the actual pixel height of your image.

  • Unknown's avatar
    ccabbage · Member ·

    Hey, so I tried this and the picture didn’t show up, it was just all grey.

  • Unknown's avatar
    justpi · Member ·

    Please paste here the URL you tried to use.

  • Unknown's avatar
    ccabbage · Member ·

    I tried both of these:
    http://maxpotentialsports.com/?attachment_id=375
    http://maxpotentialsports.wordpress.com/wp-admin/post.php?post=375&action=edit

    The code is increasing the size of the field and turning it from white to grey (my background color), but it isn’t showing the picture.

  • Unknown's avatar
    justpi · Member ·

    It isn’t showing the picture because none of the above is an image URL: the first one is the URL of a page that has the image on it, and the second one is the URL of a dashboard screen. Image URLs always end with the filetype extension (.jpg, .png, etc). In my previous reply I explained how you’d get the correct URL but you didn’t pay attention. This is the URL of your image:
    http://maxpotentialsports.files.wordpress.com/2013/08/mpsp_logo_960x266.png

    (By the way, this isn’t a good quality image: you need to create a better one.)

  • Unknown's avatar
    ccabbage · Member ·

    Got it. Thanks.

  • The topic ‘Help increasing custom header size on Enterprise theme with CSS’ is closed to new replies.