how to reduce the application pane program icon size

[caesargunasingh]

hello team,

the icons in the applications pane are very big, i need to scroll multiple times inorder to reach the last program.

how to reduce the icon size, so that all the installed programs can be visualized without to much scrolling?

regards

caesar

[cymbaline42]

I'm not aware of a GUI that does this. You will have to manually edit the /usr/share/gnome-shell/theme/gnome-shell.css file.

[alejandromx]

hi,

icons size of menu have solution:

in terminal (as root) paste this:
gedit /usr/share/gnome-shell/theme/gnome-shell.css


seek line:
* Apps *

and test my configuration:

.icon-grid {
spacing: 18px;
-shell-grid-item-size: 90px;
}

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

[taytong888]

Hello alejandromx,

I substituted the default figures 36, 118 and 90 from top to bottom of the srcript with 18, 90 and 64 as you suggested, saved the file and I got a neater application pane with smaller icons.

Now, how do I make the font of the icon labels larger, e.g. from 7.5 - 9.0 pts to say 12 points, so that they are readable?

Thanks in advance for your help.

[alejandromx]

I have not changed the font size even

[mightymouse2045]

Originally Posted by taytong888

Hello alejandromx,

I substituted the default figures 36, 118 and 90 from top to bottom of the srcript with 18, 90 and 64 as you suggested, saved the file and I got a neater application pane with smaller icons.

Now, how do I make the font of the icon labels larger, e.g. from 7.5 - 9.0 pts to say 12 points, so that they are readable?

Thanks in advance for your help.

To change font size search for:

.app-well-app > .overview-icon,
.remove-favorite > .overview-icon,
.search-result-content > .overview-icon

Now if you can work out how to WRAP the text under the icons I would reaaaally appreciate you letting us know. I've found if you increase the font size to make them readable then half the font scrolls off so you get like "Add /Re...." Sure you can guess that it's "Add/Remove Software" but when you get some other's that start with the same name and end with something else it's quite annoying.

Also hovering over an icon doesn't give you the full name.

I've tried white-space: pre-wrap; and wordwrap: breakword, and some others but I canna get it to work.

What I suspect is it has something to do with the icon grid and in particular if the grid is being drawn as a table then white-space: pre-wrap; would need to go into whatever is controlling the table otherwise it doesn't work.

Hope someone can help resolve this because it is quite painful

[taytong888]

mightymouse2045,

To change font size search for:

Code:

.app-well-app > .overview-icon,
.remove-favorite > .overview-icon,
.search-result-content > .overview-icon

Now if you can work out how to WRAP the text under the icons I would reaaaally appreciate you letting us know. I've found if you increase the font size to make them readable then half the font scrolls off so you get like "Add /Re...." Sure you can guess that it's "Add/Remove Software" but when you get some other's that start with the same name and end with something else it's quite annoying.

Also hovering over an icon doesn't give you the full name.

I've tried white-space: pre-wrap; and wordwrap: breakword, and some others but I canna get it to work.

What I suspect is it has something to do with the icon grid and in particular if the grid is being drawn as a table then white-space: pre-wrap; would need to go into whatever is controlling the table otherwise it doesn't work.

Hope someone can help resolve this because it is quite painful

Increasing the font size, etc. for the labels underneath the icons seems to be involving much more work. I would rather leave this in the hands of professional web developers in Fedora 15 design team.

[mightymouse2045]

Originally Posted by taytong888

mightymouse2045,




Increasing the font size, etc. for the labels underneath the icons seems to be involving much more work. I would rather leave this in the hands of professional web developers in Fedora 15 design team.

Nah it's easy to do man - but it has ramifications ie you can't see the full name.

If the text label could somehow be wrapped then that wouldn't be an issue

[caesargunasingh]

hello team,

thanks all for the suggestion..

i had reduced the application pane icon size, as per your suggestion and now it looks good

regards

caesar

[mightymouse2045]

Originally Posted by taytong888

mightymouse2045,




Increasing the font size, etc. for the labels underneath the icons seems to be involving much more work. I would rather leave this in the hands of professional web developers in Fedora 15 design team.

Originally Posted by caesargunasingh

hello team,

thanks all for the suggestion..

i had reduced the application pane icon size, as per your suggestion and now it looks good

regards

caesar

By the way here is how to wrap the text for the icons in the app overview

http://forums.fedoraforum.org/showth...84#post1491984

[taytong888]

Hello mightymouse2045,

Thank you for giving us the link to howto wrap words in icons, but right after typing in
the first line of code I got permission denied:

# /usr/share/gnome-shell/js/ui/iconGrid.js

-bash: /usr/share/gnome-shell/js/ui/iconGrid.js: Permission denied

What am I supposed to do next?

Thanks in advance for your help.

[mightymouse2045]

You need to use an text editor to open it with like gedit

open a terminal and type:

sudo gedit /usr/share/gnome-shell/js/ui/iconGrid.js

[taytong888]

Hello mightymouse2045,

I did what you suggested and saved the file changes but after that did not recognize any text being wrapped for the icons.

Could you ask your secret developer friend to show us how to increase the font size of the text beneath the icons?

That would be great.

Thanks in advance.

[larsenguitars]

To change the font size, find the following section & just change the line I have indicated with my comment to whatever font size you want. I went with 8.5pt

