<---- template headericclude ----->
how to reduce the application pane program icon size
FedoraForum.org - Fedora Support Forums and Community
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Join Date
    Jun 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation how to reduce the application pane program icon size

    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

  2. #2
    Join Date
    May 2011
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: how to reduce the application pane program icon size

    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.

  3. #3
    Join Date
    Jun 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Re: how to reduce the application pane program icon size

    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;
    }

  4. #4
    Join Date
    Mar 2010
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: how to reduce the application pane program icon size

    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.

  5. #5
    Join Date
    Jun 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: how to reduce the application pane program icon size

    I have not changed the font size even

  6. #6
    Join Date
    Dec 2010
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: how to reduce the application pane program icon size

    Quote 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:

    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

  7. #7
    Join Date
    Mar 2010
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: how to reduce the application pane program icon size

    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.


  8. #8
    Join Date
    Dec 2010
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: how to reduce the application pane program icon size

    Quote 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

  9. #9
    Join Date
    Jun 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking Re: how to reduce the application pane program icon size

    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

  10. #10
    Join Date
    Dec 2010
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: how to reduce the application pane program icon size

    Quote 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.

    Quote 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

  11. #11
    Join Date
    Mar 2010
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: how to reduce the application pane program icon size

    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:

    Code:
    # /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.

  12. #12
    Join Date
    Dec 2010
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: how to reduce the application pane program icon size

    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

  13. #13
    Join Date
    Mar 2010
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: how to reduce the application pane program icon size

    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.

  14. #14
    Join Date
    May 2010
    Age
    42
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Re: how to reduce the application pane program icon size

    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
    Code:
    .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.
    Code:
    .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;
    Code:
    stage {
        font-family: 'URW Gothic L', sans-serif;				/* Fonts - Default cantarell, sans-serif */
    }
    Linux 😎

  15. #15
    Join Date
    Dec 2010
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: how to reduce the application pane program icon size

    Quote Originally Posted by larsenguitars
    I also changed the font. It's the very first section right at the top of the .css file;
    Code:
    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....

Page 1 of 2 12 LastLast

Similar Threads

  1. How to reduce size of rootfs.jffs2
    By sumiram in forum Using Fedora
    Replies: 0
    Last Post: 28th January 2011, 12:14 PM
  2. reduce the size of swap
    By bonedome in forum Using Fedora
    Replies: 3
    Last Post: 22nd August 2010, 01:31 PM
  3. application launcer menu icon size
    By ztahf in forum Using Fedora
    Replies: 0
    Last Post: 12th June 2009, 04:51 PM
  4. how to reduce the picture size
    By first007boy in forum Using Fedora
    Replies: 2
    Last Post: 12th March 2007, 08:11 PM
  5. start position application windows behind desktop pane
    By tisomaki in forum Using Fedora
    Replies: 2
    Last Post: 4th March 2007, 12:22 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
[[template footer(Guest)]]