Title bar alignment on Win 7

[Turtleman]

Experiencing the same title bar problem here! Saw a post about changing the alignment, but found going back to 24.3.2 a lot simpler! I hope this will be fixed in a future version.

[Turtleman]

I probably need to clarify my previous post. Alignment of the title may be a matter of personal preference, but NOT when using the "Personal Titlebar" extension. Among other things, that extension reduces otherwise wasted vertical space by combining the Pale Moon pull-down with the usual File to Help menu. However, if the page's title is aligned left, it overlaps the menu, thus making both unreadable. Aligning the title back to center would fix it!

Here are three examples using the previous 24.3.2 version, the same page after updating to 24.4.0, and again when displaying the Menu Bar. Unfortunately, adding the Menu Bar essentially wastes the upper line.

[Moonchild]

Please read the FAQ about this. it has instructions how to align it exactly the way you want or how to hide it.
Any normal text manipulation CSS keywords will work, so you are free to style it and place it however you want.

-->> Go to Title manipulation FAQ topic <<--

[Turtleman]

Thanks Moonchild, but I tried following the FAQ alignment instructions without success. I don't have a clue what I might be doing wrong. And yes, I am saving the file after adding the center alignment code. Here's a snapshot of the modification:

[Moonchild]

Make sure to completely exit the browser and restart it. userChrome.css is only read on start, it's not changed "on the fly".

[Turtleman]

Thanks, but I did restart. I just added a snapshot of the modified code to my previous post if that helps.

[Moonchild]

Thanks, but I did restart. I just added a snapshot of the modified code to my previous post if that helps.

Code looks fine. I see it's based on the example file? Are you saving this as userChrome.css? userChrome-example.css will not work.

[Turtleman]

Whoops! I've been saving it under "userChrome-example.css" I'll try the other and get back with the results. Thanks!!!

[Turtleman]

IT WORKS! I'm confused (as usual), however. "userChrome-example.cs" is what opened after following the instructions in the FAQ. Then I simply saved the modified file in the the same folder. This time I "saved as" and selected "userChrome.css" I guess like everything else, it's easy when you know how! Thanks again for all your help.

[Turtleman]

PS: I hope saving the "modified" userChrome-example.css code didn't mess up anything in the original userChrome.css folder. Yeah, I know, I should have looked first!

[Moonchild]

IT WORKS! I'm confused (as usual), however. "userChrome-example.cs" is what opened after following the instructions in the FAQ. Then I simply saved the modified file in the the same folder. This time I "saved as" and selected "userChrome.css" I guess like everything else, it's easy when you know how! Thanks again for all your help.

I guess you missed this sentence in the FAQ:

By default, these folders may have example userChrome and userContent files in them. You can edit the example css file, but make sure that you save it with the name userChrome.css and not with any other name, or it won't work.

The example files are just examples. Their content won't matter. They are optional, as well

[Turtleman]

I guess you missed this sentence in the FAQ: ...

Yep, I sure missed it. I guess I was too anxious to make the changes and forgot that when all else fails "read the instructions!" Gee, I really hate when I mess up like that.

[New Tobin Paradigm]

If you have ever at times gotten into some big bunch of userChrome.css hacks. You can use the @import to actually split out your specific userChrome.css hacks. I'd recommend relative paths to the main userChrome file which allows portability.

Example:

userChrome.css

Code: Select all

@import url('userChrome-tweaks/appmenu-tweaks.css');
@import url('userChrome-tweaks/throbber.css');

userChrome-tweaks/appmenu-tweaks.css

Code: Select all

#appmenu-button {
            padding-left: 10px !important;
            padding-right: 10px !important;
            margin-left: 5px !important;
            margin-right: 10px !important;
            background-image: -moz-linear-gradient(top,  #b4c4ce,  #000333) !important;
    }
    #appmenu-button .button-box .box-inherit:before {
	content: "Binary Outcast";
	text-shadow: 0px 2px 5px black, 0px 1px 2px #000  !important;
    }
    #appmenu-button .button-box .box-inherit .button-text {
           /* display: none; */
    }

#appmenu-popup {
  opacity: .93 !important;
}

userChrome-tweaks/throbber.css

Code: Select all

#navigator-throbber {
  list-style-image: url("../throbbers/ns8/ns8-single.gif") !important;
  margin: 5px 5px 5px 5px !important
}

#navigator-throbber[busy="true"] {
  list-style-image: url("../throbbers/ns8/ns8-anim.gif") !important;
  opacity: 1.0 !important;
}

You could do the same thing for anything. It also allows better testing and commenting out of tweaks that don't really work due to a change in userChrome.css