Changing header and ribbon feature of Flora & Fauna theme
-
I’d like to change the header and ribbon feature at the top of my pages. In particular, in this area, I would like to
1. Remove the current header – either completely, or replace it with a new one (is there such an option?)
2. Remove the ribbon feature (which includes the site title; although of course I still want the site to have the same title for the site)
3. I also have a logo which I’d like to put, e.g., instead of the ribbon (and perhaps clicking on the logo / header should take one to the Home Page).
Thanks!
The blog I need help with is: (visible only to logged in users)
-
If you upload the image you want to use instead of your current header to your media library and then post the URL to that image here I can take a look and see what can be done.
-
Many thanks – is it a process that I can follow on my own though?
I’m asking because I need to finalise the header/logo first (within a few days). And I am also wondering what happens if I need to change it later on.
Is there no direct way for me to do this header replacement *and* take out the ribbon?
-
All of the things you asked about are possible with CSS if you have the paid custom design upgrade (I’m assuming you do as you’re posting in the custom CSS forum), whether it’s something you can do on your own depends on how familiar you are with CSS.
You can upload a 1000 by 250px image using the customiser (in your appearance menu) without using CSS at all and remove the current banner-effect title using this code:
.hgroup { display:none; } -
The code for removing the title (ribbon) works fine.
But how can I remove the top part with the animals and flowers?
This looks like a header to me, and I thought that if I upload a new header it will replace that one as well. But it doesn’t – when I upload a banner / or logo, all it does is it *adds it below* the current strip at the top (which I though is the template’s own header).
So how can I remove that top strip (with the animals and flowers) please?
Thanks so much! If you tell me how to do this then it’s all fine, I can just add a header I want and I’m done!
-
On the bunnies and flowers, add the following CSS to get rid of the existing header. I’m talking with the developers on this as I think it is a bug and the existing header image should go away when you add your own header image.
.site-header { background: none; } -
Hi thesacredpath
The code works – it takes out the bunnies and stuff.
But it *does* indeed look like there is a bug: when I add a new header, it appears below the position of the bunnies (even though this is now blank). In fact, this blank space is now there, as you can see, after I took out the thing.
Thanks!
-
Ok, we can take care of the positioning easily enough. If you can add a header in, I can work out positioning. I’m signing off right now, but will try and pop back into the forum Saturday morning sometime.
-
Done. I’ve uploaded a dummy header for now (as we’ll need a few days to produce the final 1200×250 px header with the business logo etc.)
So I assume that if the bug is fixed then:
– I can upload a new header (e.g., when we finalise the “proper” one)
– and replace the “dummy” one that is up right now.This would be great! Thanks.
-
On your .site-header rule in your custom CSS, add a padding-top declaration (like I have below) and then you can adjust the top whitespace as desired. You can play with things once you get your final header image done and uploaded.
.site-header { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); padding-top: 30px; } -
-
- The topic ‘Changing header and ribbon feature of Flora & Fauna theme’ is closed to new replies.
WordPress.com Forums 