How do I change color of portal or search box?

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.

did someone say CSS Wizard ? (@hannesfrank)

I was too shy to tag him once again, hahahaha :face_with_hand_over_mouth:. Thanks, @Karthikk!

1 Like

(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. :wink:)

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);
}
*/
1 Like

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!

I don’t know. It should look like this when pasted into Custom CSS:

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!

1 Like

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:

2 Likes

I love it :heart_eyes:, certainly looks more pleasant and pleasing!

2 Likes

Thanks, mate. A little tweaking goes a long way! For now I’m pretty happy :slight_smile:

2 Likes

Does this code work with the new release? I would like to see the side bar of the portal brighter and more visible :grin:

It doesn’t, really. It only adds the upper line, although that works reasonable for me for now. Not very nice but not bad also:

1 Like
/* Old code */
.portal-tree-node-box{
	border-left: 6px solid #B3C3FF!important;
	background-color: #ddffff;
}

I make the border left thicker and add a background-color for Portal…
You can remove background if you want…

Update Oct 8 2021 : I update this snippet for more customization…

/* New Code */

/* background color of portal */
.portal-tree-node-box {
	/*background-color: #ddffff;*/
}

/* The vertical line of portal */
.portal-tree-node-box:before {
	width: 5px!important;
    /*background-color: #ddffff!important;*/
}

/* When you put your cursor in portal */
.portal-tree-node-box--focused {
	border-left: 5px solid #b3c3ff!important;
	/*background-color: #B8DFFC;*/
}

/* When you select Portal for Deleting and Swapping */
.portal-tree-node-box--selected {
	border-left: 6px solid orange!important;
	/*background-color: #bfff00!important;*/
}
3 Likes

Thank you! I like the background color :+1:

1 Like