Hi, all. I find the color of the portals to be too bright and would like to customize it. Any CSS wizard that can help me? Would be very grateful.
(Screenshots are always helpful - for both people trying to answer and people just skimming questions to see if that is what they are looking for. )
Your question is a bit unclear as to what color of the portal exactly you find too bright. Here is the CSS to configure the portal borders. Replace red
in the first lines with whatever color you want:
:root {
--search-portal-border-color: red; /* default: #add8e6, in dark mode: #f398f3 */
--portal-border-color: red; /* default: #add8e6 */
}
#show-embedded-search-button {
border: 2px solid var(--search-portal-border-color);
}
#hierarchy-editor .portal-rem .portal-rem-top--embedded-search-top {
border-top: 4px solid var(--search-portal-border-color);
}
#hierarchy-editor .search-portal-tree-node {
border-left: 2px solid var(--search-portal-border-color);
border-right: 2px solid var(--search-portal-border-color);
}
/* Search Portals get different color in dark mode */
.dark-mode #show-embedded-search-button, .dark-mode .indented-hierarchy-editor-rem--after-portal-embedded-search, .dark-mode .indented-hierarchy-editor-rem--portal-embedded-search, .dark-mode .isTypeChildHierarchyEditorRem, .dark-mode .portal-rem--embedded-search, .dark-mode .portal-rem-top--embedded-search-top, .dark-mode .rem-in-embedded-search {
border-color: var(--search-portal-border-color)!important;
}
#hierarchy-editor .portal-rem .portal-rem-top {
border-top: 4px solid var(--portal-border-color);
}
#hierarchy-editor .portal-tree-node {
border-left: 2px solid var(--portal-border-color);
border-right: 2px solid var(--portal-border-color);
}
#hierarchy-editor .portal-rem {
border-left: 2px solid var(--portal-border-color);
border-right: 2px solid var(--portal-border-color);
}
#hierarchy-editor .hierarchy-editor__after-portal {
border-top: 2px solid var(--portal-border-color);
}
/* There is a class naming the portals "blue" explicitly. This implies the more portal colors for the future. */
/*
#hierarchy-editor .portal-rem--blue {
border-color: var(--portal-border-color);
}
#hierarchy-editor .hierarchy-editor__after-portal--blue {
border-color: var(--portal-border-color);
}
*/
Hey, Frank!
Thanks as always. I tried but failed with your code.
This blue/cyan color is the one I want lighter. Is a simple portal made by ctrl + click on a reference:
That is the only kind I regularly use, since there is still not sign of queries (actually, I believe they took them out from the feature description, right? I used to say “Queries (soon)” or something).
Thanks again!
Oh, oh, oh, I see! I copied only part of the code, but now I made it work with the hole code. Sorry about that. Thanks, mate, worked perfectly!
How do your portals look right now?
Oh, you see, nothing fancy. I just like my colors to be more in the pastel side, hahaha. Here is how it looks, with my color scheme:
I love it , certainly looks more pleasant and pleasing!
Thanks, mate. A little tweaking goes a long way! For now I’m pretty happy