• edgrbnz

    Hey there Lay-Team,

    I currently am struggling a bit with the available options for the Project Thumbnail Mouseover.
    My whole page works with an off-black background (image!) and a lot of the images have the same background color to make them seem to be free floating. The problem with the current options is, that they all change the background color of my image when hovered:

    • Change Brightness: makes the whole thumbnail darker which in my case reveals a border I don’t want to be shown.
    • Show Background Color: shows a background color, which (depending on the browser) also reveals a border for a short time depending on the color settings of the used monitor.

    0_1540052214053_6b0da38d-ba7d-449b-8024-a0ac0074e772-image.png

    I'd love to have a third option like:

    • Change Opacity: which simply controls and animates the opacity for the Project Thumbnails.

    Or a way to set the Background Color in Show Background Color to transparent. I hope that makes sense!

    Cheers & Thank you!

    posted in Addons read more
  • edgrbnz

    Prepare your project thumbnails either as transparent PNGs in a square sized document. Or use a background coloured like your page-background.

    Pretty much the same procedure you would use to prepare non-square Instagram posts.

    posted in General Discussion read more
  • edgrbnz

    Hey there,

    just been wondering what the benefits of .woff2 are?
    I know that it’s a more compressed and compact format than the ol’ woff. Are there any other benefits?

    Any technical details (browser support etc.) would be great!

    posted in Feedback 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

    Ok!

    So now I get what you want to achieve. The answer might unfortunatelly be:

    «No, without any code-magic you won’t be able to realize it that smooth by now»

    You will always have a page reload with (the above mentioned options) since the content gets rendered on different pages. But you could have a look into isotope. As far as I understand this is the way you want it to behave.
    I’m not sure if the code-examples there will work with lay since I don’t know which derivate of masonry is currently implemented in lay. But filters are not implemented into lay (yet).

    I'm sure that @arminunruh is able to get you on the right track here.

    posted in General Discussion read more
  • edgrbnz

    @mariusjopen Text on top of a carousel would be a great feature!

    But how about going one step further and also allow the use of carousels as backgrounds?

    posted in Addons read more
  • edgrbnz

    First thing you need to do is create a page for each category in the categories section of lay and a page that shows all categories.

    Then afaik there are two options to go about this:

    1. A text-element that resembles the menu you want to use with every category name linked to the respective category.
      Then follow the steps that Marius described above and add that text element to all the categories and the all page. You might have to add some text decoration via CSS to fake active states.
      Good thing about this is you can just not add that element to pages / projects you want it to be hidden.

    2. Create a menu with all the categories + the all page and position it as desired.
      You might have to hide that menu (via CSS) in locations you don’t want it to be shown, but (contrary to option 1) the active and hover states are easily styleable through the customizer.

    As soon as you added a thumbnail grid to a (category-) page it will get updated when you add a project associated with that category. I personally wouldn’t use the element grid for that.

    Hope that helps!

    posted in General Discussion read more
  • edgrbnz

    What exactly isn’t working for you?
    Is it not translating into the frontend as expected?
    if it’s the latter, do you have a link to inspected the faulty behaviour?
    Or are you experiencing problems in the backend?
    Have you tried if it works in a different more advanced browser like chrome?

    posted in General Discussion read more
  • edgrbnz

    A video could be a solution for you. Not perfect in terms of maintainability but a similar kind of splashpage recently was discussed in this topic.

    posted in Addons 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

    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

    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

    It’s an option in the customizer.
    There’s a radio button selection how you want the hover states to behave on mobile:

    0_1536166735226_Customize__Moritz_Welker.jpg

    posted in General Discussion read more
  • edgrbnz

    Still need help with this.
    Is there a class to target the active hovered item?

    Any help is very much appreciated.

    posted in Feedback read more
  • edgrbnz

    If I get this right, you just need to make a footer page with two columns.
    One on the left:

    <a class="layprevproject" href="#layprevproject">← Previous</a>
    

    … and right:

    <a class="laynextproject" href="#laynextproject">Next →</a>
    

    … then assign that footer to all projects and style as desired.
    0_1536100851785_afcba7e4-2331-4c88-a221-bdb5b36c9e59-image.png

    posted in Feedback read more
  • edgrbnz

    Deletion isn’t the best way to handle this issue. If you did delete it, you should still be able to just reupload that file again from your laytheme files and everthing should work just fine again.

    The problem is not the file per se, it’s the url embedded in there. The vonino website seems to be unsafe according to googles safe browsing diagnostics.
    Which doesn’t really mean that this is a huge problem. It’s just not that safe and vonino needs to fix its site.

    You could delete the url http://www.vonino.eu/tablets from the Mobile_Detect.php. But you shouldn’t remove the whole file as it has its function for laytheme (presumably detecting mobile devices and applying respective styles).

    Nonetheless this needs to be addressed in a way.

    posted in Bug Reports read more
  • edgrbnz

    Oh,…
    I wasn’t expecting to find another gridder inside the categories… that problem is solved now! Thank you for the hint @mariusjopen!!

    Now I'm just fiddeling with the css to get the underline / border-bottom to stay when a currently active menu point gets hovered. Just cannot get it to work.
    Let’s say the currently active page is work or any project in that category. So work will be underlined (because it’s active). As soon as it gets hovered the underline disappears although I want it to stay.

    I hope that makes any sense—but I think you can see what I'm trying to describe with the link and pass I sent you.
    This is the code I tryed to address this behaviour with:

    .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:hover {
        color: #fff;
        text-shadow: 0 0 4px #fff;
        transition: ease-in-out 0.12s;
    }
    

    I think I’m just targeting the wrong class with the .current-menu-item. Any help is very much appreciated.

    posted in Feedback read more
  • edgrbnz

    Thanks Marius!

    Will try the CSS later on.

    Confused about this one:
    How can I make a category a page and use a thumbnail grid or similar there?

    posted in Feedback read more