Share your custom Firefox/Minefield 4 stylish scripts

By Steven P.
in Web Browser Discussion & Support

 Share

Recommended Posts

Veteran

Darrian

Posted
Posted

Should have been posted above, guess I missed one.

Change menu button text (from Minefield to Firefox or whatever you want to edit it to say)

#appmenu-button .button-text { display:none !important; }
#appmenu-button dropmarker:before { content: "Firefox" !important; }

Veteran

Darrian

Posted
Posted

NP. Also, I took the liberty of cleaning up your toolbar code, too, since it's not using the aqua elements anymore; I was toying around with a red one. (This is with the blue gradient, though)

#main-window #navigator-toolbox #PersonalToolbar
{
border-top: 0 none !important;
-moz-appearance: none !important;
background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
padding: 0px 0px 0px 0px !important;
color: white !important;
}

#main-window #navigator-toolbox #PersonalToolbar toolbarbutton
{
padding: 0 5px !important;
}

#main-window #navigator-toolbox #PersonalToolbar toolbarbutton > label
{
color: white !important;
}

#main-window #navigator-toolbox #PersonalToolbar > toolbaritem > menubar > menu > label
{
color: white !important;
}

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

NP. Also, I took the liberty of cleaning up your toolbar code, too, since it's not using the aqua elements anymore; I was toying around with a red one. (This is with the blue gradient, though)

Here even cleaner ;) 

#PersonalToolbar {
  border-top: 0 !important;
  -moz-appearance: none !important;
  background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
  padding: 0 !important;
}

#PersonalToolbar .bookmark-item:not(menuitem){
  color: white !important;
  padding: 0 5px !important;
}

Grand Master

Steven P. Administrators

Posted
  • Author
  • Administrators
Posted

Here even cleaner ;) 

#PersonalToolbar {
  border-top: 0 !important;
  -moz-appearance: none !important;
  background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
  padding: 0 !important;
}

#PersonalToolbar .bookmark-item:not(menuitem){
  color: white !important;
  padding: 0 5px !important;
}

Ohh thanks, I'm a bit of a n00b with stylish :p

Veteran

Darrian

Posted
Posted

Me too! :D I just picked out the parts that didn't make sense and previewed after each change to make sure it didn't break anything.

@Soapy: Thx! Now... how bout that new split menu my Jedi powers reveal you're secretly working on?

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

Me too! :D I just picked out the parts that didn't make sense and previewed after each change to make sure it didn't break anything.

@Soapy: Thx! Now... how bout that new split menu my Jedi powers reveal you're secretly working on?

Seeing as how they scrapped the idea of the dual pane Idea I was going to take the menu I built for StrataBuddy and port that over. It will have to come in the form of an addon because it contains xul and javascript. Once I make some real progress I'll update you.

Veteran

bogas04

Posted
Posted

32627_after.png

http://userstyles.or...27?r=1279537990

#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 4px !important;
padding-top:7px !important;
padding-right:110px !important;
padding-left: 50px !important;
}

.tabbrowser-tab[fadein]
{
min-width: 175px !important;
max-width: 210px !important;
}

#main-window[sizemode="maximized"][tabsontop="true"] #appmenu-button-container 
{ 
 	position: fixed !important; 
 	margin: 6px 0px 4px 4px !important; 
}


#appmenu-button
{
	border: 1px solid rgba(90,30,0,0.8)!important;
	border-top:none!important;
	padding: 0px 5px px 5px !important;
	height: 22px !important;
	min-width: 43px !important;
	width: 43px !important;
	background-image: -moz-linear-gradient(rgba(255,220,150,0.8), rgba(255,220,150,0.5) 40%, rgba(255,220,150,0.2) 50%, rgba(255,255,255,0.05) 51%), -moz-radial-gradient(12.5px, circle cover, rgba(248, 233, 164, 0.85) 28%, rgba(248, 233, 164, 0.45) 34%, rgba(248, 233, 164, 0) 50%) !important;
	-moz-box-shadow: 0 0 3px rgba(255,255,255,.5) inset, 0 0 1px rgba(255,250,200,0.8) inset, 0 0 1px rgba(255,250,200,0.8) inset, 0 0 1px rgba(255,250,200,0.8) inset, 0 0 1px rgba(255,250,240,0.5) !important;
}


