Jump to content
fintan

Button Customizations

Recommended Posts

fintan+    1
fintan

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
fintan+    1
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 

Share this post


Link to post
Share on other sites
Jenny    33
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 http://demo.pagelines.me/tools/


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
fintan+    1
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

Share this post


Link to post
Share on other sites
Rob    547
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: 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.
 

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
fintan+    1
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Samuel Costa - UDF
      By Samuel Costa - UDF+
      Hi.
      I need a shortcode activate a popup windows with contact form. It is possible without code?
      Link: https://www.udf.org.br/lancamentos/curso-mulher-que-prospera/
      Button: FAÇA SUA INSCRIÇÃO.
      Tks
    • Samuel Costa - UDF
      By Samuel Costa - UDF+
      Hi.
      i like to know if i can use signup button shortcode inside text editor or embed section.
      Tks.
    • DanatTLFN
      By DanatTLFN
      Site URL: thelocalfilmnetwork.com
      DMS Firmware: 2.2.1
      Wordpress: 4.5.1
      --------------------------------------
      Ticket Reference: 
       
      At the bottom of this post, there is a CSS only option that I have implemented into my site. It looks brilliant, and I am super grateful for that addition to the thread. The only issue I am having is that the code he provides does not include all of the styling options for the button itself.
      My question is, how might I go about editing the styling of the button i.e. shadows, every element of the coloring, and border colors?
      No big deal if it's not easy to fix. Happy to provide any further information if necessary.
      Kind regards,
      Dan
      P.S. I have opened up the button in Google Dev window with Inspect and start editing it there, but it looks like there are some areas of the code that are connected to an external source (most likely bootstrap) and therefore I can't seem to edit it as much as I would like.
    • norbert
      By norbert
      With the great options to make price tables, i would skip the button under every option. But .... how can I do this?
    • dgsarnow
      By dgsarnow+
      I would like to add Google Analytics click tracking to the buttons on my site. I use the Pagelines shortcodes for the buttons. I was able to add the necessary header script easily using Custom Scripts.
       
      How can I insert the following onclick option to my buttons?
       
      onclick=”trackOutboundLink(‘http://www.domain.com’); return false;"          
×