[Solved] Different Logo For Each Page

[crawling]

Hi,

I am trying to give each page a unique logo image
for this page i have this logo

http://unitednews.sr/category/news/

for category magazine i want a different logo

http://unitednews.sr/category/magazine/
http://unitednews.sr/wp-content/uploads/2014/11/logomag.png

So in stylesheet i add this for magazine

.category-3 #logo a { background: url(http://unitednews.sr/wp-content/uploads/2014/11/logomag.png) no-repeat; }

the problem is that magazine logo is not replacing the news logo , the news logo seems to be global.
now if i remove the news logo from being global and add this

.category-1 #logo a { background: url(http://unitednews.sr/wp-content/uploads/2014/11/logo.png) no-repeat; }

Then the logo does not appear at all .
Anyone can help me with this ?

[Paulie_D]

I ‘m not sure we have enough information to go on but basically the CSS needs something unique on each page to grab on to to work.

This is generally done by giving each page an ID (or unique class) and then using that to hook the required image too.

So what is .category-3 and is it only found on your “magazine” page and no others?

[crawling]

.category-3 is the category that has to do with magazine
i can also use .category-magazine, so the logo should appear only on category-magazine pages

[Paulie_D]

It’s really not clear what those classes do.

Are they attached to the body tag of each page?

[crawling]

Yes they are attached to the body of each page .

[Paulie_D]

Then I guess we’d have to see it actually “not working”.

Do you have a link?

[crawling]

This logo is for category news
http://unitednews.sr/category/news/

For category magazine i want a different logo

http://unitednews.sr/category/magazine/
http://unitednews.sr/wp-content/uploads/2014/11/logomag.png

[Senff]

Your logo link has an IMG element to show the logo, but you’re trying to change it by using background images. That won’t work (unless you remove the IMG in some way):

<div>
    <a href="http://unitednews.sr" title="" rel="home"><img src="//unitednews.sr/wp-content/uploads/2014/11/logo6.png" alt="" /></a>
</div>

Second: on the News page, there already isn’t a logo — it’s a missing image: http://unitednews.sr/wp-content/uploads/2014/11/logo6.png

And lastly, you said you tried this code to change the logo on the Magazine page:

.category-3 #logo a { background: url(http://unitednews.sr/wp-content/uploads/2014/11/logomag.png) no-repeat; }

However when I look in your CSS, that code doesn’t appear anywhere.

[crawling]

The logo for the news page shows up in my browser , i changed it to
http://unitednews.sr/wp-content/uploads/2014/11/logo.png

if you go to the magazine page you will see now that there are 2 logo’s in place.
the news one and a magazine one.

.category-3 #logo a { background: url(http://unitednews.sr/wp-content/uploads/2014/11/logomag.png) no-repeat; }

[Senff]

Indeed. Like I said, you’re using an IMG element for the logo and ALSO a background image.

Use one or the other. Using both will result in, well, seeing two logos.

[crawling]

In the backend of the theme you have the option to upload a logo , now this logo that you upload will be displayed on all pages automatically .

now if you put a logo in css for a page or category , you will then have the logo that you uploaded in the backend plus the logo that you placed in css.
the logo you place in css will not replace the logo that you uploaded in the backend.

so what i want is to upload the logo in css only and not in the theme options, but noting shows up when i do that , the logo only shows up when i upload it in the theme options .

There is a php file called logo.php and this is the code in it .

if ( ! function_exists( 'wpex_logo_img_src' ) ) {
    function wpex_logo_img_src() {
        $src = get_theme_mod( 'wpex_logo', get_template_directory_uri(). '/images/logo.png' );
        if ( isset( $_GET['wpex_white_logo'] ) && 'true' == $_GET['wpex_white_logo'] ) {
            return get_template_directory_uri(). '/images/logo-white.png';
        }
        $src = apply_filters( 'wpex_logo_img', $src );
        if ( $src ) {
            return $src;
        } else {
            return false;
        }
    }
}

if ( ! function_exists( 'wpex_logo' ) ) {
    function wpex_logo() {

        // Vars
        $logo_img = wpex_logo_img_src();
        $blog_name = get_bloginfo( 'name' );
        $blog_description = get_bloginfo( 'description' );
        $home_url = home_url(); ?>

        <div id="logo" class="clr">
            <?php if ( $logo_img ) { ?>
                <a href="<?php echo $home_url; ?>" title="<?php echo $blog_name; ?>" rel="home"><img src="<?php echo $logo_img; ?>" alt="<?php echo $blog_name; ?>" /></a>
                <?php if ( $blog_description && get_theme_mod( 'wpex_logo_subheading', '1' ) ) { ?>
                    <div class="blog-description"><?php echo $blog_description; ?></div>
                <?php } ?>
            <?php } else { ?>
                <div class="site-text-logo clr">
                    <a href="<?php echo $home_url; ?>" title="<?php echo $blog_name; ?>" rel="home"><?php echo $blog_name; ?></a>
                    <?php if ( $blog_description && get_theme_mod( 'wpex_logo_subheading', '1' ) ) { ?>
                        <div class="blog-description"><?php echo $blog_description; ?></div>
                    <?php } ?>
                </div>
            <?php } ?>
        </div><!-- #logo -->

        <?php
    }
}

how can i style a logo without uploading it in the theme options ?

[lainek]

Hi,

I assume that we are talking about WordPress based website here so i may have what you are looking for.

First you need to download and install this plugin: https://wordpress.org/plugins/wp-add-custom-css/

Upload all different logos to WordPress.

Apply different css .logo { background-url } to all those pages that you need to have different logo.

That plugin will run easily different css rules for certain pages and by that you will have different logos.

Hope this helps.

-Kim-

[crawling]

Thanks Kim but that is not the problem here , i created a child theme and everything custom goes to the child style.css

The css works fine but just want the logo to appear without going to the theme options .
Like for now i have this in style.css for the news page
.category-1 #logo a { background: url(http://unitednews.sr/wp-content/uploads/2014/11/logo.png) no-repeat; }

But the logo is nowhere to be seen .

[Senff]

Like for now i have this in style.css for the news page
.category-1 #logo a { background: url(http://unitednews.sr/wp-content/uploads/2014/11/logo.png) no-repeat; }

Where? I don’t see it in either http://unitednews.sr/wp-content/themes/unitednews/style.css?ver=4.0.1 , or in http://unitednews.sr/wp-content/themes/wpex-twenties/style.css

Also, every time I check your page after you post a message here, your code/site is different. If you keep changing it, then you’re making it harder for us to help.

[crawling]

Sorry i tough i saved the css but didn’t , it’s there now
http://unitednews.sr/wp-content/themes/unitednews/style.css

[Author]

Posts