• Resolved themebreaker

    (@themebreaker)


    Does anyone know the code I can add to my Custom CSS for widening the gap between text and underlines in links in FIRST, without accidentally adding underlines where there aren’t supposed to be any, and without messing up the customiser colour schemes?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author Takao Utsumi

    (@utsumit)

    Underline is browser’s feature. So it is very difficult to customize it.

    Thread Starter themebreaker

    (@themebreaker)

    Thank you for your prompt reply, as always. It was really difficult, especially for a learner, but this is why I enjoy learning from your lovely, clean code; I’m starting to see patterns. I looked at the First and Write stylesheets in the editor, found where underlines apply, and changed ‘underline’ to border-bottom:solid 1px then pasted it into the custom CSS bit of First. Fingers crossed… apart from doing weird things to plugin links – my next challenge! – it seems to work. I hope I haven’t done anthing stupid to the code. That’s why my username is Themebreaker… I learn by trying.

    }
    .entry-content a,.page-content a, .author-description a, .comment-content a, .post-navigation a {

    text-decoration: none; border-bottom: solid 1px
    }
    a:hover {

    Theme Author Takao Utsumi

    (@utsumit)

    Yes, it may work well, but it may cause some issue.

    Thread Starter themebreaker

    (@themebreaker)

    You were so right about the “issues”! The link problems are completely my own fault, I know, but I was just wondering if there is any code I can add that would remove the underline on hover? This is the code I inserted into the custom CSS. (The commented out colours are the default in Write; I didn’t know how else to get the links in FIRST inheriting the colours I choose in the customiser.)

    /* Link */
    a {
    	color: inherit;
    	text-decoration: none;
    	transition: background-color .15s ease-in-out, border-color .15s ease-in-out, color .15s ease-in-out, opacity .15s ease-in-out;
    }
    .entry-content a,.page-content a, .author-description a, .comment-content a, .post-navigation a {
    	/*color: #a87d28;*/
    	text-decoration: none; border-bottom: solid 1px
    }
    a:hover {
    	/*color: #c49029;*/
    • This reply was modified 6 years, 8 months ago by themebreaker.
    Theme Author Takao Utsumi

    (@utsumit)

    Please add the following code.

    .entry-content a:hover,.page-content a:hover, .author-description a:hover, .comment-content a:hover, .post-navigation a:hover {
    	border-bottom: none;
    }
    Thread Starter themebreaker

    (@themebreaker)

    Dear Takao/Mr Utsumi,
    Firstly, I am very sorry I did not reply immediately to thank you for your input and help; I usually reply as soon as I get a notification email, but I’ve not been well and haven’t checked my email or been working on my blog.

    Thank you so much! This piece of code, posted in my Additional CSS works perfectly.

    It gave me a lot of pleasure to log on today and see all the simple changes your help has allowed me to make to my theme, changes that make me happy and proud of what I’m learning. If you are ever feeling disheartened, please remember that every small thing you do to help people like me has a ripple effect all round the world. You are a very decent, honourable person.
    Best wishes from Scotland

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to widen gap in link underlines’ is closed to new replies.