D7, Bartik - how to swap logo and main header colour depending on URL or path?

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
spessex's picture

Hi all

Does anyone know if there's an easy way (or even just a way!) of changing the logo and main header colour depending on the URL/path (I'm using the Bartik theme for D7)? For example on http://www.cerebraluk.com/ I would like it for instance to change to a different logo and green main header when I click on 'market research services'. Similarly, it would change to other different logos/colour headings when clicking on other main navigation areas.

Any help or advice would be greatly appreciated.

Thank you

Stephen

Comments

Context

richmac's picture

Hi Stephen,
The easiest way would be to use Context module - http://drupal.org/project/context.
Create a new context with a condition of path and a reaction of theme HTML.
Then make the changes in your CSS, referring to the class you have created in Context above.
Hope that helps.

Delta/Context

spessex's picture

Hi Richard

Just thought I'd give you a heads-up that I finally managed to sort this. Took your advice and used context but instead utilised it with Delta (the issue was that it appears the logo in Bartik cannot be replaced using CSS) and can now swap the logo depending on URL.

Cheers

Ste

Could you elaborate ..

vivdrupal's picture

@spessex Could you please elaborate on you configuration to swap logos.

Thanks
Viv

Thanks

spessex's picture

Thanks Rich. I'll give it a shot :-)

Thanks

spessex's picture

Thanks Rich. I'll give it a shot :-)

Hi, Context and Delta are

adamelleston's picture

Hi,

Context and Delta are perfect together do this. I wrote a quick blog post on how I am using them currently for a project http://creativecss.co.uk/blog/subsites-drupal-la-bbc-style

But its easy enough to pick up after installing context and delta.

CSS Injector

Andy Inman's picture

Another solution could be CSS Injector since it allows you to do CSS tweaks on a per-page basis. As an example, see http://new.netgenius.co.uk - the logo is full-size, but at http://new.netgenius.co.uk/contact the logo is smaller, and other page elements are adjusted to use less space in the header area.



Currently part of the team at https://lastcallmedia.com in a senior Drupal specialist role.

CSS Injector

spessex's picture

Hi

Thanks for CSS Injector suggestion.

I've managed to change quite a few things with this with the exception of the logo. Would it be possible for you to paste in your code for the logo swap as I just can't work out the selector.

Thank you

Stephen

Image adjustments via CSS Injector

Andy Inman's picture

Hi Stephen,

In my case the logo image is simply resized via css - the same (cached) image will be used by the browser, just resized to display smaller. If you want to use a different image depending on url, then it would need to be as a background rather than an Only local images are allowed. element, so that you could set a different image url via css.

Using CSS Injector, I have two rule sets, one called front-page adjustments and the other non-front-page adjustments.

Non-front-page:

/* Use less space at top of page */
#logo img {
  height: 28px;
  margin-top: 4px;
}

There's other stuff in there to tweak margins and padding for various elements depending on whether it's the front-page or not.



Currently part of the team at https://lastcallmedia.com in a senior Drupal specialist role.

Thank you Andy . I can do

spessex's picture

Thank you Andy . I can do everything I want to with the CSS Injector (which is brilliant) in Bartik with the exception of changing the logo, even using #logo img as the selector. I've used Firebug and still can't quite figure out what I'm doing wrong.

Use #header img

Andy Inman's picture

I just took a quick look at what Bartik is doing (on your site) and it appears you will need to specify #header img rather than #logo img as in my example. Again, since it's an img tag, you won't be able to change the image source to use a different logo, only the css properties (size, margin, padding etc, etc.)

Hope this helps.



Currently part of the team at https://lastcallmedia.com in a senior Drupal specialist role.

Great Andy. Thanks a lot.

spessex's picture

Great Andy. Thanks a lot. I'll take a look and see what I can do.

You should try to work with

Gearhart's picture

You should try to work with new tools. As there are lot of different tools available it would be an easy thing to create a logo according to your need. design a business logo

United Kingdom

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week