Forum title and description center alignment

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Get Involved
User avatar
zigic
Registered User
Posts: 169
Joined: Tue Dec 25, 2012 7:15 pm

Forum title and description center alignment

Post by zigic »

Since I have installed NV advanced topic titles it looks a bit weird now because forum title and description are aligned at the top. I would like them to be aligned in the center. I have tried adding:

Code: Select all

a.forumtitle { 
vertical-align: center;
} /* for forum name */
to content.css or common.css but nothing happened ..

I should point out that Im a total beginner and know actually nothing about programming (only what I find on internet :) )

Here's a picture of what Im talking about:
Attachments
forum title alignment.png
forum title alignment.png (22.07 KiB) Viewed 5726 times

User avatar
Christian 2.0
Former Team Member
Posts: 4542
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Forum title and description center alignment

Post by Christian 2.0 »

vertical-align is a funny property when used outside of tables, it's really used for adjusting the positioning of certain elements such as images in line with text etc.

Using a prosilver (table-less layout) it's not going to be possible to perfectly center [vertical] align the forum name and description. You'll need to use padding top to move the content down a few pixels, and give the impression that it's vertically aligned.

Try opening: /prosilver/theme/content.css

Find:

Code: Select all

.forums dl.icon dt { 
font-size: 10.5px; 
} /* for description */
Add:

Code: Select all

padding: 3px 0;

User avatar
zigic
Registered User
Posts: 169
Joined: Tue Dec 25, 2012 7:15 pm

Re: Forum title and description center alignment

Post by zigic »

This happened :D
Attachments
gdfgfdgsd.png
gdfgfdgsd.png (5.24 KiB) Viewed 5700 times

User avatar
Christian 2.0
Former Team Member
Posts: 4542
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Forum title and description center alignment

Post by Christian 2.0 »

Change this:

Code: Select all

    padding: 3px 0;
To this:

Code: Select all

    padding: 3px 0 3px 45px;

User avatar
zigic
Registered User
Posts: 169
Joined: Tue Dec 25, 2012 7:15 pm

Re: Forum title and description center alignment

Post by zigic »

That looks better now yes, thank you :)

User avatar
zigic
Registered User
Posts: 169
Joined: Tue Dec 25, 2012 7:15 pm

Re: Forum title and description center alignment

Post by zigic »

I would also like to move topictitle in viewforum a few px down (that it will be in center) .. any idea what to do?

User avatar
zigic
Registered User
Posts: 169
Joined: Tue Dec 25, 2012 7:15 pm

Re: Forum title and description center alignment

Post by zigic »

bump

User avatar
zigic
Registered User
Posts: 169
Joined: Tue Dec 25, 2012 7:15 pm

Re: Forum title and description center alignment

Post by zigic »

bump :)

User avatar
pit-PL
Registered User
Posts: 3089
Joined: Sat Nov 21, 2009 12:24 pm

Re: Forum title and description center alignment

Post by pit-PL »

In forumlist_body.html after

Code: Select all

<!-- IF forumrow.FORUM_IMAGE --><span class="forum-image">{forumrow.FORUM_IMAGE}</span><!-- ENDIF -->
add
<!-- IF S_ALTT_ACTIVE --><span class="border"></span><!-- ENDIF -->
In content.css before li.row {
add

Code: Select all

.border {
	display: block;
	height: 5px;
}

User avatar
zigic
Registered User
Posts: 169
Joined: Tue Dec 25, 2012 7:15 pm

Re: Forum title and description center alignment

Post by zigic »

Thank you pit-PL, but that actually changed forum titles on the indexpage .. I already did that with Christian's help above. What I would like to do now is:
zigic wrote:I would also like to move topictitle in viewforum a few px down (that it will be in center) .. any idea what to do?

User avatar
zigic
Registered User
Posts: 169
Joined: Tue Dec 25, 2012 7:15 pm

Re: Forum title and description center alignment

Post by zigic »

Anyone? :)

User avatar
pit-PL
Registered User
Posts: 3089
Joined: Sat Nov 21, 2009 12:24 pm

Re: Forum title and description center alignment

Post by pit-PL »

Sorry, what confused me was " I have installed NV advanced topic titles".
This should do the trick.

Code: Select all

ul.topics dl.icon dt {
	padding-top: 4px;
}

User avatar
zigic
Registered User
Posts: 169
Joined: Tue Dec 25, 2012 7:15 pm

Re: Forum title and description center alignment

Post by zigic »

Perfect, thank you :)

DFWTexasMusic
Registered User
Posts: 85
Joined: Sun Oct 13, 2013 5:52 pm

Re: Forum title and description center alignment

Post by DFWTexasMusic »

This thread helped me immensely after reading several others that said "can't be done".

I'm using a modified prosilver and wanted to vertically align middle the forum titles. I don't have the code referenced by Christian at the beginning of this thread, but at least it got me going in the right direction. Other solutions may work as well, but this is what I finally added to content.css that got it working :

Code: Select all

li.row dl.icon dt a.forumtitle {
	display:inline-block;
	padding:8px 0 0 0 !important;
}
PS - It would not work at all until I added display:inline-block

User avatar
tunescool
I've Been Banned!
Posts: 1061
Joined: Mon Jul 06, 2009 5:08 pm
Contact:

Re: Forum title and description center alignment

Post by tunescool »

DFWTexasMusic wrote:This thread helped me immensely after reading several others that said "can't be done".

I'm using a modified prosilver and wanted to vertically align middle the forum titles. I don't have the code referenced by Christian at the beginning of this thread, but at least it got me going in the right direction. Other solutions may work as well, but this is what I finally added to content.css that got it working :

Code: Select all

li.row dl.icon dt a.forumtitle {
	display:inline-block;
	padding:8px 0 0 0 !important;
}
PS - It would not work at all until I added display:inline-block
thanks for this

why wont the topic list work the same way

Code: Select all

ul.topics dl.icon dt {
   display:inline-block;
   padding: padding: 5px 0 0 45px !important;
}

Locked

Return to “[3.0.x] Styles Support & Discussion”