Board3


https://board3.de/

How to make portal wide? + question about portal style.

https://board3.de/viewtopic.php?t=2547

Page 1 of 2

How to make portal wide? + question about portal style.

Posted: 21. July 2009 19:27
by Nawid
Your Portal Version: 1.0.0RC3
Your phpBB Type: Standard phpBB3
MODs installed: No
Your knowledge: Basic Knowledge
Boardlink: http://www.schoollife.nl/forum/portal.php

PHP Version: 3.0.5

What have you done before the problem was there?


What have you already tryed to solve the problem?


Description and Message
My forum is small, but I want to make my portal wide (just like the one here).
I also want to remove the black templates in the portal. I want to make them just like the block "Menu" "Faq" with only a light background.

Re: How to make portal wide? + question about portal style.

Posted: 21. July 2009 23:00
by Mike
To change the width of this Style, open your stylesheet.css ans search for this:

Code: Select all

#wrapper {
    width: 950px;
    min-width: 720px;
    margin: 0 auto;
    padding: 0;
}
replace it with:

Code: Select all

#wrapper {
    width: 98%;
    min-width: 720px;
    margin: 0 auto;
    padding: 0;
}
Your second request is not useful, because the center Blocks uses the same css class as every header of the hole Boeard. Therefore the Headline is white. If you have a white Backgroud, you can't read it.
And to change the Style element, you have to change every single center Block.
To delete the Black Frame around the blocks is very simple, but your headline isnt readable anymore.
Look at this: http://area51.mikevil.de/portal.php?style=61

Re: How to make portal wide? + question about portal style.

Posted: 22. July 2009 01:40
by Nawid
Thanks for the reply.

But I just want to make my portal wide. Not the whole forum...

Thanks for the link (and also thank for trying it!). So, isn't it possible to make the font- color of headline from the welcome message and all other headlines in the center blocks look like the ones in left-block and right-block ?

I mean, make the headlines look like the ones from the blocks on the right and on the left.

Re: How to make portal wide? + question about portal style.

Posted: 22. July 2009 12:40
by Mike
As first, its not possible to give the Portal another width as the Board, since both use the same header and css files.

And its also impossible to change the color of the headline, since the center blocks differs from the outer block. They use another construct, so it cant be done within the config (sadly)
If you really want to ake this, you have to change all the templates for the center block, at least the one you are showing on your portal.
If you want to do it, i can tell you what to change.

Re: How to make portal wide? + question about portal style.

Posted: 22. July 2009 13:23
by Nawid
1) it's a pity
2) yes, I want to remove the black frame and change the the color of the headline for the center blocks.

Re: How to make portal wide? + question about portal style.

Posted: 22. July 2009 17:35
by Mike
replace the content of portal/_block_config.html with this code:

Code: Select all

<!--version $Id: _block_config.html 479 2009-03-15 11:19:27Z kevin74 $ //-->
<!-- Config for the left and right blocks //-->
<!-- DEFINE $LR_BLOCK_H_L = '<div class="panel bg3"><div class="inner"><span class="corners-top"><span></span></span><h3>' -->
<!-- DEFINE $LR_BLOCK_H_R = '</h3>' -->
<!-- DEFINE $LR_BLOCK_F_L = '' -->
<!-- DEFINE $LR_BLOCK_F_R = '<span class="corners-bottom"><span></span></span></div></div><br style="clear:both" />' -->

<!-- Config for the center blocks //-->
<!-- DEFINE $C_BLOCK_H_L = '<div class="panel bg3"><div class="inner"><span class="corners-top"><span></span></span><ul class="topiclist"><li class="header">' -->
<!-- DEFINE $C_BLOCK_H_R = '</li></ul>' -->
<!-- DEFINE $C_BLOCK_F_L = '' -->
<!-- DEFINE $C_BLOCK_F_R = '<span class="corners-bottom"><span></span></span></div></div><br style="clear:both" />' -->

<!-- Images-URL //-->
<!-- DEFINE $NO_AVATAR_IMG = '/images/no_avatar.gif' -->

