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. Different colors of text links

Different colors of text links

Scheduled Pinned Locked Moved General Discussion
13 Posts 7 Posters 800 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.
  • mariusjopenM Offline
    mariusjopenM Offline
    mariusjopen
    Global Moderator
    wrote on last edited by
    #4

    Hehe :-)

    Happy you are happy!

    www.mariusjopen.world

    1 Reply Last reply
    0
    • E Offline
      E Offline
      EvaAnna
      wrote on last edited by
      #5

      Hello @mariusjopen,

      I have the same problem I think, but I can't figure how I can "NOT giving the link a colour in the Textfield of the Gridder."!

      There is not "no color" option. My website is : http://zoelevoyer.com/

      Capture d’écran 2020-06-10 à 14.55.31.png

      Thanks for your help !!

      Eva

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

        Dear @EvaAnna
        you can set it black.

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply
        0
        • B Offline
          B Offline
          billykioso
          wrote on last edited by
          #7

          Hello, I'm working on a site with black project backgrounds and white page backgrounds.

          I've successfully changed the site title and menus with the great CSS help on this forum, so a great many thanks!

          However, I can't seem to get the hyperlinks to change colour on pages (they are set to be white, so disappear on my white pages).

          I've read various threads (about slugs, etc) but still no joy.

          The codes I used for the backgrounds, and sitetitle both work, but the third bit of code (for the links) does not work...

          Am I doning something wrong? (I'd also need to keep links black (#1b1212) in all their states.

          Screenshot 2022-04-02 at 15.06.40.png

          1 Reply Last reply
          0
          • RichardR Offline
            RichardR Offline
            Richard
            Global Moderator
            wrote on last edited by
            #8

            Dear @billykioso

            Thanks for being on the forum 🌐
            I think the problem comes from the link element in your CSS.

            Stated as .a which may refer to a class called "a" because of the class declaration .

            body.type-page .a {color: #1b1212 !important;}
            To:
            body.type-page a {color: #1b1212 !important;}

            Similar to how the span element has been targeted:

            body.type-page .sitetitle.txt .sitetitle-txt-inner span {color: #1b1212;}

            Screen Shot 2022-04-03 at 1.20.53 PM.png

            https://www.w3schools.com/css/css_link.asp

            https://www.w3schools.com/tags/tag_span.asp

            body[data-type="page"]{
            background-color: #fdfcfa;
            }
            
            body.type-page .sitetitle.txt .sitetitle-txt-inner span{
              color: #1b1212;
            }
            
            body.type-page a{
             color: #1b1212 !important;
            }
            
            

            Also if you wish to target the link further, nested within each menu point ( a ) there should be a span element:

            Screen Shot 2022-04-03 at 1.19.36 PM.png

            You could use the CSS:

            body.type-page a span{
             color: #1b1212 !important;
            }
            

            Hope this helps @billykioso & thanks for supporting Lay Theme 📣
            Richard
            1 Reply Last reply
            0
            • B Offline
              B Offline
              billykioso
              wrote on last edited by
              #9

              Thank you Richard, that's great!

              It already works perfectly (in all its states) by removing the '.' class declaration, but if I feel brave I might experiment some more with it as a span element.

              Thanks again!
              B

              1 Reply Last reply
              0
              • RichardR Offline
                RichardR Offline
                Richard
                Global Moderator
                wrote on last edited by
                #10
                @billykioso

                Thanks Billy, have a wonderful ay & good luck experimenting! ✨

                1 Reply Last reply
                0
                • E EvaAnna

                  Hello @mariusjopen,

                  I have the same problem I think, but I can't figure how I can "NOT giving the link a colour in the Textfield of the Gridder."!

                  There is not "no color" option. My website is : http://zoelevoyer.com/

                  Capture d’écran 2020-06-10 à 14.55.31.png

                  Thanks for your help !!

                  Eva

                  D Offline
                  D Offline
                  Double
                  wrote on last edited by
                  #11

                  @mariusjopen
                  Hello Marius,
                  I think I have kind of the same problem and I can't solve it!

                  [https://v2.avir.fr/](link url)
                  password : double

                  I would like the links on the home page to appear in white and the links on the "nos réalisations" page to appear in black. I would like all the hover links to appear in blue.

                  As you can see, when I put my link in white on the home page, there is hover in blue anymore.

                  I set the text color in black in Customize -> Links in Texts as you suggested to EvaAnna but it doesn't change anything.

                  Thanks a lot for your help and for all your work!!

                  Agathe

                  arminunruhA 1 Reply Last reply
                  0
                  • D Double

                    @mariusjopen
                    Hello Marius,
                    I think I have kind of the same problem and I can't solve it!

                    [https://v2.avir.fr/](link url)
                    password : double

                    I would like the links on the home page to appear in white and the links on the "nos réalisations" page to appear in black. I would like all the hover links to appear in blue.

                    As you can see, when I put my link in white on the home page, there is hover in blue anymore.

                    I set the text color in black in Customize -> Links in Texts as you suggested to EvaAnna but it doesn't change anything.

                    Thanks a lot for your help and for all your work!!

                    Agathe

                    arminunruhA Offline
                    arminunruhA Offline
                    arminunruh
                    Global Moderator
                    wrote on last edited by
                    #12

                    hey!

                    here:
                    https://laytheme.com/documentation/custom-css-styling.html
                    read the section "CSS based on current page"

                    links in texts for a certain page (in this example: your frontpage)

                    .slug-work .lay-textformat-parent a,
                    .slug-work a.projectlink .lay-textformat-parent>*,
                    .slug-work .lay-carousel-sink .single-caption-inner a,
                    .slug-work .lay-marquee p a{
                    color: blue;
                    }
                    

                    different mouseover color for that certain page:

                    .slug-work .lay-textformat-parent a:hover,
                    .slug-work a.projectlink:hover .lay-textformat-parent>*,
                    .slug-work .lay-carousel-sink .single-caption-inner a:hover,
                    .slug-work .lay-marquee p a:hover{
                    color: red;
                    }
                    

                    probably this is enough:

                    .slug-work .lay-textformat-parent a{
                    color: blue;
                    }
                    

                    and mouseover:

                    .slug-work .lay-textformat-parent a:hover{
                    color: red;
                    }
                    

                    does that answer the question?

                    D 1 Reply Last reply
                    0
                    • arminunruhA arminunruh

                      hey!

                      here:
                      https://laytheme.com/documentation/custom-css-styling.html
                      read the section "CSS based on current page"

                      links in texts for a certain page (in this example: your frontpage)

                      .slug-work .lay-textformat-parent a,
                      .slug-work a.projectlink .lay-textformat-parent>*,
                      .slug-work .lay-carousel-sink .single-caption-inner a,
                      .slug-work .lay-marquee p a{
                      color: blue;
                      }
                      

                      different mouseover color for that certain page:

                      .slug-work .lay-textformat-parent a:hover,
                      .slug-work a.projectlink:hover .lay-textformat-parent>*,
                      .slug-work .lay-carousel-sink .single-caption-inner a:hover,
                      .slug-work .lay-marquee p a:hover{
                      color: red;
                      }
                      

                      probably this is enough:

                      .slug-work .lay-textformat-parent a{
                      color: blue;
                      }
                      

                      and mouseover:

                      .slug-work .lay-textformat-parent a:hover{
                      color: red;
                      }
                      

                      does that answer the question?

                      D Offline
                      D Offline
                      Double
                      wrote on last edited by
                      #13

                      @arminunruh It's perfect, thank you very much!!

                      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
                      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