When using an uploaded image as a tile icon, is there a method to increasing it’s size? They look small for my taste on my wall-hung tablet. Here’s an example of my disco ball “lounge mode” icon. I tried increasing icon size via .css in the theme, but icon image size doesn’t increase whereas the stock icons do.
Thanks in advance. 
What does your Custom CSS look like? You would need to target the right element to scale it. It’s an <img> tag rather than an <svg> tag if you’ve uploaded a PNG, JPEG, etc.
Also keep in mind the following from the Custom Icon help article:
That means that a 4:5 ratio with no additional padding or whitespace will scale to fill the available icon space best
I’m not going to lie… my knowledge of CSS is grossly limited, but with your last reply, I copied the line for ICONS and edited it for the image. Worked out perfectly.
.tile .icon svg {width: 60%; height: 60%;}
.tile .icon img {width: 70%; height: 70%;}
Here’s the result…
Thanks for the heads up.
Worked for me as well and looks great !! But… did you find a way to slightly move the icon up/down ?
I never tried. It never occurred to me to move it up or down.
We don’t officially recommend any specific CSS, but here’s some ideas…
I would probably use font-size instead since that’s how we primarily size icons*
For positioning, there’s two approaches that are common in CSS:
Use a transform to move things:
.tile.hyperlink .icon {
font-size: 150%;
transform: translateY(-5%)
}
Change the position to relative, and then use the top and left properties to move things relative to their current position (could cause issues if it overrides any explicit positioning)
.tile.hyperlink .icon {
font-size: 150%;
position: relative;
top: -10%;
}
As usually, the normal disclaimer applies that any CSS snippets provided are not specific recommendations nor officially supported. And CSS customizations may have to be updated with future SharpTools app updates.
Sorry @josh ,
This didn’t worked for me. Icon remain in the same position.
Am I doing something wrong ?
You have a space between .tile and .hyperlink and there shouldn’t be one.
Sorry @Josh,
Corrected but still Icon remain in place. Feel free to correct my syntax errors
.tile.hyperlink. icon {
font-size: 150%;
position: relative;
top: -70%;
}
Have you tried copying and pasting the syntax from my original example above. It already has the correct syntax.
Your latest update fixed the space between .tile and .hyperlink but it looks like a new error was introduced. There should be a space after .tile.hyperlink and the .icon
Again, the original post had valid syntax that you could highlight and copy.
I tried:
.tile.hyperlink .icon {
font-size: 150%;
position: relative;
top: -50%;
}
but nothing happen…
That looks right. Do you have other Custom CSS that might be interfering with it? It might help to see your complete Custom CSS for that theme.
Moving the icons up 50% would move them off the tile, so the effect would be pretty noticeable…
That’s all I have,
All works , but Icon position. My icon is a JPG picture which I uploaded and increased .
.tile.news-feed .main-content { font-size: 1.5em; }
.tile.clock .time { font-size: 5.7em; } .date { font-size: 2em; }
.tile.day-of-month .header span {font-size:2.5em!important; position: relative; top:-0.3em}
.tile.calendar.agenda .main-content { font-size: 1.75em; }
.tile.news-feed .main-content .article-date { font-size: 1.25em; }
.tile.--theme-style-supertile .icon {
-webkit-filter: drop-shadow(0 0 3px #ff0)drop-shadow(0 0 10px #ff0)drop-shadow(0 0 20px #ff0);
filter: drop-shadow(0 0 3px yellow)drop-shadow(0 0 10px yellow)drop-shadow(0 0 20px yellow);
}
.tile.--theme-style-Notes {box-shadow: 5px 5px 7px rgba(33,33,33,.7); transform: rotate(-10deg); font-family: cursive; color: #000 !important; background: #ffc !important; z-index: 1;}
.tile.--theme-style-Notes .main-content {font-size: 1.3em !important;}
.tile .icon svg {width: 60%; height: 60%;}
.tile .icon img {width: 70%; height: 70%;}
.tile.hyperlink
.icon {
font-size: 150%;
position: relative;
top: -50%;
}
Are you testing it with a Hyperlink tile?
That snippet is specifically for Hyperlink tiles. The .tile.hyperlink part indicates that it should only apply to hyperlink tiles. You would need to adjust accordingly if you wanted it to apply to other tile types.
I mean that the snippet only applies to Hyperlink tiles. Not any other tile like Things, Variables, etc. It being a built-in icon versus a uploaded file image shouldn’t matter in this case since we are targeting the higher level .icon
As mentioned in my previous reply, it’s the combination of .tile.hyperlink in the CSS selector that does this.
Your existing CSS uses the same approach to limit the CSS to news feeds, clocks, and calendars.
If you can clarify what you are trying to accomplish, perhaps we can provide better guidance. Just a heads up that I am out of the office on vacation, so might not be able to respond immediately, but other community members might be able to help out in the meantime.
PS. You will want to make sure the selector is all on the same line as shown in my original snippet. The screenshot just made it look like it was on two lines since my browser developer tools squished things a little bit.
@josh ,
As mention above I’m trying the change the position of a File Type Icon.
I’m trying to move the icon a little bit down since it cover my header.
That’s not a type of tile though. What type of tile are you trying to use the file icon on?
This a Tile. The layout is Color Control Tile.
That explains why the snippet won’t work.
The snippet only applies to hyperlink tiles. As I mentioned in my previous reply, you have a variety of different types of css selectors in your theme.
All of the ones highlighted in yellow are targeting a particular tile type. In other words, the CSS with those only applies to a particular tile type / layout.
The ones highlighted in blue are targeting specific named styles and only apply to tiles that use that particular named style.
The ones in red don’t have any subselector, so they apply to the icons of ALL tiles.
You would need to adjust the snippet according to your needs. Are you trying to apply the style to ALL tiles, all Color Control tiles, or just a particular tile (eg. With a specific named style)?
How to target specific tiles using named styles