Open your Blocktemplate (e.g welcome.html) and search the second line:

Code: Select all

{$C_BLOCK_H_L}<dl><dt>{L_WELCOME}</dt></dl>{$C_BLOCK_H_R}
add the following code between <dt and >:

Code: Select all

style="font-weight:bold; color: #000000; font-size:1.05em;"
after that it should looks like this:

Code: Select all

{$C_BLOCK_H_L}<dl><dt style="font-weight:bold; color: #000000; font-size:1.05em;">{L_WELCOME}</dt></dl>{$C_BLOCK_H_R}
You have to do this with every center block on your portal.
Have fun... ;)

Re: How to make portal wide? + question about portal style.

Posted: 22. July 2009 18:16
by Nawid
thnks! I changed the color black to a lighter color: 222222

Re: How to make portal wide? + question about portal style.

Posted: 22. July 2009 18:42
by Nawid
Everything worked, but I can't change the color of news.html I tryed your method, it didn't worked...

Re: How to make portal wide? + question about portal style.

Posted: 22. July 2009 20:45
by Mike
Did you try news_compact.html? ;)

Re: How to make portal wide? + question about portal style.

Posted: 22. July 2009 21:05
by Nawid
yep, it looks like this:

Code: Select all

<!--version $Id: news_compact.html 479 2009-03-15 11:19:27Z kevin74 $ //-->
<!-- BEGIN news_row -->
<!-- IF news_row.S_NO_TOPICS -->
{$C_BLOCK_H_L}<dl><dt style="font-weight:bold; color: #222222; font-size:1.05em;">{L_LATEST_NEWS}</dt></dl>{$C_BLOCK_H_R}
	<div class="post bg2" style="margin-bottom: 0px">
		<div class="inner"><span class="portal-corners-top-inner"></span>
			<span style="text-align: center;"><strong>{L_NO_NEWS}</strong></span>
		<span class="portal-corners-bottom-inner"></span></div>
	</div>
{$C_BLOCK_F_L}{$C_BLOCK_F_R}
<!-- ELSE  -->
<!-- IF news_row.S_FIRST_ROW  -->
<a name="n"></a>
{$C_BLOCK_H_L}
<dl class="icon">
	<dt <!-- IF S_DISPLAY_NEWS_RVS -->style="width: 44%"<!-- ELSE -->style="width: 60%"<!-- ENDIF -->>{L_LATEST_NEWS}</dt>
	<!-- IF S_DISPLAY_NEWS_RVS -->
		<dd class="posts" style="width: 11%">{L_REPLIES}</dd>
		<dd class="views" style="width: 11%">{L_VIEWS}</dd>
	<!-- ENDIF -->
	<dd class="lastpost" style="width: 25%"><span>{L_LAST_POST}</span></dd>
</dl>
{$C_BLOCK_H_R}
<ul class="topiclist topics">
<!-- ENDIF -->
	<li class="row<!-- IF news_row.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
		<dl class="icon" style="background-image: url({news_row.TOPIC_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
			<dt style="<!-- IF S_DISPLAY_NEWS_RVS -->width: 44%;<!-- ELSE -->width: 60%;<!-- ENDIF --> <!-- IF news_row.TOPIC_ICON_IMG -->background-image: url({T_ICONS_PATH}{news_row.TOPIC_ICON_IMG}); background-repeat: no-repeat;<!-- ENDIF -->" title="{news_row.TOPIC_FOLDER_IMG_ALT}"><!-- IF news_row.S_UNREAD_TOPIC --><a href="{news_row.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF --><!-- IF news_row.ATTACH_ICON_IMG -->{news_row.ATTACH_ICON_IMG} <!-- ENDIF --><!-- IF news_row.S_POLL --><strong>{L_POLL}: </strong><!-- ENDIF --><a href="{news_row.U_VIEW_COMMENTS}" title="{news_row.TITLE}" class="topictitle">{news_row.TITLE}</a><!-- IF U_VIEW_UNREAD_POST and not S_IS_BOT --> &bull; <a href="{U_VIEW_UNREAD_POST}">{L_VIEW_UNREAD_POST}</a> &bull; <!-- ENDIF -->
				<!-- IF news_row.PAGINATION --><strong class="pagination"><span>{news_row.PAGINATION}</span></strong><!-- ENDIF -->
					<br />{L_POSTED} {L_POST_BY_AUTHOR} {news_row.POSTER_FULL} &raquo; {news_row.TIME}
				<!-- IF news_row.FORUM_NAME -->
					<br />{L_FORUM}: <a href="{news_row.U_VIEWFORUM}" style="font-weight: bold;">{news_row.FORUM_NAME}</a>
				<!-- ENDIF -->
				<!-- IF not S_DISPLAY_NEWS_RVS --><!-- IF news_row.FORUM_NAME -->&bull; <!-- ENDIF -->{L_REPLIES}: <strong>{news_row.REPLIES}</strong>  &bull; {L_VIEWS}: <strong>{news_row.TOPIC_VIEWS}</strong><!-- ENDIF -->
			</dt>
			<!-- IF S_DISPLAY_NEWS_RVS -->
				<dd class="posts" style="width: 11%">{news_row.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
				<dd class="views" style="width: 11%">{news_row.TOPIC_VIEWS} <dfn>{L_VIEWS}</dfn></dd>
			<!-- ENDIF -->
			<dd class="lastpost" style="width: 25%"><span><dfn>{L_LAST_POST}</dfn>{L_POST_BY_AUTHOR} {news_row.USERNAME_FULL_LAST} <!-- IF news_row.S_UNREAD_INFO --><a href="{news_row.U_VIEW_UNREAD}">{NEWEST_POST_IMG}</a><!-- ELSE --><a href="{news_row.U_LAST_COMMENTS}">{READ_POST_IMG}</a><!-- ENDIF --><br />
				{news_row.LAST_POST_TIME}</span>
			</dd>
		</dl>
	</li>
<!-- IF news_row.S_LAST_ROW -->
    <!-- IF NP_PAGINATION or TOTAL_NEWS -->
		<li class="row<!-- IF news_row.S_ROW_COUNT is even --> bg2<!-- ELSE --> bg1<!-- ENDIF -->">
			<div class="topic-actions">
				<div class="pagination">
					{TOTAL_NEWS}
					<!-- IF NP_PAGE_NUMBER --><!-- IF NP_PAGINATION --> &bull; {NP_PAGE_NUMBER} &bull; <span>{NP_PAGINATION}</span><!-- ELSE --> &bull; {NP_PAGE_NUMBER}<!-- ENDIF --><!-- ENDIF --> &nbsp;
				</div>
			</div>
		</li>
    <!-- ENDIF -->
	</ul>
{$C_BLOCK_F_L}{$C_BLOCK_F_R}
<!-- ENDIF -->
<!-- ENDIF -->
<!-- END news_row -->
still no changes...

Re: How to make portal wide? + question about portal style.

Posted: 22. July 2009 21:31
by Mike
try this:

Code: Select all

<!--version $Id: news_compact.html 479 2009-03-15 11:19:27Z kevin74 $ //-->
<!-- BEGIN news_row -->
<!-- IF news_row.S_NO_TOPICS -->
{$C_BLOCK_H_L}<dl style="font-weight:bold; color: #222222; font-size:1.05em;"><dt>{L_LATEST_NEWS}</dt></dl>{$C_BLOCK_H_R}
	<div class="post bg2" style="margin-bottom: 0px">
		<div class="inner"><span class="portal-corners-top-inner"></span>
			<span style="text-align: center;"><strong>{L_NO_NEWS}</strong></span>
		<span class="portal-corners-bottom-inner"></span></div>
	</div>
{$C_BLOCK_F_L}{$C_BLOCK_F_R}
<!-- ELSE  -->
<!-- IF news_row.S_FIRST_ROW  -->
<a name="n"></a>
{$C_BLOCK_H_L}
<dl class="icon">
	<dt <!-- IF S_DISPLAY_NEWS_RVS -->style="width: 44%; font-weight:bold; color: #222222; font-size:1.05em;"<!-- ELSE -->style="width: 60%; font-weight:bold; color: #222222; font-size:1.05em;"<!-- ENDIF -->>{L_LATEST_NEWS}</dt>
	<!-- IF S_DISPLAY_NEWS_RVS -->
		<dd class="posts" style="width: 11%">{L_REPLIES}</dd>
		<dd class="views" style="width: 11%">{L_VIEWS}</dd>
	<!-- ENDIF -->
	<dd class="lastpost" style="width: 25%"><span>{L_LAST_POST}</span></dd>
</dl>
{$C_BLOCK_H_R}
<ul class="topiclist topics">
<!-- ENDIF -->
	<li class="row<!-- IF news_row.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
		<dl class="icon" style="background-image: url({news_row.TOPIC_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
			<dt style="<!-- IF S_DISPLAY_NEWS_RVS -->width: 44%;<!-- ELSE -->width: 60%;<!-- ENDIF --> <!-- IF news_row.TOPIC_ICON_IMG -->background-image: url({T_ICONS_PATH}{news_row.TOPIC_ICON_IMG}); background-repeat: no-repeat;<!-- ENDIF -->" title="{news_row.TOPIC_FOLDER_IMG_ALT}"><!-- IF news_row.S_UNREAD_TOPIC --><a href="{news_row.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF --><!-- IF news_row.ATTACH_ICON_IMG -->{news_row.ATTACH_ICON_IMG} <!-- ENDIF --><!-- IF news_row.S_POLL --><strong>{L_POLL}: </strong><!-- ENDIF --><a href="{news_row.U_VIEW_COMMENTS}" title="{news_row.TITLE}" class="topictitle">{news_row.TITLE}</a><!-- IF U_VIEW_UNREAD_POST and not S_IS_BOT --> &bull; <a href="{U_VIEW_UNREAD_POST}">{L_VIEW_UNREAD_POST}</a> &bull; <!-- ENDIF -->
				<!-- IF news_row.PAGINATION --><strong class="pagination"><span>{news_row.PAGINATION}</span></strong><!-- ENDIF -->
					<br />{L_POSTED} {L_POST_BY_AUTHOR} {news_row.POSTER_FULL} &raquo; {news_row.TIME}
				<!-- IF news_row.FORUM_NAME -->
					<br />{L_FORUM}: <a href="{news_row.U_VIEWFORUM}" style="font-weight: bold;">{news_row.FORUM_NAME}</a>
				<!-- ENDIF -->
				<!-- IF not S_DISPLAY_NEWS_RVS --><!-- IF news_row.FORUM_NAME -->&bull; <!-- ENDIF -->{L_REPLIES}: <strong>{news_row.REPLIES}</strong>  &bull; {L_VIEWS}: <strong>{news_row.TOPIC_VIEWS}</strong><!-- ENDIF -->
			</dt>
			<!-- IF S_DISPLAY_NEWS_RVS -->
				<dd class="posts" style="width: 11%">{news_row.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
				<dd class="views" style="width: 11%">{news_row.TOPIC_VIEWS} <dfn>{L_VIEWS}</dfn></dd>
			<!-- ENDIF -->
			<dd class="lastpost" style="width: 25%"><span><dfn>{L_LAST_POST}</dfn>{L_POST_BY_AUTHOR} {news_row.USERNAME_FULL_LAST} <!-- IF news_row.S_UNREAD_INFO --><a href="{news_row.U_VIEW_UNREAD}">{NEWEST_POST_IMG}</a><!-- ELSE --><a href="{news_row.U_LAST_COMMENTS}">{READ_POST_IMG}</a><!-- ENDIF --><br />
				{news_row.LAST_POST_TIME}</span>
			</dd>
		</dl>
	</li>
<!-- IF news_row.S_LAST_ROW -->
    <!-- IF NP_PAGINATION or TOTAL_NEWS -->
		<li class="row<!-- IF news_row.S_ROW_COUNT is even --> bg2<!-- ELSE --> bg1<!-- ENDIF -->">
			<div class="topic-actions">
				<div class="pagination">
					{TOTAL_NEWS}
					<!-- IF NP_PAGE_NUMBER --><!-- IF NP_PAGINATION --> &bull; {NP_PAGE_NUMBER} &bull; <span>{NP_PAGINATION}</span><!-- ELSE --> &bull; {NP_PAGE_NUMBER}<!-- ENDIF --><!-- ENDIF --> &nbsp;
				</div>
			</div>
		</li>
    <!-- ENDIF -->
	</ul>
{$C_BLOCK_F_L}{$C_BLOCK_F_R}
<!-- ENDIF -->
<!-- ENDIF -->
<!-- END news_row -->

Re: How to make portal wide? + question about portal style.

Posted: 22. July 2009 22:10
by Nawid
Nice, thank you.

It's working, but the little texts >> "REACTIES" , "VIEWS" , "LAATSTE" are still white.. :mrgreen:
please check it on >> http://www.schoollife.nl/forum/portal.php

Re: How to make portal wide? + question about portal style.

Posted: 23. July 2009 12:22
by Mike
Now it should work ;)

Code: Select all

<!--version $Id: news_compact.html 479 2009-03-15 11:19:27Z kevin74 $ //-->
<!-- BEGIN news_row -->
<!-- IF news_row.S_NO_TOPICS -->
{$C_BLOCK_H_L}<dl style="font-weight:bold; color: #222222; font-size:1.05em;"><dt>{L_LATEST_NEWS}</dt></dl>{$C_BLOCK_H_R}
   <div class="post bg2" style="margin-bottom: 0px">
      <div class="inner"><span class="portal-corners-top-inner"></span>
         <span style="text-align: center;"><strong>{L_NO_NEWS}</strong></span>
      <span class="portal-corners-bottom-inner"></span></div>
   </div>
{$C_BLOCK_F_L}{$C_BLOCK_F_R}
<!-- ELSE  -->
<!-- IF news_row.S_FIRST_ROW  -->
<a name="n"></a>
{$C_BLOCK_H_L}
<dl class="icon">
   <dt <!-- IF S_DISPLAY_NEWS_RVS -->style="width: 44%; font-weight:bold; color: #222222; font-size:1.05em;"<!-- ELSE -->style="width: 60%; font-weight:bold; color: #222222; font-size:1.05em;"<!-- ENDIF -->>{L_LATEST_NEWS}</dt>
   <!-- IF S_DISPLAY_NEWS_RVS -->
		<dd class="posts" style="font-weight:bold; color: #222222; font-size:1.05em; width: 11%">{L_REPLIES}</dd>
		<dd class="views" style="font-weight:bold; color: #222222; font-size:1.05em; width: 11%">{L_VIEWS}</dd>
	<!-- ENDIF -->
	<dd class="lastpost" style="font-weight:bold; color: #222222; font-size:1.05em; width: 25%"><span>{L_LAST_POST}</span></dd>
</dl>
{$C_BLOCK_H_R}
<ul class="topiclist topics">
<!-- ENDIF -->
   <li class="row<!-- IF news_row.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
      <dl class="icon" style="background-image: url({news_row.TOPIC_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
         <dt style="<!-- IF S_DISPLAY_NEWS_RVS -->width: 44%;<!-- ELSE -->width: 60%;<!-- ENDIF --> <!-- IF news_row.TOPIC_ICON_IMG -->background-image: url({T_ICONS_PATH}{news_row.TOPIC_ICON_IMG}); background-repeat: no-repeat;<!-- ENDIF -->" title="{news_row.TOPIC_FOLDER_IMG_ALT}"><!-- IF news_row.S_UNREAD_TOPIC --><a href="{news_row.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF --><!-- IF news_row.ATTACH_ICON_IMG -->{news_row.ATTACH_ICON_IMG} <!-- ENDIF --><!-- IF news_row.S_POLL --><strong>{L_POLL}: </strong><!-- ENDIF --><a href="{news_row.U_VIEW_COMMENTS}" title="{news_row.TITLE}" class="topictitle">{news_row.TITLE}</a><!-- IF U_VIEW_UNREAD_POST and not S_IS_BOT --> &bull; <a href="{U_VIEW_UNREAD_POST}">{L_VIEW_UNREAD_POST}</a> &bull; <!-- ENDIF -->
            <!-- IF news_row.PAGINATION --><strong class="pagination"><span>{news_row.PAGINATION}</span></strong><!-- ENDIF -->
               <br />{L_POSTED} {L_POST_BY_AUTHOR} {news_row.POSTER_FULL} &raquo; {news_row.TIME}
            <!-- IF news_row.FORUM_NAME -->
               <br />{L_FORUM}: <a href="{news_row.U_VIEWFORUM}" style="font-weight: bold;">{news_row.FORUM_NAME}</a>
            <!-- ENDIF -->
            <!-- IF not S_DISPLAY_NEWS_RVS --><!-- IF news_row.FORUM_NAME -->&bull; <!-- ENDIF -->{L_REPLIES}: <strong>{news_row.REPLIES}</strong>  &bull; {L_VIEWS}: <strong>{news_row.TOPIC_VIEWS}</strong><!-- ENDIF -->
         </dt>
         <!-- IF S_DISPLAY_NEWS_RVS -->
            <dd class="posts" style="width: 11%">{news_row.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
            <dd class="views" style="width: 11%">{news_row.TOPIC_VIEWS} <dfn>{L_VIEWS}</dfn></dd>
         <!-- ENDIF -->
         <dd class="lastpost" style="width: 25%"><span><dfn>{L_LAST_POST}</dfn>{L_POST_BY_AUTHOR} {news_row.USERNAME_FULL_LAST} <!-- IF news_row.S_UNREAD_INFO --><a href="{news_row.U_VIEW_UNREAD}">{NEWEST_POST_IMG}</a><!-- ELSE --><a href="{news_row.U_LAST_COMMENTS}">{READ_POST_IMG}</a><!-- ENDIF --><br />
            {news_row.LAST_POST_TIME}</span>
         </dd>
      </dl>
   </li>
<!-- IF news_row.S_LAST_ROW -->
    <!-- IF NP_PAGINATION or TOTAL_NEWS -->
      <li class="row<!-- IF news_row.S_ROW_COUNT is even --> bg2<!-- ELSE --> bg1<!-- ENDIF -->">
         <div class="topic-actions">
            <div class="pagination">
               {TOTAL_NEWS}
               <!-- IF NP_PAGE_NUMBER --><!-- IF NP_PAGINATION --> &bull; {NP_PAGE_NUMBER} &bull; <span>{NP_PAGINATION}</span><!-- ELSE --> &bull; {NP_PAGE_NUMBER}<!-- ENDIF --><!-- ENDIF --> &nbsp;
            </div>
         </div>
      </li>
    <!-- ENDIF -->
   </ul>
{$C_BLOCK_F_L}{$C_BLOCK_F_R}
<!-- ENDIF -->
<!-- ENDIF -->
<!-- END news_row -->

Re: How to make portal wide? + question about portal style.

Posted: 23. July 2009 13:34
by Nawid
yep, it works. Thanks Mike.

I really appreciate your support. Very nice, kind and fast support.

Re: How to make portal wide? + question about portal style.

Posted: 23. July 2009 15:02
by Nawid
I've got some new questions:

because my style is small, the news block isn't showing correctly.

-Are there any alternatives for a custom news block?
-And a news block for left/right?
-Could I disable the whole left/right block? so that my center blocks become more wider? (I want to do this because the news block issue)
All times are UTC+01:00
Page 1 of 2

Powered by phpBB® Forum Software © phpBB Limited