Adapt Learning Community: What is this element?

I have customised my theme by changing various properties to adjust many elements throughout the content.

Typically I have changed global items in the main LESS files, or more specific items by finding them using inspect element in Chrome, then finding the specific item in the LESS files

One I am struggling to find using this method has been the border colour around items such as the one to open the drawer, around items within the drawer and the buttons in the narrative block, for example.

Inspect element on these items brings up the following:

button.base.resources-item-open.drawer-item-open

button.base.narrative-controls.narrative-control-left

button.base.navigation-drawer-toggle-button-icon

But when I try and search for these in the LESS files I get no results.

I have tried to search for these items manually but am having no luck.

Does anyone have any ideas how I can affect this element? I only want to change the colour and it's very frustrating not being able to find it!

Thanks

Jon

Hi Jon,

The reason you can't find these selectors by searching is that they are CSS that is generated from your LESS files. LESS allows for different formatting that is easier for humans to read and use but as it's a pre-processor, requires compiling to work in your browser. Your browser is reading this complied CSS which does not equate to any LESS selector.

The way to find a file would be searching for just the most specific element e.g

.narrative-control-left

, or by using your judgement to work out what file this will likely be in by it's name. Once you find these specific elements you should be able to overwrite the

.base class.

Hope that helps!

Simon

Show parent | Reply

Hi Jon

You don't say whether you're using the authoring tool or the framework - but since the framework is what I know I'm going to answer from the point of view of a framework user ;-)

If you use the $ grunt dev command on the course then it will include 'sourcemaps' in the output. These enable your browser's developer tools to identify where in the various source files the style you're inspecting came from:

Firefox developer tools should LESS sources

I think Chrome will even allow you to add the original files to the dev tools 'workspace' so that any changes you make there are then saved back to the original file... I've not tried myself though so not 100% sure how well it works with the Adapt setup.

Hope this helps

Show parent | Reply

If you're using the authoring tool then you need to select the 'Generate sourcemap' option in the configuration settings for your course.

Show parent | Reply