[Ext] Fission 0.8.9 [Sep 25]
-
- Posts: 12
- Joined: June 15th, 2005, 8:10 am
zeniko wrote:Although this looks really cool, I won't include any images or different styles into Fission. The problem is that what looks great with one theme might not fit with another theme at all. I simply try to ship Fission with sensible defaults (decent and easy to change).
Now, what you want to achieve can already be done through userChrome.css alone. Just copy the three images (here called progress-back, progress-full and progress-empty) into the same folder as userChrome.css and add the following lines to userChrome.css:Code: Select all
#urlbar[fission="fusion"] > .autocomplete-textbox-container,
#urlbar[fission="fusion"] #page-proxy-deck + hbox {
background: url(progress-back.gif) #999999 !important;
}
#urlbar[fission="fusion"] #page-proxy-deck + hbox {
height: 20px !important;
padding: 2px !important;
}
#urlbar[fission="fusion"] > #statusbar-icon {
margin: 0px 22px !important;
visibility: visible !important;
background: url(progress-empty.gif) #D0D0D0 !important;
}
#urlbar[fission="fusion"] > #statusbar-icon > .progress-bar {
background: url(progress-full.gif) #00FF00 !important;
}
Then you can even modify these styles somewhat more to make it fit best with your theme... or you could help the theming people to include this into their themes, so that installing Fission already gives a better experience.
EDIT: Updated the styling for a better result (requires Fission 0.6).
I made myself a nice set of images to use and used this code and it works great, but is there a way to make the progress-full.gif go away after loading is done like it does normally.
nshah786 you need to edit the userChrome.css which can be found in your profile-directory/chrome/ folder. You can do that manually or use one of a couple extensions out there...ChromEdit is one, Stylish is the other. The code needed is on the first page HERE
- XerBlade
- Posts: 865
- Joined: October 4th, 2005, 10:45 pm
- Location: Nashville, TN, US
-
- Posts: 12
- Joined: June 15th, 2005, 8:10 am
Yeah.
Steps to take...
1. Install ChromEdit
2. Restart FF
3. Goto Tools > Edit User FIles
4. for A different text color while loading add this code...
For a different background color add this code...
5. Click Save.
6. Restart firefox.
Done
Well I got it to make the full go away after reloading by commenting out
And I also removed
Because with the skin I am using I don't need the end peices and the padding just stops it from going all the way.
Now the only thing bugging me is when your on an encrypted page you don't get the yellow bar and the lock comes up unskinned and ugly...
Anybody know how to make it call another different picture for the lock and the background if it is encrypted?
Steps to take...
1. Install ChromEdit
2. Restart FF
3. Goto Tools > Edit User FIles
4. for A different text color while loading add this code...
Code: Select all
/* Different text color while the progress bar is shown */
#urlbar[fission="fusion"][progress]:not([progress="0"]):not([progress="100"]) {
color: #000000 !important;
}
For a different background color add this code...
Code: Select all
/* Different background color and some margin (Fusion-style only) */
#urlbar[fission="fusion"] > #statusbar-icon > .progress-bar {
background-color: #B6BDD2 !important;
margin: 2px !important;
}
5. Click Save.
6. Restart firefox.
Done
Well I got it to make the full go away after reloading by commenting out
Code: Select all
#urlbar[fission="fusion"] > #statusbar-icon {
margin: 0px 22px !important;
visibility: visible !important;
background: url(empty2.png) #D0D0D0 !important;
}
And I also removed
Code: Select all
#urlbar[fission="fusion"] #page-proxy-deck + hbox {
height: 20px !important;
padding: 2px !important;
}
Because with the skin I am using I don't need the end peices and the padding just stops it from going all the way.
Now the only thing bugging me is when your on an encrypted page you don't get the yellow bar and the lock comes up unskinned and ugly...
Anybody know how to make it call another different picture for the lock and the background if it is encrypted?
-
- Posts: 12
- Joined: June 15th, 2005, 8:10 am
Frogot about that ;p
I use the Nightly Tester Tools extension to get around that.
Once installed it will add a little check box to the window where it ask if you want to install. It will override the version and let you install.
Man, talk about a crazy ride I am taking. Started this whole thing editing a image for another forum. Then I was reading the fission topic to figure out how to change the color, found I could skin it. Go back to photoshop to make a few skins. I'm at the rounded address bar topic now since somebody in it was talking about the lock...More than 5 hours have passed since the start of that story ;p
I use the Nightly Tester Tools extension to get around that.
Once installed it will add a little check box to the window where it ask if you want to install. It will override the version and let you install.
Man, talk about a crazy ride I am taking. Started this whole thing editing a image for another forum. Then I was reading the fission topic to figure out how to change the color, found I could skin it. Go back to photoshop to make a few skins. I'm at the rounded address bar topic now since somebody in it was talking about the lock...More than 5 hours have passed since the start of that story ;p
-
- Posts: 12
- Joined: June 15th, 2005, 8:10 am
Thats some stuff for the skining part of this extension...
Heres some what I got so far...
Loading
Normal
I am trying to find out how I can make it so another image will show up if the page in secure or has the broken lock...
You know making the whole bar go yellow and a lock appears or also when the bar goes red and a brocken lock appears...
I know very very little about using CSS and even less about firefox and making things work, I just use trial and error plus searching like crazy on forums...
Takes forever...
Heres some what I got so far...
Loading
Normal
I am trying to find out how I can make it so another image will show up if the page in secure or has the broken lock...
You know making the whole bar go yellow and a lock appears or also when the bar goes red and a brocken lock appears...
I know very very little about using CSS and even less about firefox and making things work, I just use trial and error plus searching like crazy on forums...
Takes forever...
Last edited by rommels on January 31st, 2006, 12:00 am, edited 1 time in total.
- XerBlade
- Posts: 865
- Joined: October 4th, 2005, 10:45 pm
- Location: Nashville, TN, US
rommels: You realize, of course, that, well, if I didn't have this particular code:
... in Stylish (though it also works in userContent.css), the page would be really stretched out for me, and I have a fairly large resolution.
That is, in fact, the only reason I didn't just quote your post and instead named you from a fresh post.
Come on, link to your images if they're really wide like that. Don't stick them inside the posts unless they're small.
Code: Select all
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(forums.mozillazine.org) {
.postbody, .postsig {
overflow: auto !important;
}
}
... in Stylish (though it also works in userContent.css), the page would be really stretched out for me, and I have a fairly large resolution.
That is, in fact, the only reason I didn't just quote your post and instead named you from a fresh post.
Come on, link to your images if they're really wide like that. Don't stick them inside the posts unless they're small.
-
- Posts: 17
- Joined: January 31st, 2006, 9:30 am
Fission broke my theme...
I created the Eternal Aqua Safire mod and just updated Fission to the latest version. Now my animated gif that was in the progressbar no longer shows. How do I get it to work again before I get complaints?
Here is the code I'm currently using in the progressmeter.css (modified slightly off of Safire's):
--------------------------------------------
/* Custom Progresbars for Fission 0.3+ and TabMix Plus */
#statusbar-icon > .progress-bar {
background:url("chrome://browser/skin/chunk.gif");
-moz-opacity: 0.6;
background-color: none !important;
margin-top: 4px !important;
margin-bottom: 3px !important;
margin-left: -5px !important;
}
#urlbar[level="high"] #statusbar-icon > .progress-bar,
#urlbar[level="low"] #statusbar-icon > .progress-bar,
#urlbar[level="broken"] #statusbar-icon > .progress-bar {
margin-bottom: 5px !important;
}
#urlbar progressmeter,
.tab-text-container progressmeter {
background-image: none !important;
}
tab progressmeter.tab-progress {
max-height: 12px !important;
}
/* progressmeter[mode="undetermined"] {
-moz-binding:url("chrome://global/content/bindings/progressmeter.xml#progressmeter-undetermined");
} */
.progress-bar
{
background:url("chrome://browser/skin/chunk.gif") repeat-x left center;
}
.progress-remainder{
}
---------------------------------------
Thanks.
Here is the code I'm currently using in the progressmeter.css (modified slightly off of Safire's):
--------------------------------------------
/* Custom Progresbars for Fission 0.3+ and TabMix Plus */
#statusbar-icon > .progress-bar {
background:url("chrome://browser/skin/chunk.gif");
-moz-opacity: 0.6;
background-color: none !important;
margin-top: 4px !important;
margin-bottom: 3px !important;
margin-left: -5px !important;
}
#urlbar[level="high"] #statusbar-icon > .progress-bar,
#urlbar[level="low"] #statusbar-icon > .progress-bar,
#urlbar[level="broken"] #statusbar-icon > .progress-bar {
margin-bottom: 5px !important;
}
#urlbar progressmeter,
.tab-text-container progressmeter {
background-image: none !important;
}
tab progressmeter.tab-progress {
max-height: 12px !important;
}
/* progressmeter[mode="undetermined"] {
-moz-binding:url("chrome://global/content/bindings/progressmeter.xml#progressmeter-undetermined");
} */
.progress-bar
{
background:url("chrome://browser/skin/chunk.gif") repeat-x left center;
}
.progress-remainder{
}
---------------------------------------
Thanks.