#appmenu-button:hover:active, #appmenu-button[open]
{
	background-image: -moz-linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1) 10%, transparent 60%), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.5) 29%, rgba(248, 233, 164, 0.2) 35%, rgba(248, 233, 164, 0) 50%) !important;
	-moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset !important;
}


#appmenu-button .button-text
{ 
	color: transparent !important;
	text-shadow: none !important;
	margin-left: -27px !important;
	margin-right: -33px !important;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADK0lEQVQ4jV2TTWxUZRSGn++7d+bey3SYMgMzdNLMTCu2VcE0CjG1qYqRSEhYKElTA66MooaNLozDwh8WjAs3JsSFSxeKRg0axSj+EApFYotAS0ctWmeEOpTS6fx0fu+9n4v+pPqsTk7yvuck57wCIGXIT4BUsu6OBbr2bO+p5J71OfWHxvzxMEuMA6eBLwu/nxxlDWLZQAGcDG09Ou/xDR3IXegE2F9zEMDg/rd59eky1z467575pfLdrrmLRw7dqJxjWXwgZUh1682gShlSra2Ha0qdK9nq63xDbXniLTUx8pz68Y1+9U5XuPrhwMZBACkEjwRDGgD7hoLE457V9c4GNF5u9XK1WGfw4B4efT1B594eHnvlHrNUku99/mRks9SkuL/jTk+jkrVxF6ps7/Ovmu0bChKXUEQnH9uCMrx8MNJK4sEIoZgVKN9sJqXHENFou+ZtVl18iaXp1UKEjbuf4dPj86hTC1y+eJuJM3/hojF5rUGhYNO9K8TiXG2nrhTrfa0SXQoqJUnLwB0A6J5JAGamcuQn05RmctiuzlhaYkmHSNxkMe/06PWaa2CD2SYZ/rZE8/tRZnIKgKOPv0vz/Y8RysGSLtWaIJKo0Lp+nnylQq1o69LwiHKpoEBAMKKxye/S1iYBOPzNi3zW9wOv7chQnJ2jUczzcHsW8vOUf72J1SIqugZX/sk2+/0bNLruNvl73GZbXOfeHSY+0+ZC5hacOI3d/jwxK8vB3jT1XIPrZ/Nowh3XbUcdnxpv3BcI6VY4ZtK+LYjdcBj7aZHMHw3gKknfU/Sv+40Xdt8mpNVZmFpg8mcNb2vwlEgZssXSGNaF6N055Mc0dBxHR5oa03kvc8Ua68QisXCTRMKgik56pMyfGau4ObapWwAcMeQDluQLS4rw1j6LSFRD1ySapjCkjeMIbMAMQSarmLhUr81NOwPJujsqVr4uZcheQ+MrBdFQi6Sz20sgKNAtwCOYvd4kc0OgqnYlN+v2J+vupdUwrXDMp3W4gpdcpfY6UiQce+k6piHYEJA1p6lOlBfU4UOLzvR/0vh/jvm0DuAuILrcmgHSa4Ur/AsXclHwqDchzQAAAABJRU5ErkJggg==") no-repeat 16px !important;
}


#appmenu-button dropmarker
{ 
	margin: 0 1px 0 0 !important; 
}
#appmenu-button-container
{
	position: fixed !important;
	top: 1px !important;
}

Grand Master

Steven P. Administrators

Posted
  • Author
  • Administrators
Posted

NP. Also, I took the liberty of cleaning up your toolbar code, too, since it's not using the aqua elements anymore; I was toying around with a red one. (This is with the blue gradient, though)

#main-window #navigator-toolbox #PersonalToolbar
{
border-top: 0 none !important;
-moz-appearance: none !important;
background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
padding: 0px 0px 0px 0px !important;
color: white !important;
}

#main-window #navigator-toolbox #PersonalToolbar toolbarbutton
{
padding: 0 5px !important;
}

#main-window #navigator-toolbox #PersonalToolbar toolbarbutton > label
{
color: white !important;
}

#main-window #navigator-toolbox #PersonalToolbar > toolbaritem > menubar > menu > label
{
color: white !important;
}

