How to change border color (in search bar for example)? Not given in pallette options.

[Matthew Phelps]

I've tried adjusting all available parameters in the Control Panel > Appearance > Pallette > my-custom-pallete but did not find a variable to adjust the color of common borders within the tiddlywiki, particularly the search border in the sidebar. I've also tried inspecting the html (both via chrome inspector and navigating through the raw html looking for keyword border), but no adjustments seem to affect the search border.

Any ideas? Would also be nice to adjust border around the RGB color picker itself, found for example when adjusting Control Panel > Appearance > Pallette.

[Ton Gerner]

Hi Matthew,

On Wednesday, January 1, 2020 at 5:05:05 PM UTC+1, Matthew Phelps wrote:

I've tried adjusting all available parameters in the Control Panel > Appearance > Pallette > my-custom-pallete but did not find a variable to adjust the color of common borders within the tiddlywiki, particularly the search border in the sidebar. I've also tried inspecting the html (both via chrome inspector and navigating through the raw html looking for keyword border), but no adjustments seem to affect the search border.

Any ideas? Would also be nice to adjust border around the RGB color picker itself, found for example when adjusting Control Panel > Appearance > Pallette.

Try something like:

.tc-popup-handle {
     border: 5px blue;
     border-style: dotted;
}

Hope that helps.

Cheers,

Ton

[Matthew Phelps]

Thank you for that comment. It helped me in narrowing down the tiddler associated with the search  bar itself. However, I am not sure how to incorporate the properties of the class (i.e. the border settings). I presume this is due to my lack of understanding CSS, but this is the relevant code under $:/core/ui/SideBarSegments/search

<$edit-text tiddler="$:/temp/search" type="search" tag="input" focus={{$:/config/Search/AutoFocus}} focusPopup=<<qualify "$:/state/popup/search-dropdown">> class="tc-popup-handle"/>

[Thomas Elmiger]

Hi Matthew,

You don’t have to change that tiddler. You can put Ton’s code in a tiddler and tag it as described here. The tag $:/tags/Stylesheet makes it a stylesheet that will be applied to your wiki.

Best,

Thomas

[Matthew Phelps]

Perfect. This is precisely what I needed, and now I know how to edit other styles. Thank you!!

[Eric Shulman]

On Thursday, January 2, 2020 at 5:54:03 AM UTC-8, Thomas Elmiger wrote:

You don’t have to change that tiddler. You can put Ton’s code in a tiddler and tag it as described here. The tag $:/tags/Stylesheet makes it a stylesheet that will be applied to your wiki.

.tc-popup-handle {
     border: 5px blue;
     border-style: dotted;
}

One important note here:

Although ".tc-popup-handle" is a CSS classname, it is used by the TWCore code to control popup *behavior*, not *appearance*.

There are numerous places where tc-popup-handle is used, and I'm fairly certain that you don't want the appearance of every one of those uses to be changed.

Thus, for this particular use-case, it might be better to alter the content in $:/core/ui/SideBarSegments/search to add another classname (e.g., "myStyle") 

<$edit-text tiddler="$:/temp/search" ... class="tc-popup-handle myStyle"/>

Then, in a separate tiddler tagged with $:/tags/Stylesheet, write:

.myStyle { border:5px dotted blue; }

enjoy,

-e

[Matthew Phelps]

You are right - I changed the style sheet and noticed the effects elsewhere within all other tiddlers. The solution you propose is much better practice for me, and shows me how to use custom styles, which is something I've been wondering about. Thanks a bunch!

[Thomas Elmiger]

Hi Matthew and Eric,

It might be tempting to add your own classes to core tiddlers – but in most cases, if you know enough about CSS, it is not necessary and I would advise against it.

Here’s a solution I used some time ago (before I made Simple Search) to tune my search fields:

textarea, input[type="text"], input[type="search"], input[type=""], input:not([type]) { padding-left: 0.2em; padding-bottom: 0.175em; -webkit-appearance: none; -moz-appearance: none; }
.tc-sidebar-lists .tc-search { margin-top: 40px; margin-bottom: 20px; position: relative; z-index: 10; }

.tc-search input[type="search"] { border: 2px inset black; box-sizing: border-box; margin: 0; }
.tc-search input[type="search"]:focus { border: 2px inset red; box-sizing: border-box; margin: 0; }

Note the two last lines, they demonstrate how to address the search field in the sidebar AND in the advanced search at the same time.

The very last line shows how to change the border color when the field has the focus.

The first line in the code adds some spacing between borders and content of most fields in TW and probably makes sure mobile browsers do not apply their own styles. I don’t know if this is still necessary.

The second line adds some whitespace above and below the search field in the sidebar, just a matter of taste I guess.

Have fun,

Thomas

[Chuck R.]

I'm just going to add some classes I found when playing with TW5. These are in a tiddler called "Stylesheet" and Stylesheet has a tag of $:/tags/Stylesheet. Be careful of the case of letters, case matters. Play with colors or borders to see what class does what.

.tc-titlebar {border-top:2px solid black;}






.tc-tiddler-controls {border-top:2px solid red;}




.tc-titlebar { font-size: 14pt; display: inline; font-weight: bold; }




.tc-tiddler-body {margin-bottom: 3pt; border-top: 1px solid lightgray; max-height:75vh; overflow:auto;}


.tc-tiddler-body ul, ol {margin-top: 3pt;}




.tc-tiddler-frame { padding-top: 2px; padding-bottom: 2px; padding-right: 1em padding-left: 3pt; }




.tc-story-river {padding-right: 1pt; padding-left:3pt; }




.tc-sidebar-scrollable {padding-left: 1pt; }

/* Set max height for tiddler */ /* body.tc-body .tc-tiddler-frame { border: 0; margin-bottom: 0; max-height:80vh; } */

/* Below is for date in "Recent" list on sidebar */

.tc-menu-list-item { color: #404040; }