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.

Fixing poster's side profile

View previous topic View next topic Go down

Solved Fixing poster's side profile

Post by Kelso on May 17th 2016, 12:32 pm

Forum: http://www.ardentartforum.com/
Forum Version: Phpbb3

Hello! I was wondering if I could move everything in the poster's profile area to the direct center. It's a bit off and far too close to the top. By the way, I don't mean <center> it, but I mean put it in the middle. I don't want all the information (besides the username and rank title) to be <center>ed.

Here's an example:



I'd like to also put the username above the display picture and center it as well. Also, adjusting the space. I'm assuming some sort of padding is involved, but I'm just not familiar with selectors or know how to find them at all, haha.

Thanks for any help!



Last edited by Kelso on May 19th 2016, 9:09 am; edited 1 time in total

Kelso
Forumember

Posts : 55
Reputation : 3
Language : English

http://liveandnet.forumotion.com/

Back to top Go down

Solved Re: Fixing poster's side profile

Post by Ange Tuteur on May 17th 2016, 6:08 pm

Hi @Kelsey Pearce,

You can place the username above the avatar and center it with a bit of CSS. Go to Display > Colors > CSS stylesheet and paste the following codes into it.
Code:
/* avatar / username container */
.postprofile dt {
  position:relative;
  padding-top:25px; /* reserve space for username */
  margin-top:5px;
  text-align:center;
}

/* username position / styles */
.postprofile dt > strong {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  /* limit username to one line */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
( no template edits required )


In regards to centering the profile, do you mean centering it vertically within the post ? Like this :



P.S.
You can inspect the document and find selectors by pressing F12 on your keyboard to open your developer tools. After this you can proceed to the "Inspector" or "Elements" tab to inspect the document's markup to find classes, ids, tag names, etc.. This topic I wrote shows some examples of using the tools :
http://help.forumotion.com/t145688-so-you-want-to-code-learning-resources#tuto-dtools

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Fixing poster's side profile

Post by Kelso on May 17th 2016, 6:40 pm

Hello! Thank you for helping me. Smile

I've entered the code and it worked, though the avatar and username aren't dead in the center of the box.

When I mean center, I mean center the information (such as Posts, Reputation, Username, etc) in the center of the box. It's hard to explain, haha. I'm trying to move everything over, so it looks centered in the box that all the information is contained in. The div, I suppose.



Here's an example of how it's a bit off-centered. Though, the username and the DP are centered to each other (because of your lovely doing), they're not exactly in the center of the box.. if that makes sense :-(

Kelso
Forumember

Posts : 55
Reputation : 3
Language : English

http://liveandnet.forumotion.com/

Back to top Go down

Solved Re: Fixing poster's side profile

Post by Ange Tuteur on May 17th 2016, 6:44 pm

I see where it's coming from ; There's a small margin to the left of the profile fields. Add this CSS rule to your stylesheet :
Code:
.postprofile dd, .postprofile dt {
  margin-left:0;
}
It should fix that small gap to the left.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Fixing poster's side profile

Post by Kelso on May 17th 2016, 6:49 pm

It fixed it!! Thank you very much!

One last thing if that's alright, is there a way I can move the following over as well?



(Note: The warning bar is the same width as the display picture)

Kelso
Forumember

Posts : 55
Reputation : 3
Language : English

http://liveandnet.forumotion.com/

Back to top Go down

Solved Re: Fixing poster's side profile

Post by Ange Tuteur on May 17th 2016, 6:59 pm

No problem. Doff

You mean center all that content, or ..?

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Fixing poster's side profile

Post by Kelso on May 17th 2016, 7:05 pm

Yes, basically. Just not text-aligning it. Basically pulling all the small information over to the right more, to align with the DP.

Kelso
Forumember

Posts : 55
Reputation : 3
Language : English

http://liveandnet.forumotion.com/

Back to top Go down

Solved Re: Fixing poster's side profile

Post by Ange Tuteur on May 17th 2016, 8:09 pm

Hmm.. so like the alignment on the support forum ? If so, give this CSS a try :
Code:
.postprofile span.label {
  text-align:right;
  display:inline-block;
  width:50%;
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Fixing poster's side profile

Post by Kelso on May 17th 2016, 11:43 pm

That isn't quite it, but that is a very helpful piece of code. I'll be saving it if that's alright. Smile

Here's how I'd like for it to look (Note: I edited the structure in the GIMP application, the structure isn't from coding at all, just an edited picture)



Hopefully that makes a lot more sense, haha. I'm better at visual representation than explaining.


Kelso
Forumember

Posts : 55
Reputation : 3
Language : English

http://liveandnet.forumotion.com/

Back to top Go down

Solved Re: Fixing poster's side profile

Post by Ange Tuteur on May 18th 2016, 4:27 pm

Oh, you want the fields to start at the same line the avatar is. It's possible, but each avatar would need to be the same length to achieve the effect globally. Add the following CSS rules to your stylesheet :
Code:
.postprofile dt, .postprofile dd {
  margin:0;
}

.postprofile dd {
  margin-left:17px;
}

The first one resets the margin on the profiles, the second one only adds a margin to the left of the fields so you can adjust them to be in line with the avatar.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Fixing poster's side profile

Post by Kelso on May 19th 2016, 9:08 am

Oh my gosh, it worked!!

Thank you very, very much!!!

Thanks to Ange Tuteur, this is solved! Smile

Kelso
Forumember

Posts : 55
Reputation : 3
Language : English

http://liveandnet.forumotion.com/

Back to top Go down

Solved Re: Fixing poster's side profile

Post by SLGray on May 19th 2016, 9:16 am

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36659
Reputation : 2444
Language : English
Location : United States

http://ztwds.forumotion.com/

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