Had to use this, because the one SoapyHamHocks did, although simple and cleaner, makes a lot of the dialog text white within options, bookmarks menu etc :p

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

Had to use this, because the one SoapyHamHocks did, although simple and cleaner, makes a lot of the dialog text white within options, bookmarks menu etc :p

Don't fear I have fixed it :whistle: 

#PersonalToolbar {
  border-top: 0 !important;
  -moz-appearance: none !important;
  background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
  padding: 0 !important;
}

#PersonalToolbar .bookmark-item:not(menuitem):not(menu) {
  color: white !important;
  padding: 0 5px !important;
}

32627_after.png[/url]

Cleaned up the code a bit and fixed the menubar.

#main-window:not([sizemode="maximized"])[tabsontop="true"] #TabsToolbar{
  padding: 7px 110px 0 43px !important;
}

#main-window[sizemode="maximized"][tabsontop="true"] #TabsToolbar{
  padding: 0 110px 0 43px !important;
}

#appmenu-button-container {
  position: fixed !important;
  top: 1px !important;
}

#main-window[sizemode="maximized"][tabsontop="true"] #appmenu-button-container { 
  top: 8px !important;
}

#toolbar-menubar:not([inactive="true"]) {
  margin: 0 0 0 43px !important;
}

#appmenu-button {
  border: 1px solid rgba(90,30,0,0.8)!important;
  border-top:none!important;
  padding: 0px 5px 0px 5px !important;
  height: 22px !important;
  min-width: 43px !important;
  width: 43px !important;
  background-image: -moz-linear-gradient(rgba(255,220,150,0.8), rgba(255,220,150,0.5) 40%, rgba(255,220,150,0.2) 50%, rgba(255,255,255,0.05) 51%), -moz-radial-gradient(12.5px, circle cover, rgba(248, 233, 164, 0.85) 28%, rgba(248, 233, 164, 0.45) 34%, rgba(248, 233, 164, 0) 50%) !important;
  -moz-box-shadow: 0 0 3px rgba(255,255,255,.5) inset, 0 0 1px rgba(255,250,200,0.8) inset, 0 0 1px rgba(255,250,200,0.8) inset, 0 0 1px rgba(255,250,200,0.8) inset, 0 0 1px rgba(255,250,240,0.5) !important;
}

#appmenu-button:hover:active, 
#appmenu-button[open] {
  background-image: -moz-linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1) 10%, transparent 60%), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.5) 29%, rgba(248, 233, 164, 0.2) 35%, rgba(248, 233, 164, 0) 50%) !important;
  -moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset !important;
}

#appmenu-button .button-text { 
  color: transparent !important;
  text-shadow: none !important;
  margin-left: -27px !important;
  margin-right: -33px !important;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADK0lEQVQ4jV2TTWxUZRSGn++7d+bey3SYMgMzdNLMTCu2VcE0CjG1qYqRSEhYKElTA66MooaNLozDwh8WjAs3JsSFSxeKRg0axSj+EApFYotAS0ctWmeEOpTS6fx0fu+9n4v+pPqsTk7yvuck57wCIGXIT4BUsu6OBbr2bO+p5J71OfWHxvzxMEuMA6eBLwu/nxxlDWLZQAGcDG09Ou/xDR3IXegE2F9zEMDg/rd59eky1z467575pfLdrrmLRw7dqJxjWXwgZUh1682gShlSra2Ha0qdK9nq63xDbXniLTUx8pz68Y1+9U5XuPrhwMZBACkEjwRDGgD7hoLE457V9c4GNF5u9XK1WGfw4B4efT1B594eHnvlHrNUku99/mRks9SkuL/jTk+jkrVxF6ps7/Ovmu0bChKXUEQnH9uCMrx8MNJK4sEIoZgVKN9sJqXHENFou+ZtVl18iaXp1UKEjbuf4dPj86hTC1y+eJuJM3/hojF5rUGhYNO9K8TiXG2nrhTrfa0SXQoqJUnLwB0A6J5JAGamcuQn05RmctiuzlhaYkmHSNxkMe/06PWaa2CD2SYZ/rZE8/tRZnIKgKOPv0vz/Y8RysGSLtWaIJKo0Lp+nnylQq1o69LwiHKpoEBAMKKxye/S1iYBOPzNi3zW9wOv7chQnJ2jUczzcHsW8vOUf72J1SIqugZX/sk2+/0bNLruNvl73GZbXOfeHSY+0+ZC5hacOI3d/jwxK8vB3jT1XIPrZ/Nowh3XbUcdnxpv3BcI6VY4ZtK+LYjdcBj7aZHMHw3gKknfU/Sv+40Xdt8mpNVZmFpg8mcNb2vwlEgZssXSGNaF6N055Mc0dBxHR5oa03kvc8Ua68QisXCTRMKgik56pMyfGau4ObapWwAcMeQDluQLS4rw1j6LSFRD1ySapjCkjeMIbMAMQSarmLhUr81NOwPJujsqVr4uZcheQ+MrBdFQi6Sz20sgKNAtwCOYvd4kc0OgqnYlN+v2J+vupdUwrXDMp3W4gpdcpfY6UiQce+k6piHYEJA1p6lOlBfU4UOLzvR/0vh/jvm0DuAuILrcmgHSa4Ur/AsXclHwqDchzQAAAABJRU5ErkJggg==") no-repeat 16px !important;
}

