Adjusting Password Prompt CSS

,
#1

Is there a way to adjust the style of the password prompt that doesn’t require me to modify $:/boot/boot.css? Other than generally modifying such a high level tiddler should be avoided, is there any major concern in modifying it, or am I being a bit overly cautious?

In the past I have done so, but I’m worried that in the event there is an update to boot.css, I could potentially cause issues by modifying it.

So far, the only changes I’ve ever made were:

.tc-password-wrapper {
    font-family: sans-serif;
	z-index: 20000;
	position: fixed;
	text-align: center;
	width: 100%;
	height: 100%;
	top: -1rem;
	left: -1rem;
	margin-left: 0; /* - width/2 - paddingHorz/2 - border */
	padding: 1rem; <!-- 16px -->
	border-radius: 8px;
}

.tc-password-wrapper {
	color: #FFF;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.0);
	background-color: #000;
	border: 8px solid #FFF;
}

.tc-password-wrapper form {
	padding-top: 16px;
	text-align: center;
}

To TL:DR the snippet above, it centers the password prompt, removed the green bg, and adds an all black background.

#2

Just some thoughts

I think the problem may be you need this css at boot so perhaps you could use one of the raw tags, but I expect boot css will win.

#3

I think you’re right, but I’m going to give it a try none the less.

#4

There are brief instructions on the dev wiki that cover both using JS to modify the prompt itself, and CSS to modify the styling:

https://tiddlywiki.com/dev/#How%20to%20customise%20the%20password%20prompt

1 Like