Creating underlined links on hover

[David23]

Hello,

I am new to Presence Builder and was wondering how is it possible to create link that is not underlined and then when you hover the cursor on the link then it becomes underlined. I know a:hover and set text-decoration to underline. But I am confused in the way CSS works in Presence Builder. The link currently uses a class called " link." But I am unsure of the location of this class.

<link rel="stylesheet" href="../css/style.css?template=generic">
<script src="../js/css_browser_selector.js"></script>
<script type="text/javascript" src="../components/jquery/jquery.min.js?ac=11.5.11_40974.13062110"></script>
<link type="text/css" href="../modules/text/text.css?template=generic" rel="stylesheet">

Above is from the homepage where the link is and below is the code for the link.

<a class=" link" style="font-weight: bold; font-size: 22px; text-decoration: none; color: #ffffff;" href="page://sny2pp87a73">Find Chambers on the Western Circuit</a>

I have checked style.css and text.css but cannot find "link". Any help would be much appreciated.

Many thanks,
David

 

[dave-ha]

Hi David23,

Welcome to Web Presence Builder and to this forum.

What you could do is to use the meta data field in the editor's settings section for this purpose. Adding these lines of code overwrites the styles provided by WPB's CSS files:

<style type="text/css">
<!--
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
-->
</style>

I hope it helps. Good luck with your project!

 

[coolemail2]

In a similar way, I want to have an image which on mouseover changes the image shown and is also a link to somewhere. I tried

<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>

but that did not work. Can we do this OK in WPB?
Many thanks all

 

[dave-ha]

To my knowledge the WPB editor does not provide any function for that.

However, you can try something with HTML/Javascript - like you did - and upload the image files to your web space (make sure that the URLs are correct) or a solution with CSS. You will find coding samples here: https://www.google.com/search?q=change+image+on+hover.

The effect is visible only after having published the web site.

 

[David23]

Thank you for all the input!! I also want to do a hover image within CSS. But I cannot edit the css file. The file is in httpdocs>css>style.css. But everytime I try to edit the file it reverts back to the original even though I am uploading the new file via Filezilla. I am running the site on Plesk 11. Any help would be much appreciated.

 

[dave-ha]

David23,
You can add the customised CSS code in the meta data field in the editor's settings section. PM me if you need further assistance.