#appmenu-button dropmarker { 
  margin: 0 1px 0 0 !important; 
}

.tabbrowser-tab[fadein] {
  min-width: 175px !important;
  max-width: 210px !important;
}

And yes I'm bored :p

Grand Master

Steven P. Administrators

Posted
  • Author
  • Administrators
Posted

Nah still broke in options, browser controls are fixed tho..

post-2-12795402092612.png

If you are bored, can you help me change home button & app tabs to the selected background color, because I don't like the transparent behavior.

post-2-12795402073342.png

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

#TabsToolbar > #home-button {
-moz-appearance: none !important;
background: transparent -moz-linear-gradient(left center , transparent, transparent 1px, rgba(128, 128, 128, 0.1) 1px, rgba(128, 128, 128, 0.1)) repeat scroll -6px 0 !important;
background-clip: border-box !important;
background-origin: padding-box !important;
background-size: 200% auto !important;
margin: 0 !important;
padding: 0 1px !important;
-moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 3 5 3 6 / 3px 5px 3px 6px !important;
-moz-border-radius: 6px 4px 0 0 !important;
margin-left: 4px !important;
}

#TabsToolbar > #home-button:hover {
background-image: -moz-linear-gradient(left, transparent, transparent 1px, rgba(255,255,255,.4) 1px, rgba(255,255,255,.4)) !important;
}

#TabsToolbar > #home-button > .toolbarbutton-icon {
margin-top: -1px !important;
margin-bottom: -1px !important;
}

#appmenu-button-container{
position: fixed !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 82px !important;
padding-top:1px !important;
}
#main-window #navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-right: 110px !important;
}
#main-window[sizemode="maximized"] #navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-right: 110px !important;
}
tab:not([selected="true"]) 
{
color: white !important;
}

#appmenu-button-container{
margin: 0px 0px 4px 4px !important;
}

#appmenu-button{
padding: 2px 10px 2px 7px !important;
}

#appmenu-button dropmarker:before {
padding-right: 5px !important;
}

#appmenu-button{
background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
-moz-border-radius: 0px 0px 4px 4px !important;
border-top: 0px !important;
margin-top: 1px !important;
}

#appmenu-button:hover{
background: -moz-linear-gradient(top, rgba(78,147,229,1), rgba(0,78,213,1)) !important;
}
#appmenu-button .button-text { display:none !important; }
#appmenu-button dropmarker:before { content: "Firefox" !important; }

I think thats everywhere where home button and apptabs are mentioned.

Thanks! :D

Collaborator

vajlent

Posted
Posted

I wanna move the menu button more to the left side and make the active tabs in the same transparency

as the toolbar, how do I do that?

post-251611-12795410025305.png

EDIT: nevermind the menu button, I fixed that one. ;)

I just need help with the tabs transparency.

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

Nah still broke in options, browser controls are fixed tho..

I think thats everywhere where home button and apptabs are mentioned.

Thanks! :D

This should do it:

