The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Re-Designing the Profile Area

View previous topic View next topic Go down

Solved Re-Designing the Profile Area

Post by troyeccles on October 4th 2015, 9:27 am

Hello,

How do I go about redesigning the members' profile area to reflect something more modern (PHPBB3)?
I can design whatever is required in photoshop but I've no idea how to implement it.

Example: How do I change the current version....



to something nice like what's in here...



As I say, the graphics I can do but I've no idea how to actually make it active on the site.


Last edited by troyeccles on October 7th 2015, 12:23 pm; edited 1 time in total

troyeccles
Forumember

Posts : 239
Reputation : 5
Language : English

Back to top Go down

Solved Re: Re-Designing the Profile Area

Post by Ange Tuteur on October 4th 2015, 10:57 am

Hi @troyeccles,

If your version is phpbb3, to start you can add some style to the profile container. Add the following rules to your stylesheet.
Display > Colors > CSS stylesheet
Code:
.postprofile {
  text-align:center;
  background:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  padding:3px;
}

.postprofile dd, .postprofile dt { margin-left:0 }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Re-Designing the Profile Area

Post by troyeccles on October 4th 2015, 3:32 pm

Hi Ange.

Thank you so much! With a bit of tweaking, I've got it looking much better.

I used this tutorial for the online status (http://help.forumotion.com/t132631-phpbb3-invision-indicate-the-online-status-of-a-user-in-a-profile-field#891352) and it works ok but how do I get a graphical indication like the one to the left? I appreciate I'll have to photoshop up a banner but then how to integrate this into the CSS?

Thanks again!!!

troyeccles
Forumember

Posts : 239
Reputation : 5
Language : English

Back to top Go down

Solved Re: Re-Designing the Profile Area

Post by Ange Tuteur on October 4th 2015, 4:06 pm

You can use the .online class to determine the state of the post. So, this CSS should give you a similar effect :
Code:
/* offline image */
.post .postprofile {
  background-image:url('OFFLINE_IMAGE');
  background-position:0px 0px;
}

/* online image */
.post.online .postprofile {
  background-image:url('ONLINE_IMAGE');
  background-position:0px 0px;
}

Then replace ONLINE_IMAGE and OFFLINE_IMAGE with their respective URLs + adjust the position of the image if necessary. Also, you may need to add some padding to the top of the post so the avatar doesn't overlap the indicator. Use the following rule for that and adjust the 20px until the content doesn't overlap your images :
Code:
.postprofile { padding-top:20px }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Re-Designing the Profile Area

Post by troyeccles on October 5th 2015, 2:23 am

Superb! Thanks again. I'm. Having an issue where landscape style avatars are a few pixels outside the profile box for some reason. But I'll see if i can work that out for myself.

The new box didn't look all that nice with my current background so it kinda forced me to freshen up the whole site. I'm halfway through and it's looking great! That's down to your help, Ange. Thank YOU!!!

troyeccles
Forumember

Posts : 239
Reputation : 5
Language : English

Back to top Go down

Solved Re: Re-Designing the Profile Area

Post by brandon_g on October 6th 2015, 6:27 pm

Hello,

Is this topic solved @troyeccles ?

-Brandon


Remember to mark your topic when a solution is found.

brandon_g
Support Moderator
Support Moderator

Male Posts : 5144
Reputation : 478
Language : English
Location : USA

http://broadcastingduo.forumotion.com/

Back to top Go down

Solved Re: Re-Designing the Profile Area

Post by troyeccles on October 7th 2015, 10:26 am

Actually, no (thank you for asking). One small quibble...

My profile area is now almost perfect. It looks fantastic on a PC but on mobile devices (I've tested this on an iPad and on an android phone), the avatar extends outside of it's border.

I've added the images below:
IMAGE 1 is from the PC and is ideal.
IMAGE 2 is off a phone and you can see how the avatar extends too far to the right.

The code used was Ange's above:
.postprofile {
text-align:center;
background:#EEE;
border:1px solid #CCC;
border-radius:3px;
padding:3px;
}

.postprofile dd, .postprofile dt { margin-left:0 }

------------


IMAGE 1 (perfect);



------------

IMAGE 2 (avatar extended):




troyeccles
Forumember

Posts : 239
Reputation : 5
Language : English

Back to top Go down

Solved Re: Re-Designing the Profile Area

Post by Ange Tuteur on October 7th 2015, 10:41 am

Hi @troyeccles,

You can use the following CSS to add a restriction on the image dimensions :
Code:
.postprofile dt img {
  max-height:100px;
  max-width:100px;
}

That should resize the image down to 100x100 if it exceeds the specified dimensions. You can also use percentage values such as 100% which corresponds to the containing parent's maximum dimensions.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Re-Designing the Profile Area

Post by troyeccles on October 7th 2015, 12:23 pm

I've adjusted it to suit. Thank you millions, Ange!!!! Smile

I'll make this as SOLVED.

troyeccles
Forumember

Posts : 239
Reputation : 5
Language : English

Back to top Go down

Solved Re: Re-Designing the Profile Area

Post by APE on October 7th 2015, 12:30 pm

Topic solved and archived





APE
Manager
Manager

Male Posts : 8342
Reputation : 720
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum