SOLVED

Shading in Hero web part tiles

%3CLINGO-SUB%20id%3D%22lingo-sub-846419%22%20slang%3D%22en-US%22%3EShading%20in%20Hero%20web%20part%20tiles%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-846419%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20using%20the%205%20tile%20Hero%20web%20part.%20From%20research%20it%20sounds%20like%20the%20shading%20in%20the%20tiles%20is%20not%20removable.%20However%2C%20as%20you%20can%20see%20in%20this%20screenshot%2C%20the%20tile%20in%20the%20bottom%20right%2C%20which%20is%20just%20some%20OOB%20stock%20image%20does%20not%20have%20the%20shading%2C%20whereas%20my%20little%20phone%20number%20tile%20does.%20I%20would%20LOVE%20to%20get%20rid%20of%20that%20shading%20on%20the%20phone%20tile%20to%20match%20the%20treatment%20of%20the%20photo%20on%20the%20lower%20right.%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F130921i530DC998C62C0602%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%229-10-2019%206-15-33%20AM.png%22%20title%3D%229-10-2019%206-15-33%20AM.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20can%20see%20the%20the%20settings%20for%20the%20tiles%20are%20identical%20but%20for%20the%20image%20being%20used%20(and%20the%20link%2C%20which%20I%20just%20tested%20for%20both%20images%20and%20does%20not%20change%20the%20shading%20behavior).%20Is%20there%20any%20way%20I%20can%20get%20my%20phone%20number%20tile%20to%20match%20the%20non-shaded%20behavior%20of%20the%20photo%20on%20the%20lower%20right%3F%20Thanks.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20343px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F130922iD62BE6142E208AAF%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%229-10-2019%206-24-44%20AM.png%22%20title%3D%229-10-2019%206-24-44%20AM.png%22%20%2F%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20340px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F130923i89DDB084E0EAFF45%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%229-10-2019%206-25-45%20AM.png%22%20title%3D%229-10-2019%206-25-45%20AM.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-846419%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-846462%22%20slang%3D%22en-US%22%3ERe%3A%20Shading%20in%20Hero%20web%20part%20tiles%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-846462%22%20slang%3D%22en-US%22%3E%3CP%3EA%20little%20more%20tooling%20around%2C%20and%20I%20am%20now%20experiencing%20the%20following.%20Same%20identical%20image%20and%20settings%2C%20including%20link%20in%203%20tiles.%20the%20two%20on%20the%20left%20do%20not%20have%20shading%2C%20and%20the%20one%20on%20the%20upper%20right%20does.%20Have%20triple%20checked%20that%20all%20of%20the%20settings%20in%20the%20edit%20pane%20are%20identical.%20Are%20there%20hidden%20settings%20somewhere%20that%20I%20am%20not%20seeing%3F%20Thanks.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F130930i715A994175EDD592%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22shadingissue.png%22%20title%3D%22shadingissue.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-847500%22%20slang%3D%22en-US%22%3ERe%3A%20Shading%20in%20Hero%20web%20part%20tiles%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-847500%22%20slang%3D%22en-US%22%3EPretty%20sure%20it's%20based%20on%20selection%20%2F%20mouse%20over.%20As%20per%20your%20photo%2C%20the%20one%20with%20shading%20is%20selected.%20If%20you%20click%20the%20other%20box%20does%20the%20shade%20move%3F%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-848414%22%20slang%3D%22en-US%22%3ERe%3A%20Shading%20in%20Hero%20web%20part%20tiles%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-848414%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F869%22%20target%3D%22_blank%22%3E%40Chris%20Webb%3C%2FA%3E%26nbsp%3B%20Ha!%20No%2C%20unfortunately%20that%20is%20not%20the%20case.%20I%20changed%20that%20tile%20to%20a%20color%20block%20for%20the%20time%20being%20(still%20have%20a%20lot%20of%20other%20work%20to%20do%20on%20the%20page%20before%20going%20live)%2C%20but%20when%20I%20placed%20the%20same%20image%20in%20all%204%20tiles%2C%20I%20only%20get%20shade%20on%20the%201%20with%20identical%20settings.%20Shade%20stays%20in%20the%20tile%20when%20moved%20to%20a%20different%20tile%20position.%20It%20has%20to%20be%20a%20bug...%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-848419%22%20slang%3D%22en-US%22%3ERe%3A%20Shading%20in%20Hero%20web%20part%20tiles%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-848419%22%20slang%3D%22en-US%22%3EIs%20the%20one%20that%20has%20the%20shading%20the%20first%20one%20that%20was%20configured%20%2F%20uploaded%3F%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-848422%22%20slang%3D%22en-US%22%3ERe%3A%20Shading%20in%20Hero%20web%20part%20tiles%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-848422%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F506%22%20target%3D%22_blank%22%3E%40Rob%20Ellis%3C%2FA%3E%26nbsp%3BNo.%20Second.%20How%20would%20this%20make%20a%20difference%3F%20Thanks.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-848425%22%20slang%3D%22en-US%22%3ERe%3A%20Shading%20in%20Hero%20web%20part%20tiles%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-848425%22%20slang%3D%22en-US%22%3EI%20don't%20see%20how%20it%20should%20make%20a%20difference%2C%20but%20I%20wondered%20whether%20it%20was%20something%20like%20they%20figure%20the%20first%20one%20you%20set%20%2F%20configure%20is%20going%20to%20be%20the%20important%20one%2C%20therefore%20they%20apply%20shading%20-%20but%20that%20is%20clearly%20mad.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-848430%22%20slang%3D%22en-US%22%3ERe%3A%20Shading%20in%20Hero%20web%20part%20tiles%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-848430%22%20slang%3D%22en-US%22%3EI%20will%20see%20if%20I%20can%20duplicate%20it%20from%20a%20fresh%20blank%20page%20and%20see%20if%20I%20can%20isolate%20the%20problem.%20Mad%20indeed.%3CBR%20%2F%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-848448%22%20slang%3D%22en-US%22%3ERe%3A%20Shading%20in%20Hero%20web%20part%20tiles%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-848448%22%20slang%3D%22en-US%22%3EI%20think%20I%20might%20have%20it%20-%20move%20the%20one%20with%20the%20shadow%20to%20the%20far%20left%20-%20does%20it%20show%20it%20has%20a%20'call%20to%20action'%20enabled%3F%20If%20so%20-%20disable%20it%20-%20the%20shading%20will%20be%20removed.%3CBR%20%2F%3E%3CBR%20%2F%3E(when%20you%20move%20a%20tile%20with%20'call%20to%20action'%20to%20one%20of%20the%20other%20positions%20-%20the%20call%20to%20action%20is%20not%20displayed%2C%20but%20the%20shading%20for%20it%20is)%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-848467%22%20slang%3D%22en-US%22%3ERe%3A%20Shading%20in%20Hero%20web%20part%20tiles%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-848467%22%20slang%3D%22en-US%22%3E%3CP%3Eyou%20also%20cannot%20enable%20%2F%20disable%20the%20call%20to%20action%2C%20unless%20the%20tile%20is%20the%20'main'%20one%20(far%20left)%20-%20the%20options%20are%20hidden%20in%20the%20UI.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-848486%22%20slang%3D%22en-US%22%3ERe%3A%20Shading%20in%20Hero%20web%20part%20tiles%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-848486%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F506%22%20target%3D%22_blank%22%3E%40Rob%20Ellis%3C%2FA%3E%26nbsp%3BAha!%20OK%20this%20is%20it.%20Both%20the%20'call%20to%20action'%20and%20'show%20title'%20cause%20the%20shading%20behavior%20when%20the%20tile%20is%20in%20the%20main%20%2F%20large%20position%2C%20so%20you%20have%20to%20move%20it%20there%20in%20order%20to%20turn%20the%20shading%20off.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20Rob!%20%3Aoncoming_fist%3A%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-848487%22%20slang%3D%22en-US%22%3ERe%3A%20Shading%20in%20Hero%20web%20part%20tiles%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-848487%22%20slang%3D%22en-US%22%3EGood%20catch%20on%20the%20Title%20as%20well%20-%20I%20note%20that%20you%20can%20turn%20the%20Title%20off%20from%20any%20tile%20position%2C%20but%20the%20call%20to%20action%20you%20can%20only%20turn%20off%20from%20the%20main%20position.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-971575%22%20slang%3D%22en-US%22%3ERe%3A%20Shading%20in%20Hero%20web%20part%20tiles%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-971575%22%20slang%3D%22en-US%22%3E%3CP%3EHi!%3C%2FP%3E%3CP%3EThe%20way%20I%20see%20out%20from%20this%20situation%20is%20to%20turn%20off%20Call%20for%20action%20and%20Title%20from%20main%20tile.%20But%20why%3F%3F%20It%20is%20important%20for%20me%20to%20have%20it.%20When%20I%20look%20at%20Microsoft%20examples%20of%20modern%20site%20the%20Hero%20looks%20very%20good%20and%20no%20shading.%3C%2FP%3E%3CP%3EAlso%20I%20have%20shading%20on%20top%20second%20tile%20and%20it%20does%20not%20have%20call%20for%20action.%3C%2FP%3E%3CP%3EMaybe%20you%20figured%20out%20by%20now%20how%20to%20get%20rid%20of%20shading%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-999493%22%20slang%3D%22en-US%22%3ERe%3A%20Shading%20in%20Hero%20web%20part%20tiles%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-999493%22%20slang%3D%22en-US%22%3EAnyone%20find%20a%20resolution%20to%20this%3F%20Still%20having%20the%20same%20issue%20here...%3F%3F%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-999504%22%20slang%3D%22en-US%22%3ERe%3A%20Shading%20in%20Hero%20web%20part%20tiles%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-999504%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F7800%22%20target%3D%22_blank%22%3E%40Paul%20Mcdonald%3C%2FA%3E%26nbsp%3BSee%20Rob%20Ellis'%20response%20above.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-999518%22%20slang%3D%22en-US%22%3ERe%3A%20Shading%20in%20Hero%20web%20part%20tiles%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-999518%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F391527%22%20target%3D%22_blank%22%3E%40CW_213%3C%2FA%3E%26nbsp%3Btnx%20-%20appreciate%20the%20pointer.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIt%20takes%20the%20%22shading%22%20off%20but%20if%20I%20understand%20that%20correctly%2C%20only%20at%20the%20sacrifice%20of%20no%20%22Title%22%20in%20the%20tile...%3F%26nbsp%3B%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-999521%22%20slang%3D%22en-US%22%3ERe%3A%20Shading%20in%20Hero%20web%20part%20tiles%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-999521%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F7800%22%20target%3D%22_blank%22%3E%40Paul%20Mcdonald%3C%2FA%3E%26nbsp%3BMy%20understanding%20is%20that%20is%20the%20tradeoff.%20It%20is%20not%20ideal%2C%20to%20be%20sure.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

