I’m trying to modify some of the CSS on the Outlook.com OWA webmail interface. I have been trying for days to try to find the CSS selector and rule that controls the spacing between the “Quick Action” icons. If anyone has an Outlook or Office 365 account, these are the icons that appear when you hover over a message (mark as read, delete, etc). The delete icon has extra white space around it and I want to tighten it up.
Using my browser DOM inspector and trying to alter just the current element it appears that the delete icon is in a different DIV from the other Quick Action icons.
Both icons are also nested inside of several other containers.
I have tried setting margins, padding, max-width, min-width for all of these DIVs.
In addition to not being able to control the icon spacing I cant find a common CSS class or any way to effect ALL Quick Action icon, just the individual element I’m working with.
I’m not a CSS experts so some help would be appreciated.
Ok the space is created by the icon is actually a compilation of various spaces. First, you have the SVG of the actual trash can which has about 10px or so of spacing in the actual SVG image. Its parent container then has a left margin of a few pixels and then the quick actions, in the separate div, is adding a bit of padding on the right.
If you add up the padding on the right + margin-left of the trash can + the intrinsic padding left of the SVG icon itself and you have the spacing accounted for.
Now targetting… do remember that you can also target elements based on attributes. As you have noticed, many of the classes used are obfuscated and will probably change all the time. What doesn’t change however is things like the title attributes. Look at the code snippet below…
These are the three quick icons for things like reading, flagging the message and keeping the message top of the folder. You could select these three buttons by using the title attribute. On this page, third example down, shows you how you can do this for the title.
Of course that is just one of a few different ways to select an item. Hope this helps.
Everything in your link is really cool. I didn’t know you could select by most of those.
The problem (I think) is since cant modify the SVG I need to kill the parent left margin and right padding.
Do you see a way I can select from those?
Also, how are you finding the the selectors? I’m using Firefox, Object inspector and then RIGHT clicking on the QA menu so it doesn’t disappear. After doing all that I am still only finding these elements by luck. I have much better success when the object isn’t a pop-up/hover item.
These elements are being added dynamically through JavaScript. When you hover the row, it is triggering a function which is adding the elements and when you hover off, it removes them.
The way I am getting to them is through forcing a debug session whenever the row DOM is manipulated. It freezes the execution of the JS and then I can see them. It isn’t easy to get to.
Either way when you get down to that level there is really nothing to hang on to for styling. The classes again are all obfuscated, not even attributes you can target. Only thing left is its position in relation to other elements. But for that you still need to find an ancestor element to start from and the nearest is like 5 grandparents up. If they change the structure at all, then that will even be worthless. I am not sure it is worth all the time just to adjust some spacing.
