Feb 12, 2023
Back to all Elements
Using a CSS inject Chrome extension, to add some CSS and reposition, reorder and organize the Workspaces dropdown.
The only way (I could think of) to target a specific Workspaces is by the icon, which we will use as a unique identifier. Make sure each of the workspaces you want to order, has an icon and not the default Webflow one.
Now we can use that icon's URL to target the workspace. Copy the icon's url (right click the icon and 'Open image in a new tab') and place it in the CSS code instead of where it says "THE_URL_OF_THE_ICON_OF_THE_WORKSPACE_YOU_WANT_TO_BE_1st". Do that for each workspace you want to order.
Enjoy :D
@media (min-width: 1860px) {
.page-header ng-include.ng-scope {
position: absolute;
left: 16px;
}
.workspace-switcher.ng-scope ul.dropdown-menu.ng-scope {
display: flex !important;
flex-direction: column;
opacity: 1 !important;
overflow-y: scroll;
max-height: 85vh;
}
.option.ng-scope {
order: 10;
position: relative;
}
/* Selected Workspace will be placed at top of the list */
.option.ng-scope.selected {
order: 1;
border-bottom: none !important;
margin-bottom: 16px;
}
.option.ng-scope.selected:after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
right: 0;
width: 100%;
height: 2px;
background: #4253ff;
}
.option.ng-scope:has(img[src='THE_URL_OF_THE_ICON_OF_THE_WORKSPACE_YOU_WANT_TO_BE_1st']) {
order: 2;
}
.option.ng-scope:has(img[src='THE_URL_OF_THE_ICON_OF_THE_WORKSPACE_YOU_WANT_TO_BE_2nd']) {
order: 3;
}
.option.ng-scope:has(img[src='THE_URL_OF_THE_ICON_OF_THE_WORKSPACE_YOU_WANT_TO_BE_3rd']) {
order: 4;
}
.option.ng-scope:has(img[src='THE_URL_OF_THE_ICON_OF_THE_WORKSPACE_YOU_WANT_TO_BE_4th']) {
order: 5;
}
.option.ng-scope:has(img[src='THE_URL_OF_THE_ICON_OF_THE_WORKSPACE_YOU_WANT_TO_BE_5th']) {
order: 6;
}
.option.ng-scope:has(img[src='THE_URL_OF_THE_ICON_OF_THE_WORKSPACE_YOU_WANT_TO_BE_6th']) {
order: 7;
}
.option.ng-scope:has(img[src='THE_URL_OF_THE_ICON_OF_THE_WORKSPACE_YOU_WANT_TO_BE_7th']) {
order: 8;
}
.option.ng-scope:has(img[src='THE_URL_OF_THE_ICON_OF_THE_WORKSPACE_YOU_WANT_TO_BE_8th']) {
order: 9;
border-bottom: none !important;
margin-bottom: 16px;
}
.option.ng-scope:has(img[src=""]):after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
right: 0;
width: 100%;
height: 2px;
background: #4253ff;
}
}
A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.
.png)
Using a little bit of jQuery to adjust the success message height
.png)
Automatically insert the current year to any element with the class of 'year'
).png)
