06 May 2012, 14:28

Hello there. This is a really basic question, sorry I am modifying a theme based on "raw" but I don't really know much about themes or CSS - I am working by trial and error. I want to remove the "mahara" png at the top left of the screen and not have any logo at all. When I remove the image however, there is an icon still present   - making it look as if the link is broken, of course. I obviously need to remove references to it in the code of the raw theme CSS files. Would someone please tell me in which file and which line and what I need to remove please? Thanks !

06 May 2012, 15:51

Hi Mary,

I can think of three options here. If you're confident doing it, I would go with the template method and some CSS to sort out the header height display.

Removal via templates

The logo is placed by the dwoo templates. You will need to:

1. Create a /templates/ directory in your theme folder.

2. Copy the /templates/header.tpl file from the raw theme into the /templates/ folder you just made.

3. Open up the file you just copied (in your theme, NOT in raw) and remove the '<h1 id="site-logo"><a href="{$WWWROOT}"><img src="{$sitelogo}" alt="{$sitename}"></a></h1>' section of code at the top.

4. That's it. You should no longer see the logo. 

This will cause some layout issues, as the logo height pushes down the main menus. You may need to use some kind of fixed header height via the CSS.

'Removal' via CSS

This is more of a quick fix and not particularly good practice. The logo will still be there in the html output but you are setting it to not display. Simply add the following CSS rule in yourtheme/static/style/styles.css:

#site-logo {

display: none;

}

Use a transparent image placeholder

You could create a transparent .png image that has a height and width and use it in place of the site logo. The height of this image would help to push down the main menus and content area so that you don't have to mess with header heights.

Richard.

06 May 2012, 16:53

Great Richard thanks! I think  I will do the third one  -the transparent  image placeholder - I can manage that one quite easily and it seems logical; I should have thought of it myself. I think in my head I was expecting the answer to be the second one -hiding with CSS- but  I didn't realise it was bad  practice. I understand the first one but I think I'll leave it until my next theme when I have got a bit braver 

06 May 2012, 17:11

I duly added a transparent png as suggested by Richard above and it works brilliantly - in FF and Chrome. But in IE there is a border around it. This is an enjoyable learning curve for me findnig out differences between the browsers but unfortunately since 99% of our viewers will be using IE I need to remove the border -could anyone point me in the right direction please?

07 May 2012, 1:24

I belive the link part is causing problems... Copied Richard's code from post above:

Removal via templates

The logo is placed by the dwoo templates. You will need to:

1. Create a /templates/ directory in your theme folder.

2. Copy the /templates/header.tpl file from the raw theme into the /templates/ folder you just made.

3. Open up the file you just copied (in your theme, NOT in raw) and remove the '<h1 id="site-logo"><a href="{$WWWROOT}"><img src="{$sitelogo}" alt="{$sitename}"></a></h1>' section of code at the top.

I've coloured (with red color) the part that (in my oppinion) is causing problems - though you've created a transparent placeholder image, there is still a link to first/start page of your Mahara installation. Try deleting the red coloured code - but DO IT IN YOUR header.tpl file and NOT IN THE raw theme!

HTH, Gregor

07 May 2012, 3:13

That's great thankyou!  I am almost there and it is very satisfying. There are a couple of things I need to work out for this theme to finish it off and if I can't figure them out I will be back to ask more questions. I am really appreciative of the help on here.