Forum Discussion

vincent-au's avatar
vincent-au
Adept
12 years ago
Solved

Changing text links to buttons?

So our designers are working on some comps for our in-house custom skin.  They want to change certain links, like "view all," and some others to buttons.  Since the links are not part of an lia-butto...
  • VenkS's avatar
    VenkS
    12 years ago

    This is feasible, I've outlined one approach:

     

    1) Hide the link using CSS.

    2) Add JS to the page that will look for the link that you want to modify (I'm assuming that you want to modify stock links, so you can't rebuild them from scratch), and add the class "lia-button lia-button-primary" (for primary buttons) or "lia-button lia-button-secondary" (for secondary buttons) to the "a" node. You might need to add some CSS to style the button correctly.

    3) Once the JS has made the modification, display the link (using the same JS).

     

    The point of hiding/showing the link is that if the page is slow and the JS takes time to run, the user won't see a link turn into a button, instead he'll just see a button appear.

vincent-au's avatar
vincent-au
Adept
12 years ago

This makes sense, but is it possible to add JS to specific core (not custom) pages, or to modify the "a" nodes within core components?

 

Thanks!!

 

VenkS's avatar
VenkS
Lithium Alumni (Retired)
12 years ago
You can modify any node on the page (core or custom), since JS runs after the page is loaded, and is client-side. To add JS to a page, you can write it in a custom component, then add that custom component to the page. If the JS is to be run on all pages, you could write it in a separate JS file and add it to the skin, or write the JS in the skin's Header or Footer.