More Titlebar Questions

[Cedar]

Forum URL: personainverse.proboards.com/

I'm back with more issues with centring the text in title bars on various areas throughout the forum.  I've got most of it down, but the title when editing/creating/replying to a thread (basically anything involving editors), the title when viewing a member's profile, the "Personal Messages" title when viewing your messages, the title of the messages themselves when being viewed, and the title of the participated threads popup are all still off to the left.

In addition, I was wondering if it would be possible to use a different background image for the titlebar in the participated threads popup, since the current one is too long.

[Brian]

Hi, Cedar.

You don't have to do that. It's off-center because the Create Thread/Message and Reply buttons are floating to the right within the element. Centering the text of an element does so up to 100% of the available width inside of the element, so since the floating button is taking up part of that width the text is off-center.

Simple solution if you want to retain the original buttons: Add this to the bottom of Themes > Advanced Styles & CSS > Style Sheet.

.container > .title-bar > .controls { height: 0px; overflow: visible; }

[Cedar]

I tried it, but it didn't work. The titles I listed were never centred to begin with.

[Brian]

If you want to center every title bar on the forum the sure way to do it is to add this to the bottom of the style sheet.

.container > .title-bar { text-align: center; }

[Cedar]

Worked perfectly. Thank you!

[Brian]

No problem, Cedar.

In regards to the Participated dialog, it can be resized by the user so even if you specify a different title bar image for it the problem will still be there.

What you'll want to do is change the title bar for every dialog since most of them are resizable. To do this in the most efficient and dependable way possible you'll want to use left, center, and right background images on their title bars, then add a white background to their text.

I worked on this yesterday while waiting for your responses. It goes at the bottom of Themes > Advanced Styles & CSS > Style Sheet.

.ui-dialog .ui-dialog-titlebar {
    text-align: center;
    background-image: url(LEFT IMAGE URL), url(CENTER IMAGE URL), url(RIGHT IMAGE URL);
    background-position: left center, center center, right center;
    background-repeat: no-repeat, repeat-x, no-repeat;
    overflow: hidden;
}
.ui-dialog .ui-dialog-titlebar .ui-dialog-title {
    float: none;
    display: table;
    margin: 0 auto;
    min-width: 402px;
    line-height: 38px;
    background-color: #fff;
}

And here's the left, center, and right images. You can reupload them, then add their links in the appropriate section of that code.

Left:


Center:


Right:

[Cedar]

It worked like a charm! Thank you for the help!