Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • 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. Extra link styles for different text formats (underline strokewidth etc)

Extra link styles for different text formats (underline strokewidth etc)

Scheduled Pinned Locked Moved General Discussion
strokewidthunderlinelink style
8 Posts 4 Posters 1.4k Views
  • 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 Offline
    D Offline
    dnz
    wrote on last edited by
    #1

    Hey Armin,

    I came across a problem I couldn't fix myself.

    So I have two separate text formats, one big one for an intro text (only a few lines) and a smaller one for longer copy texts. Both contain links. If I set the underline strokewidth to e.g. 4 in the customize menu it obviously applies the 4 px strokewidth to every text format there is. That looks odd in some cases (too large of a stroke for the small texts, too small of a stroke for the large texts).

    So is there a way to style links in both these text formats separately? I tried writing a custom <a> css but the global settings seem to override everything I try. It would be enough if I could control the strokewidth for both text formats individually. Any chance to do this?

    Thanks!

    Best regards,
    Dennis

    1 Reply Last reply
    0
    • arminunruhA Offline
      arminunruhA Offline
      arminunruh
      Global Moderator
      wrote on last edited by
      #2

      Hey Dennis!
      Try this CSS:

      .lay-textformat-parent ._My_Headline a {
          border-bottom-width: 2px;
          color: #1dff00;
      }
      
      /*mouseover state*/
      .lay-textformat-parent ._My_Headline a:hover {
          border-bottom-width: 22px;
          color: red;
      }
      

      "_My_Headline" is the html class of a textformat called "My_Headline". If you look at your textformats you will see that text "HTML Class: …". It's just your textformat name with an underscore.

      Screen Shot 2016-03-28 at 09.58.27.png

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

        Hey Armin,

        Thanks, man! Works like a charm!

        Best regards,
        Dennis

        1 Reply Last reply
        0
        • Hayo GebauerH Offline
          Hayo GebauerH Offline
          Hayo Gebauer
          wrote on last edited by
          #4

          I also have a problem with link format.

          I have different text boxes with the same format text. One of them is black font the other is white, but same format...

          the hover effect is only working on the black font

          1 Reply Last reply
          0
          • arminunruhA Offline
            arminunruhA Offline
            arminunruh
            Global Moderator
            wrote on last edited by
            #5

            Hey Hayo, can you send me the link?

            1 Reply Last reply
            0
            • P Offline
              P Offline
              peolold
              wrote on last edited by
              #6

              Following up on this thread:

              Website:
              https://peolold.de/portfolio/
              -> referring to fifth project from the top called "porta"
              -> referring to desktop version

              Problem:
              The linked textheadline "porta" is styled correctly by the settings I set in the "Customize" tab.
              The linked part of the paragraph "jung von matt / spree" is styled correctly by the custom CSS via the new created texformat "plainlinks" when not hovered. When hovered, it seems to jump back to the hovered settings set in the "Customize" tab instead of listening to the custom CSS.

              I used the custom CSS posted above:

              .lay-textformat-parent ._plainlinks a {
                  font-weight: normal;
              }
              
              .lay-textformat-parent ._plainlinks a:hover {
                  font-weight: normal;
              }
              
              1 Reply Last reply
              0
              • arminunruhA Offline
                arminunruhA Offline
                arminunruh
                Global Moderator
                wrote on last edited by arminunruh
                #7
                ._plainlinks a:hover{
                font-weight: 400!important:
                }
                

                using !important overwrites other css
                does that work?

                1 Reply Last reply
                0
                • P Offline
                  P Offline
                  peolold
                  wrote on last edited by
                  #8

                  That did the trick. Thanks as always for the quick support! :)

                  1 Reply Last reply
                  0
                  Reply
                  • Reply as topic
                  Log in to reply
                  • Oldest to Newest
                  • Newest to Oldest
                  • Most Votes


                  I also code custom websites or custom Lay features.
                  šŸ’æ Email me here: šŸ’æ
                  info@laytheme.com

                  Before you post:
                  1. When using a WordPress Cache plugin, disable it or clear your cache.
                  2. Update Lay Theme and all Lay Theme Addons
                  3. Disable all Plugins
                  4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                  This often solves issues you might run into

                  When you post:
                  1. Post a link to where the problem is
                  2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                  3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                  Online Users
                  V
                  vonMatthias
                  W
                  willi_tsb
                  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