6 replies to this topic

[fintan]

Hi All

 

Please Login or Register to see this Hidden Content

 

 

This is my aim:

 

Look at the site link above, in the sidebar there is a menu made of short code buttons and below one made from a Custom Menu widget. I'd like to use the button one - for obvious reasons - but I need to create unique current, active and mousehover states for the buttons.

 

I've been following instructions already given in the forum e.g. here:

 

Please Login or Register to see this Hidden Content

 

However I'm unable to use this piece of code to create a mouseover state

 

Please Login or Register to see this Hidden Content

 

as this bit ( <span class="searchlite"> ) disappears when I save it in the Pagelines Custom Code area.

 

Maybe I'm following the wrong instructions anyway.

 

 

Any and all help is really appreciated.

 

Thanks

--

Fintan

[catrina]

Okay, the instructions you were trying to follow are actually for the PL buttons, but in the menu, the link buttons use <ul> listing rather than buttons to generate the links. Instead of styling the menu buttons with the instructions for PL buttons, you need to follow instructions here:

Please Login or Register to see this Hidden Content

(more specifically, the link styling and background styling CSS attributes, which are listed on the left)

[fintan]

Hi Catrina

 

Thanks for your speedy reply.

 

Apologies as I have not described my issue well.

 

I do not want to customize the menu. I want to customize PL buttons to behave like a menu - with mousehover etc.

 

Many thanks again for your attention.

 

--

Fintan 

[Jenny]

You'll need to add a class to the html of your button. And then you'll need to create the class' CSS and add it to your custom CSS code.

 

If that's all too much work, then you might want to check out the buttons at

Please Login or Register to see this Hidden Content

[fintan]

Hi Jenny

 

Many thanks for your reply, really appreciated.

 

I'm not explaining myself well at all. I have already added a class to the html and CSS, it's just that when I try to create a CSS code for a mousehover and other states using the code from the example I give above in my question it doesn't work - so I'm wondering what the correct CSS is?

 

Many thanks

 

--

Fintan

[Rob]

Hi Fintan,

 

The CSS3 validators are not quite up to date with LESS CSS so some things are simply not recognized. In the case of your code, the following was found to be erroneous:

 

.btn-success:<span class="searchlite">hover</span>,

 

Additionally, the balance of your CSS between the { and } lacks any actual instructions for the various states you're trying to achieve:

 

.btn-success:<span class="searchlite">hover</span>, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {

    background-color: rgb(81, 163, 81);}

 

This only sets up the elements, but all you're doing is setting a flat background color.

 

You'd have to break up the CSS you've created so that Active has a different color, etc.

 

You also don't seem to show a hover condition.  So when mousing over, one will not see any change.

 

Try testing the code via the Direct Input tab here:

Please Login or Register to see this Hidden Content

 

Also, as Catrina pointed you,

Please Login or Register to see this Hidden Content

will show you examples of hover, active, and other states.

 

[fintan]

Thanks Rob, Jenny & Catrina

 

Managed to muscle my way to what I wanted and learnt a few things on the way - ended up making the menu in four different ways - with varying degrees of success before finding more or less what I wanted.

 

many thanks for your time and effort.

 

--

Fintan