Picture of Simon Ray
Weblink colours
by Simon Ray - Tuesday, 23 February 2016, 11:47 PM
 

Hi all

Can anyone point me to where I can change the colour of a web link in the Framework?  It's a bit hard to read the text if the background and link are both blue...

And yes, I know about the spelling error! :)

Simon

Picture of Chuck Lorenz
Re: Weblink colours
by Chuck Lorenz - Wednesday, 24 February 2016, 3:49 AM
 

Hi Simon,

Assuming
- you are using Framework v2
- with a comparable version of adapt-contrib-vanilla as the basis for your theme
- and haven't yet made customizations that affect links,
I'd point you to line 30 of adapt-contrib-vanilla/less/src/component.less. Follow the trail of Less variables since this line references @font-color which is typically found in adapt-contrib-vanilla/less/src/colors.less.

Hopefully this gives you the jumpstart you need. To find this, I used Chrome developer tools to inspect the classes affecting the link. Then I used my IDE (Webstorm) to search the vanilla theme in my project for the class. I located .component-body.a in component.less

You can add your customizations there in component.less if they apply to all components or in accordion.less if they apply solely to Accordions. Or if you'd like to keep them clean for applying updates in the future, you can create a wholely new Less page to house your customizations.

Here's another wiki article that explains the arrangement of the vanilla files if you haven't yet explored it: https://github.com/adaptlearning/adapt-contrib-vanilla/wiki; and a video about Less variables if it's helpful: https://www.youtube.com/watch?v=76DBh6Uc6N4

(Simon, I think this may be more than you need, but adding it here for others who may be new to Adapt theming. Thanks for your patience.)

- Chuck

Picture of Paul Steven
Re: Weblink colours
by Paul Steven - Wednesday, 24 February 2016, 9:07 AM
 

Possibly you could just add some custom css via the Project Settings -> Custom CSS/LESS code:

.component .component-body a {
color: #ffffff;
}

.component .component-body a:visited {
color: ff0000;
}

Haven't tested this theory but may be a simpler solution if it works

Picture of Simon Ray
Re: Weblink colours
by Simon Ray - Thursday, 25 February 2016, 4:12 AM
 

Thanks Chuck and Paul

I found the .less files and the references, but couldn't get the change to work. I gave up and changed the background colour...it was easier in the end!

Maybe when I have more of a handle on code I'll be able to effect the detailed changes.

Simon