Jump to content


Photo
- - - - -

Button Customizations

button

Best Answer Rob , 01 February 2013 - 01:34 AM

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...dator/validator
 
Also, as Catrina pointed you, http://www.w3schools...css/default.asp will show you examples of hover, active, and other states.
 
Go to the full post


  • Please log in to reply
6 replies to this topic

#1 fintan

fintan

    Advanced Member

  • Members

  • 66 posts
  • LocationIreland
  • Country: Country Flag

Posted 31 January 2013 - 04:21 PM

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



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 31 January 2013 - 05:13 PM

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)



#3 fintan

fintan

    Advanced Member

  • Members

  • 66 posts
  • LocationIreland
  • Country: Country Flag

Posted 31 January 2013 - 05:32 PM

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 



#4 Jenny

Jenny

    Owned by PageLines

  • Unicorn Store Dev

  • 2920 posts
  • LocationWV
  • Country: Country Flag

Posted 31 January 2013 - 06:28 PM

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



#5 fintan

fintan

    Advanced Member

  • Members

  • 66 posts
  • LocationIreland
  • Country: Country Flag

Posted 31 January 2013 - 08:45 PM

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



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 01 February 2013 - 01:34 AM   Best Answer

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.
 


#7 fintan

fintan

    Advanced Member

  • Members

  • 66 posts
  • LocationIreland
  • Country: Country Flag

Posted 01 February 2013 - 06:21 PM

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







Also tagged with one or more of these keywords: button