Can I add a background image to the top header?

Hi there,

I am just getting going with your themes and plugins. Great stuff!

I have a couple questions as I get used to your template. The site I am setting up is here: Ecobricks.org

1. Can I add other google fonts than the ones listed in the template drop down menu?

2. I am totally not happy with the size of the paragraph text. :slight_frown: How can I increase the size of all the paragraph body text?

3. Can I add a background image to the top header (its orange on our site now, the header with the logo and the menu buttons)?

4. If not this top header, how about the grey one beneath?

Thanks!

Russell

  • Alexander

    Hi @Russs,

    Sure, it's possible to do many of these customizations. First, do you have a child theme setup? http://codex.wordpress.org/Child_Themes This would help make things more update proof if you wanted to edit and template files.

    1. This is a tricky one. It's not that simple to just add more. However, you could go to custom-functions.php and modify the code there. I think the easiest way to to this would be to replace one of the Font options there with another choice from Google Fonts.

    2. You can increase the paragraph font size with this CSS:
    p { font-size: 1.2em; }
    You can add this to the theme's stylesheet, in a child theme, or using a plugin like My Custom CSS.

    3. & 4. Sure, you will need to upload a background image first, then add either of these CSS rules. Replace the URLs with links to your images. The #header-wrapper is for the main header, and the #customheader-wrapper is for the second header where your bottle picture is.

    #header-wrapper {
    background-image: url('http://yoursite.com/link/to/image.png');
    }
    
    #customheader-wrapper {
    background-image: url('http://yoursite.com/link/to/image.png');
    }

    Hope this helps! Let us know if you need any other assistance here!

    Best regards,

  • Russs

    Thanks Alexander for the super helfpul and prompt reply.

    Ok. I have the child theme set up and operational. Thanks for showing me how to do this. The custom-header modification did change the background. I'll worry about the background later though, first I really want to improve the paragraph sizing.

    Alas, the font size doesn't seem to be changing yet. I have added this to the stylesheet to no avail.
    p { font-size: 1.2em; }

    Second, I would like to add precisely one googe font to the template-- Arvo normal 400. We happen to be already using it in our desktop publishing, so it would be invaluable to integrate into the site. How do I go about finding "custom-functions.php"? I don't see it anywhere.

    Third, I am using the custom header to direct site visitors to a download page. This custom header is very useful. However, it is very confusing to land on the download page and still see the custom header! Is there a way to remove it from specific pages?

    Thanks again!

    Russell

  • DavidM

    Hi Russs,

    Working with Alex on this, I can see you've got quite a few of these changes successfully made thus far.

    You mentioned the font size not changing. I'm seeing the change in the style itself on your site. Are you still not seeing that?

    As for the Arvo font. I believe you could just add this to your child theme's functions.php file:

    <?php
    function add_sarvo_font() {
    	echo "<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>";
    }
    add_action('wp_head', 'add_sarvo_font');
    ?>

    That should add the reference you'll need to the font directory to load the font.

    You won't need to worry about the custom-functions.php file with this method. While I believe the method Alex mentioned is optimal, this bit of hacking will still work and will save you from extensive edits.

    With the font loaded, you can now add that font to whatever you like. For example, to your paragraphs:

    p {
    font-size: 1.2em;
    font-family: 'Arvo', serif;
    }

    We've got that last item covered with your other thread so hopefully these few things will sort this all for ya. :slight_smile:

    Cheers,
    David

  • Russs

    Thanks guys. Heh... yeah, I have to get this site launched today, so some of your other comments have shown me the direction to figure all these things out. I was able to include the Arvo font by adding

    <link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>`

    to the top of the css in the My Custom CSS plugin. I think it would have worked adding that to the CHild-Template CSS too. Let me know if I making a mistake by not using your PHP method!

    I have one more issue connected to the theme and these CSS modifications:

    For some reason the 'Download' button on the custom header has turned a very plain and inconspicuous grey. :-S I want it to be conspicuous! How can I get it so? Say, like the blue of the rollovers on my menu bar?

    Thanks!

  • Alexander

    HI @Russs,

    If it's working, I suppose that's ok. I was unaware that My Custom CSS could do this.

    The problem with the download button, is that it's made from an image. On my screen I see a grey button with orange text. The button doesn't stand out because you've changed the background color.

    There isn't a simply way to change the image, but we could try working on the custom background first to see how this would affect the button. You can also darken the border of the button with this CSS:

    a.button { border: 1px solid #a2a2a2; }

    Best regards,

  • Russs

    Ok... I am attempting to add the background image to the header. I have chosen to add the image to the bottom blue footer bar. However, I've tried Alexander's advice to all the DIVs in that area (feature-wrapper, feature and content-blue-blocks) like this:

    #feature-wrapper {
    background-image: url('http://www.ecobricks.org/wp-content/uploads/2013/11/Vision-cropped-monotone-e1385302407467.jpg');
    }

    But no luck! :slight_frown:

    What am I doing wrong? I want to center position a long banner image in that area.

    Thank you!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.