I am using the 5 tile Hero web part. From research it sounds like the shading in the tiles is not removable. However, as you can see in this screenshot, the tile in the bottom right, which is just some OOB stock image does not have the shading, whereas my little phone number tile does. I would LOVE to get rid of that shading on the phone tile to match the treatment of the photo on the lower right. 

9-10-2019 6-15-33 AM.png

 

You can see the the settings for the tiles are identical but for the image being used (and the link, which I just tested for both images and does not change the shading behavior). Is there any way I can get my phone number tile to match the non-shaded behavior of the photo on the lower right? Thanks. 

 

9-10-2019 6-24-44 AM.png9-10-2019 6-25-45 AM.png

16 Replies
Highlighted

A little more tooling around, and I am now experiencing the following. Same identical image and settings, including link in 3 tiles. the two on the left do not have shading, and the one on the upper right does. Have triple checked that all of the settings in the edit pane are identical. Are there hidden settings somewhere that I am not seeing? Thanks.

 

shadingissue.png

Highlighted
Pretty sure it's based on selection / mouse over. As per your photo, the one with shading is selected. If you click the other box does the shade move?
Highlighted

@Chris Webb  Ha! No, unfortunately that is not the case. I changed that tile to a color block for the time being (still have a lot of other work to do on the page before going live), but when I placed the same image in all 4 tiles, I only get shade on the 1 with identical settings. Shade stays in the tile when moved to a different tile position. It has to be a bug...

