Adapt Learning Community: Publishing a logo across all page headers

Skip to main content

Hello

I'd really appreciate some help in getting a company logo onto the header of each page of my course using the framework.

I followed instructions in the Adapt "getting started for developers" video (https://www.youtube.com/watch?v=RT-KmgAgxuo), which the guy said to edit the page.hbs to include <span class="page-logo"></span>.

Following that, he said to edit the theme.less file and reference the logo image in the assets folder (which I've already added in). Now, the theme.less file isn't available in the current version. So, what other file should I include this code in? I've tried including the code in paddings.less but nothing is happening.

Many thanks.

This isn't really my area of expertise but I think src\theme\adapt-contrib-vanilla\less\src\page.less could be the right place...? That's certainly where you find the classes that are present in page.hbs

The best thing might be to inspect the area of the page you want the logo to be in and look for classes applied to nearby elements - then search the .less files for one of those classes.

Show parent | Reply

Hi Dean,

That Youtube video is a little bit outdated. The structure of the default Vanilla theme has changed quite a bit since then. There are now separate navigation template and less files. Here's what I did to add the logo to my theme:

1. Add my-logo.png (or whatever you want to call the logo file) to the assets folder in your theme.

2. Add: <span class="page-logo"></span> at the first line of the div in navigation.hbs.

3. Add CSS for the page logo to navigation.less Note: the @media-all part hides the logo on small screens. You can remove that part if you don't want it, but things get pretty squishy on a mobile device when you have a logo in there. This code puts the logo about 1/3 of the way into the page (25% margin plus the width of the back/home button) You may also want to try centering it or having it right beside the back button, I just didn't like the way our logo looked in either of those configurations. Either way, you'll probably need to play around with the CSS to get it just the way you want it.

.page-logo {

background-image:url(assets/my-logo.png);
display:inline-block;
margin-left:25%;
@media all and (max-width:700px) {
background-image: url(assets/my-logo.jpg);
height:0px;
width:0px;
margin-left:0px;
}
}

Note: This is assuming you have already created your own copy of the Vanilla theme: https://github.com/adaptlearning/adapt_authoring/wiki/Modifying-the-Vanilla-Theme#updating-your-theme and know how to trigger a full rebuild in your course after you upload to Adapt.

Hope that helps.

Ryan

Show parent | Reply

Hi Ryan, thank you very much for this very helpful information.

Your note at the bottom is also helpful. I have not created my own copy of vanilla - I thought that the install included the theme which I could simply edit. I will follow the instructions on the link you provided.

Also, is triggering a full rebuild just a case of telling grunt to 'build' in the command line?

Thanks

Dean

Show parent | Reply

Ryan,

A follow up question if I may... In looking through the instructions on the link you sent, it states that I should perform certain tasks "within the authoring tool" .e.g. "use the authoring tool's Plugin Management feature to upload your Zip file".. Now, I don't *have* the authoring tool, because I wanted to learn everything within the framework (to allow for greater control and customisation). Am I missing something crucial here? Am I supposed to use both the framework AND the authoring tool?

Show parent | Reply

No you can continue to use just the framework itself. I think it was assumed you were using the authoring tool because you were following tutorials made for the AT.

HTH

Helen

Show parent | Reply

Thanks Helen. Appreciate your comment. Is it obvious that I've no idea what I'm doing? Any advice on why I can't get this working - would also be appreciated. Or if you know of any resources I should be reading/studying to get me better at using the framework.

Show parent | Reply

Are you familiar with using the developer tools to inspect web pages? If not, that's a key thing to learn for any aspect of web development.

They're all fairly similar but here's some browser-specific references:

https://developers.google.com/web/tools/chrome-devtools/

https://developer.mozilla.org/en-US/docs/Tools

https://mva.microsoft.com/en-US/training-courses/how-to-debug-a-website-with-internet-explorer-f12-tools-8658?l=oq3GG2F1_6804984382

Show parent | Reply

This is useful, thank you. I'll dig into these.

Show parent | Reply

Yes, Helen's correct. I assumed you were using the authoring tool based on the video you started with. If you're using the framework, the workflow is a little simpler, you don't have to worry about uploading to the AT, triggering a rebuild, or any of that. But as for modifying the theme, the changes I listed should still work (with a little bit of adjusting possibly).

Show parent | Reply

If you are using the stand-alone framework and are customizing/tweaking/adjusting the Vanilla theme, here are two references that can be of help (if you haven't found them already):

https://github.com/adaptlearning/adapt_framework/wiki/Styling-your-course
https://github.com/adaptlearning/adapt-contrib-vanilla/wiki

Show parent | Reply

Hi Ryan

I've done exactly as you've said mate, but literally nothing has happened. The site looks the same, and I've checked my "grunt watch" in the command line. I even did a grunt build to make sure.

Anything I could be missing here?

Dean

Show parent | Reply

Dean,

Check in the build folder to see where the my-logo.jpg is being copied. If it is ending in up in build/adapt/css/assets, you should try adjusting your URL to something like this:

background-image: url(../../adapt/css/assets/my-logo.jpg);

- Chuck

Show parent | Reply

Hmm.. As Chuck points out, the framework may store the assets folder in a different location. (I use the AT, so I'm not sure). If that's true, try that first.

If that doesn't solve it, I also set the height and width explicitly in my code, but I didn't know why I did that when I pasted in the code so I took it out. But maybe it is necessary, it's been about 6 months or so since I touched this and things are a bit fuzzy. Here's my full code:

.page-logo {
background-image:url(assets/my-logo.png);
display:inline-block;
height:62px;
width:175px;
margin-left:25%;
@media all and (max-width:700px) {
background-image: url(assets/my-logo-mobile.jpg);
height:0px;
width:0px;
margin-left:0px;
}
}

Show parent | Reply

Thanks again Ryan and Chuck. Really value your help and input.

Something interesting is happening when I do this and ask Grunt to 'build'... The file is actually being deleted from my system! The logo image that I placed in the build/adapt/css/assets folder actually disappeared.

The warning on the command line is: "Warning: Unable to delete C:users/dean/my-adapt-course/build" file <ENOTEMPTY: directory not empty, rmdir 'C:\users\dean\my-adapt-course\build\adapt\css'>/ Use --force to continue. Aborted due to warnings."

Sorry to keep going on about this issue. But I just can't move forward into building a full course if I can't even get a logo sorted.

Thanks

Dean

Show parent | Reply

No worries about being persistent. You couldn't be a developer without that trait! Many of us got started in Adapt the way you are. Keep the questions coming.

Two folders deserve attention: src and build.

Do all your work in src. Everything in src gets compiled and copied into build after you run grunt build or grunt dev .
build is the output from grunt build or grunt dev . (Prove it to yourself by deleting build then running one of those commands. It will reappear.) Don't do any work in build if there is a chance that you will ever need to build again.
The server (grunt server) reads from build, not from src.

When you specify a path to an asset in src, it must reflect its final location in build.

Show parent | Reply

Thanks for this Chuck, and thanks for the encouragement & patience. Means a lot.

Unfortunately, after doing everything you've said, the logo still does not appear on the pages.

I've ensured that I've used images that are the exact dimensions specified in the navigations.less file.
I've ensured that the images are stored in the src file, but referencing the build file path correctly using a complete url (dean/adapt-course/adapt/css/assets/logo.jpg) in the navigations.less file.
I've checked that the <span class="page-logo"></span> is in the navigation.hbs file.

I'm using 'Grunt watch', but when I rebuild using 'Grunt build', I'm still not getting anything.

I've checked all of this over and over. Can't find what I'm doing wrong, and I worry that it's something very simple that I've overlooked.

Show parent | Reply

Hey Dean,

To back up a bit, if you make any changes to the less files and rebuild, do you see the change reflected in your output? For example, if you open fonts.less and change @body-text-font-size to 5px, does the body text in your output become really tiny?

Knowing this might tell us whether the problem is with your dev environment, or with the code changes themselves.

Cheers,

Ryan

Show parent | Reply

Dean,

I was feeling for you, so I stopped throwing darts and watched the video you referred to. Using the current version of the framework, I followed Darryl's instructions for adding the logo to the page header. I was able to get this to work. Here's the steps I took to "migrate" his instructions to v2.x framework.

In page.hbs I added the span within page-title. This portion of my code looks like this:
<div class="page-title"><span class="page-logo"></span>
The framework uses a newer version of Vanilla as mentioned above. It does not have a theme.less. You could create it if you'd like. I chose instead to add the Less to page.less since we are styling an element on page.hbs. I added it right after background-color, on line 6. So my page.less begins like this:
```
.page { 
    background-color: @background-color; 
    .page-logo { 
        background-image: url(assets/adapt-learning-logo.png); 
        display: inline-block; 
        width: 200px; 
        height: 200px; 
        margin-top: 60px; 
     }
```
I saved a copy of adapt-learning-logo.png in src/theme/adapt-contrib-vanilla/assets.
I ran grunt dev.
I ran grunt server.

There are other ways to achieve this. And there are other ways to write/locate the Less. I'll side-step that for now, but would like to point out Less files located within the theme will override (not overwrite) files with matching names that are located in other plug-in directories. For example, src/theme/adapt-contrib-vanilla/less/src/accordion.less will take precedence over src/components/adapt-contrib-accordion/less/accordion.less.

Show parent | Reply

Hi Chuck

A huge thank you for taking the time to do this.

I've just done what you've said, and hallelujah. It's worked. For someone just discovering this world, mini victories like this make all the difference. Going to see if I can get the logo on the front page now too.

Cheers

Dean

Show parent | Reply

I second Chuck's thoughts. Best way to get to know the software is to break everything in it that you possibly can! Once you've accomplished that, everything gets much simpler. At least, that's what worked for me. :) Keep the questions coming.

Show parent | Reply

"An expert is a man who has made all the mistakes which can be made, in a narrow field." - Neils Bohr

Show parent | Reply

Many thanks Ryan.

Show parent | Reply

I see the problem is already fixed. Meanwhile I found a plugin from cgkineo, maybe some other guys could use it:

https://github.com/cgkineo/adapt-navigationLogo

Show parent | Reply