How to increase line height

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Get Involved
Locked
Gauravk
Registered User
Posts: 59
Joined: Tue Jul 12, 2011 7:39 pm
Location: Dubai, UAE
Name: Gaurav Khanna
Contact:

How to increase line height

Post by Gauravk » Tue Jul 23, 2013 8:00 am

Hi Guys,

Can anyone please advise how i can increase the line height of the forums, topics and posts display and make them more spaciously displayed just like in vBulletin appearance. Thanks.
Carnity: The only GCC Car Community in the world, offering free car classifieds, business listing and advice.

User avatar
Tom
Former Team Member
Posts: 2665
Joined: Tue Jun 20, 2006 2:12 am
Name: Tom Catullo
Contact:

Re: How to increase line height

Post by Tom » Wed Jul 24, 2013 4:43 am

Not quite sure that I can recognize a difference in line heights of post content between phpBB and vBulletin, but if you'd like to increase the line height of the content on your forum, open up the /styles/prosilver/theme/content.css file and find the following code:

Code: Select all

.content {
	min-height: 3em;
	overflow: hidden;
	line-height: 1.4em;
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
	font-size: 1em;
	color: #333333;
	padding-bottom: 1px;
}
The default line height, as you can see in the above code, is 1.4em, but you can increase that value to your liking. Be sure to purge the cache in the ACP after making this change in order for it to take effect. Note that if your forum uses a style other than prosilver, you may instead need to edit the appropriate CSS file in that style's theme directory.
Tom Catullo - Former Moderator Team Member
phpBB3 Smiley Pak Generator | Legend Repositioning MOD | My GitHub | My Site

Gauravk
Registered User
Posts: 59
Joined: Tue Jul 12, 2011 7:39 pm
Location: Dubai, UAE
Name: Gaurav Khanna
Contact:

Re: How to increase line height

Post by Gauravk » Wed Jul 24, 2013 5:27 am

Thanks Tom,

I have tried what you mentioned, but nothing is happening. Changed min-height, font-size, padding etc, refresh theme, purge cache but nothing is changing. :oops:

I do use prosilver without any major design modification. audi dubai dot com

Thanks for your help.
Carnity: The only GCC Car Community in the world, offering free car classifieds, business listing and advice.

User avatar
Tom
Former Team Member
Posts: 2665
Joined: Tue Jun 20, 2006 2:12 am
Name: Tom Catullo
Contact:

Re: How to increase line height

Post by Tom » Wed Jul 24, 2013 5:49 am

Could you post a screenshot of an example of a section of content on your forum that is not obeying the changes you're making? I may be misunderstanding what area you're trying to modify.
Tom Catullo - Former Moderator Team Member
phpBB3 Smiley Pak Generator | Legend Repositioning MOD | My GitHub | My Site

Gauravk
Registered User
Posts: 59
Joined: Tue Jul 12, 2011 7:39 pm
Location: Dubai, UAE
Name: Gaurav Khanna
Contact:

Re: How to increase line height

Post by Gauravk » Wed Jul 24, 2013 8:53 am

Visit /active-topics.html (its a search.php) page and i want to increase the line height of each row below, to make them appear spaciously and not so tight as in screenshot.

Thanks for helping.
Attachments
search.jpg
search.jpg (258.69 KiB) Viewed 1286 times
Carnity: The only GCC Car Community in the world, offering free car classifieds, business listing and advice.

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

Re: How to increase line height

Post by Christian 2.0 » Wed Jul 24, 2013 4:48 pm

Hello :)

I think your terminology has confused Tom. Line-height is a CSS property that vertically distances lines of text in a paragraph. It would appear you're trying to add more padding between your forum / topic rows. :)

To do this, open /styles/*/theme/content.css

Find:

Code: Select all

li.row {
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #8f8f8f;
}
Inside of the braces, add:

Code: Select all

padding: 6px;
Additionally, you can use multiple values to add different padding to the left/right or top/bottom. For example:

Code: Select all

padding: 0 10px; /* 0 padding to left/right , 10px padding top/bottom */
Let us know how you get on. :)

Stephanvs
Registered User
Posts: 109
Joined: Sun Jun 28, 2015 8:03 pm

Re: How to increase line height

Post by Stephanvs » Mon Jun 29, 2015 1:42 am

People could you please tell me how to decrease the size of a gap between a site name and a site description?
What parameters need to be edited?
And one more question: how to decrease the size of forum tables (rows) mentioned above in this thread? 'Padding' and 'line-height' change only a text inside.
Attachments
asdsadsad.png
sadasdsad.png

Stephanvs
Registered User
Posts: 109
Joined: Sun Jun 28, 2015 8:03 pm

Re: How to increase line height

Post by Stephanvs » Wed Sep 16, 2015 5:22 pm

The problem above is solved by adding this to custom.scss (in "Elegance" style):

Code: Select all

#site-description h1, #site-description p, #site-description p.sitename {
 text-align: center; float: center; margin-top: 15px; line-height: 1.2em; overflow: auto; text-overflow: ellipsis;
}
,
where

Code: Select all

margin-top:
sets the needed space size.

Locked

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