Archived

This topic is now archived and is closed to further replies.

  • 0

Button Customizations


Question

Posted · Report post

Hi All

 

http://kathleenmccormickbaskets.com/home/

 

 

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:

 

http://www.pagelines.com/forum/topic/23051-pl-button-add-additional-colors/?hl=hover+shortcode+buttons#entry134663

 

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

 

.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);}

 

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

Share this post


Link to post
Share on other sites

6 answers to this question

Posted · Report post

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: http://jigsaw.w3.org/css-validator/validator
 
Also, as Catrina pointed you, http://www.w3schools.com/css/default.asp will show you examples of hover, active, and other states.
 

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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: http://w3schools.com/css/default.asp (more specifically, the link styling and background styling CSS attributes, which are listed on the left)

Share this post


Link to post
Share on other sites

Posted · Report post

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 

Share this post


Link to post
Share on other sites

Posted · Report post

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 http://demo.pagelines.me/tools/

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites