Forum Replies Created
-
Posts
-
My bad. I thought jumping content was pretty well defined once it landed on CSS Tricks. Here’s a link to a related article in case you’re not familiar: https://css-tricks.com/content-jumping-avoid/.
In the context of Septera, the jumping content plays out like this (on slower, but not ridiculously slow, internet connections):
- Load the static landing homepage.
- First paint occurs, hero media not yet visible.
- Viewport lays out featured icon blocks (slide in from right), font icons not yet loaded.
- Hero image begins to load, dimensions are determined and featured blocks pushed off screen.
- Hero image loads based on browser speed, presenting background or color.
To reproduce this behavior just throttle your connection speed to Cable on the above website or the one provided here using dev tools or your favorite client-side proxy.
I found a pretty good article on https://perf.rocks explaining how to combat this type of behavior. It wouldn’t be such a big thing if it weren’t for the font icons not loading yet. But the animation looks cool and will probably reduce perceived latency from the user standpoint.
Either way loving the theme. Best on the market, and you know it!
Website: dev-bali-bebas.pantheonsite.io
Stellar! And there are options to simply reposition existing images, which saves me some time as I crank on a prototype. Many thanks to you and team. Septera is undoubtably the most stylish and powerful WordPress theme I’ve ever had the pleasure of using.
Website: chicagoganghistory.com
Despite the content jumping, one benefit of the delayed rendering of the hero images is the featured icon blocks animations are visible as the user opens the page—reducing perceived latency so long as the iconography is pre-loaded as the initial render occurs.
Website: chicagoganghistory.com
Looks like the Related Posts by Taxonomy plugin may fit the bill. Giving it a shot.
There is a
buttonelement containing a font icon with a magnifying glass used to pull open the site search input. It does not seem to be receiving keyboard focus in WebKit, making it difficult to use via keyboard.Is that expected behavior?
Website: chicagoganghistory.com
Following up here. I was able to get to achieve a stock feel newsletter subscription box using my child theme with a bit of copypasta from a few different files in Septera. Here’re the results shown for the sidebar and footer widget:
My implementation could be further improved by making some of the theme-controlled hardcoded styles dynamic and including an
icon-envelopefont icon (not currently available in the theme).Website: chicagoganghistory.com
Sounds good, @Zed. I recognize there are trade-offs with using SMCSS or BEM and don’t mind a little duplication on my end for custom form styling. Appreciate the info.
Upon further investigation I see now this treatment, while it works well for the landing page, causes multiple buttons to appear when Search is used and one of the Pages appearing in the Icon Block shows up in the search results.
So I’ll need to extend my child theme unless buttons for Icon Blocks is a planned feature in Septera. I could see this sort of thing being configurable from UI.
Thanks for the reply, @Zed. I simply needed to have patience and keep digging. Spectacular theme and I cannot wait to see what you guys continue to tear out atop the framework you’re building. Cheers.
What’s happening here is that all non-parent Pages are being output in sectioning elements (“blocks” in Septera) with the wrapper class
lp-text-<num>which is configurable from the Customize > Landing Page > Text Areas display. Just needed to keep digging!Website: comfusionllc.com
Put another way, all WordPress “Pages” appear on the Septera “Static Front Page” even if not assigned as a WordPress “Front Page” item when Septera “Landing Page” is enabled. Pages marked “Front Page” via WordPress appear with the lighter color (white) and an edit button and the others appear with a secondary color from the palette and without an edit button when user logged in.
Perhaps grouping or moving closer together the “Landing Page” and “Static Front Page” theme customization settings will help users communicate this more clearly. Not sure.
It’s also possible to click through overlays with CSS. So instead of adjusting the overlay (which you may want for its treatment) you should be able to set
pointer-events: noneon the div with the overlay background image. I haven’t tried this yet with Septera, but it’s the common way to handle this sort of thing.Website: habd.as
Simply put, “Pages” appear on the static front page even if not assigned as a “Front Page” item via WordPress when Septera “Landing Page” is enabled. This behavior can be observed in the Septera demo with the “Clean Design” block.
Website: habd.as
@corgrim please disregard my question regarding non-home header media. I discovered the header image settings under Customizing > Site Identity > Header Media. I’d actually seen this before and forgot where it was. It’s easily accessible, however, via deep link from WordPress > Appearance > Header.
Sounds like the user is creating a single landing-page experience and nav menu may rely on a page turn. One solution may be to dismiss the nav menu if a link is activated and that link is a link to a page anchor (i.e.
hrefstarts with a#character).@cgs18 That’s good advice. After disabling each option I can see the boxes and other items have disappeared but the pages without parents remain (with a grey background), as well as the sample page (with a white background). I then went to WP Settings > Reading and disabled the Sample Page front page and that removes the Pages I didn’t expect to see output. Not exactly what I wanted but certainly helps isolate what’s happening. Thank you.
@Corgrim Setting the slider works well to replace or disable the fullscreen hero on the front-page. But what about the half- or partial-height heros on the other pages?
I’ve been struggling with the same thing. In
header.phpthere’s a function calledcryout_headerimage_hook(). If you look for the hook you’ll land incore.phpwhich contains a function calledseptera_header_image()defining the logic you’ll need.When I set Landing Page > Settings > Landing Page =
Enabledfor Septera I end up seeing full content of Pages on the Homepage as well, interleaved with the boxes with a gray background. I then see the same content below the boxes against the white background. So Pages are appearing unexpectedly twice.In my case I have Pages without Parents (which default to Main Page as a result) as I’m using them to build out the Masthead navigation. I will play around with this some more but it was a bit unexpected and probably the biggest struggle I’ve had so far as a first-time user aside from setting Header images.
Nevertheless, wonderful theme and still 5 stars in my book.
PHP 7, WP 4.8, Pantheon
Website: habd.as
