This is doing my head in, at least when I'm not trying to do this via CSS, which I don't really want to do - I'm certain it's possible with beans and uikit. The base idea is a full screen initial custom view, providing a visitor with what Google calls a "choice" attached to a "moment.
I'm not certain at this point whether I'm taking the better approach, there's two options:
- Tear down and rebuild beans_header for this, keeping (most of) it but rearranging its contents.
- Insert a custom div before beans_site markup, using this to contain elements.
The advantage of the second option is relative freedom, the disadvantage is losing WPHeader functionality. The advantage of the first option is that it keeps WPHeader intact, but the disadvantage is that it can be very tricky to add markup inside the header.
Either way, regardless of approach I'm facing a challenge. Fullscreen initial view is remarkably simple, using beans functionality to apply the uk-viewport attribute to the containing div.
Getting things aligned is a different matter. There is going to be a div containing things which needs to be aligned both vertically and horizontally. That's where site_branding, site_title_tag, an H1, page excerpt and a set of buttons will be placed.
Getting a panel to align vertically, fine, but this isn't a panel kind of thing. It makes much more sense to make use of a responsive grid. But keeping seperate horizontal alignment for a complex grid in line with vertical alignment of the whole? It should be possible.
But how - without using custom css.
Hey J.C.
Have you looked at the UIkit Flex component? What I would advise when you have such questions is to post the design of what you want to achieve, it is much simpler to visualize and give you an accurate answer of what approach to take 😉
Thanks,
I've drawn up a quick sketch. I can work markup for breakpoints, visibility et alii, but somehow even when using a flex as container it's not going as intended :/ To avoid schema related issues, I think I will have to rework the beans_header, but it's resisting.
Hey J.C.
I think that an acceptable approach if a lot of changes are required on the core header is to replace beans_header_partial_template action with your own callback function in which would have your own HTML and call various Beans fragments in it. From there, all the UI related stuff is UIkit specific.
Cheers,
Do you mean opening the markup for that partial? Or adding a custom partial and making use of that instead? I've seen some things on the first option in the documentation, but completely replacing the file itself?
Quick question in between - I don't suppose you could switch development mode on for the www.getbeans.io frontpage? 🙂
No, I mean completely replacing your header with your own HTML and call the fragment functions you need straight in your custom HTML (see this reply which is also related). So the starting point would be as follow:
beans_modify_action_callback( 'beans_header_partial_template', 'example_header' );
function example_header() {
?>
<header>
<!-- Your custom header in which you can call fragment function such as beans_site_title_tag(). -->
</header>
<?php
}Note that this requires quite a bit of rebuilding but if you really want to completely modify the default header HTML, it is one approach you could take. As I explained in this reply, it is all about finding the balance 🙂
Regarding turning dev mode on the official Beans website, unfortunately we stricly can't do that and won't open our staging website to public (even for your project websites, you should never do anything on your live website but rather on a staging development version).
Have fun,