Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Different colors of text links

    General Discussion
    7
    13
    445
    Loading More Posts
    • 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.
    • K
      KatB last edited by

      Re: Text links: different color per page?

      Hi guys,
      i need on different project pages different colors of links (black and white). I tried it with this at Custom Css:

      .slug-universitaet-der-kuenste-berlin-lehramtskampagne .a{
      color: white;

      }

      But that doesn't work out.
      Thanks for your help!

      http://www.katrinbehrens.com/ui-ux/universitaet-der-kuenste-berlin-lehramtskampagne

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Hi @KatB

        this would be the way to go:

        0_1520030037236_Bildschirmfoto 2018-03-02 um 19.33.27.png

        But as you can see the element.style overwrites the color blue. Element Styles always overwrite everything.
        You can change that by NOT giving the link a colour in the Textfield of the Gridder.
        Then the Blue, or whatever colour you want, should work.

        All the best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • K
          KatB last edited by

          Thanks @mariusjopen now it looks good.

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            Hehe :-)

            Happy you are happy!

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • E
              EvaAnna last edited by

              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 Reply Quote 0
              • mariusjopen
                mariusjopen Global Moderator last edited by

                Dear @EvaAnna
                you can set it black.

                Best!

                Marius

                www.mariusjopen.world

                1 Reply Last reply Reply Quote 0
                • B
                  billykioso last edited by

                  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 Reply Quote 0
                  • Richard
                    Richard Global Moderator last edited by

                    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 Reply Quote 0
                    • B
                      billykioso last edited by

                      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 Reply Quote 0
                      • Richard
                        Richard Global Moderator last edited by

                        @billykioso

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

                        1 Reply Last reply Reply Quote 0
                        • D
                          Double @EvaAnna last edited by

                          @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

                          arminunruh 1 Reply Last reply Reply Quote 0
                          • arminunruh
                            arminunruh Global Moderator @Double last edited by

                            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 Reply Quote 0
                            • D
                              Double @arminunruh last edited by

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

                              1 Reply Last reply Reply Quote 0
                              • First post
                                Last post

                              Before you post

                              Use the Search Feature. Maybe there is already a solution to your issue.

                              1. Update Lay Theme and all Lay Theme Addons
                              2. Disable all Plugins
                              3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                              4. Now see if your problem solved itself
                              5. Go here, see if your problem is listed here:
                              Troubleshooting

                              When you post:
                              1. Post a link to where the problem is
                              2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                              Thanks!

                              Online Users

                              Recent Topics

                              • T

                                OpenType Feature

                              • T

                                Split Screen just on front page / subpages without the split?

                              • T

                                problem when I click on the category filter buttons on mobile

                              • G

                                z index has different behaviors on different pages

                              laytheme.com