Copy link to clipboard
Copied
I am trying to edit the code for a link so that it's underlined as standard, and when the mouse is put over the 'hover' function changes to text decoration none.
I had this sorted last year, the plugin theme has been updated and it's defaulted to the reverse again. I can find the style sheet and looks like it should be behaving correctly? But it's not?
My site is http://menergy.org.au/committee-2016/ and believed the style sheet was located at /public_html/wp-content/themes/Total/style.css, can anyone point me in the correct direction?
Thanks
Batch
Copy link to clipboard
Copied
Have a look at style.min.css Line 17 which says
.team-flat .team-item a {
text-decoration-line: none;
text-decoration-style: solid;
}
Copy link to clipboard
Copied
Ben, thanks for the reply.
I'm unable to find the code on line 17? The code for /* links */ is on line 638?
I need the link to be underlined and on hover to disappear. I'm sure it should read
/* links */
a { color: #0081cc; text-decoration: underline; outline: none; }
a:hover { text-decoration: none
Thanks
Copy link to clipboard
Copied
This is what I see

Edit:
I have un-marked by previous answer as being the correct answer. You can apply the correct answer when your problem has been solved.
Copy link to clipboard
Copied
Ben, that's not the style sheet for the specific element, I changed the CSS to read
.team-flat .team-item a {
text-decoration: underline;
}
.team-flat .team-item a:hover {
text-decoration: none;
}
it didn't work?
Copy link to clipboard
Copied
Which links are you talking about that you want underlined as standard?
Copy link to clipboard
Copied
The links are in the text, at various places.
To bring my vision into the world I have co-founded ‘The Art of Relating’ where one focus’ ‘EmpowerMENt’ is specifically to support MEN in feeling and connecting more deeply with themselves. My monthly offering ‘MEN@Dance’ provides an embodiment space; a moving meditation that is centering, grounding and empowering.
On this page they behave in the opposite way.
Thanks
Copy link to clipboard
Copied
Paul, this is the markup
<div class="team-item" >
<div style="max-height:10000px;" class="team-thumb"><img src="http://menergy.org.au/wp-content/uploads/2015/08/Gero-2016.jpg" /></div>
<div class="team-title" style="color:#333;font-size:14px">Gero</div>
<div class="team-position" style="color:#333;font-size:13px">The Connector</div>
<div class="team-content" style="color:#333;font-size:13px;">
<p>I am a journeyman….continuously looking to learn, to understand and to grow my experience base. In my younger years I often felt inadequate; not good enough, not attractive enough. I wanted to be someone else, someone better and I longed to be loved and accepted by others. This mindset presented a considerable obstacle to finding myself yet I am able to appreciate more and more what I have found. Today, I aspire to live in the now, being present to what is and response-able to what comes.<br />
Creating possibilities for authentic interactions is what fuels my passion. I want to contribute to an alive, just and sustainable future and I am inviting feedback from those around me on how I am doing.<br />
To bring my vision into the world I have co-founded <a href="http://www.theartofrelating.com.au/" target="_blank">‘The Art of Relating’ </a>where one focus’ ‘EmpowerMENt’ is specifically to support MEN in feeling and connecting more deeply with themselves. My monthly offering <a href="https://www.facebook.com/groups/1490351944582419/" target="_blank">‘MEN@Dance’</a> provides an embodiment space; a moving meditation that is centering, grounding and empowering.</p>
This means that the selector could be .team-item a
When I then look at my reply (#3) I see
.team-flat .team-item a {
text-decoration: none
}
This cannot be a co-incidence.
Copy link to clipboard
Copied
Ben, I have changed the style sheet to read:-
.team-flat .team-item a {
text-decoration: underline
}
.team-flat .team-item a:hover {
text-decoration: none
}
saved the sheet, cleared my cache (Firefox) and it still doesn't behave? What am I missing?
Copy link to clipboard
Copied
There may be other rules that come after the rules that you have changed, thus overriding them.
Try adding !important as in
.team-flat .team-item a {
text-decoration: underline !important;
}
.team-flat .team-item a:hover {
text-decoration: none !important;
}
Copy link to clipboard
Copied
Just re-reading your reply #4, If you are using Chrome to test, you may find a problem with the cache, which means that changes made in CSS may not filter through.
See here for more Clear cache and cookies - Accounts Help
Copy link to clipboard
Copied
Hi Ben
Apologies for the delay.
I have changed the file as above, refreshed cache and deleted cookies, still not working?
😞
Copy link to clipboard
Copied
You have an id tag available - id="team-207" - which is greater than a class tag, so make use of it to target the anchor tags within the text and see if that resolves your issues:
#team-207 a {
color: red;
text-decoration: underline;
}
#team-207 a:hover {
text-decoration: none;
}
Although the answer that Ben provided should work - using !mportant - it does for me.
23 stylesheets! No wonder you cant get anything to work. Do you know exactly what is in all of these stylesheets?
Copy link to clipboard
Copied
I have changed the code to reflect your response and included the !important also
It still doesn't work?
The stylesheets are all related to the plugins and themes, I would prefer to have less?
thanks for the help so far
Copy link to clipboard
Copied
I removed the 'Correct Answer' label from my reply because that answer did not solve the problem.
Then I took to Firefox and used one of the nifty tools within the Web Developer extension to modify relevant style rules. This is the result

For more on the tool used, see Web Developer
Copy link to clipboard
Copied
Ben, most confusing!
I have changed the code on the style sheet, deleted my cache and cookies as per
.team-flat .team-item a {
text-decoration: underline !important;
}
.team-flat .team-item a:hover {
text-decoration: none !important;
}
and yet it's not working?
I'm about to just accept?
Thanks
Copy link to clipboard
Copied
I'm not sure why its not working for you. Both the solution I supplied plus the one Ben supplied works for me when I test it out.
As a last resort insert the code below into the page DIRECTLY before the closing </head> tag and try that.
<style>
#team-207 a {
color: red;
text-decoration: underline;
}
#team-207 a:hover {
text-decoration: none;
}
</style>
It may be that something else in one of your 23 stylesheets is over-ridng the styling. It's difficult to diagnose the issue when so many stylesheets are used.
Find more inspiration, events, and resources on the new Adobe Community
Explore Now