Hi Guys,
Does anyone know what custom css I might add to centre the logo in the header of the essential theme.
Many thanks in advance.
The only reference I can find for the logo is in essential/settings.css
but to override it you would need to add the following to your Essential > General settings > Custom css
a.logo { background-position: center;}
Hope this helps?
Mary
Hi Mary,
Thanks for the quick response. I just tried placing 'a.logo { background-position: center;}' in the custom css (with theme developer switched on, and cache cleared) but it didn't work for me.
I see this when I inspect the logo in firebug, but don't really know what it means.
<header id="page-header" class="clearfix">
<div class="container-fluid" id="yui_3_13_0_3_1391176573241_943">
<div class="row-fluid" id="yui_3_13_0_3_1391176573241_942">
<div class="span6">
<a class="logo" title="Home" href="http://my_site.com"></a>
</div>
<div id="profilepic" class="span1 pull-right">
<div class="span3 pull-right">
<p id="socialheading">Social Networks</p>
<ul class="socials unstyled">
</div>
</div>
</div>
</header>
Thanks
The <a class="logo" title="Home" href="http://my_site.com"></a> is where the logo is in this theme.
the CSS given in the Essential theme reads as follows:
a.logo {
background: url([[setting:logo]]) no-repeat 0 0;
}
If you open essential/style/settings.css you will see that css rule at about line 63.
It may be just as easy to change it to this instead.
a.logo {
background: url([[setting:logo]]) no-repeat center top;
}
That should fix it...I hope!
Cheers
Mary
Thanks Mary,
I'm afraid that had no effect either.
Just to make sure I've explained myself sufficiently, here's what I'd like to do
Is it more than the logo I'm trying to manipulate? It seems to sit inside something referred to as <div class="span6">
Cheers
Odd, as the 'spans' should add up to 12 within a 'row-fluid'. As the mark-up shown has different 'spans' to that of master -> https://github.com/moodleman/moodle-theme_essential/blob/master/layout/includes/header.php#L73 - what version are you using?
Conceptually for Mary's correct CSS to work with centering, the mark-up would need to be a span3 (possibly empty), span6 (with the logo) and span3 (with the login etc.).
Info on: http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem
Thanks for your input Gareth.
I'm using: Moodle 2.6.1+ (Build: 20140123)
and : $plugin->release = '2.6.2 (Build: 20131202)
Does that help?
Cheers
Ok, I can get it almost centred by changing https://github.com/moodleman/moodle-theme_essential/blob/master/layout/includes/header.php#L79 to be 'offset5 span3' but Mary's centring does not work as the logo is FontAwesome. And I've not got more time to look at in depth.
Ultimately I think there is a logic issue there with 'spanX' classes not adding up to 12 in every possible combination. Over to you Julian . Raised: https://github.com/moodleman/moodle-theme_essential/issues/112.
Hi Gareth,
Thanks for looking at this, much appreciated.
Lets see what Julian comes back with.
Cheers Guys
You said logo, which is an image that you upload to Moodle. What you have there is NOT the logo it is an icon and a heading.
To make this centralized you would need to change the layout in essential/layout/includes/header.php
which is quite complicated. It would be easier to make what you have there into as an image and upload it as such in the logo setting in Essential > general settings page.
Mary
Hi Mary,
Ah I see. I've confused matters, the image I pasted in my earlier reply was not a copy of my actual moodle site, I simply doctored the thumbnail of the essential theme to highlight my point. (hence your last reply)
I have indeed uploaded an image that sits in the header of my moodle and it is that, that I want to centre, so your earlier responses would be correct in relation to my question as that image sits in <div class="span6"> as referred to earlier.
This is the actual screen capture of my moodle, just in case I've confused further.
Many thanks
Hi, in that case, can you try leaving off the Social Media links as those don't look that good with the ones you are using. Doing so should make the header span11 and so the CSS rule I gave you should work better then.
Mary
Hi Peter,
I think I have found a way to display the logo image in the page header.
Assuming you have uploaded the logo via the uploader in the Essential settings page...just add the following to the Custom CSS on that page...you should find that it works.
#page-header {
background-color: transparent;
background-image: url([[setting:logo]]);
background-position: center bottom;
background-repeat: no-repeat;
border-bottom: 0 none;
}
a.logo {
visibility: hidden;
}
Cheers
Mary