These are chat archives for adaptlearning/adapt_authoring

15th
Mar 2018
Mitchell Horn
@reddprime_twitter
Mar 15 08:33
Hi all, I am using the Adapt authoring tool. I need to show that Adapt is a useful tool for the company to use. At the moment I have no idea how to modify the theme. Does anyone have custom css/less code that I can use to make it look better. Attempted to copy some from an example build, but that failed. (I have no CSS.LESS knownledge at all )
canstudios-paulh
@canstudios-paulh
Mar 15 08:53
I think you will get home good examples of what can be done from the community website. I’m not sure it’s worth trying to demonstrate the flexibility of the tool yourself if you don’t have the best skills to do it right now? https://www.adaptlearning.org/index.php/adapt-showcase/
That’s not to say you shouldn’t learn - just it might be easier to show the complete flexibility from existing examples
Mitchell Horn
@reddprime_twitter
Mar 15 08:58
@canstudios-paulh I need to demostrate that we(the designers in the team) are able to use it, we are able to design themes, but we are not coders. I am not 100% sure what needs changing in the vanilla theme to make it look decent (currently the vanilla theme is not attractive). I was hoping that someone had some code that I could look at to see what should be changed most commonly.
canstudios-paulh
@canstudios-paulh
Mar 15 09:00
It can all be changed. What is an example of what you want to do?
canstudios-paulh
@canstudios-paulh
Mar 15 09:02
I expect there’s a lot of pretty complicated css in here. However with extensions like the background image you can get a lot of bangs for bucks - I’m walking to work at the minute- I’ll send some basic stuff over when I get in
We tend to set people up with a template based on their designs then give a training session the kickstart the learning process for css
Mitchell Horn
@reddprime_twitter
Mar 15 09:05
thank you @canstudios-paulh
canstudios-paulh
@canstudios-paulh
Mar 15 16:15
Here’s a good one - stick your components on with sellotape
.component-inner::before, .component-inner::after {
    position: absolute;
    content: "";
    background: -moz-linear-gradient(-45deg, rgba(242,218,0,0.17) 32%, rgba(255,255,255,0.48) 44%, rgba(242,218,0,0.21) 54%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(242,218,0,0.17) 32%,rgba(255,255,255,0.48) 44%,rgba(242,218,0,0.21) 54%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(242,218,0,0.17) 32%,rgba(255,255,255,0.48) 44%,rgba(242,218,0,0.21) 54%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    width: 90px;
    height: 50px;
    margin: -16px -35px;
    padding: 8px 24px 5px 21px;
    box-shadow: 1px 2px 0 rgba(0,0,0,0.25);
    display: block;
    transform: rotate(-9.4deg);
    border-top: 1px solid rgba(255,255,255,0.14);
    border-left: 1px solid rgba(255,255,255,0.14);
}

.component-inner::before{
left: -14px;
top: -14px;
}
.component-inner::after{
right: 14px;
bottom: 14px;
}