Highlighted
Is the one that has the shading the first one that was configured / uploaded?
Highlighted

@Rob Ellis No. Second. How would this make a difference? Thanks.

Highlighted
I don't see how it should make a difference, but I wondered whether it was something like they figure the first one you set / configure is going to be the important one, therefore they apply shading - but that is clearly mad.
Highlighted
I will see if I can duplicate it from a fresh blank page and see if I can isolate the problem. Mad indeed.
Highlighted
Best Response confirmed by CW_213 (Contributor)
Solution
I think I might have it - move the one with the shadow to the far left - does it show it has a 'call to action' enabled? If so - disable it - the shading will be removed.

(when you move a tile with 'call to action' to one of the other positions - the call to action is not displayed, but the shading for it is)
Highlighted

you also cannot enable / disable the call to action, unless the tile is the 'main' one (far left) - the options are hidden in the UI.

Highlighted

@Rob Ellis Aha! OK this is it. Both the 'call to action' and 'show title' cause the shading behavior when the tile is in the main / large position, so you have to move it there in order to turn the shading off. 

 

Thanks Rob! :oncoming_fist:

Highlighted
Good catch on the Title as well - I note that you can turn the Title off from any tile position, but the call to action you can only turn off from the main position.
Highlighted

Hi!

The way I see out from this situation is to turn off Call for action and Title from main tile. But why?? It is important for me to have it. When I look at Microsoft examples of modern site the Hero looks very good and no shading.

Also I have shading on top second tile and it does not have call for action.

Maybe you figured out by now how to get rid of shading?

Highlighted
Anyone find a resolution to this? Still having the same issue here...??
Highlighted

@Paul Mcdonald See Rob Ellis' response above. 

Highlighted

@CW_213 tnx - appreciate the pointer.

 

It takes the "shading" off but if I understand that correctly, only at the sacrifice of no "Title" in the tile...?  

Highlighted

@Paul Mcdonald My understanding is that is the tradeoff. It is not ideal, to be sure.