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.

Centering rank titles (Poster's Side Profile)

View previous topic View next topic Go down

Solved Centering rank titles (Poster's Side Profile)

Post by Kelso on May 21st 2016, 10:43 am

Technical Details


Forum version : #phpBB3
Position : Administrator
Concerned browser(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Other
Screenshot of problem : http://i.imgur.com/bywt8ep.png
Who the problem concerns : All members
When the problem appeared : When it started
Forum link : http://www.ardentartforum.com/

Description of problem

Hello! So, I'm back having more questions. Well, I'd like to center rank titles in the poster's side profile, under the display picture. I want it to align under the center of the DP, basically how the username is.

This is the code I've tried

Code:
.postprofile dd:first-child, .ranktitle, div.ranktitle {
    font-size: 13px;
    font-weight: 700;
    text-align: center!important;

I've also tried padding and margins, but the rank titles aren't aligned. One rank title will be perfect, but the others will be too far to the right or left.


Last edited by Kelso on May 23rd 2016, 5:54 pm; edited 1 time in total

Kelso
Forumember

Posts : 55
Reputation : 3
Language : English

http://liveandnet.forumotion.com/

Back to top Go down

Solved Re: Centering rank titles (Poster's Side Profile)

Post by Luffy on May 21st 2016, 12:27 pm

Hello @Kelso,

Go to:
Admin Panel > Display > Templates > General > viewtopic_body
Find:
Code:
{postrow.displayed.POSTER_RANK_NEW}

and replace it with:
Code:
<center>{postrow.displayed.POSTER_RANK_NEW}</center>


That'll fix the rank positioning! Smile






Luffy
Manager
Manager

Male Posts : 4245
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Centering rank titles (Poster's Side Profile)

Post by SarkZKalie on May 21st 2016, 1:13 pm

Or you can try add this to your CSS
Code:
span.ranktitle {
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  display: block;
  margin-bottom: -15px;
}

SarkZKalie
Forumember

Male Posts : 448
Reputation : 78
Language : English

http://rotavn.nstars.org/

Back to top Go down

Solved Re: Centering rank titles (Poster's Side Profile)

Post by Ange Tuteur on May 21st 2016, 3:43 pm

Just a little trick you guys might want to know :

On phpbb3 you can use a single line of CSS to center the rank title. Go to Admin Panel > Display > Colors > CSS stylesheet and paste the following code :
Code:
.postprofile dt + dd { text-align:center; }
It doesn't require template edits or adding tags to the rank title.

Here's a breakdown :
Code:
.postprofile
== the profile info container.
Code:
.postprofile dt
== the definition title<dt> tag that contains the avatar + username.
Code:
.postprofile dt + dd
== the definition description<dd> tag directly after the <dt> tag, which contains the rank title.

Here's some info on the "next" selector :
http://www.w3schools.com/cssref/sel_element_pluss.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Centering rank titles (Poster's Side Profile)

Post by Kelso on May 22nd 2016, 9:40 am

Sorry for the late reply! Was at work all day, haha.

@Luffy - Thank you for replying! I took the time and tried looking for the correct area, but I couldn't find it. :-( I got stuck at "Display" and didn't see "Templates" any where. Here's what it looked like for me.



@SarkZKalie - Thanks for trying to help! So, the code did work, in a sense. It did center the rank titles, so that's good! But for some reason, I feel like there's a div or a margin making it off-centered. Here's a picture for an example:



The "Global Moderator" is not centered under the display picture and I'm assuming there's some coding that's causing that. Oh boy! Crying or Very sad

@Ange Tuteur - Woah! Thank you very much for explaining this to me. I'm not entirely familiar with CSS and have been learning a lot. This very helpful and I'll definitely be saving this information!




Update: I found out it has something with the margins. So, I did this.

Code:
.postprofile dd {
    margin-left: 0;
}

and that turned into this



Basically, the rank title did get centered! But it reset my warning bar + information all the way to the left. We're almost there guys!


Kelso
Forumember

Posts : 55
Reputation : 3
Language : English

http://liveandnet.forumotion.com/

Back to top Go down

Solved Re: Centering rank titles (Poster's Side Profile)

Post by Rhino.Freak on May 22nd 2016, 10:03 am

Instead of
Code:
.postprofile dd {
    margin-left: 0;
}
Use
Code:
.postprofile dt + dd {
    margin-left: 0;
}
And see if that fixes the warm bar.

Rhino.Freak
Helper
Helper

Male Posts : 1246
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Centering rank titles (Poster's Side Profile)

Post by Luffy on May 22nd 2016, 11:52 am

@Kelso wrote:@Luffy - Thank you for replying! I took the time and tried looking for the correct area, but I couldn't find it. :-( I got stuck at "Display" and didn't see "Templates" any where. Here's what it looked like for me.

@Kelso that means you are not the founder of the forum as only the founder (owner) of the forum is allowed to enter the templates! Smile






Luffy
Manager
Manager

Male Posts : 4245
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Centering rank titles (Poster's Side Profile)

Post by SLGray on May 22nd 2016, 8:20 pm

Only the founder can see the templates section in the administration panel.


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


SLGray
Administrator
Administrator

Male Posts : 36663
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Centering rank titles (Poster's Side Profile)

Post by Kelso on May 23rd 2016, 11:34 am

@Rhino.Freak - Hi! I've tried that and it made all the information, such as Post and Age, etc to the far left.

Here's an image.



@Luffy and @SLGray - Ah! Okay. I will talk to the owner about it then.




I'd like to show you my code because I have so much going on, it's kind of scaring me. Beware!

Code:
span.ranktitle {
    font-size: 13px;
    font-weight: bold;
    text-align: center !important;
    display: block !important;
    margin-left: -10px !important;
}

 
.postprofile dd:first-child, .ranktitle, div.ranktitle {
font-size: 13px;
font-weight: bold;
text-align: center !important;

}
.postprofile dd, .label {
 color: ;

  .postprofile a:active, .postprofile a:link, .postprofile a:visited, .postprofile dt.author a {
  color: #DDDDDD !important;
}

.postprofile dt {
  padding-bottom:15px;
  position:relative !important;
  padding-top:25px !important; /* reserve space for username */
  margin-top:10px !important;
  text-align:center;

}

.postprofile dt > strong {
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  font-size: 12px !important;

  /* limit username to one line */
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  bottom: 10px
  font-size: 14px !important;
}

Here's an example of what I'm trying to get (this is a photoshopped image, not done by coding)



Basically, if I center the rank title, the information moves all the way to the left. :-( Grr, my head hurts.

Again, thank you for the help!

Kelso
Forumember

Posts : 55
Reputation : 3
Language : English

http://liveandnet.forumotion.com/

Back to top Go down

Solved Re: Centering rank titles (Poster's Side Profile)

Post by Ange Tuteur on May 23rd 2016, 12:55 pm

Hmm.. since the rank doesn't need a margin we could use the following CSS rules instead :
Code:
.postprofile dt, .postprofile dd { margin:0; }
.postprofile dt + dd ~ dd {
  margin-left:19px;
}
The first rule resets the margin and the second rule adds a margin to the left of the dd tags AFTER the rank title. Like the rule I gave you in at topic prior, feel free to edit the value "19px" to change the starting position of the fields.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Centering rank titles (Poster's Side Profile)

Post by Kelso on May 23rd 2016, 5:45 pm

@Ange Tuteur -
Outdated:
Thank you! I implemented the code and here is the result.



It seems every time I mess with the margin, one or the other is going to be on the far left (meaning the rank title and the information) :-(

Update!

I fixed it completed! I messed with a few selectors and re-added display: block;

Thank you all for helping me! I really appreciate this. Also, thank you Ange Tuteur for supplying the last piece!


My finished product


Code used to help out anyone else

Code:
.postprofile dd:first-child, .ranktitle, div.ranktitle {
    display: block !important;
  margin-bottom: -10px;
}
 

.postprofile dt, .postprofile dd {
  margin: 0 !important;

}
.postprofile dt + dd ~ dd {
  margin-left:17px !important;
}


This is solved, by the way. :-)

Kelso
Forumember

Posts : 55
Reputation : 3
Language : English

http://liveandnet.forumotion.com/

Back to top Go down

Solved Re: Centering rank titles (Poster's Side Profile)

Post by Rhino.Freak on May 23rd 2016, 6:16 pm

Thanks for providing the last piece of code Smile it's funny sometimes how little positioning can be troublesome XD

Rhino.Freak
Helper
Helper

Male Posts : 1246
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Centering rank titles (Poster's Side Profile)

Post by Ange Tuteur on May 23rd 2016, 6:28 pm

@Rhino.Freak so is the nightmare known as the CSS box model that we all know and love. Razz

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Centering rank titles (Poster's Side Profile)

Post by Kelso on May 23rd 2016, 6:31 pm

Yes, this was a really head scratcher. Glad it's out of the way because it irking me pretty bad. :-) Thanks again, all.

Kelso
Forumember

Posts : 55
Reputation : 3
Language : English

http://liveandnet.forumotion.com/

Back to top Go down

Solved Re: Centering rank titles (Poster's Side Profile)

Post by SLGray on May 23rd 2016, 8:32 pm

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 : 36663
Reputation : 2445
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