根据.css文件更改徽标

Question

I have this code in my header.php :

    <div id="logo">
    <?php if( get_option('of_logo') != '') { ?>
    <a class="image" href="<?php echo get_option('home'); ?>/" title="Home">
        <img src="<?php echo get_option('of_logo'); ?>"  />
    </a>
    <?php } else { ?>
        <h1 class="front-page-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a></h1> 
        <h2><?php bloginfo('description'); ?></h2>
    <?php } ?>
    </div>

All works great! basically it says if the user uploads a logo image in the theme options panel, then show that image, else, show some text.

Now I need to replace this:

    <?php } else { ?>
        <h1 class="front-page-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a></h1> 
        <h2><?php bloginfo('description'); ?></h2>
    <?php } ?>

with display a image based on the style.css the user choose. And my problem here is if I go to each css file and declare a diferent image, then if the user uploads a image also, both images show on page.

So how can I do that? thanks

Answer 1

Use a an id or class on your default logo and declare the image urls in the various css files using background-image :

<?php } else { ?>
    <div id="default-logo"></div>
<?php } ?>

In the css files:

#default-logo {
    background-image: url(".../1.jpg");
    width: 80px;
    height: 80px; /* the dimensions of your logo */
}