.app-well-app > .overview-icon,
.remove-favorite > .overview-icon,
.search-result-content > .overview-icon {
    border-radius: 4px;
    padding: 10px;					/* How much bigger you want the Highlight Square around the Icon - Default 3px */
    border: 1px rgba(0,0,0,0);				/* Shadow Border - Default 1px*/
    font-size: 8.5pt;					/* Font Size - Default 7.5pt */
    color: white;
    transition-duration: 100;
    text-align: center;
}

Here is the modified section of my gnome-shell.css file.
Try it if you want, but back up your copy of the css file first in case you don't like it.
I have some fairly descriptive comments to the right of important lines, to let you know which lines do what. Most of the lines you'll be looking for are almost half way down the file.

NOTE: Almost everywhere I've commented, I have changed something. EVERY change is commented. Read them all because, for at least one of the icon size things I remember you have to change two lines, not just one line.
Repeat: Read ALL my comments (to the right of modified lines) before changing any icon sizes.

.search-providers-box {
    spacing: 12px;				/* Search Providers ~ Space between Buttons - Default 12px */
}

.dash-search-button {
    background-gradient-direction: vertical;
    background-gradient-start: rgba(255, 255, 255, 0.2);
    background-gradient-end: rgba(255, 255, 255, 0);
    border: 1px solid #808080;
    border-radius: 16px;
    height: 32px;
    width: 200px;				/* Search Providers ~ Button Width - Default 300px */
    font-weight: bold;
}

.dash-search-button:selected,
.dash-search-button:hover {
    background-gradient-direction: vertical;
    background-gradient-start: rgba(36, 109, 82, 0.5);	/* Search Provider Buttons ~ Color ~ Hover - Default rgba(255, 255, 255, 0.4) */
    background-gradient-end: rgba(255, 255, 255, 0.2);	/* Search Provider Buttons ~ Color - Default rgba(255, 255, 255, 0.2) */
}

.dash-search-button-label {			/* Search Provider Buttons ~ Font */
    color: #cccccc;
    font-size: 12pt;
}

/* Apps */

.icon-grid {
    spacing: 4px;				/* Applications ~ Grid ~ Spacing - Default 36px */
    -shell-grid-item-size: 92px;		/* Applications ~ Grid - Default 118px */
}

.icon-grid .overview-icon {
    icon-size: 48px;				/* Applications ~ Icon Size - Default 96px */
}

.all-app {
    padding: 8px 25px 8px 2px;			/* Applications (Mid) List ~ Padding ~ Top Right Bottom Left - Default 16px 25px 16px 16px */
    spacing: 10px;				/* Applications (Mid) List ~ Spacing to Categories (Right) List - Default 20px */
}

.all-app:rtl {
    padding-right: 2px;				/* Applications (Mid) List ~ Padding - Default 16px [Swaps Orientation for Right-to-Left Languages] */
    padding-left: 25px;				/* As Above ~ Default 25px [Both Values Must be Right-Left Opposite of .all-app padding above] */
}

.app-filter {
    font-size: 10.5pt;
    font-weight: bold;
    height: 2.85em;
    color: #aaa;
    width: 200px;
}

.app-filter:hover {
    color: #eee;
}

.app-filter:selected {
    color: #ffffff;
    background-image: url("filter-selected-ltr.svg");
    background-position: 190px 10px;
}

.app-filter:selected:rtl {
    background-image: url("filter-selected-rtl.svg");
    background-position: 10px 10px;
}

.app-filter:focus {
    outline: 1px solid #aaa;
}

.dash-item-container > .app-well-app {
    padding: 1px 3px;					/* Favorites (Left) Dash ~ Padding between Icons ~ Vertical Horizontal - Default 4px 8px */
}

.remove-favorite-icon {
    color: #a0a0a0;
}

.remove-favorite-icon:hover {
    color: white;
    icon-shadow: black 0px 2px 2px;
}

.app-well-app > .overview-icon,
.remove-favorite > .overview-icon,
.search-result-content > .overview-icon {
    border-radius: 4px;
    padding: 10px;					/* How much bigger you want the Highlight Square around the Icon - Default 3px */
    border: 1px rgba(0,0,0,0);				/* Shadow Border - Default 1px*/
    font-size: 8.5pt;					/* Font Size - Default 7.5pt */
    color: white;
    transition-duration: 100;
    text-align: center;
}

.app-well-app.running > .overview-icon {
    text-shadow: black 0px 2px 2px;
    background-image: url("running-indicator.svg");
}

.app-well-app:selected > .overview-icon,
.search-result-content:selected > .overview-icon {
    background-color: rgba(255,255,255,0.33);
}

.app-well-app:hover > .overview-icon,
.remove-favorite:hover > .overview-icon,
.search-result-content:hover > .overview-icon {
    background-color: rgba(36,109,82,0.4);		/* Color & Opacity of Highlight Square - Defualt rgba(255,255,255,0.1) */
    padding: 10px;				/* I added this line ~ Pads Highlight Sqaure - Stretches grid on hover unless value matches .app-well-app padding above */
    text-shadow: black 0px 2px 2px;
    transition-duration: 100;
}

I also changed the font. It's the very first section right at the top of the .css file;

stage {
    font-family: 'URW Gothic L', sans-serif;				/* Fonts - Default cantarell, sans-serif */
}

[mightymouse2045]

Originally Posted by larsenguitars

I also changed the font. It's the very first section right at the top of the .css file;

stage {
    font-family: 'URW Gothic L', sans-serif;				/* Fonts - Default cantarell, sans-serif */
}

Can you post a pic with your font - nice to see what others fonts look like....