Working on a theme

[DeadDude]

DISCLAIMER:
I don't know if this post is even allowed here, as I use Stylish to do these tweaks.
I hope I am allowed to post here like this, and I hope to eventually include all my workflow process so others can learn.



If you've read any of my posts, you'll realize I have bad feelings towards the default appearance of seamonkey.

So I've been digging for a way to theme it easier.

To be honest, I am unable to locate any of the correct CSS files in my portable version of Seamonkey, so I've had to find a work around.

Stylish allows me to input CSS code to modify SeaMonkey.

As such, I will be using Stylish for all of these tweaks.

First, some points to keep in mind:

If you don't include an option, it generally defaults to whatever the default is.

There are exceptions!!! I'm still working them out, but they are there.

If you make a tweak and don't see the desired effect, include all un-altered options, and you should see what you expect.

I don't program! I almost certainly forgot important things! I'm hoping smarter people will correct me this way.



My first tweak is to change the active tab colors (Bold, White, Underlined text/ Black background)
The inactive tabs are almost left untouched (italics, grey)

picture showing my tweak:


Uploaded with ImageShack.us

Here's my code

Code: Select all

/*Active Tab */

tab[selected="true"] *{
font-weight: bold !important;
font-style: normal !important;
background-color: black !important;
color: white !important;
text-decoration: underline !important;
}


/*Non-Active Tabs */
tab *{
font-weight: normal !important;
font-style: italic !important;
color: gray !important;
}

I would like to add a mouse over effect to the unactive tabs... a simple change from italic to normal would be a great example. Any suggestions?

[DeadDude]

here's an update
I discovered my 3rd party Windows 7 theme was fudging things up, so I turned it off.
Once turned off, my work looked like garbage.

So I started again, completely fresh, with the standard Windows 7 theme applied.

Here is what I've got so far.




Uploaded with ImageShack.us

[DeadDude]

I've also opted to keep my tweaks individualized, so if I don't want to change a single element, I don't select it.

But once I complete this endeavor, I believe I will want to combine all into a single theme.

Anyone have a very basic guide going over how to create a default userstyle.css ?

What goes on top, what goes on bottom... can mozilla load inline 64bit encoded images in the css? or only stylish does?

If mozilla does load encoded images in the css, can I literally cut and paste my 'code' into a blank txt file and save it as userstyle.css? or is there a different file I should edit?

Thanks for all the help!

[DeadDude]

Since absolutely no one is interested in guiding me, guess I'll just use this thread to hold all my observations and notes....


From my research elsewhere, it seems inline 64bit encoded images are supposed to work in your CSS file for Mozilla theming.

I have located a theme that appears to house all the editable graphics, so I am using that theme as my base.

Userstyle.CSS is a file that the end user must create within their Profile directory.

By default, nothing edits the Userstyle.CSS file except the end-user.

From what I can tell, it looks like the Userstyle.CSS file is utilized even if a theme is active. I believe this is the reasoning behind the !important command (an attempt at prioritizing user tweaks?)

I am having a hard time creating my own file structure from scratch.

Yes, I should be able to cut and paste my 'stylish' code into Userstyle.CSS BUT I don't know if the syntax is verbatim for the beginning of the file. I am in the process of dissecting a theme to discern the correct methods.

[Frank Lion]

Userstyle.CSS is a file that the end user must create within their Profile directory.

You create a folder called chrome in the Profile directory. Into that you create and paste two simple text files. One is called userChrome.css, the other userContent.css.

For theme changes, you will need to edit the userChrome.css one, ensuring that you place the following at the head of the text -

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

The naming syntax of the folder/files is important as they will not work if they are not correct.

[DeadDude]

THANK YOU!

userchrome.css

[Frank Lion]

THANK YOU!

userchrome.css

Nope, userChrome.css. ...syntax

[DeadDude]

the capital counts???


AAAAAAAGGGGGHHHH!!!!

THAT EXPLAINS IT ALL!!!!

I've spent the last week or longer over that one mistake!!!!

Took me 3 days to realize I couldn't use \ in CSS, had to use /
Now I need to keep capitals in mind, too?


ARG!!!!! KAAAAAAAAHHHHHNNNN!!!!!

[Frank Lion]

Next, you need to install this - https://addons.mozilla.org/en-US/firefo ... ctor-6622/
...so that you can get the IDs of the stuff you want to change and finally you edit userChrome.css, save the changes and restart Firefox to see the results.

Here's some random, but working, css snippets that demonstrates the correct syntax that you might find in this type of file -

Code: Select all

/ * Do not remove the @namespace line -- it's required for correct functioning */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 

/*Search Engine Grey........*/
#searchbar .autocomplete-textbox:-moz-placeholder,#urlbar .autocomplete-textbox:-moz-placeholder { 
   color: transparent !important;}

.searchbar-engine-image {
filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale") !important;}

.tabs-alltabs-button {visibility: visible !important;}

.popup-internal-box {   max-width: 410px !important;}

[DeadDude]

Thank you so very very much!

I've been trying my best to pick up CSS through examples, but had a heck of a time locating any with comments included

I've started using Notepad++ to write CSS files now, as it has the ability to be aware of what you are typing (not sure how to say this...?)

I told Notepad++ I am writing CSS, and it auto-highlights stuff and does some preliminary checking (did I forget to close the brackets, etc.)


EDIT

I recently started using DOM Inspector, but I still can't figure out what the actual item I want to edit is called...

as an example;

#content > xul:tabbox > xul:hbox:nth-child(2) > xul:tabs > xul:stack > xul:vbox:last-child > xul:hbox > xul:arrowscrollbox > xul:spacer

(Stylish won't use this, even though I see similar declarations in other Styles...)

or

xul:spacer[class="tabs-right"][flex="1"]

(Stylish won't use this, and I have yet to try it in real userChrome.css file)

or

.tabs-right

(thought this was it, but never changed anything no matter how I tried)

or

xul:spacer

(I think this is wrong, duh)

That is the empty space to the right of the tabs on the tab bar. No amount of fiddling has permitted me to modify it in the least bit.

What is the correct way to modify this?

#content .tabs-right ?

#content .tabs-right *{
background= black
}

???

EDIT

This is the actual code I've been trying to get working... want to make the empty tab area to the right black.

#content .tabs-right *{
background: black !important;
}

[DeadDude]

and what is the difference between

*{

and

{

?

tia!

[Frank Lion]

#TabsToolbar