Is there any way to override NodeBB's hyperlink style

jiangcaiyang

Is there any way to override NodeBB's hyperlink style, I want to replace blue hyperlink text into orange ones. How could I achieve that?

AOKP

@jiangcaiyang by learning and using the most basic CSS.

jiangcaiyang

@AOKP I've learned quite a few about maintaining and developing upon NodeBB, the way I could find is to modify NodeBB's default CSS, is there any way that we could not disturb the source code of NodeBB's internals in addition to achieve our goal?

jarey

@jiangcaiyang you can simply write some basic css rules as @AOKP has suggested via the Administration Control Panel.That way the theme don't even need to be modified.

Take a look at the first example here: http://www.w3schools.com/css/css_link.asp there the link is changed to pink. You can play with the option visited, hoover etc and specify your color preferences in each state of the link. Nothe that id you use the 'a' selector it would apply to all links in the site. You can use a more restrictive selector if you find it to be so general.

jiangcaiyang

It is by my practice, that I have to change the less code within lavender theme so that we could resolve this problem.

$$prefix/QtDream/node_modules/nodebb-theme-lavender/less/variables.less #37

@link-hover-color:      darken(@link-color, 15%);

Changed to

@link-hover-color:      #FF9000;

You can visit my site for the effect.
http://qtdream.com

HolyPhoenix

@jiangcaiyang There is a place in the admin panel for entering custom css rules. Admin->Appearence->Custom HTML & CSS->Custom CSS.

If you put the CSS you want here, it will overwrite the board style. No need to modify theme styling files.

jiangcaiyang

@HolyPhoenix Have you tried it? I've done this, but it does not take effect. Maybe this does not work the way that you could think.

PitaJ

@jiangcaiyang It works if you do it right. It doesn't take LESS variables, but it does work. Odds are the less styles have higher specificity, so your custom CSS rules are not applied. Use !important or something instead. It will certainly benefit you to not be held back due to incompatibility with newer versions of NodeBB in the future.