Posted by spessex on November 7, 2012 at 2:16pm
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
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
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 ..
@spessex Could you please elaborate on you configuration to swap logos.
Thanks
Viv
Thanks
Thanks Rich. I'll give it a shot :-)
Thanks
Thanks Rich. I'll give it a shot :-)
Hi, Context and Delta are
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
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
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
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 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
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
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.
Great Andy. Thanks a lot. I'll take a look and see what I can do.
You should try to work with
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