www.wysiwygwebbuilder.com

Posted: **Wed Jan 10, 2024 11:05 pm**

Hi all,

I've recent upgraded to WB19 as I need to rebuild a website and I'm trying to improve the design. I'm not a hardened web designer so this is why I like WB19. I apologies if this is a simple question or I'm doing it completely wrong!

I want to create an effect for some text which is part of a bullet list object. I want a dashed border to appear around the text on the mouseover event before a user clicks on it to follow a link to another page. So I have created the bullet item, selected up the text and click on the link button in the ribbon to insert a link and set the event as shown below:

event = onmousevent
action = set class
target = (self)
style = dashed_box_link

On the Tools ribbon I had clicked on style manager added under general styles a new style called dashed_box_link and under Border style had set that to dashed, Border Width = 1.5 and Border color = some blue colour.

I am expecting a dashed border to appear around the text when I move the mouse over it, but it never does. I have tried this effect on a simple text item (so not part of a bullet list) and that too fails

Posted: **Thu Jan 11, 2024 12:13 am**

Not sure that is going to work. Also, not really necessary to involve javascript when it can be done with some simple css.

Try this by adding the following between the <head> tags using a html box:

Code: Select all

<style>
.item:hover{border:2px dashed #000000;}
</style>

Change the width, style and color to what you want.

Posted: **Thu Jan 11, 2024 7:26 am**

I am expecting a dashed border to appear around the text when I move the mouse over it, but it never does.

By using events, the class will be applied to the text's container not to the text itself.

If you want to use styles then you can implement this with pseudo classes.

1. Remove the event

2. Create a style for the default state.
For example: box_link

3. Create a second style for the hover state (pseudo class):
box_link:hover

4. Apply the style to the text, not the container.

More about pseudo classes:
https://www.wysiwygwebbuilder.com/pseudoclasses.html

Posted: **Thu Jan 11, 2024 7:26 pm**

Dear crispy68/Pablo,

Thank you for your responses. I liked the simplicity of crispy68 answer but decided to go with Pablo's solution as I felt that was more in tune with the way I should be using WB19.

I tried what you said and it works well, but I would say to other users you need to set the border width\colour of the default style (even though you don't want to see it) because if you don't the text shifts a pixel when the dashed border is displayed.

Finally I need to say I did go through the help file before I posted my question on the forum (yes I read help files!) and after reading Pablo's solution went back to the help file and there is absolutely nothing in the help file about pseudo classes. The help file is out of date with respects to the version of WB19 and needs updating.

Posted: **Thu Jan 11, 2024 8:42 pm**

The help file is out of date with respects to the version of WB19 and needs updating.

The help is up to date. I have actually spend a lot of time recently to review all text in the help. Although of course it's possible that I overlooked some things...
However, pseudo classes is standard HTML functionality, not specific to WWB. So I did not think it should be in the help.
Therefor I created a dedicated tutorial, so I could also include images to make it more clear more to use it in WWB.
Adding images to the help file would make the file very large and slow.

Posted: **Thu Jan 11, 2024 10:36 pm**

Glad to hear you keep an up to date help file!

May be you could put in a short section that links to the web site?

Pseudo code may be standard html but isn't the whole idea of WB that it's accessible to non-coders...? It's a great piece of software I have been supporting for many years. But surely the key demographic of users are non coders so a good help page is important. I have no problem with it linking out to a web page.

www.wysiwygwebbuilder.com

onmouseover not working, what am I doing wrong?

onmouseover not working, what am I doing wrong?

Re: onmouseover not working, what am I doing wrong?

Re: onmouseover not working, what am I doing wrong?

Re: onmouseover not working, what am I doing wrong?

Re: onmouseover not working, what am I doing wrong?

Re: onmouseover not working, what am I doing wrong?