Using the theme settings in Moodle I can change the top logo in afterburner to an image that is like 350x75 px, but that's too small! I want to be able to input a large top/header logo that spans nearly the entire header. How can I change the default logo size??
If you have the latest version of the afterburner theme then you can disable the logo and add your header image as a background for the header using the custom css area.
#logo { display: none;}
#page-header { background: url([[pix:theme|headerbg]]) no-repeat left top;}
providing you have an image called hearderbg.jpg (or png or gif) in the afterburner/pix directory, this should work.
Mary
Hi Mary,
I have similar issue and had applied your directives and it didn't work.
I used Firebug with the Inspection Tool and was able to disable the Afterburner logo on a fly. However when I applied your code as given, having uploaded my customized logo in the Afterburner/pix directory and entering your code in the Cusom CSS Area of Afterburner Theme, it still did not override the logo.
I also edited the #logo and #page_heager sections of the afterburner_styles.css file, all to no avail. Please help me. I might have been doing the wrong thing.
I will also appreciate it if you could guide me on how to make invisible the' Quiz Navigation Block' and the 'Correct/Incorrect Question List' that are displayed in the Quiz Summary of the Afterburner Theme using Firebug.
I'm using Moodle Version 2.2.1
Pllease anyone can help.
Thanks.
Kingsley.
Hi can you give me a link to your website. You can send it in a Priviate Message here if you don;t want to post it on line?
I'll try and do this on my own site and test the code I gave you.
Also...you need to purge cache in Site Administration > Development > Purge all caches
Well I can't get it to work on my version...which is odd.
I'll need to look at this as it could be a bug!
Cheers
Mary
Well that was a learning curve and a half!
I had assumed that the background image would use Moodle format as used in the css however this is not the case.Here is the code you need to add to the custom csss area of this them's settins page...change the url for the one where your image is stored...
#page-header { background: url(http://localhost/moodle/theme/afterburner/pix/headerbg.png) no-repeat 50% 0;}
and here is the CSS to hide the logo (Moodle 2.2.x only)
a.logo {display:none;}
Thank you, Mary.
P.S. Could you please tell me the learning materials you guys used in Php, CSS, HTML, and JQuery/JavaScript that make you very resourceful in all the Moodle support forums?
Most of the books I have I got from either Sitepoint or Amazon ->
- Build Your Website the right way using HTML & CSS by Ian Lloyd (Sitepoint)
- Build your own Database Driven Web Site using PHP & MySQL by Kevin Yank (Sitepoint)
- Handcrafted CSS by Dan Cederholm (Amazon)
- CSS in 10 Minutes by Russ Weakley (Amazon)
I don't do Javascript it's too hard...
But what I know about Moodle I learnt from the Moodle Forums and by reading Moodle Docs.
Thank you, Mary.
Hi Mary, I tried the code to replace the logo and I was able to get it to work. My problem is I would like the logo to cover from the left to the right side of the page, but I logo only covers 1/4 of the page. Is there any way I can do this.
Is your logo wide enough? If it is then add this to the custom CSS area of Afterburner's settings page...
a.logo {
width: 98%;
height: 75px;
margin: 15px 1% 10px;
float: left;
}
You can change the value for the height.
Hope this helps?
Mary
I'm using the Afterburner theme in Moodle 2.3 and have followed your instructions to alter the header/logo however my screen still won't allow the full picture to appear as my picture is too high (it works on a Mac, as in I can see the full header picture, but is cut off on a PC). I've tried every CSS code listed on this discussion. Any help will be greatly appreciated!
Also in regards to storing images - where abouts do you do this? I can't find any of these files....
Hi,
If you have added a Logo that is larger than the original, then you need to adjust the height of the #page-header and logo CSS.
Where all the files are stored in Moodle should be the same on a Mac, however Macs do seem to create other directories too, like .DS_store which may be something to do with the way Macs process files.
HTH
Mary
Where is the afterburner/pix directory?
Thank you
moodle/theme/afterburner/pix
I am struggling with this same problem in Moodle 2.3 with Afterbuner. I lifted the following CSS code directly from afterburner_style.css:
a.logo {
background: url(setting:logo) no-repeat 0 0;
width: 320px;
height: 75px;
display: block;
margin: 15px 10px 10px;
float: left;
}
I'm trying to use a graphic I made that is 600 x 61 px. I have to use a lot of text in the logo, so 320 x75 is too small. Since the bluehost implementation of afterburner does not make it easy to upload a custom logo to the /pix folder, I just uploaded to my picasa site at:
So I modified the code with the new size:
a.logo {
background: url(setting:logo) no-repeat 0 0;
width: 600px;
height: 61px;
display: block;
margin: 15px 10px 10px;
float: left;
}
But then my custom logo, previously the correct size but cropped at the right margin, disappears completely!
This thread has been incredibly helpful for figuring out what's going on, but I still don't understand why this does not work the way it is supposed to.
Thanks in advance for any suggestions.
If you give me a few minutes I'll test some new settings for you to use and let you have them shortly.
BRB
OK...here's what you need to do.
- No need to change CORE theme files when there is a Custom Settings page for the theme. So please restore ALL changes you made to afterburner_styles.css
- Add the full URL for the logo into the top section of the Afterburner settings page found by going to Settings > Site Administration > Appearance > Themes ->> choose Afterburner from the list of theme names you find at this point.
- Add the following CSS to the Custom CSS section found lower down the same settings page.
a.logo {height: 61px; width: 600px;}
#page-header { height: 86px;} - Don't forget to SAVE your settings!
And that's all you need to do. Incidentally the height of the header is relative to the size of logo plus the margins. In your case 61px + 25px (top/bottom margin) = 86px
Here's a screen shot of what I did earlier on my test server...
If there is anything else you need to know the answer to, please do not hesitate to ask here again.
Cheers
Mary
Thanks so much! That fixed it! I was using that page to add the .css snippet, but never would have figured out that I had to modify the header size as well.
Actually, Peter, your logo would have looked OK without needing to change the header height, it was just sort of width that was all. But since it is working now that's fine.
Cheers
Mary
Dear Mary,
How are you?
I am having some trouble with this, too. I'm attempting to change the Afterburner logo in 2.3, using the info gathered in this thread.
I created a .jpg test-logo with the dimensions stated above (width:600; height: 61)
Then, I uploaded it onto my web host, to: .../afterburner/pix/images, and also to just .../afterburner/pix
I opened the site in a browser, logged on, turned on editing, and followed the path: Settings > Site Administration > Appearance > Themes > Afterburner, as recommended, and entered the full URL in the "Logo" field: http://mysite.org/Moodlerenamed/theme/afterburner/pix/images/mypic.jpg
Then, I scrolled down to the custom css field and entered the copy and pasted code from above:
a.logo {height: 61px; width: 600px;}
#page-header { height: 86px;}
And clicked "Save Changes"
With no immediate results, I closed the browser, opened it again, deleted the history, cookies… the lot, and tried opening up again, but no change. :/
I've combed through it all looking for typos, etc... And tried the pointing the URL to just .../afterburner/pix/mypic.jpg, but that didn't work either. Is there something I missed in the reading?... a css bracket or something?
Any help would be greatly appreciated!
Hi,
I am fine thank you for asking.
This is a common occurance you need to purge Moodle cache, so just try clicking...
Site Administration > Development > Purge all caches
and then go back to your site home page. That should fix it.
When making CSS changes to themes you need to clear the Moodle cache afterwards. If you are making lots of changes it's easier setting Theme Designer Mode from Site Administration > Appearance > Themes > Theme settings, this then will ensure that all your changes are seen after refreshing your browser window with Ctrl + F5 which forces a complete refresh including images.
Cheers
Mary
Most helpful.
In gratitude...
Extremely helpful! Thank you sooo much!
I was able to change our logo with a 940px wide graphic to match our website, but now the login text in the upper right corner of the window is wrapping down. How can I completely remove "Your are not logged in. (Login)" and "You are logged in as..." from the upper right of Afterburner header?
I would like to leave this same "Your are not logged in. (Login)" and "You are logged in as..." element in the footer, and I like the Login/Logout button of the menu bar.
Hi,
You just need to add the following CSS rule to Afterburner's Custom CSS settings page ...
.headermenu .logininfo {display:none;}
Hope this helps?
Mary
Perfect! Thanks a million! Your excellent support is appreciated more than you can know.
Good evening,
As usual in Moodle, I've just wasted a few hours - start by doing what seems obvious. Trying a few things which have worked elsewhere but not here. Then navigate through a few dozen pages of forums. And BINGO - here's the answer.
Perhaps Moodle developers could put a note on the page saying Recommended: purge all caches. I am a teacher. I don't even want to learn CSS. I can copy and paste code. And instead of doing my real work, I waste... now I'm wasting not only my time ...
Thanks for your patient, kind, willingness to share. I know my patience is exhausted.
James
PS - how about a Purge button on that page so that we don't have to navigate to and from with every change?
Oh poor you!
It would be good if we knew instinctively what to do with every new piece of software that does not come with a information on how it works.
There are lots of tutorials listed at the top of this forum, which explains all about Themes and theme settings.
The thing about making changes to Moodle Themes is that you really need to be in Theme designer Mode which is a setting in the Theme settings page. Site Administration > Appearance > Themes > Theme settings
If you enable Debugging the Purge all caches button appears at the bottom of the page. The alternative is to make "Purge all caches" an Admin Bookmark!
Glad you found the forum! 
Cheers
Mary
Good afternoon,
yep, poor me! I really don't mind reading HELP and I recommend it all the time to my trainees.
And my post-frustration relief may have rendered my comment here last night a little disingenuous. I am a (very) part-time database programmer and when creating for others, it's always about what can be done to make it as user friendly as possible.
I read in this forum similar problems to mine. Your reply, if you enable debugging ... makes me think that this info should also be on the page where everyone will always be able to see it.
In order to ... you need to Enable Debugging. Click here.
In order to ... you need to Purge ... Click here. etc
And the CSS field is obviously valuable to many, as the forum demonstrates, but for others, a pair of dimension fields would be great. These are familiar to everyone who inserts pictures.
The data could even populate the CSS field.
It is your Theme and it's wonderful. So, I would like to ask you to assess my suggestions and if you think they are beneficial enough, send them to Tracker. In my opinion, Tracker is best left to experts who have a wider overview and deeper understanding.
Thanks again for your help, and of course, your theme.
James
You're welcome, glad you like the theme.
I might just do as you suggest and add some links, I could do this to the Afterburner custom settings page easy enough...I think!
As for the Moodle Tracker, I think you should take the plunge and suggest this as an Improvement for all CORE themes. I'm Componant Lead for themes in so I get to see the new tracker issues first if they are theme related and I can then fix it or pass it on, depending on the complexity.
I wish I know more about SQL now than I learnt back in 1996 when I got my degree in Business Information Systems, then the WWW was very new, and I don't think PHP had been fully released, let alone database driven websites!
With regards Afterburner I'm working on making it a more fluid fully responsive design which is fun...in a head banging or sort of way... 
Cheers
Mary
Hello again,
AFAIK there is no specific forum for each theme, so I'm tagging this onto our previous discussion.
A very gen Q first, which probably has an answer "somewhere" - for my eyes, the font size, Normal, in this theme is too small. Where can I change it? I expect this means going into code (my big bug bear with Moodle's teacher friendliness). I don't suppose there is an interface where we can just type numbers into fields. If not, is there any reason not to implement such a thing?
Second question - if I ain't misbehaving putting two in one post is this, and it applies to all themes that I've used over the years. I find it problematic that text inevitably spreads across the max width of the browser. My solution in some situations has been to create a 3 col table 25% - 50% - 25%, with invisible borders and place my text in the middle col only. And sometimes comments or "art" in the outer spaces.
I've no idea if this is a prob for others, or if it has been raised or solved or anything. So there it is, for what it's worth.
Once again, thanks for your time on this forum and esp your theme.
James Thomas
Hi James
No there is no specific forum for individual themes, but you are free to start a new discussion in the themes forum at any point to ask any questions - just where applicable reference the theme you are using in the post
As for your questions:
1. Afterburner sets the general font size as 108% in afterburner_style.css
/*
Page
-----------------------*/
#page {
font-size: 108%;
font-family: Helvetica, Arial, sans-serif
}
You could edit it directly in the css file, but afterburner does have a custom css box on itts settings page, so you could add something like
#page {font-size:120%;}
in the custom css box (play around with the numbers to get the size you want)
You can also use a tool like firebug to find the correct css selector for any particular piece of text ratehr than general. Yes you do have to get used to a little bit of css, but no you dont have to delve into the css files themselves if you dont want to
And as a side point for that - most core themes now have a customcss box available, while the alternative is to go even further than my flexi_ii theme went, which had/has settings for just about everything to make the theme compeltely customisable from the settings page, but at the expense of making that settings page enormous. Given that the customcss box can be used to adapt most things, it is upto the designers to decide what is an appropriate level of settings for their page.
Firebug and customcss are great tools for people who dont want to mess with the theme files themselves
2. Many themes now are fluid width and do spread across the width of the screen/browser, however there are also some which are fixed width and those which are fluid can be set to fixed width by setting soemthing like
body {width:960px;)
although in some themes this may interfere with the layout and column widths etc, so some layouts may need to be adapted
HTH
Richard
Mary,
Thanks very much for this information. I followed your directions and it worked perfectly. I appreciate the help, as it would have been difficult to figure out on my own.
Kathleen Stewart
Moodle Admin, NSCC, Nova Scotia, Canada
Oh I love happy endings!
Hi Mary
I hope this thread is still open. There is an odd thing happening with updating the logo for afterburner with a custom one. In the example shown in this thread, the logo sits correctly justified and the login info is neatly at the top right of the page. Very neat indeed.
I followed your instructions in the thread to the letter and have only changed the following:
Theme Designer Mode - On
The logo url with:
- http://www.(actual url here)/theme/afterburner/pix/headerbg.jpg
custom css with:
- a.logo {height: 152px; width: 1217px;}
#page-header { height: 167px;}
Note: No css or php has been modified
The result is:
- the logo is offset from the page with padding above and below
- the "You are logged in" info is pushed to the bottom of the logo
Caches have been purged and forced refresh has been done. Result is the same as the screenshot attached.
Leon
Hi Leon,
I am so sorry I missed reading this question!!!
Did you sort it out? If not it looks like the size of the header is actually causing the problem.
What you need to do is add...
a.logo {height: 152px; width: 100%; }
#page-header { height: 177px; overflow: hidden}
Let me know how that works out.
As for the login, that needs resetting to ...
.headermenu {position: absolute; top: 10px; right: 10px;}
You can then adjust the 10px values to suit you.
Cheers
Mary
hi Mary Evans.
i followed your method to change that logo but still can't.
my version is 2.3.1
can you help me?
i tried change the afterburner_styles.css code.
but still same..
#page-header {
background: url(http://localhost/moodle/theme/afterburner/pix/MyLine_baru.png) no-repeat 50% 0;
}
a.logo {
display:none;
}
now my logo disappear
For this to work from the CSS stylesheet you would need to write the CSS like so...
#page-header {
background: url([[pix:theme|MyLine_baru]]) no-repeat 50% 0; }
a.logo {display: none}
Cheers
Mary
Hello Mary, if you are still there.
I've got Afterburner installed in Moodle 2.6, thought I had followed all instructions perfectly, but I cannot get my new page header to appear though the file is in the theme Pix directory, the path includes the site and correct spelling of the graphic, the CSS has been modified and uploaded (it removed the existing logo as promised) but I cannot get the new one to appear.
The CSS I added to afterburner_styles page was:
#page-header { background: url(
) no-repeat 50% 0;}
a.logo {display:none;}
As mentioned, the graphic is in the correct directory, the old logo is not presenting as wanted, the new page header does not appear.
Site: http://cabstudents.com/
If you could offer assistance and tell me where I'm going wrong it would be much appreciated.
Thanks,
Bill
Hi,
The reason it is not working is because you have not entered the correct URL for your header image.
You have written...
http://www.cabstudents.com/moodle/theme/afterburner/pix/CIABTTutorlogocombo.png
I have highlighted the two things that are not needed. Your site will not work with www you get an error.
Try it ... http://www.cabstudents.com
OK... here is the correct URL
http://cabstudents.com/theme/afterburner/pix/CIABTTutorlogocombo.png
This is the CSS you need...
#page-header {
background-image: url(" put corret url here ");
background-position: center center;
background-repeat: no-repeat;
background-size: 95% auto;
height: 150px;
width:100%;
}
You would also be better if you wrote
a.logo {visibility: hidden}
Hope this helps?
Mary
Excellent, Mary. Thanks!
Now I just have to put back into the Afterburner folder the files I inadvertently deleted.
Your solution, however, worked perfectly.
Thanks again.
Bill