#navigator-toolbox[tabsontop="true"] .tabbrowser-tab[pinned="true"] {
  background-image: -moz-radial-gradient(center top, white, rgba(255,255,255,0) 60%),
                    -moz-linear-gradient(left, transparent, transparent 1px,
                                               rgba(255,255,255,.5) 1px, rgba(255,255,255,.5)),
                    -moz-linear-gradient(left, transparent, transparent 1px,
                                               -moz-dialog 1px, -moz-dialog) !important;
}

Also the code I posted earlier should not change anything in the options window at all. It has to do with the code you originally posted, you had:

tab:not([selected="true"]) {
color: white !important;
}

it should be 

.tabbrowser-tab:not([selected="true"]) {
color: white !important;
}

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

post-49492-12795418836181.png

http://userstyles.org/styles/33745

#urlbar-container + #reload-button,
#urlbar-container + #reload-button + #stop-button{
  border: 1px solid !important;
  border-color: rgba(0,0,0,.25) rgba(0,0,0,.32) rgba(0,0,0,.37) rgba(0,0,0,.15) !important;
  -moz-border-radius: 0 4px 4px 0!important;  
  -moz-box-shadow: 0 1px 0 rgba(0,0,0,.1) inset,
                   0 1px 0 rgba(255,255,255,.4) !important;
  background: rgba(255,255,255,.725) !important;
  margin-left: -5px !important;
  padding: 0 3px 0 3px !important;
}

#urlbar {
  -moz-border-radius: 4px 0 0 4px !important;
  border-right: 0 !important;
}

Just a quick style, will add hover/pressed states eventually.

Grand Master

Steven P. Administrators

Posted
  • Author
  • Administrators
Posted

Neat! Added.

Edit: That breaks the stop/reload button tweak, here it is together:

#stop-button[disabled="true"] { display:none; } 
#stop-button:not([disabled]) + #reload-button { display:none; }
/* Hide bookmark star in addressbar */
toolbar #star-button{
display:none !important;
}
/* Remove live feed icon in Address url toolbar */
#feed-button 
{
 display: none !important;
}
#urlbar-container + #reload-button,
#urlbar-container + #reload-button + #stop-button{
  border: 1px solid !important;
  border-color: rgba(0,0,0,.25) rgba(0,0,0,.32) rgba(0,0,0,.37) rgba(0,0,0,.15) !important;
  -moz-border-radius: 0 4px 4px 0!important;  
  -moz-box-shadow: 0 1px 0 rgba(0,0,0,.1) inset,
                   0 1px 0 rgba(255,255,255,.4) !important;
  background: rgba(255,255,255,.725) !important;
  margin-left: -5px !important;
  padding: 0 3px 0 3px !important;
}

#urlbar {
  -moz-border-radius: 4px 0 0 4px !important;
  border-right: 0 !important;
}

duh I think I messed up.. it isn't broke ignore me lol

Grand Master

Steven P. Administrators

Posted
  • Author
  • Administrators
Posted

Yeah I figured it out, works properly now.

I have this in a "tweaks" stylish script

/* Hide bookmark star in addressbar */
toolbar #star-button{
display:none !important;
}
/* Remove live feed icon in Address url toolbar */
#feed-button 
{
 display: none !important;
}
#urlbar-container + #reload-button,
#urlbar-container + #reload-button + #stop-button{
  border: 1px solid !important;
  border-color: rgba(0,0,0,.25) rgba(0,0,0,.32) rgba(0,0,0,.37) rgba(0,0,0,.15) !important;
  -moz-border-radius: 0 4px 4px 0!important;  
  -moz-box-shadow: 0 1px 0 rgba(0,0,0,.1) inset,
                   0 1px 0 rgba(255,255,255,.4) !important;
  background: rgba(255,255,255,.725) !important;
  margin-left: -5px !important;
  padding: 0 3px 0 3px !important;
}

#urlbar {
  -moz-border-radius: 4px 0 0 4px !important;
  border-right: 0 !important;
}

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

post-49492-12795418836181.png

Updated with hover/pressed states.

http://userstyles.org/styles/33745

#urlbar {
  -moz-border-radius: 4px 0 0 4px !important;
  border-right: 0 !important;
}

