• 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

Close button on a project

Scheduled Pinned Locked Moved General Discussion
6 Posts 2 Posters 156 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.
  • S Offline
    S Offline
    sofiapapa08
    wrote on last edited by
    #1

    Hi,

    I want to put a simple "close" button on a project, so when you click on it, it comes back to the main category. Also, the menu (visible in my main category) hide when the project is open, and there is the close button instead.

    See this example: https://jacquesbrun.com/work/conte-d-ete#img-1

    Is it possible?

    Thank you in advance,
    Sofia

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

    Dear @sofiapapa08

    Firstly regarding the Close button:

    We can create a simple "Close button" by using the link properties of an <a> tag
    https://www.w3schools.com/tags/tag_a.asp

    When clicked, the link will take us to our desired destination.
    I have set up a simple link to demonstrate.

    <div class="close-button-outer">
        <a class="close-button" href="/category/work">
            INSERT WHATEVER YOU WISH HERE
        </a>
    </div>
    
    

    Here this link has the 'class' - "close-button"
    we can use this (class) to target it so that we can style it ( CSS ) - Change how it looks and is positioned on our page, among other things.

    Here are some CSS Basics if you need them:

    https://www.khanacademy.org/computing/computer-programming/html-css

    we use the "href" ( link path ) to define where the link will take us when we click it - we can take the information needed from the "Permalink" of our desired page - Here for example:

    Screen Shot 2020-08-31 at 4.17.04 PM.png

    "/category/work"

    The "work" is the url friendly name (slug) of our category, find the slug you wish in "categories"

    Screen Shot 2020-08-31 at 4.17.38 PM.png

    <div class="close-button-outer">
        <a class="close-button" href="/category/work">
            INSERT WHATEVER YOU WISH HERE
        </a>
    </div>
    
    

    So when click we will go to categories - work

    Now, you can insert whatever you wish between the <a> tags - Text, An image or more, in this example i have made the button as text saying "insert whatever you wish"

    Screen Shot 2020-08-31 at 4.24.20 PM.png

    Now you can Add your HTML Code either in "HTML" within the "Laygridder" of a project or footer page:

    Screen Shot 2020-08-31 at 4.27.18 PM.png

    Or in "Lay Options" - "Custom CSS & HTML"

    Screen Shot 2020-08-31 at 4.26.57 PM.png

    Add "Custom CSS" to style your button and position it how you wish.

    Here on a past thread a similar solution:

    http://laythemeforum.com:4567/topic/1092/x-close-button/2

    OK! Secondly the Menu Question:
    Could you please post a link to your website with the Menu in question and then we can target it and make it disappear.

    Let me Know

    Best wishes & good luck on your Lay Theme journey

    Richard

    1 Reply Last reply
    0
  • S Offline
    S Offline
    sofiapapa08
    wrote on last edited by sofiapapa08
    #3

    @Richard-Keith said in Close button on a project:

    <div class="close-button-outer">
    <a class="close-button" href="/category/work">
    INSERT WHATEVER YOU WISH HERE
    </a>
    </div>

    Hi Richard,
    First, thank you so much for all these explanations!

    I've just tried it, and it works when I insert the html code in the "custom CSS & HTML" in the Lay Options, but not when I insert a html directly in my project in the laygridder.
    And I need to do it with the laygridder to avoid having a close button everywhere on the website (like on the page category "work" that is my main page).

    However, at this point I've put my HTML and CSS in the lay options custom, but I need to hide it on my main page (=category work; here it is https://sofiappfth.ch/)
    Or I could do it with the laygridder but as I said, didn't work :-(

    Also, here is my website https://sofiappfth.ch/
    so we can, as you said, target it and make disappear :-)

    Thank you so much again,
    best

    Sofia

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

    Dear @sofiapapa08

    I am happy to explain both options to you & then you are free to choose which works best for your purposes :)

    First way involving "More - HTML" within the Gridder of a page:

    Screen Shot 2020-09-08 at 8.54.56 AM.png

    Here is a simple button very similar to the example mentioned earlier ( Blue just for visual aid )

    <div class="close-button-outer">
        <a class="close-button" href="/category/work">
            <p class="link-text">
                close
            </p>
        </a>
    </div>
    

    We need to apply CSS to this HTML so that we can view it, if it is just added directly then it is technically there:

    Screen Shot 2020-09-08 at 8.57.59 AM.png

    But it doesn't have any styling to show it too us
    ( this was an oversight in my last answer as i should have explained myself better! )

    So in "Lay Options" - "Custom CSS & HTML" lets add this as an example:

    .close-button-outer{
        background-color: aqua;
    }
    .link-text{
        font-size:20px;
        text-align:center;
    }
    

    Now with CSS my HTML Gridder content is given information on how to style itself for the viewer,

    Let me know if i can help more with this option.

    Option Two: Using HTML for multiple pages in "Lay Options - CUSTOM CSS & HTML" and then removing it for a specific page of your choice.

    Still the same code as before will be applied however this time in Custom HTML like you have previously done :)

    Now we need to target it on a specific page and make is "disappear..."

    Each page has its own 'slug'

    Screen Shot 2020-09-08 at 9.05.37 AM.png

    Here for this test page the slug is 'projectxy'

    Screen Shot 2020-09-08 at 9.06.34 AM.png

    so for this page i wish that link/button of ours not to be displayed - i can add the following Custom CSS

    .slug-projectxy .close-button-outer {
        display: none;
    }
    

    The browser will now never display it.

    I hope this all helps you Sofia and i have been clear, Let me know if you have any further questions,

    Until then, Thank you for using Lay Theme and have a wonderful day

    Best
    Richard

    1 Reply Last reply
    0
  • S Offline
    S Offline
    sofiapapa08
    wrote on last edited by
    #5

    Hi Richard,

    Thank you so much for all these explanations…

    Tadaaa... IT WORKED!!

    So thank you again!

    Have a nice week,
    Best,

    Sofia

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

    Dear @sofiapapa08

    This is good news! :)

    All the best and good luck on the rest of your Lay Theme journey,

    Sincerely
    Richard

    1 Reply Last reply
    0

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. When using a WordPress Cache plugin, disable it or clear your cache.

Now see if your problem solved itself.

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!
Post a link to where the problem is if possible, please <3
I don't answer or check forum DMs, please just post on the forum.
Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
Online Users
A
laytheme.com
  • Login

  • Don't have an account? Register

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

  • Don't have an account? Register

  • Login or register to search.