Merhaba. Bu rehberde adım adım Edge'ye yeni elen Edge bar özelliğini Firefox'a ekleyeceğiz.
1) İlk olarak Tab Center Reborn eklentisini ekleyin.
2) Araç çubuğundaki eklentiye sağ tıklayın ve uzantıyı önete basın.
3) Gelen pencere seçeneklere basın.
4) En aşağı inin ve özel tarz sayfasını etkinleştirip aşağıdaki kodu yapıştırın ve CSS'i kaydete basın:
5) Arama kısmına about:Config yazıp entera basıp uyarıyı onaylıyıp açılan sayfadaki arama kısmına.
Yazıp true haline getirin.
6) Tarayıcının arama kısmına:
Yazıp entera basıp açılan sayfadaki resimde okla gösterdiğim tuşa basıyoruz.
7) Açılan klasörde Chrome klasöre ne giriyoruz yoksa Chrome adlı bir klasör oluşturup giriyoruz ve klasöre bu dosyayı indirip atıyoruz.
8) Tarayıcıyı kapatıp açın.
9) Araç çubuğuna sağ tıklayıp araç çubuğunu özeleştir deyin açılan sayfada başlık çubuğunu aktifleştirip tamam deyin.
10) Firefox'un tadını çıkarın.
Son hali:
Kaynak: GitHub - ranmaru22/firefox-vertical-tabs: Vertical tabs for Firefox, inspired by Edge.
Dosya güncellendi.
Artık bu adıma gerek yok.
1) İlk olarak Tab Center Reborn eklentisini ekleyin.
2) Araç çubuğundaki eklentiye sağ tıklayın ve uzantıyı önete basın.
3) Gelen pencere seçeneklere basın.
4) En aşağı inin ve özel tarz sayfasını etkinleştirip aşağıdaki kodu yapıştırın ve CSS'i kaydete basın:
Kod:
/* Overwrite some colours */
:root {
--tab-separator: transparent;
--tab-selected-line: transparent;
--tablist-separator: #cccccc;
/* fix scrolling bug when collapsed */
overflow: hidden;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #1c1b22;
--icons: rgb(251,251,254);
--tab-separator: transparent;
--tab-active-background: rgb(66,65,77);
--tab-active-text: rgb(251,251,254);
--tab-text: #fbfbfe;
--toolbar-background: rgb(43,42,51);
--toolbar-text: rgb(251, 251, 254);
--input-background: rgb(28,27,34);
--input-border: transparent;
--input-background-focus: rgb(66,65,77);
--input-selected-text: rgb(251,251,254);
--input-text: rgb(251,251,254);
--input-text-focus: rgb(251,251,254);
--identity-color-toolbar: rgb(251,251,254);
--tablist-separator: #333333;
}
}
/* Move topmenu to bottom */
#topmenu {
order: 2;
background: transparent;
border: none;
}
#newtab {
margin-left: 6px;
}
#settings {
margin-right: 2px;
}
/* Hide filterbox & settings icon */
#filterbox-icon,
#filterbox-input,
#settings {
display: none;
}
#tablist-wrapper {
height: auto;
margin-inline: 6px;
/* adds margin above tabs to make the spacing even */
margin-top: 5px;
}
/* fix glitch with spacing in-between pinned tabs */
#pinnedtablist:not(.compact) {
display: flex;
flex-direction: column;
}
#tablist-wrapper::after {
content: "";
margin: 2px 0;
border: 1px solid var(--tablist-separator);
}
#newtab {
flex-grow: 1;
margin-right: 2px;
margin-left: 2px;
padding-left: 9px;
min-width: 36px;
width: 100%;
}
.tab,
.tab.active {
border-radius: 4px;
border-bottom: none !important;
margin: 1px 0;
}
#pinnedtablist:not(.compact) .tab,
#tablist .tab {
padding: 0;
}
#newtab::after {
content: "New tab";
margin-left: 10px;
white-space: nowrap;
overflow: hidden;
}
#newtab-icon {
min-width: 16px;
}
/* the @media rule only allows these settings apply when the sidebar is expanded */
@media (min-width: 49px) {
/* Move close button to left side */
/*.tab-close {
left: 0;
margin-left: 3px;
}*/
/* Fix title gradient */
/*#tablist .tab:hover > .tab-title-wrapper {
mask-image: linear-gradient(to left, transparent 0, black 2em);
}*/
/* Move tab text to right when hovering to accomodate for the close button */
/*#tablist .tab:hover > .tab-title-wrapper {
margin-left: 28px;
transition: all 0.2s ease;
}*/
/* Move favicon to right when hovering to accomodate for the close button */
/*#tablist .tab:hover > .tab-meta-image {
padding-left: 25px;
transition: all 0.2s ease;
}*/
}
/*** Move container indicators to left ***/
#tablist-wrapper {
margin-left: 0px;
padding-left: 6px;
}
#tablist,
#pinnedtablist:not(.compact) {
margin-left: -6px;
padding-left: 6px;
}
.tab {
overflow: visible;
}
#tablist .tab[data-identity-color] .tab-context,
#pinnedtablist:not(.compact) .tab[data-identity-color] .tab-context {
box-shadow: none !important;
}
#tablist .tab[data-identity-color] .tab-context::before,
#pinnedtablist:not(.compact) .tab[data-identity-color] .tab-context::before {
content: "";
position: absolute;
top: 6px;
left: -6px;
bottom: 6px;
width: 3px;
border-radius: 0 5px 5px 0;
background: var(--identity-color);
transition: inset .1s;
}
#tablist .tab.active[data-identity-color] .tab-context::before,
#pinnedtablist:not(.compact) .tab.active[data-identity-color] .tab-context::before {
top: 1px;
bottom: 1px;
}
/* center favicons within the tab */
#tablist-wrapper.shrinked>:not(#pinnedtablist.compact) .tab-meta-image {
margin-left: 6px !important;
}
/* hide certain items when collapsed */
@media (max-width: 64px) {
/* using 64px minimum width to give the tab favicons more room during the transition */
.tab-close,
.tab-pin {
visibility: collapse !important;
}
/* hide scrollbar when sidebar is collapsed */
#tablist {
scrollbar-width: none;
}
}
@media (max-width: 48px) {
#settings-icon,
#tablist-wrapper .tab-title-wrapper,
#newtab::after,
#settings {
visibility: hidden !important;
}
}
/*** Better support for non-compact mode ***/
#tablist-wrapper:not(.shrinked) .tab-meta-image {
display: flex;
align-items: center;
width: 58px;
border: 0 !important;
margin-right: 4px;
border-radius: inherit;
background-position: center;
min-width: 0px !important;
background-color: var(--toolbar-background) !important;
transition: margin .4s;
}
#tablist-wrapper:not(.shrinked) .tab-icon-wrapper {
transition: margin .1s;
z-index: 2;
}
#tablist-wrapper:not(.shrinked) .tab-icon-overlay {
top: unset !important;
bottom: 8px;
left: 25px !important;
z-index: 4;
transition: inset .1s;
}
/* If you want to disable the website previews,
comment out the @media line below and its closing bracket */
@media (max-width: 49px) {
#tablist-wrapper:not(.shrinked) .tab-meta-image {
background-color: inherit !important;
border-width: 0 !important;
box-shadow: none !important;
height: 0 !important;
width: 26px;
margin-right: 0px;
}
#tablist-wrapper:not(.shrinked) .tab-icon-wrapper {
background-color: transparent !important;
margin-top: 0 !important;
margin-left: 3px !important;
box-shadow: none !important;
}
#tablist-wrapper:not(.shrinked) .tab-icon-overlay {
bottom: 12px;
left: 16px !important;
}
}5) Arama kısmına about:Config yazıp entera basıp uyarıyı onaylıyıp açılan sayfadaki arama kısmına.
Kod:
toolkit.legacyUserProfileCustomizations.stylesheetsYazıp true haline getirin.
6) Tarayıcının arama kısmına:
Kod:
about:profilesYazıp entera basıp açılan sayfadaki resimde okla gösterdiğim tuşa basıyoruz.
7) Açılan klasörde Chrome klasöre ne giriyoruz yoksa Chrome adlı bir klasör oluşturup giriyoruz ve klasöre bu dosyayı indirip atıyoruz.
8) Tarayıcıyı kapatıp açın.
9) Araç çubuğuna sağ tıklayıp araç çubuğunu özeleştir deyin açılan sayfada başlık çubuğunu aktifleştirip tamam deyin.
10) Firefox'un tadını çıkarın.
Son hali:
Kaynak: GitHub - ranmaru22/firefox-vertical-tabs: Vertical tabs for Firefox, inspired by Edge.
Dosya güncellendi.
Artık bu adıma gerek yok.
Son düzenleme:
