How to get two logos in the header?

How to get two logos in the header?

by Adrian Norman -
Number of replies: 17
Hello there,

I'm really stumped on this and I'm exhausted as well from working on this all day (on a steep learning curve with CSS)... and am wondering if someone can help.

I've built a theme based on Formal White... you can find in on my moodle site here: http://www.nursing.edu.au/moodle

as you can see i have two separate logos in the header. . i want one to float left and the other to float right.

On the header.html page i've written code to place the 2 logos into the end cols of a 3 col table which should span 100% of the width but clearly it isn't.

the background is a one pixel jpg which is displaying via a style sheet.... which is doing its job ... it's almost there but i'm stuck at the last hurdle... CAN ANYONE HELP???

wide eyes

thanks!
adrian

Average of ratings: -
In reply to Adrian Norman

Re: How to get two logos in the header?

by Patrick Malley -
Don't use tables, there is a better way.

1.) Open fw_layout.css and increase the height of #header-home to 150px to accomodate your logo.

2.) Search fw_color.css for:

#header-home, #header {
  background-color: #E3DFD4;
  border-color:#C6BDA8;
}

and replace it with:

#header-home, #header {
  background: url(logo_bg.jpg) repeat-x;
}

3.) Open header.html and add a DIV around .headermenu so that what you have is:

    <?php print_container_start(true, '', 'header-home'); ?>
        <h1 class="headermain"><img alt='Moodle' src='<?php echo $CFG->httpsthemewww .'/'. current_theme() ?>/logo.jpg' /></h1>
        <div class="menuwrap"><div class="headermenu"><?php echo $menu ?></div></div>
    <?php print_container_end(); ?>

4.) Then, add the following to fw_layout.css:

.menuwrap {
float: right;
height:150px;
background: url(logo_right.jpg) no-repeat;
}

Though I haven't tested this in IE, it should work just fine.
Attachment Picture_1.jpg
Average of ratings: -
In reply to Patrick Malley

Re: How to get two logos in the header?

by Adrian Norman -
hi patrick,

wow, thanks for your detailed reply! stupidly (or obsessively) i got up at 3am thinking about this... yes i knew that tables were not the best answer but i was fumbling in the dark.... but then i opened my email to find your help. i really appreciate it!

smile

i've made all the changes you suggested but a weird thing is happening before log in (i'm on Firefox 3 on Mac OS 10.4.11).

Before log on, the logo_right is being clipped... so only about half of it can be seen in the header. After log on, it appears where it should be and in the same position that you saw it when you took the screenshot.

here is a logon:

student
password

any ideas???

thanks again!
adrian


Average of ratings: -
In reply to Adrian Norman

Re: How to get two logos in the header?

by Patrick Malley -
This is due to the relatively small width of the "You are not logged in" text, as opposed to the "You are logged in as ...."

To fix, add position elements to the background image (as so):

.menuwrap {
float: right;
height:150px;
background: url(logo_right.jpg) no-repeat 100% 100%;
}

This will align the image bottom-right.
Average of ratings: -
In reply to Patrick Malley

Re: How to get two logos in the header?

by Adrian Norman -
Thanks again Patrick... spot on! It's all good now! This learning curve makes me dizzy..

I've had a look at your site... man you do beautiful work!!!

cheers!
adrian
Average of ratings: -
In reply to Adrian Norman

Re: How to get two logos in the header?

by Luis de Vasconcelos -
Picture of Particularly helpful Moodlers

Adrian,

Your site looks pretty good too - but you REALLY should change your administrator users password! The one you're currently using is soooo easy to guess...

Average of ratings: -
In reply to Luis de Vasconcelos

Re: How to get two logos in the header?

by Adrian Norman -
thanks luis... i wasn't aware of that at all!

a
Average of ratings: -
In reply to Luis de Vasconcelos

Re: How to get two logos in the header?

by Adrian Norman -
hi luis,

could you please message me privately and tell me how you guessed what the admin password was? i did do the initial instalation and will need to pass this on.

cheers!
a
Average of ratings: -
In reply to Adrian Norman

Tárgy: How to get two logos in the header?

by Deni Nagy -
Hello,



