Text appearing over logo in Boxxie Theme

Text appearing over logo in Boxxie Theme

por David P -
Número de respuestas: 7

Good morning,

I am using the 'boxxie' theme in moodle 2.2 and have a custom logo on each page in the top left hand corner with the header 'text' also aligned 'left'. This means the text is covering the logo and I was wondering if there is a way to centre the text while leaving the logo left-aligned.

E.g. screenshot attached.

and my current header area of core.css is as follows  (thanks in advance)

 

/* Header */

#page-header h1.headermain {
background: url([[pix:theme|logo]]) no-repeat left top;
position: relative;
left: 0px;
width: 400px;
height: 110px;
padding: 0;
margin: 0;
top: 0;
}

#page-header
{background-image:url([[pix:theme|gradient]]);}
 {
    
    color: #fff;
   }

#page-header a:link,
#page-header a:visited {
    color: #b3c79d;
}

#page-header h1.headermain {
    color: #fff;
    font-weight: normal;
    margin: 1em;
    font-size: 2em;
}

.pagelayout-frontpage #page-header h1.headermain {
    font-size: 2.75em;
}

Anexo Capture.JPG
Promedio de valuaciones (ratings): -
En respuesta a David P

Re: Text appearing over logo in Boxxie Theme

por Mary Evans -
Imagen de Core developers Imagen de Documentation writers Imagen de Peer reviewers Imagen de Plugin developers Imagen de Testers

Hi,

Yes you need to add more margin to the h1.headermain CSS like so...

#page-header h1.headermain {
    color: #fff;
    font-weight: normal;
    margin: 1em 0 1em 420px;
    font-size: 2em;
}

this will add 420px to the left-hand side of the header title which should then clear the image. sonrisa

Cheers

Mary

En respuesta a Mary Evans

Re: Text appearing over logo in Boxxie Theme

por David P -

HI Mary, Thank you very much for that. It has sort of worked. However it took both the image and the text with it rather than just the text. See image below.

Anexo Capture.JPG
En respuesta a David P

Re: Text appearing over logo in Boxxie Theme

por Mary Evans -
Imagen de Core developers Imagen de Documentation writers Imagen de Peer reviewers Imagen de Plugin developers Imagen de Testers

OK...I missed that the logo was using h1.headermain. In that case try this.

#page-header h1.headermain {
background: url([[pix:theme|logo]]) no-repeat left top;
position: relative;
left: 0px;
width: 800px;
height: 110px;
padding: 0;
margin: 0;
top: 0;
text-align: right;
}

En respuesta a Mary Evans

Re: Text appearing over logo in Boxxie Theme

por David P -

Thanks Mary - that worked a treat. Logo now positioned just right sonrisa. Finally, is there any way to turn off the heading text that moodle generates and just have our logo?

En respuesta a David P

Re: Text appearing over logo in Boxxie Theme

por Mary Evans -
Imagen de Core developers Imagen de Documentation writers Imagen de Peer reviewers Imagen de Plugin developers Imagen de Testers

Yes...just open boxxie/layout/frontpage.php and boxxie/layout/general.php and then find this line...and delete the highlighted section...

<h1 class="headermain"><?php echo $PAGE->heading ?></h1>

Save and then upload back to the server and test.

Cheers

Mary

Promedio de valuaciones (ratings):Useful (1)