I spent time yesterday creating cover images for my groups. Frustrating that identical sized images behave so differently. Attached is the view on my iPhone. Same problems on the desktop.
Would it be difficult to have an option for the cover image to shrink to fit the available space? Do other templates handle cover images the same way? It would be nice too to have the option to turn off the floating image, or to select where it appears. Right now it is dead center in the space and conflicts with the images I'm putting behind it.
Comments
You can add the following custom style in Studio > Protean | Decorous | Lucid > Styles > Custom Styles to display the whole image in cover area on browsing pages:
.bx-base-pofile-unit-cover { background-size: contain !important; }#tipsandtricksL
Is it "contain !important;" I just want to clarify
Yes, it will make sure that cover is fully visible
If you want to stretch it then you can set it to:
.bx-base-pofile-unit-cover { background-size: 100% 100% !important; }L
thanks
Should this replace what was there, or in addition to what was there by default.
div.bx-market-unit-cover div.bx-base-text-unit-no-thumb {
border-width: 0px;
}
The addition to the custom style sort of worked. Much better view on the groups, but several of the graphics are cropping still. I set them up so they have a white border but some of them have shorter text and the site is cropping down to the text, not seeing the white border.
All of them should be more like the two with the longest text in the graphic.
Then on the actual group page these cropped ones still appear cropped badly.
And is there a custom style or other change that can hide the small square in the center of the graphic?
The work around I came up with is to add a solid bar across the top of the cover images. Now it doesn't crop in from the right, though with all the images cropped the same way, on the groups pages the top bar appears in varying degrees for each Group tile. Strange.
contain style should show the whole image without cropping, you can try to inspect this element in browser's developer tools to see what is wrong and play with different styles and then apply changed styles in Custom Styles field permanently, you can use this tool to remove the square in the center to move it around.
Alex T⚜️ thx for this .css snippets. very useful!
I used them on my side to show group and space covers in original size on every place. I used --> .bx-base-pofile-cover-image {background-size: contain !important; } in protean template, custom css. That works well.
But another important question to this (please watch the image enclosed.) How to remove the background by custom css?
NOTE: the screenshot is from my mobile. On Desktop ist works good.
Hello Peter !
You may try to add background: none; to bx-base-group-cover-wrapper or bx_groups_cover CSS classes. But if it looks fine on desktop you need to clear the cache in your mobile strongly.
Thank You! Will give it a try and report the results soon :)