Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Multiple Text Link colours

Multiple Text Link colours

Scheduled Pinned Locked Moved General Discussion
4 Posts 2 Posters 611 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D
    D
    DoggettJones
    wrote on last edited by
    #1

    I need more than one colour for text links. I have tried creating a new style to apply as a class, however only details like underline etc apply. The text remains blue. I have 3 words and each I want to have a different colour on rollover i.e one is blue, the next is red. Any idea how I can add CSS that works.

    The code I have tried is below:

    .styleone:link {
    text-decoration: underline;
    color: #000;
    }

    Screen Shot 2020-01-15 at 14.32.24.png

    You will see Work is the default blue. I want About to be Red and contact Green.

    Please, someone help!!

    1 Reply Last reply
    0
    • mariusjopenM
      mariusjopenM
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      Dear @DoggettJones
      CUSTOM CSS is the way to go.

      Probably you can address each link separately.
      Also have a look into nth-child

      Best!

      Marius

      www.mariusjopen.world

      1 Reply Last reply
      0
      • D
        D
        DoggettJones
        wrote on last edited by
        #3

        Hi, Thanks for finding the time to reply to me.

        Custom CSS was the way to go.

        I created the following class:

        .link_bigideas:hover {
        text-decoration: none;
        color: #94c120 !important;
        }

        The applied the class in the source code editor;

        <a class="link_bigideas" href="my page link">Big Ideas</a>

        Working fine now. The !important attribute is what makes it possible.

        1 Reply Last reply
        0
        • mariusjopenM
          mariusjopenM
          mariusjopen
          Global Moderator
          wrote on last edited by
          #4

          Dear @DoggettJones
          ah great!!!
          Thank you for letting us know!

          Best!

          Marius

          www.mariusjopen.world

          1 Reply Last reply
          0

          Hello! It looks like you're interested in this conversation, but you don't have an account yet.

          Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

          With your input, this post could be even better 💗

          Register Login
          Reply
          • Reply as topic
          Log in to reply
          • Oldest to Newest
          • Newest to Oldest
          • Most Votes


          Online Users
          A
          Anna_S
          Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
          laytheme.com
          • Login

          • Don't have an account? Register

          • Login or register to search.
          • First post
            Last post
          0
          • Recent
          • Tags
          • Popular
          • Users
          • Search