It's fine on my firefox 2.0. One logo is placed left the other right...
Is it a browser dependent error? If yes, use !important! tags.




Deni
http://eduverzum.educomm.hu
Lingual e-Learning
Average of ratings: -
In reply to Deni Nagy

Re: Tárgy: How to get two logos in the header?

by Patrick Malley -
Deni,

If you check again, the table that he was using was pushing the login information and language menu out of the header.
Average of ratings: -
In reply to Adrian Norman

Re: How to get two logos in the header?

by Ben Christopher -

hope you sorted out your problem adrian. i have 3 that by lookn ig at your front page, you may be able to help:

1. how do you get your centre blocks site news, course cats, welcome.. to appear in the centre and not at either side. it appears that the arrows i have when editing, only allow for side placement.

2. it looks like you are using the same theme as me formal_white - if so how do you c hange the colour of your block titles

3. my front page when viewed through IE looks like below - page too big screen. in firefox this is not a prob - yours appears to be fine when previewed through IE...

any help is much appreciated

ben

Attachment frontpage_out.gif
Average of ratings: -
In reply to Ben Christopher

Re: How to get two logos in the header?

by Adrian Norman -
Hi ben,

I hope i can help...

Q1. how do you get your centre blocks site news, course cats, welcome.. to appear in the centre and not at either side. it appears that the arrows i have when editing, only allow for side placement.

A: I don't think moodle allows you to do that (if anyone knows better, please leap in)... BUT... there are some workarounds. Play around with the Frontpage settings in the Site Administration pane on your home page... you can display Courses in the middle section here.

Also, you can create HTML labels (Add a resource>Insert label) in the centre section. In this HTML you can of course create links to other parts of your installation.


Q2. it looks like you are using the same theme as me formal_white - if so how do you c hange the colour of your block titles

A: Yes i built this on formal_white. Yes... fiddling around with all those CSS styles is well... fiddly.

I use a fabulous Firefox plug in to work out the name of the page element i need to change. I'm using Firefox 3 and the plug in is Firebug.. it's really great. Find it here: https://addons.mozilla.org/en-US/firefox/addon/1843. Make sure you are using Firefox 3.

So... once you have it installed properly, you can right-click on any element and that will show you at the bottom of the screen the HTML on the left and the CSS style on the right for that element. Then, you need to find that element in one of the three style sheets in the formal_white theme folder you are playing with.

It's a bit complicated to explain... BUT... by right-clicking on the Login Block title with Firebug installed I can see at the bottom right part of the screen that the name of the CSS style i need to change is:

.sideblock .header h2

SO.... then i have to hunt down this style in one of the three CSS files and change it. I open it up the CSS file in Dreamweaver and again... i fiddle till i get what i like. You'll need to know the basics of CSS for this.

Let me know how you go with this.

3. my front page when viewed through IE looks like below - page too big screen. in firefox this is not a prob - yours appears to be fine when previewed through IE...

A: I'm afraid this is beginner's luck. I'm ashamed to say i don't have IE on my computer but i am proud to say i am using a mac... and IE does not support mac so i don't have a say in the issue.

So... I don't know what i did that was so clever to make it work in IE.. but i am very happy i did it. Maybe someone else can help on this issue???

Good luck!
Adrian
tongueout
Average of ratings: -
In reply to Adrian Norman

Re: How to get two logos in the header?

by Adrian Norman -
Oh... i should add you Right click on the page element THEN you select Inspect element... that will then display the HTML and the CSS at the bottom of the screen.

tally ho!
Average of ratings: -
In reply to Adrian Norman

Re: How to get two logos in the header?

by Ben Christopher -
sorry for not getting back sooner - been away - thanks for taking the time to answer my queries - really useful stuff. will get on top of that pronto.
your page looks spot on in IE too!! mine is all over the place. most annoying.
anyway thanks again
ben
Average of ratings: -
In reply to Adrian Norman

Re: How to get two logos in the header?

by Sonam Choden -
Hi sir Adrian Norman, Could you please tell me how to put another logo at the right corner of the site..? I am using formal_white theme. I have been trying this for last two days but i could not do that yet... Thank you in advance. Sonam Choden
Average of ratings: -