Firefox One Line

firefox When using Firefox, the browser is made up of 3 columns, which means there is less space on the page than the browser window. Such a thing usually does not happen in new modern designs. We can make changes to the interface of the browser by creating its own css fill in Firefox. You need to create a folder and a file to make adjustments on your computer.

If you are using Windows you will have a folder named “%appdata%\Mozilla\Firefox\Profiles\XXXXXXXXX.default”.

If you are using Linux you need to have a similar folder “.mozilla/firefox/XXXXXXXXX.default”.

This “xxxx” section has your profile number. This folder contains the following files and folders

[email protected]:~/.mozilla/firefox/9204xyk2.default$ ls
addons.json              lock
addonStartup.json.lz4    logins.json
AlternateServices.txt    minidumps
blocklists               notificationstore.json
blocklist.xml            permissions.sqlite
bookmarkbackups          pkcs11.txt
browser-extension-data   places.sqlite
cert9.db                 places.sqlite-shm

In this folder, create a folder called chrome. Create the userChrome.css file inside the Chrome folder and place the following code in it.

Uncheck the Title bar in the Firefox customization options. This option is located at the bottom left of the customization page.

When you close and reopen Firefox, you’ll see a new look.

/* 
Original layout by /u/Herkt https://www.reddit.com/r/FirefoxCSS/comments/7eazix/my_attempt_at_a_oneline_interface/ 
New layout by https://ahmetozer.org
Use with compact density
dynamic theme https://addons.mozilla.org/en-US/firefox/addon/weatherlicious/
*/
:root {
  --tabs-border: transparent !important;                             /* active tab left & right borders - not working in 58?*/
  --toolbox-border-bottom-color: transparent !important;             /* 1px line under background tabs */
  --chrome-nav-bar-controls-border-color: transparent !important;    /* border around url bar */
}
browser {
    margin-right: -17px !important;
    overflow-y: scroll;
    overflow-x: hidden;
}
 /* Move Tab-bar beside Nav-bar */
#TabsToolbar {      
  margin-bottom: 0px !important;
  margin-top: 0px !important; 
  margin-left: 35vw !important;
  margin-right: -34px !important;
  max-height: 32px !important;
}

#nav-bar {      
  margin-bottom: -1px !important; 
  margin-top: -32px !important;
  margin-right: 65vw !important; 
  border-top: none !important;
}   

/* Remove padding above tabbar in compact mode */
#main-window[sizemode="normal"] > #titlebar {
  -moz-appearance: initial !important;
}


/* Back & Forward buttons */  
#back-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon {
  transform: scale(0.9, 0.9) !important;
  margin-left: -2px !important;
  margin-right: -2px !important; 
}

/* Move hamburger menu to the left */
#PanelUI-button,
#customization-panel-container,
#customization-panelWrapper .panel-arrow { 
  -moz-box-ordinal-group: 0 !important;
  margin-right: -6px !important;
}

#appMenu-popup {
  margin-right: -258px !important;
}

#appMenu-popup .panel-arrow {
  margin-right: 248px !important;
}

/* More tools... button */
#nav-bar-overflow-button { 
  transform: scale(0.9, 0.9) !important;
  fill: var(--color-overflow) !important;
}  


/* Tabs */
.tabbrowser-tab {
  height: 32px !important; 
}

/* Remove empty space before first tab
Delete this rule if you need a space to drag the window*/
#TabsToolbar .titlebar-placeholder[type="pre-tabs"]{
    display: none !important;
}

/* Remove border between tabs
Delete this rule if you want separators between background tabs */
.tabbrowser-tab::after, .tabbrowser-tab::before {
  border-left: none !important;
} 

/* Border between background tabs */
.tabbrowser-tab::after, .tabbrowser-tab::before {
  color: grey !important; 
  opacity: .2 !important; 
 }

/* New tab button color */
#new-tab-button, .tabs-newtab-button {
  fill: var(--chrome-color) !important;
  } 

/* tab line - adjust color & size, default #0a84ff 2px */
.tab-line {
  background-color: #0a84ff !important;
  height: 0px !important;
  }


/* Hide various elements */
/* Menu */
#appMenu-fxa-container,                    /* Sign in to Sync */
#appMenu-fxa-container+toolbarseparator,
/* #appMenuRestoreLastSession, */
#appMenu-zoom-controls,
#appMenu-zoom-controls+toolbarseparator,
#appMenu-edit-controls,
#appMenu-edit-controls+toolbarseparator,
#appMenu-library-button,
#appMenu-customize-button,
#appMenu-customize-button+toolbarseparator,
#appMenu-open-file-button,
#appMenu-save-file-button,
#appMenu-find-button,
#appMenu-more-button,

/* URL Bar */
#pageActionButton,
#pocket-button-box,
ar-button,
.autocomplete-history-dropmarker,
#identity-icon-labels
{
    display: none !important;
}

To make the background of the new tab page the background we like on unsplash.com, we create the userContent.css file and place it in the following css code.

@-moz-document url(about:home) {
	body
  {
    background-color: #2D253A !important;
	background-image: url("https://source.unsplash.com/user/ahmetozer/likes/1920x1080") !important;
	background-repeat:no-repeat !important;
	background-size: cover !important;
	background-position: center !important;
	overflow:hidden !important;
  }
	#onboarding-overlay-button, .prefs-button { display: none !important; }
	.section-title .click-target span {
	  color: #fff !important;
	  fill: #fff !important;
  }
	.top-site-inner .title span {
	  color: #fff !important;
  }
  
	.prefs-pane-button button:hover {
	  background-color: #0000001a !important;
  }
	.edit-topsites-button .edit span {
	  color: #fff !important;
  }
}
@-moz-document url(about:newtab) {
	body
  {
	background-color: #2D253A !important;
	background-image: url("https://source.unsplash.com/user/ahmetozer/likes/1920x1080") !important;
	background-repeat:no-repeat !important;
	background-size: cover !important;
	background-position: center !important;
	overflow:hidden !important;
  }
	#onboarding-overlay-button, .prefs-button { display: none !important; }
	.section-title .click-target span {
	  color: #fff !important;
	  fill: #fff !important;
  }
	.top-site-inner .title span {
	  color: #fff !important;
  }
	.prefs-pane-button button:hover {
	  background-color: #0000001a !important;
  }
	.edit-topsites-button .edit span{
	  color: #fff !important;
  }
}

@-moz-document url(about:blank) {
	body
  {
	background-color: #2D253A !important;
	/*background-image: url("https://source.unsplash.com/user/ahmetozer/likes/1920x1080") !important;*/
	background-repeat:no-repeat !important;
	background-size: cover !important;
	background-position: center !important;
	overflow:hidden !important;
  }
	#onboarding-overlay-button, .prefs-button { display: none !important; }
}
comments powered by Disqus