Builder Breadcrumbs + Workspace Controls

Beta
#1

Okay, after watching several of the new videos, I’ve officially become a fan of dark mode. I also noticed that Kory uses the bottom bar placement of the breadcrumbs & workspace controls.

I love the look of this and the convenience of not needing to side-scroll in the 300px W builder. But, man, the ordering and spacing is so incredibly confusing (perhaps I’m solo on this).

Wouldn’t it make more sense to have the Breadcrumbs first as these are the baseline selectors (section > row > column > element > element child > etc) and then directly after that begin including the Workspace Nav?

Especially since Breadcrumbs dictate Workspace Nav and not necessarily visa versa.

This isn’t novel by any means but…something like this?

#2

Hi @DoncoMarketing!

I was solving this using a Browser addon to inject this CSS:

.cs-layer.has-element-css > .cs-layer-content:before {
    content: '*';
    position: absolute;
    left: 2px;
    top: 9px;
    color:hsla(30,70%,51%, .3)
}

Howerwer, the latest version has a place to enter Custom UI CSS in the Settings, right bellow where you have chosen th e Dark mode. :slight_smile:

1 Like
#3

Call me crazy but this is what I see on the latest non-beta release. Is this a Beta1/2 thing?

UPDATE: Just checked on my test install of Beta 1 and sure enough it’s there. Amazing. This is why I love hearing from other people. Cool features I didn’t even know were hiding behind the scenes.

1 Like
#4

Hi @DoncoMarketing,

That makes sense. I think this might be something that comes down to personal preference. The reason we did breadcrumbs on the right was so the horizontal toolbar matched how it always worked in the Horizontal workspace (since the Pro Header/Footer builders came out). Flipping it might be confusing for users used to that orientation.

That custom CSS will be in the next release. We’re hoping this feature really empowers users to try different workspace adjustments (like what you’re describing). Here’s some CSS you can use to flip the breadcrumbs and controls around:

.cs-navigation-bar {
    flex-direction: row-reverse;
}

.cs-navigation-bar .cs-breadcrumbs {
    border-left: none;
    border-right: var(--d-border) solid var(--c-border);
}
1 Like
#5

Game changer. Thanks!

#6

:thumbsup: