prosilver tutorial?

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Get Involved
asinshesq
Registered User
Posts: 6266
Joined: Sun Feb 22, 2004 9:34 pm
Location: NYC
Name: Alan

prosilver tutorial?

Post by asinshesq »

Since prosilver is written in a way that is so foreign to what I have been used to in html (DLs rather than tables), I fear I will have a pretty steep learning curve in trying to understand it via reverse engineering the code. And when I google DL DT DD html I get explanations of basic definition lists that don't appear to be directly relevant to the way prosilver uses DLs, so that hasn't been much help.

Is there a tutorial someone knows of about how to use DLs the way prosilver uses them? Or do you have another suggestion about how to figure this out? Or is staring at the code and trying to figure out what's going on the only way to proceed?

Thanks.
User avatar
Brf
Support Team Member
Support Team Member
Posts: 52105
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}
Contact:

Re: prosilver tutorial?

Post by Brf »

Well.... prosilver is just using lists instead of tables. Here is the W3 lists page:

http://www.w3.org/TR/html4/struct/lists.html
asinshesq
Registered User
Posts: 6266
Joined: Sun Feb 22, 2004 9:34 pm
Location: NYC
Name: Alan

Re: prosilver tutorial?

Post by asinshesq »

Brf wrote:Well.... prosilver is just using lists instead of tables. Here is the W3 lists page:

http://www.w3.org/TR/html4/struct/lists.html
Right, I've seen that (and tutorials that explain how to use dl, dt dd). But I was hoping there might be some resource explaining how prosilver uses dd in lieu of tables, since the ordinary use of DL is for a set of defined terms and their definitions rather than a complicated layout of the sort you normally see with a table. For example, consider the viewforum page. That page lists the topics in a forum, and for each topic the are 5 columns of information:

- icon
- name of topic and some subsidiary info (author, time of first post, etc.)
- # of replies
- # of views
- last post info (author, time, etc.)

The relevant code from viewforum_body.html is:

Code: Select all

		<li class="row<!-- IF topicrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF --><!-- IF topicrow.S_POST_ANNOUNCE --> announce<!-- ENDIF --><!-- IF topicrow.S_POST_STICKY --> sticky<!-- ENDIF --><!-- IF topicrow.S_TOPIC_REPORTED --> reported<!-- ENDIF -->">
			<dl class="icon" style="background-image: url({topicrow.TOPIC_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
				<dt style="<!-- IF topicrow.TOPIC_ICON_IMG and S_TOPIC_ICONS -->background-image: url({T_ICONS_PATH}{topicrow.TOPIC_ICON_IMG}); background-repeat: no-repeat;<!-- ENDIF -->" title="{topicrow.TOPIC_FOLDER_IMG_ALT}"><!-- IF topicrow.S_UNREAD_TOPIC --><a href="{topicrow.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF --><a href="{topicrow.U_VIEW_TOPIC}" class="topictitle">{topicrow.TOPIC_TITLE}</a>
					<!-- IF topicrow.S_TOPIC_UNAPPROVED or topicrow.S_POSTS_UNAPPROVED --><a href="{topicrow.U_MCP_QUEUE}">{topicrow.UNAPPROVED_IMG}</a> <!-- ENDIF -->
					<!-- IF topicrow.S_TOPIC_REPORTED --><a href="{topicrow.U_MCP_REPORT}">{REPORTED_IMG}</a><!-- ENDIF --><br />
					<!-- IF topicrow.PAGINATION --><strong class="pagination"><span>{topicrow.PAGINATION}</span></strong><!-- ENDIF -->
					<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} {L_POSTED_ON_DATE} {topicrow.FIRST_POST_TIME} 
				</dt>
				<dd class="posts">{topicrow.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
				<dd class="views">{topicrow.VIEWS} <dfn>{L_VIEWS}</dfn></dd>
				<dd class="lastpost"><span><dfn>{L_LAST_POST} </dfn>{L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL}
					<a href="{topicrow.U_LAST_POST}">{LAST_POST_IMG}</a> <br />{L_POSTED_ON_DATE} {topicrow.LAST_POST_TIME}</span>
				</dd>
			</dl>
		</li>
So how do you go from the concept that there is a defined term (dt) and its defined definition (dd) to a tabular layout like we see in viewforum?

I assume if I study the css pages for dd and dt I will be able to reverse engineer how it works, but i was wondering whether there is something that explains the general approach so that it will be easier for me to figure it out.

But perhaps there is no shortcut and I just have to dive into the css?
User avatar
Brf
Support Team Member
Support Team Member
Posts: 52105
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}
Contact:

Re: prosilver tutorial?

Post by Brf »

Try viewing a prosilver page without the stylesheet and you will see what it really looks like.... Then it looks like the lists that it really is.
asinshesq
Registered User
Posts: 6266
Joined: Sun Feb 22, 2004 9:34 pm
Location: NYC
Name: Alan

Re: prosilver tutorial?

Post by asinshesq »

Brf wrote:Try viewing a prosilver page without the stylesheet and you will see what it really looks like.... Then it looks like the lists that it really is.
Ok, without the stylesheets I see the topic name as a defined term and the replies, views and last post info as alternative definitions. So I guess if I stare long enough at the style sheet I will see how the css tells each <dd> tag where to appear on the page, correct?
User avatar
Brf
Support Team Member
Support Team Member
Posts: 52105
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}
Contact:

Re: prosilver tutorial?

Post by Brf »

Yeah. Something like that.
I am pretty sure the nice display we are seeing is controlled by the "block" display here in content.css:

Code: Select all

ul.topiclist dt {
	display: block;
	float: left;
	width: 50%;
	font-size: 1.1em;
	padding-left: 5px;
	padding-right: 5px;
}

ul.topiclist dd {
	display: block;
	float: left;
	border-left: 1px solid #FFFFFF;
	padding: 4px 0;
}
 
I thought I might have seen a tutorial mentioned somewhere earlier today. I will look for it.
User avatar
MHobbit
Former Team Member
Posts: 4761
Joined: Thu Mar 18, 2004 5:32 pm
Location: There and Back Again

Re: prosilver tutorial?

Post by MHobbit »

While this knowledge is definitely useful as a part of MOD authoring, it is more styles-specific, so I will move this topic to the appropriate styles forum. Good luck.
Former phpBB MOD Team member
No private support is offered.
"There’s too many things to get done, and I’m running out of days..."
asinshesq
Registered User
Posts: 6266
Joined: Sun Feb 22, 2004 9:34 pm
Location: NYC
Name: Alan

Re: prosilver tutorial?

Post by asinshesq »

MHobbit wrote:While this knowledge is definitely useful as a part of MOD authoring, it is more styles-specific, so I will move this topic to the appropriate styles forum. Good luck.
Up to you where it goes. But for what it's worth (and I mean no disrespect), I actually think this topic is more appropriate in the mod writers forum than in the styles forum because prosilver is a required template (the only required template) that every mod has to use. A mod author can't write a mod that touches a template without coming to grips with prosilver.
User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: prosilver tutorial?

Post by prototech »

It's simple... it maintains a "tabular" layout by floating the elements (dt and dd) to the left and thus keeping everything inline. Then each dd and the dt are given a specific width. This width is used for every topic/forum row as well as the head titles (Category, Topics, Posts, Last Post). That way each section will remain even throughout each row.
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
asinshesq
Registered User
Posts: 6266
Joined: Sun Feb 22, 2004 9:34 pm
Location: NYC
Name: Alan

Re: prosilver tutorial?

Post by asinshesq »

prototech wrote:It's simple... it maintains a "tabular" layout by floating the elements (dt and dd) to the left and thus keeping everything inline. Then each dd and the dt are given a specific width. This width is used for every topic/forum row as well as the head titles (Category, Topics, Posts, Last Post). That way each section will remain even throughout each row.
Thanks, that helps (and thanks, brf: your pointing me to the relevant css helped too). I guess the thing that is really tough for me is mapping through the css (not so much the attributes like display, width, etc. but rather the elements - if that's the right word - like "ul.topiclist dt" and how to figure out exactly what that does and doesn't apply to (or, more generally, when I am looking at the html how to figure out which parts of the css control it). I think I'll spend some time online studying css generally and then I'll revisit prosilver and see if it's easier for me to follow.
User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: prosilver tutorial?

Post by Raimon »

asinshesq wrote: I guess the thing that is really tough for me is mapping through the css (not so much the attributes like display, width, etc. but rather the elements - if that's the right word - like "ul.topiclist dt" and how to figure out exactly what that does and doesn't apply to (or, more generally, when I am looking at the html how to figure out which parts of the css control it). I think I'll spend some time online studying css generally and then I'll revisit prosilver and see if it's easier for me to follow.
Why not ask here (styles forum) for the problems that you don't get, i can save you maby some search time ;), perhaps kan style authors help mod writers and visa versa , i believe it was also a idea on the MOD Author Conventions.
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!
asinshesq
Registered User
Posts: 6266
Joined: Sun Feb 22, 2004 9:34 pm
Location: NYC
Name: Alan

Re: prosilver tutorial?

Post by asinshesq »

Raimon wrote:Why not ask here (styles forum) for the problems that you don't get, i can save you maby some search time ;)
Thanks, I will definitely take you up on that from time to time by posting here, at least for the discrete specific questions I have (though the usual problem is more general: how to start on a blank page that I want to make look like something...and that's harder to ask about).
Raimon wrote:perhaps kan style authors help mod writers and visa versa , i believe it was also a idea on the MOD Author Conventions.
Most of you are too young for this reference, but that sounds a bit like "oh the cowman and the farmer should be friends..." :mrgreen:
asinshesq
Registered User
Posts: 6266
Joined: Sun Feb 22, 2004 9:34 pm
Location: NYC
Name: Alan

Re: prosilver tutorial?

Post by asinshesq »

Picking up on brf's post, what exactly does this mean in the css content file:
ul.topiclist dt ....

Does that mean that what follows in the brackets applies only to a <dt> that appears in an unordered list with a specified class="topicllist"?
User avatar
Brf
Support Team Member
Support Team Member
Posts: 52105
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}
Contact:

Re: prosilver tutorial?

Post by Brf »

Yes

There is a pretty good easy-to-read explaination of CSS structure here: http://www.htmlhelp.com/reference/css/structure.html
asinshesq
Registered User
Posts: 6266
Joined: Sun Feb 22, 2004 9:34 pm
Location: NYC
Name: Alan

Re: prosilver tutorial?

Post by asinshesq »

Thanks, that structure link was helpful, brf.

Raimon and others, in keeping with the suggestion that styles guys can help mod guys and vice versa, there is a styles question I asked a while back here: http://www.phpbb.com/community/viewtopi ... 1&t=593464 about how to get additional css pages to automatically parse variables but the question never got answered. I worked around the problem in an inelegant way by artificially including an extra html page that had css in it in the header html page. But if any of you styles guys has an answer, I wouldn't mind doing this 'right'.
Locked

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