Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Harlowe 1.1.1 CSS | How to change link colours

Hello,

I am new to Twine and Harlowe, so please, be patient with me.
I am using Harlowe to write an interactive story and I would like to change the colour of links.
I searched the forums and found a nice tutorial, and I have edited CSS code before, so it would be fairly easy, I thought, to change the colour of links... except, even after I change the colours to different ones, on mouse over, the story does what it wants and goes back to the blue and pink in the default CSS.

Basically, both for visited and not visited links, the standard colour turns into what I want, but on mouse over, instead of using the colours I set on the CSS, the page keeps using the standard ones.

These are the bits of CSS code that I changed:
(I copied below the standard ones, not my amends)
.enchantment-link,tw-link{
	color:#4169E1;
	font-weight:700;
	text-decoration:none;
	transition:color .2s ease-in-out
}

.enchantment-link:hover,tw-link:hover{
	color:#00bfff
}

.enchantment-link:active,tw-link:active{
	color:#DD4B39
}

.visited{
	color:#6941e1
}

.visited:hover{
	color:#E3E
}

tw-broken-link{
	color:#933;
	border-bottom:2px solid #933;
	cursor:not-allowed
}

.enchantment-hover{
	border-bottom:1px dashed #666
}


These, I did not change:
.enchantment-mouseout{
	border:rgba(63,148,191,.25) solid
}

.enchantment-mouseout:hover{
	background-color:rgba(63,148,191,.25);
	border:1px solid transparent;
	border-radius:.2em
}



Thank you

Comments

  • Fixed it now, though not sure what I have done or what I had done wrong, but it works...
  • Hi! I'm glad you figured it out, but I'll go ahead and answer with what I DID get working for my own Twine story.
    tw-link {
    	color:#FF9999;
    }
    tw-link.hover {
    	color:#0099FF;
    }
    tw-link.visited {
    	color:#777;
    }
    

    I would leave your enchantment link stuff as is (with the :hover, etc) but doing it this way might cut down on the CSS at least?

    I hope this is helpful for your future projects!
  • Hi Pachitastic, thank you so much for the suggestion and for your help. :)
Sign In or Register to comment.