CINXE.COM

<!DOCTYPE html> <html lang="en" data-color-scheme="system"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>The Ultimate Guide to i3 Customization in Linux</title> <meta name="HandheldFriendly" content="True"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="theme-color" content="#007b80"> <link rel="preload" href="/assets/dist/app.min.js?v=dc47750738" as="script"> <link rel="preload" href="/assets/dist/app.min.css?v=dc47750738" as="style"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <style> body { --font-headings: var(--gh-font-heading, var(--font-system)); --font-body: var(--gh-font-heading, var(--font-system)); } </style> <link rel="preload stylesheet" href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'" crossorigin> <style>body { --font-body: var(--gh-font-body, 'Figtree'), sans-serif; --font-headings: var(--gh-font-heading, 'Figtree'), sans-serif; }</style> <script async defer src="/assets/dist/app.min.js?v=dc47750738"></script> <link rel="stylesheet" type="text/css" href="/assets/dist/app.min.css?v=dc47750738"> <link rel="preconnect" href="https://a.pub.network/" crossorigin /> <link rel="preconnect" href="https://b.pub.network/" crossorigin /> <link rel="preconnect" href="https://c.pub.network/" crossorigin /> <link rel="preconnect" href="https://d.pub.network/" crossorigin /> <link rel="preconnect" href="https://c.amazon-adsystem.com" crossorigin /> <link rel="preconnect" href="https://s.amazon-adsystem.com" crossorigin /> <link rel="preconnect" href="https://btloader.com/" crossorigin /> <link rel="preconnect" href="https://api.btloader.com/" crossorigin /> <link rel="preconnect" href="https://confiant-integrations.global.ssl.fastly.net" crossorigin /> <link rel="stylesheet" href="https://a.pub.network/core/pubfig/cls.css"> <script data-cfasync="false" type="text/javascript"> var freestar = freestar || {}; freestar.queue = freestar.queue || []; freestar.config = freestar.config || {}; freestar.config.enabled_slots = []; freestar.initCallback = function () { (freestar.config.enabled_slots.length === 0) ? freestar.initCallbackCalled = false : freestar.newAdSlots(freestar.config.enabled_slots) } </script> <script src="https://a.pub.network/itsfoss/pubfig.min.js" data-cfasync="false" async></script> <style> :root { --global-max-width: 1320px; /* site max width */ --global-content-width: 680px; /* post-content-width */ --global-wide-width: 960px; /* site max width */ --global-post-hero-content-max-width: 768px; --global-radius: 5px; /* default radius */ --global-gallery-gap: 1em; /* Image gallery distance between images */ --global-hyphens: none; /* none/auto */ --global-header-height: 72px; --global-theme-notifications: visible; /* visible/hidden */ --global-progress-bar: visible; /* visible/hidden */ --global-content-preview-fading: 0%; /* 50%-100% for fading effect */ --global-hero-img-filter: ; --global-scroll-behavior: auto; } </style> <script> let preferredTheme = localStorage.getItem('PREFERRED_COLOR_SCHEME') || `system`; document.documentElement.setAttribute('data-color-scheme', preferredTheme); // Global values needed const themeGlobal = { currentPage: parseInt(''), nextPage: parseInt(''), nextPageLink: '', maxPages: parseInt(''), lastPage: `` === `` ? true : false, postsPerPage: parseInt('24'), totalPosts: parseInt(''), scrollPos: 0, imageLightbox: `true` === `true` ? true : false, autoloadResources: false, filterScrollBehavior: 'smooth' } // Calculate contrast & HSL value; function getBrandColorInfo(hexcolor) { // get contrast if (hexcolor.slice(0, 1) === '#') { hexcolor = hexcolor.slice(1); } if (hexcolor.length === 3) { hexcolor = hexcolor.split('').map(function (hex) { return hex + hex;}).join(''); } let r = parseInt(hexcolor.substr(0,2),16), g = parseInt(hexcolor.substr(2,2),16), b = parseInt(hexcolor.substr(4,2),16); let yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000; const colorContrast = (yiq >= 128) ? '#000' : '#fff'; //get HSL r /= 255, g /= 255, b /= 255; const max = Math.max(r, g, b), min = Math.min(r, g, b); let h, s, l = (max + min) / 2; if ( max == min ) { h = s = 0; } else { let d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch(max){ case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } const colorHSL = [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)]; // return return { colorContrast, colorHSL } }; const brandColor = getBrandColorInfo("#007b80"); let style = document.createElement('style'); style.innerHTML = `:root { --color-brand-contrast: ${brandColor.colorContrast}; --color-brand-h: ${brandColor.colorHSL[0]}; --color-brand-s: ${brandColor.colorHSL[1]}%; --color-brand-l: ${brandColor.colorHSL[2]}%; --color-brand-hsl: ${brandColor.colorHSL[0]} ${brandColor.colorHSL[1]}% ${brandColor.colorHSL[2]}%; }` document.getElementsByTagName('head')[0].appendChild(style); </script> <meta name="description" content="Learn about customizing your system's look and feel with i3 window manager in this super-detailed guide."> <link rel="icon" href="https://itsfoss.com/content/images/size/w256h256/2022/12/android-chrome-192x192.png" type="image/png"> <link rel="canonical" href="https://itsfoss.com/i3-customization/"> <meta name="referrer" content="no-referrer-when-downgrade"> <meta property="og:site_name" content="It's FOSS"> <meta property="og:type" content="article"> <meta property="og:title" content="The Ultimate Guide to i3 Customization in Linux"> <meta property="og:description" content="Learn about customizing your system's look and feel with i3 window manager in this super-detailed guide."> <meta property="og:url" content="https://itsfoss.com/i3-customization/"> <meta property="og:image" content="https://itsfoss.com/content/images/2023/05/i3-customisation-guide.png"> <meta property="article:published_time" content="2023-04-25T05:44:43.000Z"> <meta property="article:modified_time" content="2023-05-02T04:44:44.000Z"> <meta property="article:tag" content="Customization ⚙️"> <meta property="article:tag" content="Guides 📒"> <meta property="article:publisher" content="https://www.facebook.com/itsfoss"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="The Ultimate Guide to i3 Customization in Linux"> <meta name="twitter:description" content="Learn about customizing your system's look and feel with i3 window manager in this super-detailed guide."> <meta name="twitter:url" content="https://itsfoss.com/i3-customization/"> <meta name="twitter:image" content="https://itsfoss.com/content/images/2023/05/i3-customisation-guide.png"> <meta name="twitter:label1" content="Written by"> <meta name="twitter:data1" content="Sagar Sharma"> <meta name="twitter:label2" content="Filed under"> <meta name="twitter:data2" content="Customization ⚙️, Guides 📒"> <meta name="twitter:site" content="@itsfoss2"> <meta property="og:image:width" content="800"> <meta property="og:image:height" content="450"> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "publisher": { "@type": "Organization", "name": "It's FOSS", "url": "https://itsfoss.com/", "logo": { "@type": "ImageObject", "url": "https://itsfoss.com/content/images/2023/01/itsfoss-logo.png" } }, "author": { "@type": "Person", "name": "Sagar Sharma", "image": { "@type": "ImageObject", "url": "https://itsfoss.com/content/images/2022/12/Sagar-Sharma-new.jpg", "width": 978, "height": 922 }, "url": "https://itsfoss.com/author/sagar/", "sameAs": [] }, "headline": "The Ultimate Guide to i3 Customization in Linux", "url": "https://itsfoss.com/i3-customization/", "datePublished": "2023-04-25T05:44:43.000Z", "dateModified": "2023-05-02T04:44:44.000Z", "image": { "@type": "ImageObject", "url": "https://itsfoss.com/content/images/2023/05/i3-customisation-guide.png", "width": 800, "height": 450 }, "keywords": "Customization ⚙️, Guides 📒", "description": "Learn about customizing your system's look and feel with i3 window manager in this super-detailed guide.", "mainEntityOfPage": "https://itsfoss.com/i3-customization/" } </script> <meta name="generator" content="Ghost 5.116"> <link rel="alternate" type="application/rss+xml" title="It's FOSS" href="https://itsfoss.com/rss/"> <script defer src="https://cdn.jsdelivr.net/ghost/portal@~2.50/umd/portal.min.js" data-i18n="true" data-ghost="https://itsfoss.com/" data-key="121ee4fb8f9bf181b8f07c52f6" data-api="https://itsfoss.com/ghost/api/content/" data-locale="en" crossorigin="anonymous"></script><style id="gh-members-styles">.gh-post-upgrade-cta-content, .gh-post-upgrade-cta { display: flex; flex-direction: column; align-items: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; text-align: center; width: 100%; color: #ffffff; font-size: 16px; } .gh-post-upgrade-cta-content { border-radius: 8px; padding: 40px 4vw; } .gh-post-upgrade-cta h2 { color: #ffffff; font-size: 28px; letter-spacing: -0.2px; margin: 0; padding: 0; } .gh-post-upgrade-cta p { margin: 20px 0 0; padding: 0; } .gh-post-upgrade-cta small { font-size: 16px; letter-spacing: -0.2px; } .gh-post-upgrade-cta a { color: #ffffff; cursor: pointer; font-weight: 500; box-shadow: none; text-decoration: underline; } .gh-post-upgrade-cta a:hover { color: #ffffff; opacity: 0.8; box-shadow: none; text-decoration: underline; } .gh-post-upgrade-cta a.gh-btn { display: block; background: #ffffff; text-decoration: none; margin: 28px 0 0; padding: 8px 18px; border-radius: 4px; font-size: 16px; font-weight: 600; } .gh-post-upgrade-cta a.gh-btn:hover { opacity: 0.92; }</style><script async src="https://js.stripe.com/v3/"></script> <script defer src="https://cdn.jsdelivr.net/ghost/sodo-search@~1.5/umd/sodo-search.min.js" data-key="121ee4fb8f9bf181b8f07c52f6" data-styles="https://cdn.jsdelivr.net/ghost/sodo-search@~1.5/umd/main.css" data-sodo-search="https://itsfoss.com/" data-locale="en" crossorigin="anonymous"></script> <link href="https://itsfoss.com/webmentions/receive/" rel="webmention"> <script defer src="/public/cards.min.js?v=dc47750738"></script> <link rel="stylesheet" type="text/css" href="/public/cards.min.css?v=dc47750738"> <script defer src="/public/member-attribution.min.js?v=dc47750738"></script><style>:root {--ghost-accent-color: #007b80;}</style> <style> body { --global-max-width: 1400px; --global-content-width: 70rem; } </style> <style> @media only screen and (max-width: 600px) { .hide-mobile {display:none;} } </style>  <style> .content ul li { list-style: inside; margin-bottom: 2rem; } </style>  <style> .js-reframe { padding-top: 0px !important; } </style>  <style> #pmLink { visibility: hidden; text-decoration: none; cursor: pointer; background: transparent; border: none; } #pmLink:hover { visibility: visible; color: grey; } </style>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-24863836-4"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-24863836-4'); </script>  <script async src="https://groovy-manul.pikapod.net/script.js" data-website-id="9f9bd940-0b37-4748-8257-9814959d3526"></script>  <script> !function(w,d,id,ns,s){var c=w[ns]=w[ns]||{};if(c.ready||(c.q=[],c.ready=function(){c.q.push(arguments)}),!d.getElementById(id)){var e=d.createElement(s);e.id=id,e.src="https://assets.context.ly/kit/6.latest/loader.js";var h=d.getElementsByTagName(s)[0];h.parentNode.insertBefore(e,h)}}(window,document,"ctx-loader","Contextly","script"); </script>  <script> document.addEventListener('DOMContentLoaded', function() { var links = document.querySelectorAll('a'); links.forEach(function(link) { if (link.hostname != window.location.hostname) { link.target = '_blank'; } }); }); </script> </head> <body class="post-template tag-customization tag-guides tag-hash-collection " data-hero-image=""> <div class="progress-bar"></div> <header class="header js-header" data-header="normal"> <div class="container wrapper flex is-rel header__inner"> <a class="header__brand" href="https://itsfoss.com"> <picture class=""> <source srcset="/content/images/size/w300/format/webp/2023/01/itsfoss-logo.png 300w," data-sizes="auto" type="image/webp" > <img class="header__logo" data-srcset="/content/images/size/w300/2023/01/itsfoss-logo.png 300w," srcset="/content/images/size/w30/2023/01/itsfoss-logo.png" data-sizes="auto" data-src="/content/images/size/w100/2023/01/itsfoss-logo.png" src="/content/images/size/w30/2023/01/itsfoss-logo.png" alt="It's FOSS" loading="eager" > </picture></a> <nav class="header__menu items-center"> <ul class="nav"> <li class="nav-news" data-label="📰 News" data-length="7"> <a href="https://news.itsfoss.com/"> <span>📰 News</span> </a> </li> <li class="nav-newsletter" data-label="📬 Newsletter" data-length="13"> <a href="https://itsfoss.com/newsletter/"> <span>📬 Newsletter</span> </a> </li> <li class="nav-quizzes-puzzles" data-label="🧩 Quizzes & Puzzles" data-length="20"> <a href="https://itsfoss.com/quiz/"> <span>🧩 Quizzes & Puzzles</span> </a> </li> <li class="nav-resources" data-label="🎒 Resources" data-length="12"> <a href="https://itsfoss.com/resources/"> <span>🎒 Resources</span> </a> </li> <li class="nav-community" data-label="🏘️ Community" data-length="13"> <a href="https://itsfoss.community/"> <span>🏘️ Community</span> </a> </li> <li class="nav-about" data-label="📖 About" data-length="8"> <a href="https://itsfoss.com/about/"> <span>📖 About</span> </a> </li> <li class="nav-contact is-subitem" data-label="-🪪 Contact" data-length="11"> <a href="https://itsfoss.com/contact-us/"> <span>-🪪 Contact</span> </a> </li> <li class="nav-policies is-subitem" data-label="-📜 Policies" data-length="12"> <a href="https://itsfoss.com/policies/"> <span>-📜 Policies</span> </a> </li> </ul> <div class="header__menu--sub items-center"> <button class="header__menu--more is-mainitem" aria-label="Menu"><i class="icon icon-dots"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-dots" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <circle cx="5" cy="12" r="1"></circle> <circle cx="12" cy="12" r="1"></circle> <circle cx="19" cy="12" r="1"></circle> </svg> </i></button> <ul class="nav secondary submenu"> <li class="nav-linux-server-side" data-label="Linux Server Side" data-length="17"> <a href="https://linuxhandbook.com/"> <span>Linux Server Side</span> </a> </li> <li class="nav-en-espanol" data-label="En Español" data-length="10"> <a href="https://itsfoss.com/es/"> <span>En Español</span> </a> </li> <li class="nav-feedback" data-label="🗳️ Feedback" data-length="12"> <a href="https://itsfoss.com/update-feedback/"> <span>🗳️ Feedback</span> </a> </li> <li class="nav-impressum" data-label="Impressum" data-length="9"> <a href="https://itsfoss.com/impressum/"> <span>Impressum</span> </a> </li> <li class="nav-terms-of-use" data-label="Terms of use" data-length="12"> <a href="https://itsfoss.com/terms/"> <span>Terms of use</span> </a> </li> </ul> </div> </nav> <span class="header--spacer"></span> <button class="btn-toggle header-search__toggle" data-ghost-search title="Search" aria-label="Search"> <i class="icon icon-search"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <circle cx="10" cy="10" r="7" /> <line x1="21" y1="21" x2="15" y2="15" /> </svg> </i> </button> <a href="/signup/" class="btn signup-link btn--brand radius" data-portal="signup">Subscribe</a> <div class="member-menu js-member-menu"> <a href="/signup/" data-portal="signup" class="signup-link"> <i class="icon icon-arrow-up-right icon--sm"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-up-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <line x1="17" y1="7" x2="7" y2="17" /> <polyline points="8 7 17 7 17 16" /> </svg> </i>Sign up </a> <a href="/signin/" data-portal="signin" class="signin-link"> <i class="icon icon-login icon--sm"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-in"> <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path> <polyline points="10 17 15 12 10 7"></polyline> <line x1="15" y1="12" x2="3" y2="12"></line> </svg> </i>Sign in </a> </div> <button class="btn-toggle menu__toggle js-menu-open" type="button" title="Menu" aria-label="Menu"> <span></span> <span></span> </button> </div> </header> <div class="menu js-menu"> <div class="menu__header flex content-end"> <button class="btn-toggle menu__toggle is-active js-menu-close" type="button" title="Menu" aria-label="Menu"> <span></span> <span></span> </button> </div> <nav class="menu__navigation"> <ul class="nav"> <li class="nav-news" data-label="📰 News" data-length="7"> <a href="https://news.itsfoss.com/"> <span>📰 News</span> </a> </li> <li class="nav-newsletter" data-label="📬 Newsletter" data-length="13"> <a href="https://itsfoss.com/newsletter/"> <span>📬 Newsletter</span> </a> </li> <li class="nav-quizzes-puzzles" data-label="🧩 Quizzes & Puzzles" data-length="20"> <a href="https://itsfoss.com/quiz/"> <span>🧩 Quizzes & Puzzles</span> </a> </li> <li class="nav-resources" data-label="🎒 Resources" data-length="12"> <a href="https://itsfoss.com/resources/"> <span>🎒 Resources</span> </a> </li> <li class="nav-community" data-label="🏘️ Community" data-length="13"> <a href="https://itsfoss.community/"> <span>🏘️ Community</span> </a> </li> <li class="nav-about" data-label="📖 About" data-length="8"> <a href="https://itsfoss.com/about/"> <span>📖 About</span> </a> </li> <li class="nav-contact is-subitem" data-label="-🪪 Contact" data-length="11"> <a href="https://itsfoss.com/contact-us/"> <span>-🪪 Contact</span> </a> </li> <li class="nav-policies is-subitem" data-label="-📜 Policies" data-length="12"> <a href="https://itsfoss.com/policies/"> <span>-📜 Policies</span> </a> </li> </ul> <ul class="nav secondary submenu"> <li class="nav-linux-server-side" data-label="Linux Server Side" data-length="17"> <a href="https://linuxhandbook.com/"> <span>Linux Server Side</span> </a> </li> <li class="nav-en-espanol" data-label="En Español" data-length="10"> <a href="https://itsfoss.com/es/"> <span>En Español</span> </a> </li> <li class="nav-feedback" data-label="🗳️ Feedback" data-length="12"> <a href="https://itsfoss.com/update-feedback/"> <span>🗳️ Feedback</span> </a> </li> <li class="nav-impressum" data-label="Impressum" data-length="9"> <a href="https://itsfoss.com/impressum/"> <span>Impressum</span> </a> </li> <li class="nav-terms-of-use" data-label="Terms of use" data-length="12"> <a href="https://itsfoss.com/terms/"> <span>Terms of use</span> </a> </li> </ul> </nav> <div class="menu__actions flex w-100"> <a href="/signin/" data-portal="signin" class="btn signin-link btn--bordered radius m-r"> Log in </a> <a href="/signup/" data-portal="signup" class="btn signup-link btn--brand radius"> Subscribe </a> </div> <template data-toggle-template> <button class="submenu-toggle" onclick="this.parentNode.classList.toggle('is-active')" title="Menu toggle" aria-label="Menu toggle"> <i class="icon icon-chevron-down"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <polyline points="6 9 12 15 18 9"></polyline> </svg> </i> </button> </template> </div> <main class="main"> <div class="container wrapper m-0-auto"> <div class="post-hero is-post" data-feature-image="true" data-image-style="max-width"> <div class="post-hero__content flex flex-col"> <h1 class="post-hero__title">The Ultimate Guide to i3 Customization in Linux</h1> <div class="post-hero__excerpt text-acc">Learn about customizing your system's look and feel with i3 window manager in this super-detailed guide.</div> <div class="resource-rating"> <i class="icon icon-star icon--sm filled"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /> </svg> </i> <i class="icon icon-star icon--sm filled"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /> </svg> </i> <i class="icon icon-star icon--sm filled"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /> </svg> </i> <i class="icon icon-star icon--sm filled"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /> </svg> </i> <i class="icon icon-star icon--sm filled"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /> </svg> </i> </div> <div class="post-info text-acc m-t"> <ul class="post-info__avatars"> <li class="author-avatar has-image"> <a href="/author/sagar/" title="Sagar Sharma" aria-label="Sagar Sharma"> <picture class=""> <source data-srcset="/content/images/size/w30/format/webp/2022/12/Sagar-Sharma-new.jpg 30w,/content/images/size/w100/format/webp/2022/12/Sagar-Sharma-new.jpg 100w," data-sizes="auto" type="image/webp" > <img class="lazyload" data-srcset="/content/images/size/w30/2022/12/Sagar-Sharma-new.jpg 30w,/content/images/size/w100/2022/12/Sagar-Sharma-new.jpg 100w," srcset="/content/images/size/w30/2022/12/Sagar-Sharma-new.jpg" data-sizes="auto" data-src="/content/images/size/w100/2022/12/Sagar-Sharma-new.jpg" src="/content/images/size/w30/2022/12/Sagar-Sharma-new.jpg" alt="Sagar Sharma" > </picture> </a> </li> </ul> <div class="post-info__detail"> <span class="post-info__author"><a href="/author/sagar/">Sagar Sharma</a></span> <div class="post-info__dr"> <time datetime="2023-04-25">02 May 2023</time> <span class="post-info__readtime">29 min read</span> <a class="post-info__readtime" href="#fastcomments-widget"> <script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script> <div id="fastcomments-widget-comment-count"></div> <script> FastCommentsCommentCount(document.getElementById('fastcomments-widget-comment-count'), { tenantId: 'zzbYFZ39cH4', urlId: null }); </script> </a> </div> </div> </div> </div> </div> <div class="row m-b-lg"> <div class="col-xs-12 col-lg-3"> <div class="post-toc js-post-toc is-aside"> <div class="post-toc__header flex items-center"> <button class="post-toc__toggle js-toc-toggle"> <span class="m-r-sm uppercase">On this page</span> <i class="icon icon-list icon--sm"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-list" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <line x1="9" y1="6" x2="20" y2="6" /> <line x1="9" y1="12" x2="20" y2="12" /> <line x1="9" y1="18" x2="20" y2="18" /> <line x1="5" y1="6" x2="5" y2="6.01" /> <line x1="5" y1="12" x2="5" y2="12.01" /> <line x1="5" y1="18" x2="5" y2="18.01" /> </svg> </i> </button> </div> <div class="post-toc__content js-toc"></div> <div class="hide-mobile"> <div align="center" data-freestar-ad="__336x280 __336x280" id="itsfoss_300x250_300x600_Sidebar3_new" style="margin-top:5px"> <script data-cfasync="false" type="text/javascript"> freestar.config.enabled_slots.push({ placementName: "itsfoss_300x250_300x600_Sidebar3_new", slotId: "itsfoss_300x250_300x600_Sidebar3_new" }); </script> </div> </div> </div> </div> <div class="col-xs-12 col-lg-6"> <article class="post tag-customization tag-guides tag-hash-collection content post-access-public no-overflow"> <div class="hide-mobile">  <div id="FreeStarVideoAdContainer"> <div id="freestar-video-parent"> <div id="freestar-video-child"></div> </div> </div>  </div> <a href="https://www.warp.dev?utm_source=its_foss&utm_medium=display&utm_campaign=linux_launch" target="_blank"><img src="/assets/images/warp.webp" alt="Warp Terminal"></a> <p>You might have come across dope screenshots (especially via <code>r/unixporn</code> Subreddit), where users customize their desktops to their heart's desire and share it with the world. Linux lets you customize every aspect of your desktop experience, which is why it is possible.</p><p>And, the result? Something that<strong> feels and looks way better than any Mac or Windows system.</strong></p><p>Just look at this 😌</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://itsfoss.com/content/images/2023/04/linux-mint-i3.jpg" class="kg-image" alt loading="lazy" width="1530" height="857" srcset="https://itsfoss.com/content/images/size/w600/2023/04/linux-mint-i3.jpg 600w, https://itsfoss.com/content/images/size/w1000/2023/04/linux-mint-i3.jpg 1000w, https://itsfoss.com/content/images/2023/04/linux-mint-i3.jpg 1530w" sizes="(min-width: 720px) 720px"><figcaption>Image Credits: <a href="https://www.reddit.com/r/unixporn/comments/vkcasz/i3gaps_i_prefer_light_mode/">Reddit</a></figcaption></figure><p><strong>Does it look like a Linux Mint system? </strong>😲</p><p>But how can you achieve something like that? <strong>It is tough to customize</strong> the look of your Linux desktop.</p><p>The answer to your questions lies in the<strong> window manager. </strong>If you can configure a window manager, you can customize the look.</p><p>For this guide, I will walk you through a basic configuration you can do with the <strong>i3 window manager. </strong>It is one of the <a href="https://itsfoss.com/best-window-managers/">best window managers for Linux</a>.</p><div class="kg-card kg-callout-card kg-callout-card-green"><div class="kg-callout-emoji">💡</div><div class="kg-callout-text">"Rice" is a word commonly used to refer to making visual improvements and customizations on one's desktop.<br><br><strong>Via</strong> <a href="https://www.reddit.com/r/unixporn" rel="nofollow">/r/unixporn</a></div></div><p>Things you should know before following this guide:</p><ul><li>In this guide,<strong> I will use Arch Linux</strong> to demonstrate the steps, but you can use any of your preferred distros and have the same result.</li><li>Remember, this guide will be a basic foundation for the <strong>i3 ricing</strong>.</li></ul><p>And here's the result of what you should expect after following this guide:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://itsfoss.com/content/images/2023/04/How-to-configure-i3-window-manager-with-i3blocks-and-i3gaps-in-linux.png" class="kg-image" alt="How to configure i3 window manager with i3blocks and i3gaps in linux" loading="lazy" width="1942" height="1102" srcset="https://itsfoss.com/content/images/size/w600/2023/04/How-to-configure-i3-window-manager-with-i3blocks-and-i3gaps-in-linux.png 600w, https://itsfoss.com/content/images/size/w1000/2023/04/How-to-configure-i3-window-manager-with-i3blocks-and-i3gaps-in-linux.png 1000w, https://itsfoss.com/content/images/size/w1600/2023/04/How-to-configure-i3-window-manager-with-i3blocks-and-i3gaps-in-linux.png 1600w, https://itsfoss.com/content/images/2023/04/How-to-configure-i3-window-manager-with-i3blocks-and-i3gaps-in-linux.png 1942w" sizes="(min-width: 720px) 720px"><figcaption>(Click to enlarge image)</figcaption></figure><div class="kg-card kg-callout-card kg-callout-card-yellow"><div class="kg-callout-emoji">📥</div><div class="kg-callout-text">To save you time, I have uploaded all the i3 config files related to the article on <a href="https://github.com/itsfoss/text-files/tree/master/i3_config_files">GitHub</a>, with which you can achieve the final look of what we intend from this article.</div></div><div class="kg-card kg-button-card kg-align-center"><a href="https://github.com/itsfoss/text-files/tree/master/i3_config_files" class="kg-btn kg-btn-accent">Download i3 Config Files</a></div><p><strong>First,</strong> let's start with installing the <strong>i3 window manager</strong>.</p><h2 id="install-i3-window-manager-on-linux">Install i3 Window Manager on Linux</h2><p>For <strong>Ubuntu/Debian</strong> base:</p><pre><code>sudo apt install xorg lightdm lightdm-gtk-greeter i3-wm i3lock i3status i3blocks dmenu terminator</code></pre><p>For <strong>Arch Linux</strong>:</p><pre><code>sudo pacman -S xorg lightdm lightdm-gtk-greeter i3-wm i3lock i3status i3blocks dmenu terminator</code></pre><p>Once you are done with the installation, enable the lightdm service using the following command:</p><pre><code>sudo systemctl enable lightdm.service</code></pre><p>And start the lightdm service:</p><pre><code>sudo systemctl start lightdm.service</code></pre><p>That will start the lightdm greeter that will ask you to enter the password for your username.</p><p>And if you have multiple desktop environments installed, you can choose i3 from the selection menu:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/use-lightdm-to-use-the-i3-wm-in-arch.png" class="kg-image" alt="use lightdm to use the i3 wm in arch" loading="lazy" width="820" height="638" srcset="https://itsfoss.com/content/images/size/w600/2023/04/use-lightdm-to-use-the-i3-wm-in-arch.png 600w, https://itsfoss.com/content/images/2023/04/use-lightdm-to-use-the-i3-wm-in-arch.png 820w" sizes="(min-width: 720px) 720px"></figure><p>Once you log in to your first i3 instance, it will ask you whether you want to create an i3 config file.</p><p>Press <code>Enter</code> to create a new i3 config file:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://itsfoss.com/content/images/2023/04/create-configuration-file-for-i3.png" class="kg-image" alt="generate I3 cofig file" loading="lazy" width="902" height="644" srcset="https://itsfoss.com/content/images/size/w600/2023/04/create-configuration-file-for-i3.png 600w, https://itsfoss.com/content/images/2023/04/create-configuration-file-for-i3.png 902w" sizes="(min-width: 720px) 720px"><figcaption>Click to enlarge the image</figcaption></figure><p>Next, it will ask you to choose between <code>Win</code> and <code>Alt</code> key, which should behave as <code>mod</code> key.</p><p>I would recommend you go with the <code>Win</code> (or the Super) key as most of the users are already used to it for shortcuts:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/choose-the-mod-key-in-i3.png" class="kg-image" alt loading="lazy" width="902" height="644" srcset="https://itsfoss.com/content/images/size/w600/2023/04/choose-the-mod-key-in-i3.png 600w, https://itsfoss.com/content/images/2023/04/choose-the-mod-key-in-i3.png 902w" sizes="(min-width: 720px) 720px"></figure><p>And your i3 window manager is ready to use. </p><p>But before we jump to the customization part, let me walk you through how you can use the i3 in the first place.</p><h2 id="keybindings-of-i3-window-manager">Keybindings of i3 Window Manager </h2><p>So let's start with the basics. </p><p>The basic functionality of the window manager is to frame multiple windows horizontally and vertically, so you can monitor multiple processes simultaneously.</p><p>And the result looks like this:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/Using-I3-on-arch-linux.png" class="kg-image" alt="using i3 on arch linux" loading="lazy" width="1942" height="1101" srcset="https://itsfoss.com/content/images/size/w600/2023/04/Using-I3-on-arch-linux.png 600w, https://itsfoss.com/content/images/size/w1000/2023/04/Using-I3-on-arch-linux.png 1000w, https://itsfoss.com/content/images/size/w1600/2023/04/Using-I3-on-arch-linux.png 1600w, https://itsfoss.com/content/images/2023/04/Using-I3-on-arch-linux.png 1942w" sizes="(min-width: 720px) 720px"></figure><p>You can do a lot more than this using the following keybindings:</p><table> <thead> <tr> <th>Keybiding</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>Mod + Enter</code></td> <td>Open terminal.</td> </tr> <tr> <td><code>Mod + ←</code></td> <td>Focus left.</td> </tr> <tr> <td><code>Mod + →</code></td> <td>Focus right.</td> </tr> <tr> <td><code>Mod + ↑</code></td> <td>Focus up.</td> </tr> <tr> <td><code>Mod + ↓</code></td> <td>Focus down.</td> </tr> <tr> <td><code>Mod + Shift + ←</code></td> <td>Move the window to the left side.</td> </tr> <tr> <td><code>Mod + Shift + →</code></td> <td>Move the window to the right side.</td> </tr> <tr> <td><code>Mod + Shift + ↑</code></td> <td>Move the window up.</td> </tr> <tr> <td><code>Mod + Shift + ↓</code></td> <td>Move the window down.</td> </tr> <tr> <td><code>Mod + f</code></td> <td>Toggle the focused window to full-screen.</td> </tr> <tr> <td><code>Mod + v</code></td> <td>The next window will be placed vertically.</td> </tr> <tr> <td><code>Mod + h</code></td> <td>The next window will be placed horizontally.</td> </tr> <tr> <td><code>Mod + s</code></td> <td>Enables the stacked window layout.</td> </tr> <tr> <td><code>Mod + w</code></td> <td>Enables the tabbed window layout.</td> </tr> <tr> <td><code>Mod + Shift + Space</code></td> <td>Enables the floating window (for focused window).</td> </tr> <tr> <td><code>Mod + Left-mouse-click</code></td> <td>Drag the entire window using the mouse.</td> </tr> <tr> <td><code>Mod + 0-9</code></td> <td>Switch to another workspace.</td> </tr> <tr> <td><code>Mod + Shift + 0-9</code></td> <td>Move the window to another workspace.</td> </tr> <tr> <td><code>Mod + d</code></td> <td>Open the application launcher (D menu).</td> </tr> <tr> <td><code>Mod + Shift + q</code></td> <td>Kills the focused window.</td> </tr> <tr> <td><code>Mod + Shift + c</code></td> <td>Reloads the I3 config file.</td> </tr> <tr> <td><code>Mod + Shift + r</code></td> <td>Restart the I3 WM.</td> </tr> <tr> <td><code>Mod + Shift + e</code></td> <td>Exit I3 WM.</td> </tr> </tbody> </table><p>I know an overwhelming number of keybindings are available, but if you practice them daily, you'll get used to them in no time.</p><p>And if you are wondering, you can change the keybindings at your convenience, which I will share in the later part of this guide.</p><p>Now, let's have a look at the configuration part.</p><h2 id="enable-aur-in-arch-linux">Enable AUR in Arch Linux</h2><p>So if you have a fresh installation of Arch Linux, you may not have enabled the AUR. </p><p>This means you are missing out on the most crucial feature of the Arch.</p><p>To <a href="https://itsfoss.com/aur-arch-linux/">enable the AUR</a>, you'd need AUR to utilize the AUR package helper. Here, I will be using the yay. </p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://itsfoss.com/aur-arch-linux/"><div class="kg-bookmark-content"><div class="kg-bookmark-title">What is Arch User Repository (AUR)? How to Use AUR on Arch and Manjaro Linux?</div><div class="kg-bookmark-description">What is AUR in Arch Linux? How do I use AUR? Is it safe to use? This article explains it all.</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://itsfoss.com/content/images/size/w256h256/2022/12/android-chrome-192x192.png" alt=""><span class="kg-bookmark-author">It's FOSS</span><span class="kg-bookmark-publisher">Dimitrios</span></div></div><div class="kg-bookmark-thumbnail"><img src="https://itsfoss.com/content/images/wordpress/2020/04/what-is-aur.png" alt=""></div></a></figure><p>First, install the git:</p><pre><code>sudo pacman -S git</code></pre><p>Now, clone the yay repository and change your directory to yay:</p><pre><code>git clone https://aur.archlinux.org/yay-git.git && cd yay</code></pre><p>And finally, build the package:</p><pre><code>makepkg -si</code></pre><p>There are some other <a href="https://itsfoss.com/best-aur-helpers/">AUR package helpers</a> like Paru, so if you want to use something else apart from yay, you can proceed, or explore other options.</p><h2 id="change-resolution-of-i3-wm">Change resolution of i3 WM</h2><p>You will face issues, especially if you are using a virtual machine for window manager where the display resolution may be locked at <code>1024x768</code>, as is in my case.</p><p>So you will have to execute the following command by specifying the desired display resolution:</p><pre><code>xrandr --output [Display_name] --mode [resolution]</code></pre><p>To find the name of the connected display, you will have to use the xrandr command in the following manner:</p><pre><code>xrandr | grep -w 'connected'</code></pre><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/find-connected-display-in-I3.png" class="kg-image" alt="find connected display in I3" loading="lazy" width="1004" height="148" srcset="https://itsfoss.com/content/images/size/w600/2023/04/find-connected-display-in-I3.png 600w, https://itsfoss.com/content/images/size/w1000/2023/04/find-connected-display-in-I3.png 1000w, https://itsfoss.com/content/images/2023/04/find-connected-display-in-I3.png 1004w" sizes="(min-width: 720px) 720px"></figure><p>In my case, it is <code>Virtual-1</code>.</p><p>So if I want to change the resolution to <code>1920*1080</code>, I will have to execute the following:</p><pre><code>xrandr --output Virtual-1 --mode 1920x1080</code></pre><p><strong>But this will only work temporarily</strong>. To make it permanent, you will have to make changes in the i3 config file. </p><p>First, open the config file:</p><pre><code>nano ~/.config/i3/config</code></pre><p><a href="https://linuxhandbook.com/beginning-end-file-nano/">Go to the end of the file in nano</a> by pressing <code>Alt + /</code> and use the following syntax to change the display resolution permanently:</p><pre><code># Display Resolution exec_always xrandr --output [Display_name] --mode [Resolution]</code></pre><p>The result should look like this:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/change-display-resolution-in-I3-permanently.png" class="kg-image" alt="change display resolution in I3 permanently" loading="lazy" width="1097" height="215" srcset="https://itsfoss.com/content/images/size/w600/2023/04/change-display-resolution-in-I3-permanently.png 600w, https://itsfoss.com/content/images/size/w1000/2023/04/change-display-resolution-in-I3-permanently.png 1000w, https://itsfoss.com/content/images/2023/04/change-display-resolution-in-I3-permanently.png 1097w" sizes="(min-width: 720px) 720px"></figure><p>Once done, <a href="https://linuxhandbook.com/nano-save-exit/">save changes and exit from the nano</a> text editor. </p><p>Now, restart the i3 WM using the <code>Mod + Shift + r</code> to take effect from the changes you've made to the config file and that's it!</p><h2 id="change-wallpaper-in-the-i3-window-manager">Change wallpaper in the i3 Window manager </h2><p>By default, i3 will look dated, and you may want to switch back to your previous desktop environment.</p><p>But by changing the wallpaper itself, you can start changing the whole vibe of the system.</p><p>And there are various ways to change the wallpaper in i3, but here, I will be showing you how you can use the <strong><code>feh</code> utility.</strong></p><p>First, let's start with the installation itself:</p><p>For <strong>Arch-based distros:</strong></p><pre><code>sudo pacman -S feh</code></pre><p>For <strong>Ubuntu/Debian based-distros:</strong></p><pre><code>sudo apt install feh</code></pre><p>Once done, you can download your favorite wallpaper from the internet. Next, <strong>open the i3 config file:</strong></p><pre><code>nano ~/.config/i3/config</code></pre><p>Go to the end of the file and use the feh command as mentioned:</p><pre><code># Display Wallpaper exec_always feh --bg-fill /path/to/wallpaper</code></pre><p>In my case, the wallpaper was in the <code>Downloads</code> directory, so my command would look like this:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/Use-feh-utility-to-change-background-in-I3-window-manager.png" class="kg-image" alt="Use feh utility to change background in I3 window manager" loading="lazy" width="823" height="216" srcset="https://itsfoss.com/content/images/size/w600/2023/04/Use-feh-utility-to-change-background-in-I3-window-manager.png 600w, https://itsfoss.com/content/images/2023/04/Use-feh-utility-to-change-background-in-I3-window-manager.png 823w" sizes="(min-width: 720px) 720px"></figure><p>Save changes and exit from the nano text editor.</p><p>To take effect from the changes you made to the config file, restart the i3 window manager using <code>Mod + Shift + r</code>.</p><p>Mine looks like this:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/change-wallpaper-in-I3-window-manager.png" class="kg-image" alt="change wallpaper in the I3 window manager" loading="lazy" width="1942" height="1101" srcset="https://itsfoss.com/content/images/size/w600/2023/04/change-wallpaper-in-I3-window-manager.png 600w, https://itsfoss.com/content/images/size/w1000/2023/04/change-wallpaper-in-I3-window-manager.png 1000w, https://itsfoss.com/content/images/size/w1600/2023/04/change-wallpaper-in-I3-window-manager.png 1600w, https://itsfoss.com/content/images/2023/04/change-wallpaper-in-I3-window-manager.png 1942w" sizes="(min-width: 720px) 720px"></figure><h2 id="customize-i3-lock-screen">Customize i3 lock screen </h2><p>By default, if you want to lock the system, you will have to execute the following command:</p><pre><code>i3lock </code></pre><p>And the lock screen looks like this:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/how-to-lock-the-I3-window-manager.gif" class="kg-image" alt="lock the i3 window manager" loading="lazy" width="1207" height="822" srcset="https://itsfoss.com/content/images/size/w600/2023/04/how-to-lock-the-I3-window-manager.gif 600w, https://itsfoss.com/content/images/size/w1000/2023/04/how-to-lock-the-I3-window-manager.gif 1000w, https://itsfoss.com/content/images/2023/04/how-to-lock-the-I3-window-manager.gif 1207w" sizes="(min-width: 720px) 720px"></figure><p>So here, I will show you:</p><ul><li><strong>How to create a custom shortcut to lock the i3 session</strong></li><li><strong>How to change the lock screen wallpaper </strong></li></ul><p>To make the lock screen beautiful, you'd have to use the <code>i3lock-color</code> package.</p><p>But first, you'd have to remove the existing <code>i3lock</code> as it will conflict with the <code>i3lock-color</code>:</p><p>To remove it from Arch:</p><pre><code>sudo pacman -R i3lock</code></pre><p>For Ubuntu/Debian users:</p><pre><code>sudo apt remove i3lock</code></pre><p>Once done, you can install the <code>i3lock-color</code> using the AUR helper:</p><pre><code>yay i3lock-color</code></pre><p>And if you're on an Ubuntu base, you'd have to build it from scratch. You can find <a href="https://github.com/Raymo111/i3lock-color">detailed instructions on their GitHub page</a>.</p><p>Once you are done with the installation, let's create a new directory and make a new file to store the configuration for the lock screen:</p><pre><code>mkdir ~/.config/scripts && nano ~/.config/scripts/lock</code></pre><p>And paste the following file contents to define the lock screen styling:</p><pre><code>#!/bin/sh BLANK='#00000000' CLEAR='#ffffff22' DEFAULT='#00897bE6' TEXT='#00897bE6' WRONG='#880000bb' VERIFYING='#00564dE6' i3lock \ --insidever-color=$CLEAR \ --ringver-color=$VERIFYING \ \ --insidewrong-color=$CLEAR \ --ringwrong-color=$WRONG \ \ --inside-color=$BLANK \ --ring-color=$DEFAULT \ --line-color=$BLANK \ --separator-color=$DEFAULT \ \ --verif-color=$TEXT \ --wrong-color=$TEXT \ --time-color=$TEXT \ --date-color=$TEXT \ --layout-color=$TEXT \ --keyhl-color=$WRONG \ --bshl-color=$WRONG \ \ --screen 1 \ --blur 9 \ --clock \ --indicator \ --time-str="%H:%M:%S" \ --date-str="%A, %Y-%m-%d" \ --keylayout 1 \</code></pre><p>Save changes and exit from the text editor.</p><div class="kg-card kg-callout-card kg-callout-card-blue"><div class="kg-callout-emoji">📋</div><div class="kg-callout-text">You can find a variety of bash scripts online for different i3 lock screen styles. This is just an example, which should be a minimal option for most.</div></div><p>Now, make this file executable <a href="https://linuxhandbook.com/chmod-command/">using the chmod command</a>:</p><pre><code>sudo chmod +x .config/scripts/lock</code></pre><p>Next, you'd have to introduce some changes to the config file to add the path to this config file to make it work.</p><p>Furthermore, here's where I will show you how you can use the custom keyboard shortcut for the lock screen.</p><p>First, open the config file:</p><pre><code>nano ~/.config/i3/config</code></pre><p>Jump to the end of the line using <code>Alt + /</code> and paste the following lines:</p><pre><code># Shortcut for Lockscreen bindsym $mod+x exec /home/$USER/.config/scripts/lock</code></pre><p>In the above, I have used <code>mod + x</code> as a shortcut to lock the screen, you can use any of your preferred ones.</p><p>And the end would look like this:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/how-to-use-i3lock-color-in-arch-linux-1.png" class="kg-image" alt="how to use i3lock color in arch linux" loading="lazy" width="1942" height="1102" srcset="https://itsfoss.com/content/images/size/w600/2023/04/how-to-use-i3lock-color-in-arch-linux-1.png 600w, https://itsfoss.com/content/images/size/w1000/2023/04/how-to-use-i3lock-color-in-arch-linux-1.png 1000w, https://itsfoss.com/content/images/size/w1600/2023/04/how-to-use-i3lock-color-in-arch-linux-1.png 1600w, https://itsfoss.com/content/images/2023/04/how-to-use-i3lock-color-in-arch-linux-1.png 1942w" sizes="(min-width: 720px) 720px"></figure><p>Pretty neat. Isn't it?</p><h2 id="change-theme-and-icons-in-the-i3-window-manager">Change theme and icons in the i3 Window manager</h2><p>I know what you might be thinking. </p><p>Why would you need icons in the first place? But you don't need only to be using CLI tools with the window manager.</p><p>There are times when opting for GUI is more convenient, such as using a file manager. So, when dealing with such utilities, you want to make it look better (and prettier?)</p><p>So in this section, I will show you:</p><ul><li><strong>How to change the theme in i3</strong></li><li><strong>How to change the icons in i3</strong></li></ul><p>Let's start with the installation of the theme.</p><p>Here, I will be using the <code>materia-gtk-theme</code> and <code>papirus</code> icons. But you can use any of your preferred ones.</p><p>To install the theme in Arch, use the following:</p><pre><code>sudo pacman -S materia-gtk-theme papirus-icon-theme</code></pre><p>For Ubuntu/Debian base:</p><pre><code>sudo apt install materia-gtk-theme papirus-icon-theme</code></pre><p>But installing won't get the job done. <strong>You'd have to apply the theme as you use the GNOME tweaks to change the theme.</strong></p><p><strong>In i3, you can use the lxappearance utility</strong> to change the theme and icons. </p><p>To install lxappearance in Arch, use the following:</p><pre><code>sudo pacman -S lxappearance</code></pre><p>For Ubuntu/Debian base:</p><pre><code>sudo apt install lxappearance</code></pre><p>Once you are done with the installation, start the dmenu using <code>Mod + d</code> and type <strong>lxappearance, </strong>and hit enter on the first result.</p><p>Here, choose the theme of your liking. I'm going with the <code>Materia-dark</code> here.</p><p>Select the theme and click on the apply button to apply the changes:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/Change-theme-in-I3-window-manager-using-lxappearance.png" class="kg-image" alt loading="lazy" width="759" height="580" srcset="https://itsfoss.com/content/images/size/w600/2023/04/Change-theme-in-I3-window-manager-using-lxappearance.png 600w, https://itsfoss.com/content/images/2023/04/Change-theme-in-I3-window-manager-using-lxappearance.png 759w" sizes="(min-width: 720px) 720px"></figure><p>Similarly, to change the icon, select the <code>Icon Theme</code>, choose the icon theme and hit the apply button:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/Change-icons-in-I3-window-manager-using-lxappearance.png" class="kg-image" alt="Change icons in I3 window manager using lxappearance" loading="lazy" width="759" height="580" srcset="https://itsfoss.com/content/images/size/w600/2023/04/Change-icons-in-I3-window-manager-using-lxappearance.png 600w, https://itsfoss.com/content/images/2023/04/Change-icons-in-I3-window-manager-using-lxappearance.png 759w" sizes="(min-width: 720px) 720px"></figure><p>After applying the theme and icons, my file manager looks like this:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/change-theme-and-icon-in-i3-window-manager.png" class="kg-image" alt="change theme and icon in i3 window manager" loading="lazy" width="867" height="413" srcset="https://itsfoss.com/content/images/size/w600/2023/04/change-theme-and-icon-in-i3-window-manager.png 600w, https://itsfoss.com/content/images/2023/04/change-theme-and-icon-in-i3-window-manager.png 867w" sizes="(min-width: 720px) 720px"></figure><h2 id="set-icons-for-workspaces-in-the-i3-window-manager">Set icons for workspaces in the i3 window manager</h2><p>By default, the workspaces are indicated by numbers only, which is not the most ideal way you want to use the workspace.</p><p>So in this section, I will walk you through how you can change the name of the workspaces with appropriate icons.</p><p>To use the icons in the config file, first, you will have to install new fonts named <code>Awesome</code>:</p><p>For Arch-based distros:</p><pre><code>sudo pacman -S ttf-font-awesome</code></pre><p>For Ubuntu/Debian base:</p><pre><code>sudo apt install fonts-font-awesome</code></pre><p>Once done, open the i3 config file:</p><pre><code>nano ~/.config/i3/config</code></pre><p>In this config file, look for the workspace section where you will be given variables for each workspace:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/workspace-variables-in-I3-config-file.png" class="kg-image" alt="workspace variables in I3 config file" loading="lazy" width="828" height="493" srcset="https://itsfoss.com/content/images/size/w600/2023/04/workspace-variables-in-I3-config-file.png 600w, https://itsfoss.com/content/images/2023/04/workspace-variables-in-I3-config-file.png 828w" sizes="(min-width: 720px) 720px"></figure><p>In this section, you must interchange the number given to the workspace with what you want to name it. </p><p>I will be naming it as programs as <strong>in the later part of this tutorial, I will show how you can allocate the specific workspace to the specific application. </strong></p><p>I mostly use the first 5 workspaces, so I will name them accordingly:</p><pre><code># Define names for default workspaces for which we configure key bindings later on. # We use variables to avoid repeating the names in multiple places. set $ws1 "1: Terminal" set $ws2 "2: Firefox" set $ws3 "3: VMWare" set $ws4 "4: Spotify" set $ws5 "5: Shutter" set $ws6 "6" set $ws7 "7" set $ws8 "8" set $ws9 "9" set $ws10 "10" </code></pre><p>Now let's add the icons for each application mentioned in the config file.</p><p>You can <a href="https://fontawesome.com/v5/cheatsheet">refer to the cheatsheet of the awesome font</a> to find the appropriate icon.</p><p>Copy and paste the icons in front of the name: </p><pre><code># Define names for default workspaces for which we configure key bindings later> # We use variables to avoid repeating the names in multiple places. set $ws1 "1: Terminal" set $ws2 "2: Firefox" set $ws3 "3: VMWare" set $ws4 "4: Spotify" set $ws5 "5: Shutter" set $ws6 "6" set $ws7 "7" set $ws8 "8" set $ws9 "9" set $ws10 "10"</code></pre><p>Don't worry if it looks horrific!</p><p>Once done, exit i3 using the <code>Mod + e</code> and log back in again to take effect from the changes you've just made.</p><p>Mine looks like this:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/workspace-icons.png" class="kg-image" alt loading="lazy" width="642" height="172" srcset="https://itsfoss.com/content/images/size/w600/2023/04/workspace-icons.png 600w, https://itsfoss.com/content/images/2023/04/workspace-icons.png 642w"></figure><p>Do fonts look too small? It's time to address this!</p><h2 id="change-the-font-of-the-title-window-and-bar-in-the-i3">Change the font of the title window and bar in the i3 </h2><p>First, let's install new fonts. (I will be using Ubuntu fonts here).</p><p>To install the Ubuntu fonts in Arch, use the following:</p><pre><code>sudo pacman -S ttf-ubuntu-font-family</code></pre><p>And if you are on Ubuntu, you already have them installed!</p><p>Once done, open the config file:</p><pre><code>nano ~/.config/i3/config</code></pre><p>In the config file, look for the <code>font pango:monospace 8</code> line as this is the default font.</p><p>Once you find that line, add the name of the font and size as shown:</p><pre><code>font pango:Ubuntu Regular 14</code></pre><p>Now, restart the window manager using the <code>Mod + Shift + r</code> and that should do the job:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://itsfoss.com/content/images/2023/04/change-font-of-the-workspace-and-titlebar-in-I3-window-manager.png" class="kg-image" alt loading="lazy" width="1942" height="1101" srcset="https://itsfoss.com/content/images/size/w600/2023/04/change-font-of-the-workspace-and-titlebar-in-I3-window-manager.png 600w, https://itsfoss.com/content/images/size/w1000/2023/04/change-font-of-the-workspace-and-titlebar-in-I3-window-manager.png 1000w, https://itsfoss.com/content/images/size/w1600/2023/04/change-font-of-the-workspace-and-titlebar-in-I3-window-manager.png 1600w, https://itsfoss.com/content/images/2023/04/change-font-of-the-workspace-and-titlebar-in-I3-window-manager.png 1942w" sizes="(min-width: 720px) 720px"><figcaption>Click to enlarge image</figcaption></figure><h2 id="allocate-applications-to-workspaces-in-the-i3-window-manager">Allocate applications to workspaces in the i3 window manager </h2><p>After naming the workspaces, you will want to allocate specific software to that workspace.</p><p>Such as, if I named my second workspace Firefox then I would want to use Firefox only inside that workspace.</p><p>So how do you do that?</p><p>To do so, you must find the name of the class of each application you want to allocate.</p><p><strong>Sounds complex?</strong> Let me tell you how to do so.</p><p>First, run start the application and terminal side by side. For example, here, I opened the Firefox and terminal side by side:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/open-application-and-terminal-side-by-side.png" class="kg-image" alt="open application and terminal side by side" loading="lazy" width="1725" height="571" srcset="https://itsfoss.com/content/images/size/w600/2023/04/open-application-and-terminal-side-by-side.png 600w, https://itsfoss.com/content/images/size/w1000/2023/04/open-application-and-terminal-side-by-side.png 1000w, https://itsfoss.com/content/images/size/w1600/2023/04/open-application-and-terminal-side-by-side.png 1600w, https://itsfoss.com/content/images/2023/04/open-application-and-terminal-side-by-side.png 1725w" sizes="(min-width: 720px) 720px"></figure><p>Now, execute the xprop command in the terminal, and it will change the cursor shape:</p><pre><code>xprop</code></pre><p>Next, hover the cursor on the application and click anywhere inside the application window as shown:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/find-the-class-name-in-i3-window-manager.gif" class="kg-image" alt="find the class name in i3 window manager" loading="lazy" width="1696" height="538" srcset="https://itsfoss.com/content/images/size/w600/2023/04/find-the-class-name-in-i3-window-manager.gif 600w, https://itsfoss.com/content/images/size/w1000/2023/04/find-the-class-name-in-i3-window-manager.gif 1000w, https://itsfoss.com/content/images/size/w1600/2023/04/find-the-class-name-in-i3-window-manager.gif 1600w, https://itsfoss.com/content/images/2023/04/find-the-class-name-in-i3-window-manager.gif 1696w" sizes="(min-width: 720px) 720px"></figure><p>The class name will be found in the last sting of characters in the following line:</p><pre><code>WM_CLASS(STRING) = "Navigator", "firefox"</code></pre><p>In my case, the class name for the Firefox browser will be <code>firefox</code>.</p><p>Repeat the process for all the applications you want to allocate to workspaces.</p><p><strong>Once you know the class names for every application you want to allocate a workspace, open the configuration file:</strong></p><pre><code>nano ~/.config/i3/config</code></pre><p>Go to the end of the file in the nano using <code>Alt + /</code> and use the following syntax to allocate the applications to the workspace:</p><pre><code># Allocate applications to workspaces for_window [class="class_name"] move to workspace $[workspace_variable]</code></pre><p>For reference, here's how my config looks like after allocating 4 workspaces to different applications:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/Allocate-specific-applications-to-specific-workspaces-in-I3-window-manager.png" class="kg-image" alt="Allocate applications to workspaces" loading="lazy" width="901" height="278" srcset="https://itsfoss.com/content/images/size/w600/2023/04/Allocate-specific-applications-to-specific-workspaces-in-I3-window-manager.png 600w, https://itsfoss.com/content/images/2023/04/Allocate-specific-applications-to-specific-workspaces-in-I3-window-manager.png 901w" sizes="(min-width: 720px) 720px"></figure><p>And now, if you open any application from any workspace, it will be placed in to configured workspace automatically. Pretty handy! 😊</p><h2 id="make-the-terminal-transparent-in-the-i3-window-manager">Make the terminal transparent in the i3 window manager</h2><p>To enable transparency, you must install a picom compositor and make a few changes to the config file.</p><p>So let's start with the installation. </p><p>For Arch-based distro:</p><pre><code>sudo pacman -S picom</code></pre><p>For Ubuntu/Debian base:</p><pre><code>sudo apt install picom</code></pre><p>After the installation, you'd need to instruct the system to use the picom.</p><p>So open the config file first:</p><pre><code>nano ~/.config/i3/config</code></pre><p>Go to the end of the line in the config file and paste the following line:</p><pre><code># Transparency with picom compositor exec_always picom -f</code></pre><p>Here, I have used the <code>-f</code> flag is used to enable the fading effect while switching between workspaces, opening new applications, etc.</p><p>Save and exit from the text editor.</p><p>Now, restart i3 using <code>Mod + Shift + r</code>.</p><p>Next, open the terminal, open Preference, and now, click on the Profiles, select Background, and select the <code>Transparent background</code> option.</p><p>From here, you can choose the transparency:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/change-terminal-background-transperency-in-I3-window-manager.png" class="kg-image" alt="change terminal background transperency in I3 window manager" loading="lazy" width="1014" height="805" srcset="https://itsfoss.com/content/images/size/w600/2023/04/change-terminal-background-transperency-in-I3-window-manager.png 600w, https://itsfoss.com/content/images/size/w1000/2023/04/change-terminal-background-transperency-in-I3-window-manager.png 1000w, https://itsfoss.com/content/images/2023/04/change-terminal-background-transperency-in-I3-window-manager.png 1014w" sizes="(min-width: 720px) 720px"></figure><h2 id="customize-the-status-bar-in-the-i3-wm">Customize the status bar in the i3 WM</h2><p>By default, the status bar shows all sorts of information with no icons.</p><p>So in this section, I will be showing how you can remove some elements from the status bar and how you can add icons to them.</p><p>But here, I will be creating a copy of the original status bar available in <code>/etc/i3status.conf</code> as if you make any mistake, you can always roll back to the default one.</p><p>First, create a new directory inside the <code>.config</code> using the following:</p><pre><code>mkdir .config/i3status</code></pre><p>In the following command, I've used <a href="https://linuxhandbook.com/cp-command/">the cp command to copy files</a>:</p><pre><code>sudo cp /etc/i3status.conf ~/.config/i3status/i3status.conf</code></pre><p>Next, <a href="https://linuxhandbook.com/chown-command/">change the ownership using the chown command</a> which will allow you to make desired changes:</p><pre><code>sudo chown $USER:$USER ~/.config/i3status/i3status.conf</code></pre><p>Now, you must instruct the window manager to use the new i3status config file by modifying the i3 config. So first, open the config file:</p><pre><code>nano ~/.config/i3/config</code></pre><p>In this config file look for the <code>status_command i3status</code> line. This is the line where you will be providing the path to the new status config file.</p><p>Once you find that line, make the following changes:</p><pre><code>bar { status_command i3status -c /home/$USER/.config/i3status/i3status.conf }</code></pre><p>So, the end result should look like this:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/change-the-path-of-the-i3-status-config-in-I3-window-manager.png" class="kg-image" alt="change the path of the i3 status config in I3 window manager" loading="lazy" width="896" height="201" srcset="https://itsfoss.com/content/images/size/w600/2023/04/change-the-path-of-the-i3-status-config-in-I3-window-manager.png 600w, https://itsfoss.com/content/images/2023/04/change-the-path-of-the-i3-status-config-in-I3-window-manager.png 896w" sizes="(min-width: 720px) 720px"></figure><p>Save changes and exit from the text editor.</p><p>Now, let's remove the unnecessary indicators from the status bar.</p><p>To do so, first, open the i3status config file:</p><pre><code>nano .config/i3status/i3status.conf</code></pre><p>Here, you can comment out the names starting with "order" which are nothing but variables for the indicator.</p><p><strong>For example, here</strong>, I disabled <code>ipv6</code>, <code>wireless _first_</code>, <code>battery all</code> and <code>load</code> as they were unnecessary for me:</p><pre><code>#order += "ipv6" #order += "wireless _first_" order += "ethernet _first_" #order += "battery all" order += "disk /" #order += "load" order += "memory" order += "tztime local"</code></pre><p>Now, <a href="https://fontawesome.com/v5/cheatsheet">open the awesome font cheat sheet</a> in the browser and find relevant icons for the items that are listed in the status bar.</p><p>In my setup, I have removed the following:</p><ul><li>Removed line indicating available RAM</li><li>Removed line showing speed for my ethernet connection</li></ul><p>And in the end, my bar looks like this:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/Customize-the-status-bar-in-the-I3-window-manager.png" class="kg-image" alt="Customize the status bar in the I3 window manager" loading="lazy" width="1942" height="1101" srcset="https://itsfoss.com/content/images/size/w600/2023/04/Customize-the-status-bar-in-the-I3-window-manager.png 600w, https://itsfoss.com/content/images/size/w1000/2023/04/Customize-the-status-bar-in-the-I3-window-manager.png 1000w, https://itsfoss.com/content/images/size/w1600/2023/04/Customize-the-status-bar-in-the-I3-window-manager.png 1600w, https://itsfoss.com/content/images/2023/04/Customize-the-status-bar-in-the-I3-window-manager.png 1942w" sizes="(min-width: 720px) 720px"></figure><h2 id="change-the-color-scheme-in-the-i3-window-manager">Change the color scheme in the i3 window manager</h2><p>This is the most crucial section of this guide, as the most attractive thing in the window manager is the colors you choose to decorate windows.</p><div class="kg-card kg-callout-card kg-callout-card-blue"><div class="kg-callout-emoji">📋</div><div class="kg-callout-text">I will be declaring variables for each color, so it will be easy for you just to change the value of the variable itself, and you'd have a new color scheme in no time.</div></div><p>So first, open the I3 config file:</p><pre><code>nano ~/.config/i3/config</code></pre><p>And go to the end of the file by using <code>Alt + /</code> and use the following syntax to add variables to store colors:</p><pre><code># Color shemes for windows set $bgcolor #523d64 set $in-bgcolor #363636 set $text #ffffff set $u-bgcolor #ff0000 set $indicator #a8a3c1 set $in-text #969696 # border background text indicator (a line which shows where the next window will be placed) client.focused $bgcolor $bgcolor $text $indicator client.unfocused $in-bgcolor $in-bgcolor $in-text $in-bgcolor client.focused_inactive $in-bgcolor $in-bgcolor $in-text $in-bgcolor client.urgent $u-bgcolor $u-bgcolor $text $u-bgcolor </code></pre><p>Here, </p><ul><li><code>bgcolor</code> indicates the background color.</li><li><code>in-bgcolor</code> indicates background color for inactive windows.</li><li><code>text</code> is for the text color.</li><li><code>u-bgcolor</code> indicates the background for urgent action.</li><li><code>indicator</code> is color for the line, which indicates where the next window will be placed.</li><li><code>in-text</code> text color when inactive.</li></ul><p>And for this guide, I have only used 4 basic classes which are:</p><ul><li><code>client.focused</code> defines colors for the focused windows.</li><li><code>client.unfocused</code> decides how to decorate windows when not focused.</li><li><code>client.focused_inactive</code> shows colors when one of the containers is focused but does not have the focus at the moment.</li><li><code>client.urgent</code> defines colors when urgent action is needed.</li></ul><div class="kg-card kg-callout-card kg-callout-card-green"><div class="kg-callout-emoji">💡</div><div class="kg-callout-text">There are more classes than these four; you can refer to the <a href="https://i3wm.org/docs/userguide.html#client_colors">official i3 configuration manual</a> to learn more.</div></div><p>Once you make changes to the config file, restart the I3 using <code>Mod + Shift + r</code>.</p><p>And if you followed my color scheme, the setup should look like this:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/change-window-colors-in-I3-window-manager.png" class="kg-image" alt="change window colors in I3 window manager" loading="lazy" width="1942" height="1101" srcset="https://itsfoss.com/content/images/size/w600/2023/04/change-window-colors-in-I3-window-manager.png 600w, https://itsfoss.com/content/images/size/w1000/2023/04/change-window-colors-in-I3-window-manager.png 1000w, https://itsfoss.com/content/images/size/w1600/2023/04/change-window-colors-in-I3-window-manager.png 1600w, https://itsfoss.com/content/images/2023/04/change-window-colors-in-I3-window-manager.png 1942w" sizes="(min-width: 720px) 720px"></figure><p>But what about the changing colors for the status bar? Why not!</p><h3 id="changing-the-color-scheme-for-the-status-bar-in-i3">Changing the color scheme for the status bar in i3 </h3><p>In this section, you'd realize why I used variables to store colors, as I will use the same variables to color my status bar!</p><p>To use colors in the status bar, you will have to make changes in the <code>bar {...}</code> section of the I3 config file.</p><p>First, open the configuration file:</p><pre><code>nano ~/.config/i3/config</code></pre><p>In the configuration file, look for the <code>bar {...}</code> section.</p><p>Once you find the section, create a color section and define colors and classes for the status bar as the same you did for Windows:</p><pre><code>bar { status_command i3status -c /home/$USER/.config/i3status/i3status.conf colors { background $bgcolor separator #191919 # border background text focused_workspace $bgcolor $bgcolor $text inactive_workspace $in-bgcolor $in-bgcolor $text urgent_workspace $u-bgcolor $u-bgcolor $text } } </code></pre><p>Here, I have used 3 classes: <code>focused_workspace</code>, <code>inactive_workspace</code>, and <code>urgent_workspace</code> which will define the colors accordingly.</p><p>Once you make changes, save them and restart the I3 and the status bar will have colors too.</p><h2 id="make-i3-bar-transparent">Make i3 bar transparent </h2><p>This section will show you how to make the i3 bar transparent. </p><p>But before that, let's change the fonts for the i3 bar. </p><p>Here, I will use the droid fonts to make it look clean and with a nerdy theme.</p><p>To install droid fonts in Arch, use the following:</p><pre><code>sudo pacman -S ttf-droid</code></pre><p>And for Ubuntu/Debian base:</p><pre><code>sudo apt install fonts-droid-fallback</code></pre><p>Once done, open the config file:</p><pre><code>nano ~/.config/i3/config</code></pre><p>And go to the <code>bar {...}</code> section and enter the font name with the size as shown:</p><pre><code>font pango: Droid Sans Mono 11</code></pre><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/change-fonts-in-i3-status-bar.png" class="kg-image" alt="change fonts in i3 status bar" loading="lazy" width="840" height="239" srcset="https://itsfoss.com/content/images/size/w600/2023/04/change-fonts-in-i3-status-bar.png 600w, https://itsfoss.com/content/images/2023/04/change-fonts-in-i3-status-bar.png 840w" sizes="(min-width: 720px) 720px"></figure><p>Once done, restart the i3, and the fonts will be changed!</p><p>To make the bar transparent, you can use the extra two digits in the existing hexadecimal code to define the transparency.</p><p>And if you want to control transparency, I would recommend you check out this <a href="https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4">guide which gives codes ranging from 0 to 100% transparency</a>.</p><p>For this purpose, I will use two new variables in the config file. So first, open the config file:</p><pre><code>nano ~/.config/i3/config</code></pre><p>Here, I changed and added a transparency of 60% to the background color and added 30% transparency to the inactive background color:</p><pre><code>set $bgcolor #523d6499 set $in-bgcolor #3636364D</code></pre><p>If you notice closely, I've added two-digit numbers in the existing hex color code defining transparency. Such as <code>99</code> is used for <code>60%</code> transparency whereas <code>4D</code> is used for the <code>30%</code> transparency.</p><p>Also, I added two new variables with different transparency and the same color as a background to make it look better:</p><pre><code>set $focused-ws #523d6480 set $bar-color #523d640D</code></pre><p>Once you do so, let's change the bar section to apply transparency.</p><p>Here, you'd have to add two new lines in the <code>bar {...}</code>:</p><pre><code>i3bar_command i3bar --transparency tray_output none</code></pre><p>Remember, using the <code>tray_output none</code> line, it won't show any icons in the tray so if you don't want this behavior, skip this and only add the 1st line for transparency.</p><p>Once done, change the color scheme for the bar such as changing the background color, border, and background for the focused workspace.</p><p>After making changes, the config should look like this:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/config-file-to-make-the-I3-bar-transparent-in-I3-window-manager-1.png" class="kg-image" alt="config file to make the I3 bar transparent in I3 window manager" loading="lazy" width="908" height="481" srcset="https://itsfoss.com/content/images/size/w600/2023/04/config-file-to-make-the-I3-bar-transparent-in-I3-window-manager-1.png 600w, https://itsfoss.com/content/images/2023/04/config-file-to-make-the-I3-bar-transparent-in-I3-window-manager-1.png 908w" sizes="(min-width: 720px) 720px"></figure><p>To take effect from the changes you've made, restart the i3 and you'd have transparent windows and bar:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/make-I3-status-bar-and-windows-transparent-in-I3-window-manager-3.png" class="kg-image" alt="make I3 status bar and windows transparent in I3 window manager" loading="lazy" width="1942" height="1102" srcset="https://itsfoss.com/content/images/size/w600/2023/04/make-I3-status-bar-and-windows-transparent-in-I3-window-manager-3.png 600w, https://itsfoss.com/content/images/size/w1000/2023/04/make-I3-status-bar-and-windows-transparent-in-I3-window-manager-3.png 1000w, https://itsfoss.com/content/images/size/w1600/2023/04/make-I3-status-bar-and-windows-transparent-in-I3-window-manager-3.png 1600w, https://itsfoss.com/content/images/2023/04/make-I3-status-bar-and-windows-transparent-in-I3-window-manager-3.png 1942w" sizes="(min-width: 720px) 720px"></figure><h2 id="use-i3-blocks-in-the-window-manager">Use i3 Blocks in the window manager</h2><p>The default bar you get with i3 is useless (in my opinion); how about making it functional?</p><p>In this part, I will explain how you can add:</p><ul><li><strong>Package updates </strong></li><li><strong>Memory usage </strong></li><li><strong>Disk usage </strong></li><li><strong>Volume indicator </strong></li><li><strong>Spotify indicator</strong></li></ul><div class="kg-card kg-callout-card kg-callout-card-blue"><div class="kg-callout-emoji">📋</div><div class="kg-callout-text">To do so, you will have to use some scripts that will allow you to add desired actions to your bar. Don't worry; I won't ask you to type scripts manually; various scripts are available on GitHub, covering almost every aspect you'd ever want.</div></div><p>But before that, you'd have to make some arrangements to store scripts and instruct i3 to use the configuration of i3block instead of i3bar.</p><p>If you followed the given instructions at the beginning of this guide, the i3blocks is already installed, and the config file is located at <code>/etc/i3blocks.conf</code>.</p><p><em>Want to download the block config files to quickly set them up without reading the rest? Considering you know what you are doing by now, you can download them here:</em></p><div class="kg-card kg-button-card kg-align-center"><a href="https://github.com/itsfoss/text-files/tree/master/i3_config_files" class="kg-btn kg-btn-accent">i3 Config Files</a></div><p>For this tutorial, I will create a copy and use that instead of the original config file so let's create a directory first to store the copy of the config file:</p><pre><code>mkdir ~/.config/i3blocks</code></pre><p>Now, create a copy for the original config file:</p><pre><code>sudo cp /etc/i3blocks.conf ~/.config/i3blocks/</code></pre><p>And finally, use the chown command to change the owner of the file which will let you make the desired changes:</p><pre><code>sudo chown $USER:$USER ~/.config/i3blocks/i3blocks.conf</code></pre><p>To enable the i3blocks, you have to make some changes to the i3 config file: </p><pre><code>nano ~/.config/i3/config</code></pre><p>Go to the <code>bar {...}</code> section and here, you'd have to change the status_command with <code>i3blocks</code> and add the path to the i3blocks config file as shown:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/enable-i3blocks-in-i3-window-manager.png" class="kg-image" alt="enable i3blocks in i3 window manager" loading="lazy" width="861" height="232" srcset="https://itsfoss.com/content/images/size/w600/2023/04/enable-i3blocks-in-i3-window-manager.png 600w, https://itsfoss.com/content/images/2023/04/enable-i3blocks-in-i3-window-manager.png 861w" sizes="(min-width: 720px) 720px"></figure><p>Once done, restart the I3 window manager using <code>Mod + Shift + r</code> and the entire status bar will be changed and look like this:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/the-default-look-of-the-i3blocks-in-i3-window-manager.png" class="kg-image" alt="the default look of the i3blocks in i3 window manager" loading="lazy" width="1941" height="46" srcset="https://itsfoss.com/content/images/size/w600/2023/04/the-default-look-of-the-i3blocks-in-i3-window-manager.png 600w, https://itsfoss.com/content/images/size/w1000/2023/04/the-default-look-of-the-i3blocks-in-i3-window-manager.png 1000w, https://itsfoss.com/content/images/size/w1600/2023/04/the-default-look-of-the-i3blocks-in-i3-window-manager.png 1600w, https://itsfoss.com/content/images/2023/04/the-default-look-of-the-i3blocks-in-i3-window-manager.png 1941w" sizes="(min-width: 720px) 720px"></figure><p>Don't worry; you will make it more valuable and good-looking than your previous i3bar in no time.</p><h3 id="adding-disk-block">Adding disk block </h3><p>Add this block if you want to display the space left on the disk.</p><p>Here, I will use the nano to create and open the config file for the disk block.</p><pre><code>nano ~/.config/scripts/disk</code></pre><p>And paste the following lines:</p><pre><code>#!/usr/bin/env sh DIR="${DIR:-$BLOCK_INSTANCE}" DIR="${DIR:-$HOME}" ALERT_LOW="${ALERT_LOW:-$1}" ALERT_LOW="${ALERT_LOW:-10}" # color will turn red under this value (default: 10%) LOCAL_FLAG="-l" if [ "$1" = "-n" ] || [ "$2" = "-n" ]; then LOCAL_FLAG="" fi df -h -P $LOCAL_FLAG "$DIR" | awk -v label="$LABEL" -v alert_low=$ALERT_LOW ' /\/.*/ { # full text print label $4 # short text print label $4 use=$5 # no need to continue parsing exit 0 } END { gsub(/%$/,"",use) if (100 - use < alert_low) { # color print "#FF0000" } } '</code></pre><p>Save changes and exit from the text editor.</p><p>Now, make this file executable:</p><pre><code>sudo chmod +x ~/.config/scripts/disk</code></pre><p>Next, open the I3blocks config file :</p><pre><code>nano ~/.config/i3blocks/i3blocks.conf</code></pre><p>And paste the following lines according to whether you want to place the disk block:</p><pre><code>[disk] command=/home/$USER/.config/scripts/disk LABEL= #DIR=$HOME #ALERT_LOW=10 interval=30</code></pre><p>Once done, save the changes and restart the I3 using <code>Mod + Shift + r</code> and the available disk space will reflect with the disk icon in the status bar.</p><p><strong>Suggested Read 📖</strong></p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://itsfoss.com/properly-theme-kde-plasma/"><div class="kg-bookmark-content"><div class="kg-bookmark-title">How to Properly Theme KDE Plasma [An in-depth Guide]</div><div class="kg-bookmark-description">If you have been using Linux for some time, you know about KDE Plasma, the desktop environment. Many distributions ship KDE Plasma as the default (or flagship) desktop environment. Hence, it is not surprising to find it among the best desktop environments. KDE Plasma desktop is famous…</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://itsfoss.com/content/images/size/w256h256/2022/12/android-chrome-192x192.png" alt=""><span class="kg-bookmark-author">It's FOSS</span><span class="kg-bookmark-publisher">Sreenath</span></div></div><div class="kg-bookmark-thumbnail"><img src="https://itsfoss.com/content/images/wordpress/2022/09/theming-kde.png" alt=""></div></a></figure><h3 id="adding-memory-block">Adding memory block</h3><p>This will be a block in the status bar indicating the memory used in the system. </p><p>First, create and open a new file for a new block:</p><pre><code>nano ~/.config/scripts/memory</code></pre><p>And paste the following line in the new file:</p><pre><code>#!/usr/bin/env sh TYPE="${BLOCK_INSTANCE:-mem}" PERCENT="${PERCENT:-true}" awk -v type=$TYPE -v percent=$PERCENT ' /^MemTotal:/ { mem_total=$2 } /^MemFree:/ { mem_free=$2 } /^Buffers:/ { mem_free+=$2 } /^Cached:/ { mem_free+=$2 } /^SwapTotal:/ { swap_total=$2 } /^SwapFree:/ { swap_free=$2 } END { if (type == "swap") { free=swap_free/1024/1024 used=(swap_total-swap_free)/1024/1024 total=swap_total/1024/1024 } else { free=mem_free/1024/1024 used=(mem_total-mem_free)/1024/1024 total=mem_total/1024/1024 } pct=0 if (total > 0) { pct=used/total*100 } # full text if (percent == "true" ) { printf("%.1fG/%.1fG (%.f%%)\n", used, total, pct) } else { printf("%.1fG/%.1fG\n", used, total) } # short text printf("%.f%%\n", pct) # color if (pct > 90) { print("#FF0000") } else if (pct > 80) { print("#FFAE00") } else if (pct > 70) { print("#FFF600") } } ' /proc/meminfo</code></pre><p>Save changes and exit from the text editor.</p><p>Now, to make this work, you'd have to make this file executable using the following command:</p><pre><code>sudo chmod +x ~/.config/scripts/memory</code></pre><p>Next, open the I3blocks config file:</p><pre><code>nano ~/.config/i3blocks/i3blocks.conf</code></pre><p>And paste the following at the place where you want to show the RAM consumption in the status bar:</p><pre><code>[memory] command=/home/$USER/.config/scripts/memory label= interval=30</code></pre><p>Save changes and exit from the text editor. Restart i3 to take effect from the changes!</p><h3 id="adding-the-update-indicator-block">Adding the update indicator block</h3><p>This is the most helpful indicator, as it shows the number of old packages that need to be updated.</p><p>First, install use the following command to install dependencies to make this work:</p><pre><code>sudo pacman -S pacman-contrib</code></pre><p>Now, create a new file that will be used to store the script:</p><pre><code>nano ~/.config/scripts/arch-update</code></pre><p>And paste the following:</p><pre><code>#!/usr/bin/env python3 import subprocess from subprocess import check_output import argparse import os import re def create_argparse(): def _default(name, default='', arg_type=str): val = default if name in os.environ: val = os.environ[name] return arg_type(val) strbool = lambda s: s.lower() in ['t', 'true', '1'] strlist = lambda s: s.split() parser = argparse.ArgumentParser(description='Check for pacman updates') parser.add_argument( '-b', '--base_color', default = _default('BASE_COLOR', 'green'), help='base color of the output(default=green)' ) parser.add_argument( '-u', '--updates_available_color', default = _default('UPDATE_COLOR', 'yellow'), help='color of the output, when updates are available(default=yellow)' ) parser.add_argument( '-a', '--aur', action = 'store_const', const = True, default = _default('AUR', 'False', strbool), help='Include AUR packages. Attn: Yaourt must be installed' ) parser.add_argument( '-y', '--aur_yay', action = 'store_const', const = True, default = _default('AUR_YAY', 'False', strbool), help='Include AUR packages. Attn: Yay must be installed' ) parser.add_argument( '-q', '--quiet', action = 'store_const', const = True, default = _default('QUIET', 'False', strbool), help = 'Do not produce output when system is up to date' ) parser.add_argument( '-w', '--watch', nargs='*', default = _default('WATCH', arg_type=strlist), help='Explicitly watch for specified packages. ' 'Listed elements are treated as regular expressions for matching.' ) return parser.parse_args() def get_updates(): output = '' try: output = check_output(['checkupdates']).decode('utf-8') except subprocess.CalledProcessError as exc: # checkupdates exits with 2 and no output if no updates are available. # we ignore this case and go on if not (exc.returncode == 2 and not exc.output): raise exc if not output: return [] updates = [line.split(' ')[0] for line in output.split('\n') if line] return updates def get_aur_yaourt_updates(): output = '' try: output = check_output(['yaourt', '-Qua']).decode('utf-8') except subprocess.CalledProcessError as exc: # yaourt exits with 1 and no output if no updates are available. # we ignore this case and go on if not (exc.returncode == 1 and not exc.output): raise exc if not output: return [] aur_updates = [line.split(' ')[0] for line in output.split('\n') if line.startswith('aur/')] return aur_updates def get_aur_yay_updates(): output = check_output(['yay', '-Qua']).decode('utf-8') if not output: return [] aur_updates = [line.split(' ')[0] for line in output.split('\n') if line] return aur_updates def matching_updates(updates, watch_list): matches = set() for u in updates: for w in watch_list: if re.match(w, u): matches.add(u) return matches label = os.environ.get("LABEL","") message = "{0}<span color='{1}'>{2}</span>" args = create_argparse() updates = get_updates() if args.aur: updates += get_aur_yaourt_updates() elif args.aur_yay: updates += get_aur_yay_updates() update_count = len(updates) if update_count > 0: if update_count == 1: info = str(update_count) + ' update available' short_info = str(update_count) + ' update' else: info = str(update_count) + ' updates available' short_info = str(update_count) + ' updates' matches = matching_updates(updates, args.watch) if matches: info += ' [{0}]'.format(', '.join(matches)) short_info += '*' print(message.format(label, args.updates_available_color, info)) print(message.format(label, args.updates_available_color, short_info)) elif not args.quiet: print(message.format(label, args.base_color, 'system up to date'))</code></pre><p>Save changes and exit from the text editor.</p><p>Now, make this file executable using the following:</p><pre><code>sudo chmod +x ~/.config/scripts/arch-update</code></pre><p>Next, open the i3blocks config file:</p><pre><code>nano ~/.config/i3blocks/i3blocks.conf</code></pre><p>And paste the following lines at desired space:</p><pre><code>[arch-update] command=/home/$USER/.config/scripts/arch-update interval=3600 markup=pango LABEL=</code></pre><p>Save the changes and reload the i3 window manager, and it will show the number of packages that need to be updated.</p><p>And if you are using Ubuntu, you can <a href="https://github.com/vivien/i3blocks-contrib/tree/master/apt-upgrades">follow these instructions on the GitHub page</a>.</p><h3 id="adding-volume-indicator-block">Adding volume indicator block</h3><p>Adding a volume indicator block takes a little bit more effort as you want to behave as you would expect. So, the things that you need to achieve with the block are:</p><ul><li><strong>Adding key bindings to manage volume with media control keys </strong></li><li><strong>Adding a volume block indicating the volume </strong></li></ul><p>But to do so, first, you'd have to install some dependencies.</p><p>So if you are using Arch, use the following:</p><pre><code>sudo pacman -S pulseaudio-alsa pulseaudio-bluetooth pulseaudio-equalizer pulseaudio-jack alsa-utils playerctl</code></pre><p>And if you're using Ubuntu/Debian base, use the following:</p><pre><code>sudo apt install pulseaudio-module-bluetooth pulseaudio-equalizer pulseaudio-module-jack alsa-utils playerctl</code></pre><p>Now, let's look at how you can enable the media control keys in the i3 window manager.</p><p>First, open the i3 config file:</p><pre><code>nano ~/.config/i3/config</code></pre><p>Go to the end of the file and paste the following:</p><pre><code># Key bindings for Media control keys bindsym XF86AudioPlay exec playerctl play bindsym XF86AudioPause exec playerctl pause bindsym XF86AudioNext exec playerctl next bindsym XF86AudioPrev exec playerctl previous</code></pre><p>Now, let's create a new file for this block:</p><pre><code>nano ~/.config/scripts/volume</code></pre><p>And paste the following:</p><pre><code>#!/usr/bin/env bash if [[ -z "$MIXER" ]] ; then MIXER="default" if command -v pulseaudio >/dev/null 2>&1 && pulseaudio --check ; then # pulseaudio is running, but not all installations use "pulse" if amixer -D pulse info >/dev/null 2>&1 ; then MIXER="pulse" fi fi [ -n "$(lsmod | grep jack)" ] && MIXER="jackplug" MIXER="${2:-$MIXER}" fi if [[ -z "$SCONTROL" ]] ; then SCONTROL="${BLOCK_INSTANCE:-$(amixer -D $MIXER scontrols | sed -n "s/Simple mixer control '$[^']*$',0/\1/p" | head -n1 )}" fi # The first parameter sets the step to change the volume by (and units to display) # This may be in in % or dB (eg. 5% or 3dB) if [[ -z "$STEP" ]] ; then STEP="${1:-5%}" fi NATURAL_MAPPING=${NATURAL_MAPPING:-0} if [[ "$NATURAL_MAPPING" != "0" ]] ; then AMIXER_PARAMS="-M" fi #------------------------------------------------------------------------ capability() { # Return "Capture" if the device is a capture device amixer $AMIXER_PARAMS -D $MIXER get $SCONTROL | sed -n "s/ Capabilities:.*cvolume.*/Capture/p" } volume() { amixer $AMIXER_PARAMS -D $MIXER get $SCONTROL $(capability) } </code></pre><p>Save changes and exit from the config file. </p><p>Next, open the I3blocks config file:</p><pre><code>nano ~/.config/i3blocks/i3blocks.conf</code></pre><p>And paste the following:</p><pre><code>[volume] command=/home/$USER/.config/scripts/volume LABEL=♪ #LABEL=VOL interval=1 signal=10 #STEP=5% MIXER=default #SCONTROL=[determined automatically] #NATURAL_MAPPING=0</code></pre><p>Save changes and reload the I3 and from now on, the volume shortcuts will work and the indicator will work as expected!</p><div class="kg-card kg-callout-card kg-callout-card-grey"><div class="kg-callout-emoji">💡</div><div class="kg-callout-text">If you face issues like audio/video not working, use this command and it should solve the problem: <code>systemctl --user disable --now pipewire.{socket,service} && systemctl --user mask pipewire.socket</code></div></div><h3 id="adding-spotify-block">Adding Spotify block </h3><p>I will be using a script from <a href="https://github.com/firatakandere" rel="author">firatakandere</a> to add this. You can check it out before going through it.</p><p>First, create and open a new file for the Spotify block:</p><pre><code>nano ~/.config/scripts/spotify.py</code></pre><p>And paste the following:</p><pre><code>#!/usr/bin/python import dbus import os import sys try: bus = dbus.SessionBus() spotify = bus.get_object("org.mpris.MediaPlayer2.spotify", "/org/mpris/MediaPlayer2") if os.environ.get('BLOCK_BUTTON'): control_iface = dbus.Interface(spotify, 'org.mpris.MediaPlayer2.Player') if (os.environ['BLOCK_BUTTON'] == '1'): control_iface.Previous() elif (os.environ['BLOCK_BUTTON'] == '2'): control_iface.PlayPause() elif (os.environ['BLOCK_BUTTON'] == '3'): control_iface.Next() spotify_iface = dbus.Interface(spotify, 'org.freedesktop.DBus.Properties') props = spotify_iface.Get('org.mpris.MediaPlayer2.Player', 'Metadata') if (sys.version_info > (3, 0)): print(str(props['xesam:artist'][0]) + " - " + str(props['xesam:title'])) else: print(props['xesam:artist'][0] + " - " + props['xesam:title']).encode('utf-8') exit except dbus.exceptions.DBusException: exit</code></pre><p>Once done, use the following command to make it executable:</p><pre><code>sudo chmod +x ~/.config/scripts/spotify.py</code></pre><p>Now, open the I3blocks config file:</p><pre><code>nano ~/.config/i3blocks/i3blocks.conf</code></pre><p>And paste the following lines (I would recommend you paste them at the beginning of the block):</p><pre><code>[spotify] label= command=/home/$USER/.config/scripts/spotify.py color=#81b71a interval=5</code></pre><p>Save changes, exit from the config file, and restart the I3.</p><p>Once you added the blocks I mentioned, the bar will look like this:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/blocks-i3.jpg" class="kg-image" alt loading="lazy" width="919" height="70" srcset="https://itsfoss.com/content/images/size/w600/2023/04/blocks-i3.jpg 600w, https://itsfoss.com/content/images/2023/04/blocks-i3.jpg 919w" sizes="(min-width: 720px) 720px"></figure><p>You can take a look at my home screen with the blocks (by clicking on the image below).</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/Customize-the-I3blocks-in-I3-window-manager.png" class="kg-image" alt="Customize the I3blocks in I3 window manager" loading="lazy" width="1942" height="1102" srcset="https://itsfoss.com/content/images/size/w600/2023/04/Customize-the-I3blocks-in-I3-window-manager.png 600w, https://itsfoss.com/content/images/size/w1000/2023/04/Customize-the-I3blocks-in-I3-window-manager.png 1000w, https://itsfoss.com/content/images/size/w1600/2023/04/Customize-the-I3blocks-in-I3-window-manager.png 1600w, https://itsfoss.com/content/images/2023/04/Customize-the-I3blocks-in-I3-window-manager.png 1942w" sizes="(min-width: 720px) 720px"></figure><div class="kg-card kg-callout-card kg-callout-card-blue"><div class="kg-callout-emoji">📋</div><div class="kg-callout-text">If you're confused about where those default blocks (documentation and greetings) are, it took me several comments to disable them to achieve the shown look!</div></div><h2 id="use-i3-gaps-in-linux">Use I3 gaps in Linux</h2><p>If you want to have gaps between the windows, you can use <code>i3gaps</code> and after color schemes, <code>I3gaps</code> is the most crucial element in this guide. </p><p>To use the gaps, you must make some changes in the i3 config file.</p><p>So open the I3 config file:</p><pre><code>nano ~/.config/i3/config</code></pre><p>Go to the end of the file and paste the following:</p><pre><code># default gaps gaps inner 15 gaps outer 5 # gaps set $mode_gaps Gaps: (o)uter, (i)nner, (h)orizontal, (v)ertical, (t)op, (r)ight, (b)ottom, (l)eft set $mode_gaps_outer Outer Gaps: +|-|0 (local), Shift + +|-|0 (global) set $mode_gaps_inner Inner Gaps: +|-|0 (local), Shift + +|-|0 (global) set $mode_gaps_horiz Horizontal Gaps: +|-|0 (local), Shift + +|-|0 (global) set $mode_gaps_verti Vertical Gaps: +|-|0 (local), Shift + +|-|0 (global) set $mode_gaps_top Top Gaps: +|-|0 (local), Shift + +|-|0 (global) set $mode_gaps_right Right Gaps: +|-|0 (local), Shift + +|-|0 (global) set $mode_gaps_bottom Bottom Gaps: +|-|0 (local), Shift + +|-|0 (global) set $mode_gaps_left Left Gaps: +|-|0 (local), Shift + +|-|0 (global) bindsym $mod+Shift+g mode "$mode_gaps" mode "$mode_gaps" { bindsym o mode "$mode_gaps_outer" bindsym i mode "$mode_gaps_inner" bindsym h mode "$mode_gaps_horiz" bindsym v mode "$mode_gaps_verti" bindsym t mode "$mode_gaps_top" bindsym r mode "$mode_gaps_right" bindsym b mode "$mode_gaps_bottom" bindsym l mode "$mode_gaps_left" bindsym Return mode "$mode_gaps" bindsym Escape mode "default" } mode "$mode_gaps_outer" { bindsym plus gaps outer current plus 5 bindsym minus gaps outer current minus 5 bindsym 0 gaps outer current set 0 bindsym Shift+plus gaps outer all plus 5 bindsym Shift+minus gaps outer all minus 5 bindsym Shift+0 gaps outer all set 0 bindsym Return mode "$mode_gaps" bindsym Escape mode "default" } mode "$mode_gaps_inner" { bindsym plus gaps inner current plus 5 bindsym minus gaps inner current minus 5 bindsym 0 gaps inner current set 0 bindsym Shift+plus gaps inner all plus 5 bindsym Shift+minus gaps inner all minus 5 bindsym Shift+0 gaps inner all set 0 bindsym Return mode "$mode_gaps" bindsym Escape mode "default" } mode "$mode_gaps_horiz" { bindsym plus gaps horizontal current plus 5 bindsym minus gaps horizontal current minus 5 bindsym 0 gaps horizontal current set 0 bindsym Shift+plus gaps horizontal all plus 5 bindsym Shift+minus gaps horizontal all minus 5 bindsym Shift+0 gaps horizontal all set 0 bindsym Return mode "$mode_gaps" bindsym Escape mode "default" } mode "$mode_gaps_verti" { bindsym plus gaps vertical current plus 5 bindsym minus gaps vertical current minus 5 bindsym 0 gaps vertical current set 0 bindsym Shift+plus gaps vertical all plus 5 bindsym Shift+minus gaps vertical all minus 5 bindsym Shift+0 gaps vertical all set 0 bindsym Return mode "$mode_gaps" bindsym Escape mode "default" } mode "$mode_gaps_top" { bindsym plus gaps top current plus 5 bindsym minus gaps top current minus 5 bindsym 0 gaps top current set 0 bindsym Shift+plus gaps top all plus 5 bindsym Shift+minus gaps top all minus 5 bindsym Shift+0 gaps top all set 0 bindsym Return mode "$mode_gaps" bindsym Escape mode "default" } mode "$mode_gaps_right" { bindsym plus gaps right current plus 5 bindsym minus gaps right current minus 5 bindsym 0 gaps right current set 0 bindsym Shift+plus gaps right all plus 5 bindsym Shift+minus gaps right all minus 5 bindsym Shift+0 gaps right all set 0 bindsym Return mode "$mode_gaps" bindsym Escape mode "default" } mode "$mode_gaps_bottom" { bindsym plus gaps bottom current plus 5 bindsym minus gaps bottom current minus 5 bindsym 0 gaps bottom current set 0 bindsym Shift+plus gaps bottom all plus 5 bindsym Shift+minus gaps bottom all minus 5 bindsym Shift+0 gaps bottom all set 0 bindsym Return mode "$mode_gaps" bindsym Escape mode "default" } mode "$mode_gaps_left" { bindsym plus gaps left current plus 5 bindsym minus gaps left current minus 5 bindsym 0 gaps left current set 0 bindsym Shift+plus gaps left all plus 5 bindsym Shift+minus gaps left all minus 5 bindsym Shift+0 gaps left all set 0 bindsym Return mode "$mode_gaps" bindsym Escape mode "default" }</code></pre><p>Save changes and exit from the config file.</p><p>Reload i3 using <code>Mod + Shift + r</code> and you'd see the gaps between windows:</p><figure class="kg-card kg-image-card"><img src="https://itsfoss.com/content/images/2023/04/use-i3gaps-in-i3-window-manager.png" class="kg-image" alt="use i3gaps in i3 window manager" loading="lazy" width="1942" height="1102" srcset="https://itsfoss.com/content/images/size/w600/2023/04/use-i3gaps-in-i3-window-manager.png 600w, https://itsfoss.com/content/images/size/w1000/2023/04/use-i3gaps-in-i3-window-manager.png 1000w, https://itsfoss.com/content/images/size/w1600/2023/04/use-i3gaps-in-i3-window-manager.png 1600w, https://itsfoss.com/content/images/2023/04/use-i3gaps-in-i3-window-manager.png 1942w" sizes="(min-width: 720px) 720px"></figure><p>But what if you want to resize the gaps? It is quite simple and can be done in simple steps:</p><ol><li>Press <code>Mod + Shift + g</code> to enter the gaps mode</li><li>Choose what you want to change by using the given options</li><li>Use <code>+</code> or <code>-</code> to increase/decrease gaps </li><li>Once done, press the <code>Esc</code> key to exit the gaps mode</li></ol><p>And that's it!</p><h2 id="did-we-forget-to-customize-the-terminal">Did we forget to customize the Terminal?</h2><p>Fret not; you can <a href="https://itsfoss.com/zsh-ubuntu/">switch to ZSH</a>, a different shell, to make the terminal look different or explore some lesser-known <a href="https://itsfoss.com/shells-linux/">Linux shells</a>.</p><p>Either way, you can <a href="https://itsfoss.com/customize-linux-terminal/">customize the existing terminal</a> or pick different <a href="https://itsfoss.com/linux-terminal-emulators/">terminal emulators</a>. </p><p><strong>I hope you will no longer fear ricing! </strong>😎</p><p><em>If you have any suggestions or want to show off your setup, please do so in the comments section.</em></p> </article> <div class="post-tags content-width"> <a href="/tag/customization/" style="--color-accent:#c018c3;">Customization ⚙️</a> <a href="/tag/guides/" style="--color-accent:#592008;">Guides 📒</a> </div> <div class="social-share content-width m-b-lg"> <a class="social-share__item twitter js-share" target="_blank" href="https://twitter.com/share?text=The%20Ultimate%20Guide%20to%20i3%20Customization%20in%20Linux&url=https://itsfoss.com/i3-customization/" title="Share on X" aria-label="Share on X"> <i class="icon icon-twitter-x icon--sm"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M4 4l11.733 16h4.267l-11.733 -16z"></path> <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path> </svg> </i> <span>Share</span> </a> <a class="social-share__item bluesky js-share" target="_blank" href="https://bsky.app/intent/compose?text=The%20Ultimate%20Guide%20to%20i3%20Customization%20in%20Linux%20https://itsfoss.com/i3-customization/" title="Share on Bluesky" aria-label="Share on Bluesky"> <i class="icon icon-brand-bluesky icon--sm"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-bluesky"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6.335 5.144c-1.654 -1.199 -4.335 -2.127 -4.335 .826c0 .59 .35 4.953 .556 5.661c.713 2.463 3.13 2.75 5.444 2.369c-4.045 .665 -4.889 3.208 -2.667 5.41c1.03 1.018 1.913 1.59 2.667 1.59c2 0 3.134 -2.769 3.5 -3.5c.333 -.667 .5 -1.167 .5 -1.5c0 .333 .167 .833 .5 1.5c.366 .731 1.5 3.5 3.5 3.5c.754 0 1.637 -.571 2.667 -1.59c2.222 -2.203 1.378 -4.746 -2.667 -5.41c2.314 .38 4.73 .094 5.444 -2.369c.206 -.708 .556 -5.072 .556 -5.661c0 -2.953 -2.68 -2.025 -4.335 -.826c-2.293 1.662 -4.76 5.048 -5.665 6.856c-.905 -1.808 -3.372 -5.194 -5.665 -6.856z" /></svg> </i> <span>Share</span> </a> <a class="social-share__item facebook js-share" target="_blank" href="https://www.facebook.com/sharer.php?u=https://itsfoss.com/i3-customization/" title="Share on Facebook" aria-label="Share on Facebook"> <i class="icon icon-facebook icon--sm"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-facebook" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" /> </svg> </i> <span>Share</span> </a> <a class="social-share__item linkedin js-share" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=https://itsfoss.com/i3-customization/&title=The%20Ultimate%20Guide%20to%20i3%20Customization%20in%20Linux&summary=The%20Ultimate%20Guide%20to%20i3%20Customization%20in%20Linux" title="Share on Linkedin" aria-label="Share on Linkedin"> <i class="icon icon-linkedin icon--sm"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"> <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path> <rect x="2" y="9" width="4" height="12"></rect> <circle cx="4" cy="4" r="2"></circle> </svg> </i> <span>Share</span> </a> <a class="social-share__item mail" href="/cdn-cgi/l/email-protection#b689c5c3d4dcd3d5c28be2ded3938486e3dac2dfdbd7c2d3938486f1c3dfd2d3938486c2d9938486df85938486f5c3c5c2d9dbdfccd7c2dfd9d8938486dfd8938486fadfd8c3ce90d4d9d2cf8bdec2c2c6c58c9999dfc2c5d0d9c5c598d5d9db99df859bd5c3c5c2d9dbdfccd7c2dfd9d89990d8d4c5c68de2ded3938486e3dac2dfdbd7c2d3938486f1c3dfd2d3938486c2d9938486df85938486f5c3c5c2d9dbdfccd7c2dfd9d8938486dfd8938486fadfd8c3ce" title="Share by email" aria-label="Share by email"> <i class="icon icon-mail icon--sm"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <rect x="3" y="5" width="18" height="14" rx="2" /> <polyline points="3 7 12 13 21 7" /> </svg> </i> <span>Email</span> </a> <a class="social-share__item linkedin" target="_blank" href="https://itsfoss.com/update-feedback/" title="Feedback" aria-label="Feedback"> <i class="icon icon-info icon--sm"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-info-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <circle cx="12" cy="12" r="9" /> <line x1="12" y1="8" x2="12.01" y2="8" /> <polyline points="11 12 12 12 12 16 13 16" /> </svg> </i> <span>Feedback</span> </a> </div> <div class="content-width author-info"> <span class="section-title text-10 m-b uppercase">About the author</span> <div class="author-card in-post m-b-xl author-sagar"> <a href="/author/sagar/"> <figure class="author-card__profile"> <picture class=""> <source data-srcset="/content/images/size/w100/format/webp/2022/12/Sagar-Sharma-new.jpg 100w,/content/images/size/w300/format/webp/2022/12/Sagar-Sharma-new.jpg 300w,/content/images/size/w600/format/webp/2022/12/Sagar-Sharma-new.jpg 600w," data-sizes="auto" type="image/webp" > <img class="lazyload author-card__img" data-srcset="/content/images/size/w100/2022/12/Sagar-Sharma-new.jpg 100w,/content/images/size/w300/2022/12/Sagar-Sharma-new.jpg 300w,/content/images/size/w600/2022/12/Sagar-Sharma-new.jpg 600w," srcset="/content/images/size/w30/2022/12/Sagar-Sharma-new.jpg" data-sizes="auto" data-src="/content/images/size/w100/2022/12/Sagar-Sharma-new.jpg" src="/content/images/size/w30/2022/12/Sagar-Sharma-new.jpg" alt="Sagar Sharma" > </picture> </figure> </a> <div class="author-card__content flex-1 has-image"> <h2 class="author-card__name"><a href="/author/sagar/">Sagar Sharma</a></h2> <p class="author-card__bio">A software engineer who loves to write about his experience with Linux. While reviving my crashed system, you can find me reading literature, manga, or watering my plants.</p> <div class="author-card__info flex flex-cc"> <ul class="author-card__social "> </ul> </div> </div> </div> </div> </div> <div class="col-xs-12 col-lg-3 hide-mobile"> <aside class="sidebar"> <span class="section-title sm">Featured</span> <div class="sidebar__section"> <a class="sidebar-story" href="https://itsfoss.com/zimacube-review/"> <figure class="sidebar-story__media m-r"> <picture class=""> <source data-srcset="/content/images/size/w100/format/webp/2024/11/zimacube--1-.png 100w,/content/images/size/w300/format/webp/2024/11/zimacube--1-.png 300w," data-sizes="auto" type="image/webp" > <img class="lazyload" data-srcset="/content/images/size/w100/2024/11/zimacube--1-.png 100w,/content/images/size/w300/2024/11/zimacube--1-.png 300w," srcset="/content/images/size/w30/2024/11/zimacube--1-.png" data-sizes="auto" data-src="/content/images/size/w100/2024/11/zimacube--1-.png" src="/content/images/size/w30/2024/11/zimacube--1-.png" alt="Zimacube review" > </picture> </figure> <div class="sidebar-story__content"> <h3 class="sidebar-story__title">ZimaCube Review: Almost Perfect Out of Box Homelab Experience in Local Cloud Setup</h3> </div> </a><a class="sidebar-story" href="https://itsfoss.com/quiz/save-tux-linux-commands/"> <figure class="sidebar-story__media m-r"> <picture class=""> <source data-srcset="/content/images/size/w100/format/webp/2024/11/tux-rescue.png 100w,/content/images/size/w300/format/webp/2024/11/tux-rescue.png 300w," data-sizes="auto" type="image/webp" > <img class="lazyload" data-srcset="/content/images/size/w100/2024/11/tux-rescue.png 100w,/content/images/size/w300/2024/11/tux-rescue.png 300w," srcset="/content/images/size/w30/2024/11/tux-rescue.png" data-sizes="auto" data-src="/content/images/size/w100/2024/11/tux-rescue.png" src="/content/images/size/w30/2024/11/tux-rescue.png" alt="save the tux" > </picture> </figure> <div class="sidebar-story__content"> <h3 class="sidebar-story__title">Save The Tux With Linux Command Knowledge Quiz</h3> </div> </a><a class="sidebar-story" href="https://itsfoss.com/opencoder-vscode/"> <figure class="sidebar-story__media m-r"> <picture class=""> <source data-srcset="/content/images/size/w100/format/webp/2024/11/running-opencoder-llm-in-vscode.png 100w,/content/images/size/w300/format/webp/2024/11/running-opencoder-llm-in-vscode.png 300w," data-sizes="auto" type="image/webp" > <img class="lazyload" data-srcset="/content/images/size/w100/2024/11/running-opencoder-llm-in-vscode.png 100w,/content/images/size/w300/2024/11/running-opencoder-llm-in-vscode.png 300w," srcset="/content/images/size/w30/2024/11/running-opencoder-llm-in-vscode.png" data-sizes="auto" data-src="/content/images/size/w100/2024/11/running-opencoder-llm-in-vscode.png" src="/content/images/size/w30/2024/11/running-opencoder-llm-in-vscode.png" alt="opencoder LLM" > </picture> </figure> <div class="sidebar-story__content"> <h3 class="sidebar-story__title">Running Opencoder LLM in VS Code: A Local, Copilot Alternative</h3> </div> </a><a class="sidebar-story" href="https://itsfoss.com/linux-market-share/"> <figure class="sidebar-story__media m-r"> <picture class=""> <source data-srcset="/content/images/size/w100/format/webp/wordpress/2017/09/linux-desktop-market-share.jpg 100w,/content/images/size/w300/format/webp/wordpress/2017/09/linux-desktop-market-share.jpg 300w," data-sizes="auto" type="image/webp" > <img class="lazyload" data-srcset="/content/images/size/w100/wordpress/2017/09/linux-desktop-market-share.jpg 100w,/content/images/size/w300/wordpress/2017/09/linux-desktop-market-share.jpg 300w," srcset="/content/images/size/w30/wordpress/2017/09/linux-desktop-market-share.jpg" data-sizes="auto" data-src="/content/images/size/w100/wordpress/2017/09/linux-desktop-market-share.jpg" src="/content/images/size/w30/wordpress/2017/09/linux-desktop-market-share.jpg" alt="Desktop Linux market share" > </picture> </figure> <div class="sidebar-story__content"> <h3 class="sidebar-story__title">Desktop Linux Market Share: April 2025</h3> </div> </a> </div> <div class="sidebar__section flex flex-cc hide-mobile"> <div align="center" data-freestar-ad="__300x250 __300x600" id="itsfoss_300x250_Sidebar1"> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script data-cfasync="false" type="text/javascript"> freestar.config.enabled_slots.push({ placementName: "itsfoss_300x250_Sidebar1", slotId: "itsfoss_300x250_Sidebar1" }); </script> </div> </div> <span class="section-title sm">Latest</span> <div class="sidebar__section"> <a class="sidebar-story" href="https://itsfoss.com/logseq-format-text/"> <figure class="sidebar-story__media m-r"> <picture class=""> <source data-srcset="/content/images/size/w100/format/webp/2025/04/text-formatting-in-logseq.png 100w,/content/images/size/w300/format/webp/2025/04/text-formatting-in-logseq.png 300w," data-sizes="auto" type="image/webp" > <img class="lazyload" data-srcset="/content/images/size/w100/2025/04/text-formatting-in-logseq.png 100w,/content/images/size/w300/2025/04/text-formatting-in-logseq.png 300w," srcset="/content/images/size/w30/2025/04/text-formatting-in-logseq.png" data-sizes="auto" data-src="/content/images/size/w100/2025/04/text-formatting-in-logseq.png" src="/content/images/size/w30/2025/04/text-formatting-in-logseq.png" alt="Formatting text in logseq" > </picture> </figure> <div class="sidebar-story__content"> <h3 class="sidebar-story__title">Formatting Text in Logseq</h3> <div class="sidebar-story__info"> <time datetime="2025-04-11" class="sidebar-story__date"> 11 Apr 2025 </time> </div> </div> </a><a class="sidebar-story" href="https://itsfoss.com/newsletter/foss-weekly-25-15/"> <figure class="sidebar-story__media m-r"> <picture class=""> <source data-srcset="/content/images/size/w100/format/webp/2025/04/foss-weekly-1.png 100w,/content/images/size/w300/format/webp/2025/04/foss-weekly-1.png 300w," data-sizes="auto" type="image/webp" > <img class="lazyload" data-srcset="/content/images/size/w100/2025/04/foss-weekly-1.png 100w,/content/images/size/w300/2025/04/foss-weekly-1.png 300w," srcset="/content/images/size/w30/2025/04/foss-weekly-1.png" data-sizes="auto" data-src="/content/images/size/w100/2025/04/foss-weekly-1.png" src="/content/images/size/w30/2025/04/foss-weekly-1.png" alt="FOSS Weekly #25.15" > </picture> </figure> <div class="sidebar-story__content"> <h3 class="sidebar-story__title">FOSS Weekly #25.15: Clapgrep, APT 3.0, Vibe Coding, AI in Firefox and More</h3> <div class="sidebar-story__info"> <time datetime="2025-04-10" class="sidebar-story__date"> 10 Apr 2025 </time> </div> </div> </a><a class="sidebar-story" href="https://itsfoss.com/install-logseq-linux/"> <figure class="sidebar-story__media m-r"> <picture class=""> <source data-srcset="/content/images/size/w100/format/webp/2025/04/install-logseq.png 100w,/content/images/size/w300/format/webp/2025/04/install-logseq.png 300w," data-sizes="auto" type="image/webp" > <img class="lazyload" data-srcset="/content/images/size/w100/2025/04/install-logseq.png 100w,/content/images/size/w300/2025/04/install-logseq.png 300w," srcset="/content/images/size/w30/2025/04/install-logseq.png" data-sizes="auto" data-src="/content/images/size/w100/2025/04/install-logseq.png" src="/content/images/size/w30/2025/04/install-logseq.png" alt="Installing Logseq" > </picture> </figure> <div class="sidebar-story__content"> <h3 class="sidebar-story__title">Installing Logseq Knowledge Management Tool on Linux</h3> <div class="sidebar-story__info"> <time datetime="2025-04-07" class="sidebar-story__date"> 07 Apr 2025 </time> </div> </div> </a> </div> <div class="sidebar__section hide-mobile flex flex-cc"> <div class="sidebar__subscribe"> <h4 class="text-acc fw-800"> Become a Better Linux User </h4> <div class="m-b text-acc" id="sidebar-input-label"> With the FOSS Weekly Newsletter, you learn useful Linux tips, discover applications, explore new distros and stay updated with the latest from Linux world </div> <form class="subscribe-form" data-members-form="subscribe" data-style=""> <input data-members-email class="" type="email" autocomplete="email" placeholder="Your email address" aria-labelledby="sidebar-input-label" required> <button class="btn btn--brand" type="submit"> <span>Subscribe</span> </button> <div class="msg-success">Great! Check your inbox and click the link.</div> <div class="msg-error">Sorry, something went wrong. Please try again.</div> </form> </div> </div> <div class="sidebar__section is-sticky flex-direction: column hide-mobile"> <div align="center" data-freestar-ad="__336x280 __336x280" id="itsfoss_300x250_300x600_Sidebar2_new"> <script data-cfasync="false" type="text/javascript"> freestar.config.enabled_slots.push({ placementName: "itsfoss_300x250_300x600_Sidebar2_new", slotId: "itsfoss_300x250_300x600_Sidebar2_new" }); </script> </div> </div> </aside> </div> </div> </div> <div class="container wrapper flex flex-wrap gap-lg m-b-lg"> <div class="post-comments radius-double p-lg p-b-0 flex-1 self-align-start" id="comments"> <script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script> <div id="fastcomments-widget"></div> <script> (function () { let simpleSSO = null; simpleSSO = { loginURL: '#/portal/signin' } FastCommentsUI(document.getElementById('fastcomments-widget'), { tenantId: "zzbYFZ39cH4", simpleSSO: simpleSSO, url: window.location.origin + window.location.pathname, urlId: window.location.origin + window.location.pathname }); })(); </script> </div> <div class="related-posts radius-double p-lg flex-1 self-align-start"> <span class="section-title sm m-b uppercase">Read next</span> <div class="post-list m-b-sm"> <a class="post-list-item" href="/vi-editor-basics/"> <h3 class="post-list-item__title">Absolute Essentials You Need to Know to Survive Vi Editor</h3> <i class="icon icon-chevron-right"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <polyline points="9 6 15 12 9 18"></polyline> </svg> </i> </a> <a class="post-list-item" href="/linux-mint-window-effects/"> <h3 class="post-list-item__title">9 Desktop Effects to Add Eye Candy to Linux Mint</h3> <i class="icon icon-chevron-right"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <polyline points="9 6 15 12 9 18"></polyline> </svg> </i> </a> <a class="post-list-item" href="/get-started-openeuler/"> <h3 class="post-list-item__title">Getting Started With openEuler</h3> <i class="icon icon-chevron-right"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <polyline points="9 6 15 12 9 18"></polyline> </svg> </i> </a> <a class="post-list-item" href="/kde-plasma-widgets/"> <h3 class="post-list-item__title">Elevate Your KDE Plasma Experience With These 15 Essential Widgets</h3> <i class="icon icon-chevron-right"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <polyline points="9 6 15 12 9 18"></polyline> </svg> </i> </a> <a class="post-list-item" href="/ubuntu-tiling-windows/"> <h3 class="post-list-item__title">Exploring the Default Tiling Windows Feature in Ubuntu 24.04 (and Enhancing it)</h3> <i class="icon icon-chevron-right"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <polyline points="9 6 15 12 9 18"></polyline> </svg> </i> </a> </div> </div> </div> </main> <section class="container wrapper section cta m-b-0 is-post" > <div class="cta__inner radius-double is-rel w-100 p-t-lg p-b-lg has-img"> <div class="cta__content flex flex-col is-rel z-index-1"> <h2 class="cta__title">Become a Better Linux User</h2> <p id="cta-input-label" class="cta__description opacity-075">With the FOSS Weekly Newsletter, you learn useful Linux tips, discover applications, explore new distros and stay updated with the latest from Linux world </p> <form class="subscribe-form" data-members-form="signup" data-style="inline-joined"> <input data-members-email class="" type="email" autocomplete="email" placeholder="Your email address" aria-labelledby="cta-input-label" required> <button class="btn btn--brand btn--gradient uppercase" type="submit"> <span>Subscribe</span> </button> <div class="msg-success">Great! Check your inbox and click the link.</div> <div class="msg-error">Sorry, something went wrong. Please try again.</div> </form> </div> <figure class="cta__media"> <img class="lazyload cta__img" src="/assets/images/itsfoss-cta.webp" alt="itsfoss happy penguin"/> </figure> </div> </section> <footer class="footer"> <div class="container wrapper"> <div class="row m-b"> <div class="col-xs-12 col-md-4"> <div class="footer__brand flex items-center"> <picture class=""> <source data-srcset="/content/images/size/w300/format/webp/2023/01/itsfoss-logo.png 300w," data-sizes="auto" type="image/webp" > <img class="footer__logo m-r lazyload" data-srcset="/content/images/size/w300/2023/01/itsfoss-logo.png 300w," srcset="/content/images/size/w30/2023/01/itsfoss-logo.png" data-sizes="auto" data-src="/content/images/size/w100/2023/01/itsfoss-logo.png" src="/content/images/size/w30/2023/01/itsfoss-logo.png" alt="It's FOSS" > </picture> </div> <div class="footer__description" id="footer-input-label"> Making You a Better Linux User </div> <form class="subscribe-form radius-rounded m-b" data-members-form="subscribe" data-style="inline-joined"> <input data-members-email class="w-100 radius-rounded" type="email" autocomplete="email" placeholder="Your email address" aria-labelledby="footer-input-label" required> <button class="btn btn--primary radius-rounded" type="submit"> <span>Subscribe</span> </button> <div class="msg-success">Great! Check your inbox and click the link.</div> <div class="msg-error">Sorry, something went wrong. Please try again.</div> </form> </div> <div class="col-xs-12 col-md-4 m-b footer-nav"> <span class="fw-700 m-b-sm display-block text-acc">Navigation</span> <div class="grid col-2"> <ul class="nav"> <li class="nav-news" data-label="📰 News" data-length="7"> <a href="https://news.itsfoss.com/"> <span>📰 News</span> </a> </li> <li class="nav-newsletter" data-label="📬 Newsletter" data-length="13"> <a href="https://itsfoss.com/newsletter/"> <span>📬 Newsletter</span> </a> </li> <li class="nav-quizzes-puzzles" data-label="🧩 Quizzes & Puzzles" data-length="20"> <a href="https://itsfoss.com/quiz/"> <span>🧩 Quizzes & Puzzles</span> </a> </li> <li class="nav-resources" data-label="🎒 Resources" data-length="12"> <a href="https://itsfoss.com/resources/"> <span>🎒 Resources</span> </a> </li> <li class="nav-community" data-label="🏘️ Community" data-length="13"> <a href="https://itsfoss.community/"> <span>🏘️ Community</span> </a> </li> <li class="nav-about" data-label="📖 About" data-length="8"> <a href="https://itsfoss.com/about/"> <span>📖 About</span> </a> </li> <li class="nav-contact is-subitem" data-label="-🪪 Contact" data-length="11"> <a href="https://itsfoss.com/contact-us/"> <span>-🪪 Contact</span> </a> </li> <li class="nav-policies is-subitem" data-label="-📜 Policies" data-length="12"> <a href="https://itsfoss.com/policies/"> <span>-📜 Policies</span> </a> </li> </ul> <ul class="nav secondary submenu"> <li class="nav-linux-server-side" data-label="Linux Server Side" data-length="17"> <a href="https://linuxhandbook.com/"> <span>Linux Server Side</span> </a> </li> <li class="nav-en-espanol" data-label="En Español" data-length="10"> <a href="https://itsfoss.com/es/"> <span>En Español</span> </a> </li> <li class="nav-feedback" data-label="🗳️ Feedback" data-length="12"> <a href="https://itsfoss.com/update-feedback/"> <span>🗳️ Feedback</span> </a> </li> <li class="nav-impressum" data-label="Impressum" data-length="9"> <a href="https://itsfoss.com/impressum/"> <span>Impressum</span> </a> </li> <li class="nav-terms-of-use" data-label="Terms of use" data-length="12"> <a href="https://itsfoss.com/terms/"> <span>Terms of use</span> </a> </li> </ul> </div> </div> <div class="col-xs-12 col-sm-6 col-md-2 m-b"> <span class="fw-700 m-b-sm display-block text-acc">Resources</span> <ul class="nav"> <li><a href="/tag/courses/">Courses 🎓</a></li> <li><a href="/tag/distro-resources/">Distro Resources 📖</a></li> <li><a href="/tag/guides/">Guides 📒</a></li> </ul> </div> <div class="col-xs-12 col-sm-6 col-md-2 m-b"> <span class="fw-700 m-b-sm display-block text-acc">Social</span> <div class="social-links flex flex-col"> <a href="https://www.facebook.com/itsfoss" class="facebook" aria-label="Facebook"><i class="icon icon-facebook icon--sm"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-facebook" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" /> </svg> </i><span>Facebook</span></a> <a href="https://twitter.com/itsfoss2" class="twitter" aria-label="Twitter"><i class="icon icon-twitter-x icon--sm"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M4 4l11.733 16h4.267l-11.733 -16z"></path> <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path> </svg> </i><span>Twitter</span></a> <a href="https://itsfoss.com/rss/" class="rss" aria-label="RSS"><i class="icon icon-rss icon--sm"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rss" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <circle cx="5" cy="19" r="1" /> <path d="M4 4a16 16 0 0 1 16 16" /> <path d="M4 11a9 9 0 0 1 9 9" /> </svg> </i><span>RSS</span></a> <a href="https://www.instagram.com/itsfoss/" class="instagram" aria-label="Instagram"><i class="icon icon-instagram icon--sm"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-instagram" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <desc>Download more icon variants from https://tabler-icons.io/i/brand-instagram</desc> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <rect x="4" y="4" width="16" height="16" rx="4" /> <circle cx="12" cy="12" r="3" /> <line x1="16.5" y1="7.5" x2="16.5" y2="7.501" /> </svg> </i><span>Instagram</span></a> <a href="https://t.me/itsfoss_official" class="telegram" aria-label="Telegram"><i class="icon icon-telegram icon--sm"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-telegram" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <desc>Download more icon variants from https://tabler-icons.io/i/brand-telegram</desc> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4" /> </svg> </i><span>Telegram</span></a> <a href="https://www.youtube.com/@Itsfoss" class="youtube" aria-label="Youtube"><i class="icon icon-youtube icon--sm"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-youtube" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <desc>Download more icon variants from https://tabler-icons.io/i/brand-youtube</desc> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <rect x="3" y="5" width="18" height="14" rx="4" /> <path d="M10 9l5 3l-5 3z" /> </svg> </i><span>Youtube</span></a> </div> </div> </div> <div class="footer__bottom"> <div class="footer__copy"> <span>©2025 <a href="https://itsfoss.com">It's FOSS</a>.</span> <span>Hosted on <a href="https://digitalocean.pxf.io/JzK74r">Digital Ocean</a> & Published with <a href="https://ghost.org/pricing/?via=abhishek70">Ghost</a> & <a href="https://brightthemes.lemonsqueezy.com/?aff=GNoD0">Rinne</a>.</span> </div> <div class="color-scheme flex flex-cc radius-half"> <div class="color-scheme-symbol"> <span class="accent-bg"></span> </div> <select class="color-scheme-select radius-half js-color-scheme-select" aria-label="Change color scheme"> <option value="system" selected>System</option> <option value="light">Light</option> <option value="dark">Dark</option> </select> <i class="icon icon-select"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-select" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path d="M17 8.517L12 3 7 8.517M7 15.48l5 5.517 5-5.517"></path> </svg> </i></div> </div> </div> </footer> <dialog class="notification"> <i class="icon icon-success notification-icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <circle cx="12" cy="12" r="9" /> <path d="M9 12l2 2l4 -4" /> </svg> </i> <i class="icon icon-error notification-icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-octagon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z" /> <line x1="12" y1="8" x2="12" y2="12" /> <line x1="12" y1="16" x2="12.01" y2="16" /> </svg> </i> <i class="icon icon-warning notification-icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M12 9v2m0 4v.01" /> <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" /> </svg> </i> <p class="notification-msg signup-success">Great! You’ve successfully signed up.</p> <p class="notification-msg signin-success">Welcome back! You've successfully signed in.</p> <p class="notification-msg subscribe-success">You've successfully subscribed to It's FOSS.</p> <p class="notification-msg link-expired">Your link has expired.</p> <p class="notification-msg checkout-success">Success! Check your email for magic link to sign-in.</p> <p class="notification-msg billing-success">Success! Your billing info has been updated.</p> <p class="notification-msg billing-cancel">Your billing was not updated.</p> <button class="notification-close js-notification-close" aria-label="Close" onclick="closeNotification(event.currentTarget.parentNode);"> <i class="icon icon-x"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <line x1="18" y1="6" x2="6" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" /> </svg> </i> </button> </dialog> <script> document.addEventListener('readystatechange', function(event) { if (document.readyState === "complete") { // table of contents toggle const tocToggleBtn = document.querySelector('.js-toc-toggle'); const postToc = document.querySelector('.js-post-toc'); // media query for TOC function const mqSmall = window.matchMedia('(max-width: 767px)'); const mqLarge = window.matchMedia('(min-width: 768px)'); if (tocToggleBtn && postToc) { // if device is large, show the TOC by default if (mqLarge.matches) postToc.classList.add('is-active'); // open/close the TOC tocToggleBtn.onclick = function(event) { postToc.classList.toggle('is-active'); } } // get header height as threshold const headerHeight = parseInt(getComputedStyle(document.documentElement) .getPropertyValue('--global-header-height')); const headerStyle = document.querySelector('.js-header').getAttribute('data-header'); let headerOffset = headerStyle === 'normal' ? 20 : headerHeight + 20; if (postToc) { tocbot.init({ // Where to render the table of contents. tocSelector: '.js-toc', // Where to grab the headings to build the table of contents. contentSelector: '.content', // Which headings to grab inside of the contentSelector element. headingSelector: 'h1, h2, h3, h4', // Ignore some headings (like header card and toggle card) ignoreSelector: '[class*="kg-"],[class*="content-cta"]', // For headings inside relative or absolute positioned containers within content. hasInnerContainers: false, // smooth scroll scrollSmooth: false, // offset headingsOffset: headerOffset, // onclick event /*onClick: function(e){ e.preventDefault(); const href = this.getAttribute('href'); if (href) { const el = document.querySelector(`#${CSS.escape(href.substring(1))}`); let offset; const bodyRect = document.body.getBoundingClientRect().top; const elementRect = el.getBoundingClientRect().top; const elementPosition = elementRect - bodyRect; offset = headerOffset; themeGlobal.scrollPos = elementPosition; const offsetPosition = elementPosition - offset; window.scrollTo({ top: offsetPosition, behavior: 'smooth' }); } // if on small screen close the TOC when clicking on item if (mqSmall.matches) postToc.classList.remove('is-active'); }*/ }); document.querySelector('.js-toc .toc-list') ? postToc.classList.add('is-rendered') : null; } } }); </script> <script> // Copy button const copyBtn = document.querySelector('.js-copy-link'); if (copyBtn) { copyBtn.onclick = function(event) { copyToClipboard(event.currentTarget, event.currentTarget.getAttribute('data-url')); } } /** * Copy to clipboard * @src - source element * @str - string to copy */ const copyToClipboard = function(src, str) { const el = document.createElement('textarea'); el.value = str; el.setAttribute('readonly', ''); el.style.position = 'absolute'; el.style.left = '-9999px'; document.body.appendChild(el); el.select(); document.execCommand('copy'); document.body.removeChild(el); src.classList.add('has-tooltip'); src.setAttribute('data-label', 'Copied!'); src.onmouseleave = function() { src.classList.remove('has-tooltip'); setTimeout(function(){ src.setAttribute('data-label', ''); }, 500); } }; </script> <script> const navItems = document.querySelectorAll('.header .nav:not(.submenu) li, .menu .nav:not(.submenu) li') const allNavItems = document.querySelectorAll('.is-subitem') // Remove '-' signs allNavItems.forEach(item => { const itemName = item.querySelector('a span') itemName.innerText = itemName.innerText.slice(1) }); // Add subitems in place let subMenu, hasItems navItems.forEach((item, index) => { if (item.classList.contains('is-subitem') && !navItems[index - 1].classList.contains('is-subitem')) navItems[index - 1].classList.add('is-mainitem'); subMenu = item.classList.contains('is-subitem') ? subMenu : document.createElement('ul'); if (item.classList.contains('is-subitem')) { subMenu.appendChild(item) subMenu.classList.add('nav','submenu') } else { item.appendChild(subMenu) } }); </script> <script> const submenus = document.querySelectorAll('.menu .is-mainitem') const toggle = document.querySelector('[data-toggle-template]'); submenus.forEach(menu => { const toggleBtn = toggle.content.cloneNode(true); menu.appendChild(toggleBtn); }); </script> <script> // Give the parameter a variable name const qsParams = new URLSearchParams(window.location.search); const isAction = qsParams.has('action'); const isStripe = qsParams.has('stripe'); const success = qsParams.get('success'); const action = qsParams.get('action'); const stripe = qsParams.get('stripe'); if (qsParams && isAction) { if (success === "true") { switch (action) { case 'subscribe': openNotification('subscribe-success'); break; case 'signup': openNotification('signup-success'); break; case 'signin': openNotification('signin-success'); break; default: break; } } else { openNotification('link-expired'); } } if (qsParams && isStripe) { switch (stripe) { case 'success': openNotification('checkout-success'); break; case 'billing-update-success': openNotification('billing-success'); break; case 'billing-update-cancel': openNotification('billing-cancel'); break; default: break; } } /** * Handle Notifications */ function openNotification(type) { const notification = document.querySelector('dialog.notification'); if (notification) { notification.setAttribute('data-msg-type', type); notification.show(); setTimeout(function(){ closeNotification(notification); }, 3000); } } /** * Clean URI */ function clearURI() { window.history.replaceState({}, '', `${window.location.pathname}`); } function closeNotification(notification) { notification.close(); clearURI(); setTimeout(function(){ notification.removeAttribute('data-msg-type') }, 500); } </script> <script src="https://talk.hyvor.com/embed/comment-counts.js"></script> <script> hyvorTalkCommentCounts.load({ "website-id": 8243 }) </script> <script> Contextly.ready('widgets'); </script>  <button id="pmLink">Privacy Manager</button>  <script type="text/javascript" async src="https://btloader.com/tag?o=5714937848528896&upapi=true"></script>  <script>(function(d,u,ac){var s=d.createElement('script');s.type='text/javascript';s.src='https://a.omappapi.com/app/js/api.min.js';s.async=true;s.dataset.user=u;s.dataset.account=ac;d.getElementsByTagName('head')[0].appendChild(s);})(document,333364,352958);</script>  </body> </html>