How to change icon/textlabel size in Gnome 3.4 icon grid

Write tutorials and howtos in here
More tutorials here http://community.linuxmint.com/tutorial/welcome
Forum rules
Do not start a support topic here please, Before you post please read this

How to change icon/textlabel size in Gnome 3.4 icon grid

Postby maxibuntu on Sun Dec 09, 2012 10:07 am

The standard icons in the application grid are way too big and the text labels are cut short which makes long titles unreadable. A number of applications don't even have an icon with high enough resolution, these icons will appear blurred or jagged if they are enlarged too much. To fix these annoyances you can either edit the file /usr/share/gnome-shell/theme/gnome-shell.css or you can copy the whole /usr/share/gnome-shell/theme folder to ~/.themes/CustomTheme/gnome-shell and edit the file from there.

All the following commands can be run from a Terminal, like for instance gnome-terminal. You can easily select and copy a command from this page, then paste it in a terminal, and hit enter.

I have a sudo setup on LMDE, if you have an su setup like on standard Debian, use:

Code: Select all
su -


...and enter the root password, and commands.

But we will continue with the sudo version:

To edit the global theme css file directly, run in a terminal this command:

Code: Select all
sudo gedit /usr/share/gnome-shell/theme/gnome-shell.css


Then look for this code:

Code: Select all
/* Application Launchers and Grid */

.icon-grid {
    spacing: 36px;
    -shell-grid-horizontal-item-size: 118px;
    -shell-grid-vertical-item-size: 118px;
}

.icon-grid .overview-icon {
    icon-size: 96px;
}


...and alter it to:

Code: Select all
/* Application Launchers and Grid */

/* Size of grid cell for one icon */

.icon-grid {
    spacing: 0px; /* was 36px */
    -shell-grid-horizontal-item-size: 280px; /* was 118px */
    -shell-grid-vertical-item-size: 120px; /* was 118px */
}

/* Size of one icon */

.icon-grid .overview-icon {
    icon-size: 64px; /* was 96px */
}

/* Size of the text label for one icon */

.icon-grid .app-well-app > .overview-icon,
.search-result-content > .overview-icon {
    width: 280px; /* new entry */
    height: 120px; /* new entry */
}


You can vary the numbers to suit you. These are the settings that work best with my 1920x1080 monitor.

To view your changes you have to save the file, and then restart the Gnome Shell by pressing Alt+F2 and enter "r" or "restart". There is no need to close your applications, they will keep running.

If you edit the global theme ccs file directly like I described here then your changes will be overwritten in case of a Gnome Shell upgrade. That's why it might be wiser to copy the theme to your home directory an edit it from there.

First, create a directory for your custom theme:

Code: Select all
mkdir -p ~/.themes/CustomTheme/gnome-shell


(You can replace the name CustomTheme with anything you like. The name will show up in tools like Gnome Tweak Tool / Advanced Settings)

Copy the theme:

Code: Select all
cp /usr/share/gnome-shell/theme/* ~/.themes//CustomTheme/gnome-shell


Of course if you are really lazy you could just use a graphical file manager like Nautilus or Thunar or even MC to accomplish these tasks.

To make use of custom user themes you have to install the "User Themes" extension from this page: https://extensions.gnome.org/extension/19/user-themes/

Once installed you start the Gnome Tweak Tool (Advanced Settings) and choose the theme from the dropdown list in "Theme > Shell theme". Choose the name of your user theme directory, in this case "CustomTheme".

Then edit the file ~/.themes//CustomTheme/gnome-shell/gnome-shell.css as described above.

Code: Select all
gedit  ~/.themes//CustomTheme/gnome-shell/gnome-shell.css


To view your changes you have to save the file, and then restart the Gnome Shell by pressing Alt+F2 and enter "r" or "restart".
maxibuntu
Level 2
Level 2
 
Posts: 87
Joined: Thu Nov 24, 2011 9:56 am
Location: Rotterdam, Netherlands

Linux Mint is funded by ads and donations.
 

Re: How to change icon/textlabel size in Gnome 3.4 icon grid

Postby rop75 on Sun Dec 09, 2012 1:43 pm

Just to complete your how-to, an easy way to make the app name to fit the icon is to change app name, for that I typed alt-f2 alacarte. A example I have edited the name of LibreOffice Writter, and now it is only Writter
User avatar
rop75
Level 2
Level 2
 
Posts: 97
Joined: Sat May 05, 2012 6:08 pm

Re: How to change icon/textlabel size in Gnome 3.4 icon grid

Postby maxibuntu on Sun Dec 09, 2012 2:40 pm

Yes, that is possible. But I need descriptive names for some apps, and smaller icons.

Be careful with alacarte, it is not well suited for Gnome 3, there are all sorts of problems with it. It can even mess up your entire System/Administration/Settings sections.
maxibuntu
Level 2
Level 2
 
Posts: 87
Joined: Thu Nov 24, 2011 9:56 am
Location: Rotterdam, Netherlands


Return to Tutorials / Howtos

Who is online

Users browsing this forum: marquiz and 3 guests