• edgrbnz

    Well you surely could solve that with some code.
    As far as I can see the example page is completely code based with CSS animations. The left part are two simple layouts that switch at the same time as the right part is loading a new image (via jquery?) that is panning from left to right. The logo is just spinning continously.

    Your given example sounds more like a video-based solution to me. The easiest way would be a video with all the desired flashing, split-screen and stuff with final cut, premiere, after effects or any toolset you feel comfortable with and then:

    Option #1
    Place that video as background in a row (use browser height for row height) on a new page. This will ensure the video is always full screen.

    Then you could make a transparent button (you can use the documentation as a starting point) and place it over the video an link that button to you work overview (or any other page you’d like)

    You can make every page your front page in the customizer / front page settings:

    0_1536706061569_customizer-front-page.jpg

    Option #2
    Just use the Intro Feature in the Customizer.
    But this will not trigger the Video again when you click the logo. The intro only will be shown once every time you visit the front page.

    0_1536706214599_customizer-intro.jpg

    But of course a truly code based solution would be more sophisticated. If you know some CSS and know how keyframes work you could dive deep into these topics. It’s not that hard to understand, but may take some time to make things work the way you want.
    Here you find some basic info about the animation properties: CSS3 Animation Properties
    And here are some examples how to go about certain animations: Animations in CSS

    Hope that helps.

    posted in General Discussion read more
  • edgrbnz

    @paul_moxie to make your code valid you need a semicolon after 1px in your css:

    .line {
    stroke-width: 1px;
    }
    

    On the other hand I'm not quite sure if stroke-width will work at all for an hr-element. I’d try something along these lines:

    .my-hr .lay-hr {
    height: 1px;
    }
    

    Then add the class my-hr (call it whatever you fancy) to the hr-elements in the gridder. Unfortunately I can’t really explain why the lay-hr class needs to be there – But it needs to be – It’s something about that CSS-parent-child-thing I never really wrapped my head around.

    Hope that helps!

    posted in General Discussion read more
  • edgrbnz

    Just define the hr sytle in the settings and set up rows in the gridder.
    Page should have no (left & right) frame to make the lines go border to border of the viewport.
    Add Project-Thumnail in the first column of each gridder-row and the text afterwords.

    These steps should bring you pretty close. Rest ist fine-tuning and perhaps a wee bit of custom css – something like overflow-hidden etc. ‹— just guessing, here.

    posted in General Discussion read more
  • edgrbnz

    Thanks!

    I hope this makes sense in any way…

    posted in Feedback read more
  • edgrbnz

    I'm a wee bit unsure what you are trying to achive… but you can activate Video Thumbnails in Lay Options:

    0_1549440901603_Lay_Options_‹Moritz_Welker—_WordPress.jpg

    Then you can add each project to a row in the Gridder. Set it to Use Browser Height for Row Height and you should be good to go with a video instead of a picture for each project.
    Make sure you activated the Fullscreen Slider plugin and activated it for the pages you want it to work its magic (Review Settings in Lay Options / Fullscreen Slider Addon):

    0_1549441803784_Fullscreen_Slider_Addon_‹Moritz_Welker—_WordPress.jpg

    If that doesn’t seem to work you might need to activate the autoplay for videos in
    Customizer / Project Thumbnails / Project Thumbnail Mouseover:

    0_1549441454821_Customize__Moritz_Welker.jpg

    Does this help?
    If «No!» could you make a quick sketch / visualize what you are trying to achive?

    posted in Addons read more
  • edgrbnz

    Just add a link with either #layprevproject or #laynextproject on an element (text, image).
    You could also setup a footer that utilises the tags mentioned above and add that footer to your projects → you can do so in the Lay Options / Footers.

    Hope that helps!

    posted in General Discussion read more
  • edgrbnz

    Afaik that is not really possible right now. You might be able to do it via CSS / Code though. Ideally this last section is the footer and you could fetch the project description via CSS, Shortcode or similar.

    For now I’d suggest to setup one project with the desired last 100vh section. Put anything in there you need (includig the footer contents), duplicate said project and adjust the layout for all the other projects you have in mind.

    But perhaps @mariusjopen has a cleaner, code based solution on offer for the first option?

    posted in General Discussion read more
  • edgrbnz

    I guess so…

    You could try as follows:
    Define some classes with the desired changes in Lay Options / Custom CSS & HTML and then add these classes in Appearance / Menus via span tags.

    0_1549104217620_Window_and_Menus_‹Moritz_Welker—_WordPress.jpg

    Dunno if that works but it should.

    posted in General Discussion read more
  • edgrbnz

    I guess you don’t want the mobile Version to show up at 768px screen width, right?

    You can just tweak the Phone Breakpoint in the Lay Options. If you set it lower than 768px the phone Version will not be rendered on an iPad Mini (or tablet with a similar screen width):
    0_1548854056222_Pasted_Image_30_01_19__14_13.jpg


    One minor UX tip:
    When one dives into any of your projects the user might feel kinda lost. There’s no link/logo/thing in the header area to go back to frontpage (as expected).
    Since you added a Frontpage link in the info section I pressume you may have done that on purpose but it kinda feels weird/lost inside the projects.

    Nonetheless: Clean and cool site!

    posted in Bug Reports read more
  • edgrbnz

    Hi Paul,

    well,… I’ve been using Lay myself and see it as a very flexible theme – I never was a fan of themes really – Custom code always seemed like a better solution.
    Lay Theme fixed that for me because it’s so flexible and not stuck with a website-genre. Of course you may need to write some code if you have something special in mind. But since you are then writing code for a special idea it keeps things lean and doesn’t bloat the backend with features no one ever really needs and makes the frontend super slow because of that.

    I see this forum more like a workgroup. A place to ask a question and describe your idea and get some hints in the right directions. The community here is very friendly and nice. Marius and Armin are doing their very best to answer any question.

    If you had something very particular in mind and weren’t able to accomplish that with lay and the help of this forum the possibility that you should have settled with another theme or service is pretty high. (and there are dozens out there)

    I’m in no way affiliated with laytheme – I’m just a happy customer and one of the guys who uses this forum on a regular basis trying to help, learn and keep the positive vibes here.

    Please don’t just hate! The internet is filled to the brim with bitter people just bashing and hating things. Be nice and tell us what exactly went wrong, what it is you want to achive and I’m sure you will get the help you need and deserve.

    💋

    posted in Feedback read more
  • edgrbnz

    Well,… not sure what you are trying to achive here – Is there a link to have a look at?

    What exactly is not correct?

    • Is the image not aligning as expected in the backend?
    • Is the Frontend not showing the desired result?
    • What exactly are your desired result?

    posted in General Discussion read more
  • edgrbnz

    That’s simply because you got a minor typo in there – Your space is in the wrong place 😉

    Intead of:

    .halffooter: {
    height: 50vh! important;
    }
    

    It should be:

    .halffooter: {
    height: 50vh !important;
    }
    

    Best is to write these things in a code editor with syntax highlighting like Sublime Text. You can define which language you are writing and the editor highlights the syntax that’s wrong / right like above 👆
    When all code is done copy-paste it into Lay Theme as desired.

    Hope that helps!

    posted in Addons read more
  • edgrbnz

    Hahaha!

    Was thinking about this,… buuut… Thought it would be too arty?

    posted in Showcase read more
  • edgrbnz

    Dunno if I get this right,… but project arrows are for navigating between projects (as the name implies). It doens’t make much sense to use these for navigation between pages.
    But you could of course do that with some custom code. I would consider this off-topic and should be discussed in another thread.

    Cheers!

    posted in General Discussion read more
  • edgrbnz

    I would make a character-style in the Text Formats with your desired look and choose it in the customizer afterwards. You could also target the project titles with a custom css and add font-weight: bold; or font-weight: 700;

    Hope that helps.

    Cheers!

    posted in General Discussion read more
  • edgrbnz

    I think the good ol’ !important; solved it!
    Just for reference the code I am using right now:

    /*custom link styles*/
    
    .text a{
        color: #eee;
        transition: ease-in-out 0.12s;
    }
    
    .text a:hover{
        color: #fff;
        text-shadow: 0 0 4px #fff;
        border-bottom: none;
        transition: ease-in-out 0.12s;
    }
    
    .caption a{
        color: #eee;
        transition: ease-in-out 0.12s;
    }
    
    .caption a:hover{
        color: #fff;
        text-shadow: 0 0 4px #fff;
        border-bottom: none;
        transition: ease-in-out 0.12s;
    }
    
    .menu-item span {
        color: #eee;
        transition: ease-in-out 0.12s;
    }
    
    .menu-item span:hover {
        color: #fff;
        text-shadow: 0 0 4px #fff;
        border-bottom: none;
        transition: ease-in-out 0.12s;
    }
    
    .current-menu-item span {
        color: #eee;
        border-bottom: 1.2px solid #eee !important;
        transition: ease-in-out 0.12s;
    }
    
    .current-menu-item span:hover {
        color: #fff;
        text-shadow: 0 0 4px #fff;
        border-bottom: 1.2px solid #fff !important;
        transition: ease-in-out 0.12s;
    }
    

    Thank you @mariusjopen !

    posted in Feedback read more
  • edgrbnz

    Do you have the caching plugin installed and running as recommended in the documentation?

    posted in General Discussion read more
  • edgrbnz

    Hey there @kristellaurits
    that’s pretty straight forward: Create a button-style / class with some custom css. You can find a simple guide how to do so over here.
    Then upload your zip to your Media Library and copy the url of the file:
    0_1536247463247_Media_Library_‹Moritz_Welker—_WordPress.jpg

    Then just add that link to your button.

    posted in General Discussion read more
  • edgrbnz

    Well I guess that that’s the Slider implemented into lay. All the functions are listed here: https://alvarotrigo.com/fullPage/examples/methods.html
    And yes, it seems like there’s a dedicated function for your needs.

    Cheers!

    posted in Addons read more