#urlbar-container + #reload-button,
#urlbar-container + #reload-button + #stop-button{
  border: 1px solid !important;
  border-color: rgba(0,0,0,.25) rgba(0,0,0,.32) rgba(0,0,0,.37) rgba(0,0,0,.15) !important;
  -moz-border-radius: 0 4px 4px 0!important;  
  -moz-box-shadow: 0 1px 0 rgba(0,0,0,.1) inset,
                   0 1px 0 rgba(255,255,255,.4) !important;
  background: rgba(255,255,255,.725) !important;
  margin-left: -3px !important;
  padding: 0 3px 0 3px !important;
}

#urlbar-container + #reload-button:not([disabled]):hover{
  background-image: -moz-linear-gradient(#9eccf1, #6fb1e1 49%,
                                   #5b9fd9 50%, #5198d2 60%,
                                   #3e8ac9) !important;
}

#urlbar-container + #reload-button + #stop-button{
  background-image: -moz-linear-gradient(#e6a18a, #d17764 49%,
                                   #c05d4e 50%, #b95546 60%,
                                   #c15a4a) !important;
}

#urlbar-container + #reload-button:hover:active,
#urlbar-container + #reload-button + #stop-button:hover:active {
  -moz-box-shadow: inset 0 0 3px rgba(0,0,0,.8) !important;
}

Grand Master

Steven P. Administrators

Posted
  • Author
  • Administrators
Posted

Hey thanks, I installed it, but wouldn't it be better to have the default hover state?

Default

post-2-12795545092707.png

Yours

post-2-12795545191069.png

Hmm would be difficult, maybe just make it lighter or something? I like how the stop button goes Red :)

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

Hey thanks, I installed it, but wouldn't it be better to have the default hover state?

Hmm would be difficult, maybe just make it lighter or something? I like how the stop button goes Red :)

I tried to copy the mockups for that one as seen here. I will end up tweaking it some more.

This topic is now closed to further replies.
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • draw.io Desktop 30.2.6

      By Copernic · Posted

      draw.io Desktop 30.2.6 by Razvan Serea draw.io desktop is a downloadable security-first diagramming application that runs on Windows, MacOS and Linux. Creating diagrams in the desktop app doesn’t need an internet connection. This is useful when you are disconnected or when you must create diagrams in a highly secure environment, where data protection is of the utmost importance. When you use the draw.io desktop app, your diagrams will be stored on your local device. Because this is a stand-alone application, also designed to run offline, there are no interfaces to cloud storage platforms available. Of course, you can still store your diagrams in folders that are synchronised to your cloud storage if you wish. Easy-to-use diagram editor The draw.io apps work just like the office and drawing tools you are used to using. Drag and drop shapes from the shape libraries and drag to draw connectors between them. Drag connectors to add waypoints and set a precise shape and position, or let them reroute automatically. Double click and start typing to add a label to anything. Create tables and swimlane flows with a familiar tool. Style shapes and connectors with customisable palettes, sketch options, fonts and text formatting tools. Search for shapes, including in open-source icon libraries. Use our vast libraries of shapes and templates, organised into logical categories, to create a range of diagrams and infographics. Generate diagrams from text descriptions using our smart templates. Diagram faster with keyboard shortcuts. draw.io Desktop 30.2.6 changelog: Uses electron 42.5.0 #2452 Updates to draw.io core 30.2.6. Download: draw.io 64-bit | Standalone (Open Source) Download: draw.io 32-bit | ARM64 | ARM64 Standalone Links: draw.io Home Page | Project page @GitHub | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Politically funny images of the World

      By +Edouard · Posted

    • Politically funny images of the World

      By +primortal · Posted

    • Politically funny images of the World

      By +primortal · Posted

    • The official Funny Pictures thread

      By +primortal · Posted

  • Recent Achievements

    • One Month Later
      Excellence2025 earned a badge
      One Month Later
    • Week One Done
      Excellence2025 earned a badge
      Week One Done
    • Week One Done
      flexorcist earned a badge
      Week One Done
    • One Month Later
      Woland13 earned a badge
      One Month Later
    • Week One Done
      Woland13 earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      497
    2. 2
      +Edouard
      207
    3. 3
      PsYcHoKiLLa
      146
    4. 4
      Steven P.
      74
    5. 5
      FloatingFatMan
      69
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!