WordPress.org

Ready to get started?Download WordPress

Forums

Trying to upload header image and finding banner tag (6 posts)

  1. Michael K.
    Member
    Posted 6 years ago #

    I'm trying to do two things to my blog:

    1) Replace my header text with an image
    2) Make sure my blog name still appears in my browser and search results

    The only problem is that instead of having a header tag on my style.css I have this:

    #banner {
    width: 675px;
    height: 145px;
    padding: 0;
    margin: 0;
    }

    #banner h1 {
    padding: 45px 0 0 0px;
    font-size: 2.26em;
    color: #dddddd;
    }

    #banner h3 {
    padding: 3px 0 0 0px;
    color: #999999;
    font-size: 1.06em;
    font-style: normal;
    }

    The tutorials I find on adding header images talk about header tags but not banner tags. Also, my header.css doesn't look like the ones referred to in other tutorials. It starts like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> ยป Archive <?php } ?> <?php wp_title(); ?></title>
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_get_archives('type=monthly&format=link'); ?>
    <?php wp_head(); ?>

    ...etc.

    My blog is http://anxiety-driven-life.com/ and I'm using the Plane Jane theme.

    I've tried contacting the theme author but he's too busy with other projects to help me out. Any help would be greatly appreciated!

  2. drewactual
    Member
    Posted 6 years ago #

    uhhhokay.... several things going on here...

    1. CSS: cascading style sheets. it refers to a file which defines the presentation of elements on your page. Your css will change the way every single element is displayed, as long as you have defined the html in which it resides.

    2. the script you listed is your theme header, and is a php file. you will see for example a header.php, index.php, sidebar.php, and a footer.php. When you are viewing your page on a browser you are looking at all of those at the same time, as in combined.

    3. to customize your theme you will have to be knowledgeable on html, and some php.

    It isn't that hard. You will need to read a tutorial on html to start. the php files which control your themes are written primarily in html. They use the php extension so they can call for dynamic content with nice little php scripts... you couldn't do that with html alone (for the most part)...

    I highly recommend you learn how to do this yourself. Look at it as a journey of sorts. It is very satisfying to build your own web-page from out of nothing, much in the same way it is to build a house, or deck or whatever from lumber... Without understanding the code, what you are asking will take somebody a good while, and cost you $$ for doing so... Once you understand the code you can crank themes out like it is cool.

  3. Michael K.
    Member
    Posted 6 years ago #

    I've actually replaced the header text with an image on other WP themes. What's throwing me on this one is that the header.css looks so different and that I have a banner tag instead of a header tag in my style.css. I was hoping someone could help work around this.

  4. drewactual
    Member
    Posted 6 years ago #

    in your css, find #banner.

    in banner you will want to add the following:

    background-image: url('the url to your image.whateverextensionpicyouuse');

  5. Michael K.
    Member
    Posted 6 years ago #

    Yahoo! That worked! Now how do I hide the header text while making sure it still displays in the browser and search results?

  6. Michael K.
    Member
    Posted 6 years ago #

    Never mind. I just added this to the end of my style.css and it worked:

    #banner h1 { display:none }
    #banner h3 { display:none }

Topic Closed

This topic has been closed to new replies.

About this Topic