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.
  • ? Offline
    ? Offline
    A Former User
    wrote on last edited by
    #3

    Thanks @mariusjopen now it looks good.

    1 Reply Last reply
    0
    • 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