Firefox tarayıcısı kullananların karşılaştığı ve genelde benimde şahsi olarak çok hoşlanmadığım özelliği sekmelerin, adres çubuğunun, yer imleri çubuğunun alt alta yer alması ve çok fazla alan kaplamasıdır. Ahmet Özer arkadaşımızın wmaracı forumunda paylaştığı blog yazısına denk geldim. güzel bir çözüm bularak Firefox'u tıpkı Chrome gibi tek çubuk haline getirmiş. Aslında kişisel blogum da başka bloglar ve sitelerde gördüğüm yazıları kolay kolay paylaşmam. Ancak Ahmet arkadaşımız blog yazısını ingilizce yazdığı için Türkçe bir anlatım yapma gereği hissettim.
Öncelikle işin özü Firefox'unuzun kurulu bulunduğu klasöre yeni bir klasör açarak
CSS kodlarıyla tasarımsal düzenlemeler yapmış oluyoruz. Bunu yapabilmek için;
Windows kullanıyorsanız: "%appdata%\Mozilla\Firefox\Profiles\XXXXXXXXX.default",
Linux kullanıyorsanız: “.mozilla/firefox/XXXXXXXXX.default” yolunu takip edin.
Buradaki XXXXX ifadesi sizin profil numaranızı belirtir. Örneğin benim için bu klasörün adı "n2gtf3at.default" olarak geçiyor. Bu klasörün içine "chrome" adını verdiğimiz bir klasör açıyoruz. Bu chrome klasörünün içine ise "userChrome.css" adında bir dosya oluşturup aşağıdaki kodları dosyanın içine yapıştırıyoruz. ***Firefox'unuzu kapatmayı unutmayın.
/*
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;
}
Yeni sekme sayfasına arkaplan resmi eklemek isterseniz de yine "chrome" klasörü içinde "userContent.css" dosyası oluşturup aşağıdaki kodları içine atın.
@-moz-document url(about:home) {
body
{
background-color: #2D253A !important;
background-image: url("https://source.unsplash.com/@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/@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/@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; }
}
Hepsi bu kadar. Artık Firefox'u açabilirsiniz. Dilerseniz isteğinize göre CSS kodlarıyla oynayarak sizde kendinize göre tasarım düzenlemeleri yapabilirsiniz.
Ahmet Özer'in yazısına bakmak isterseniz:
https://ahmetozer.org/Firefox-one-line.html