Notifications
Hei Folks.
Mikel again.
Question: How do i ( if i can ) change the profile photo from a circle shape to a square shape ?
Reason: I think a square shape is better for profile photos.
If it is possible, where tin the Theme.css do i make the changes ?
Many Thanks
mikel.
A quick tip on this holiday (we aren't working today) is to check the forum profile photo and use the same code in your theme.css for the profile or other pics you want square. I hadn't tried this so test on a dev site.
You'll want to find the various profile_photo CSS:
Glad I'm not the only one that prefers square profile photos. The circle just cuts off too much of the image but it's more popular.
hei Donna.
I don't like round photos, you're right, they are awkward to create images for ( with my experience). can create better logos and bigger logos for members.
Also they still look great on small mobile device such as cell phone.
I love the script line numbers in your image, so helpful..
This has worked fantastic. exactly what i want and it looks better.
What i have changed:
Line number 1881 changed from 200px to 0px
Line umber 1884 changed from 200px to 0px
Line number 1887 changed from 200px to 0px
Image: Member profile page ( i have removed the profile cover photo, im doing some image sizing on it )
Image: member Hone page
mikel.
Hei Donna.
I change the px sizes in the cover photo: Similar to what you did in profile photos. I just changed the settings to 0px
.profile_main_photo_wrapper #user_profile_photo, .profile_main_photo_wrapper #group_profile_photo, .profile_main_photo_wrapper #event_profile_photo{
border-radius:0px;
}
.layout_user_cover_photo, .layout_event_cover_photo, .layout_group_cover_photo{
padding:0 !important;
border-radius:0 !important;
}
.profile_cover_head_section{
top:15%;
bottom:auto !important;
left:0;
max-width:80%;
right:0;
margin:auto;
display:block;
text-align:center;
}
.profile_main_photo_wrapper{
margin:0 auto 0px !important;
float:none !important;
height:auto !important;
}
.profile_main_photo{
border-radius:0px !important;
position:relative !important;
}
.cover_photo_profile_options #profile_status{
text-align:center;
}
.cover_photo_profile_options{
margin-left:0 !important;
position:relative !important;
text-align:center;
so this is how it looks now. with the square photo image.
Ignore the image logo, im planning on renaming my site to Kan'Groo Jacks or something similar and using the colours.
I just want to figure out how to change the height setting. So when i use it on mobile cell phones without the image contracting but the height remains unchanged.
Image 1
Normal View:
Mobile view
Can you see what i mean..
So im looking to reduce the height by about 1/4 maybe ?. See if that has any impact.
mikel.
That's where it gets tricky. You need to go down to the Responsive section of the CSS and work with all of those max-width and min-width media sizes and test on the various devices or on an emulator but I've found that many emulators are not that great. The below just shows where to get to the section (and it is a pretty long section) and two examples of the widths.
hei Donna..
Thanks for that... that really helps...
iv seen a 'cover profile photo' that fits in the same place as the member profile space in the first left side column. i think it was in sns linked-in theme. i could try and get the size down enough to try that idea... it looks good...
anyway, thanks donna
mikel.