Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Centering text in Purple bar in default template.

I am trying to center the text in the title bar of the default template like i see everyone do but my title text is always pushed to the left. &{template:default} {{name=Rage}} {{Rage=2 Damage}} Sorry about posting the title bar twice
1710824677
GiGs
Pro
Sheet Author
API Scripter
You can't centre it*. The left it is left-aligned is set in the character sheet HTML and cant be altered unless you are modifying the character sheet's code. * Caveat: if you use a browser extension to allow you to modify CSS code like Stylish you can modify this, but only on your own computer - any changes won't affect other players in the game.
1710830952

Edited 1710831146
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Hi Patrick! You can force it using this Trick from the  Tips n Tricks  thread: &{template:default} {{name=[Rage](#" style="margin: auto; width:55%; float: right; color:#fff; cursor:default; text-decoration:none !important)}} {{Rage=2 Damage}} Change  [Rage]  to be whatever header text you like. Because of the way that the css is created by the default Roll template, different headers might require tweaking that  width:55%  value up or down to get it to center properly. f you are familiar with CSS, you can add more styling, such as changing the font. This will change the view for everybody, and doesn't require an extension. Also, since the purple in the header is the same in dark or light mode, it doesn't matter which mode your players choose either. The link above explains exactly what is going on here, but basically, you are fooling Roll20 into thinking you are creating a button, and then injecting some CSS into the button style. margin:auto; width:55%; float:right ; --forces the centering color:#fff; cursor:default; text-decoration:none   --Tells it to not behave like a link—don't change the color or the cursor !important  --makes sure it overrides any styling higher up the cascade.