2013-08-26, 11:00 AM
http://i.minus.com/ijrENjMJiv5wI.png
Hi~ :3
Sorry if the english is so bad on this tutorial, but I'm from Spain, any correction is welcome here
Things that you can't make with this tutorial:
-You can't delete the Portal credits on Portal template, but you can translate it if you link.
-The credits only are show on the portal.
That things have this Portal?:
Let's start!
We will edit this templates: portal and portal_announcement.
Delete portal and replace with this:
Now will replace portal_announcement with it:
We have HTML ready now, then will add the css, adding this to global.css(or simply can add a portal.css only attched to portal.php )
Image on various resolutions:
http://i.minus.com/iF6KuulI7hxnj.png
If only want two columns:
Hi~ :3
Sorry if the english is so bad on this tutorial, but I'm from Spain, any correction is welcome here
Things that you can't make with this tutorial:
-You can't delete the Portal credits on Portal template, but you can translate it if you link.
-The credits only are show on the portal.
That things have this Portal?:
- 2 o 3 announcements on 1 line(edit css)
- Image resizer with css.
- Auto-adaptable skin to ALL MyBB themes, with support for porcentage.
Let's start!
We will edit this templates: portal and portal_announcement.
Delete portal and replace with this:
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
</head>
<body>
{$header}
<div style="text-align: center;">
{$announcements}
</div>
<div style="float:right;">Portal diseñado por <a href="http://tuotaku.hakome.com" target="_blank"><b>Yadomi</b></a>.</div>
{$footer}
</body>
</html>Now will replace portal_announcement with it:
<div class="artprin">
<div class="title"><a href="{$mybb->settings['bburl']}/{$announcement['threadlink']}">
{$announcement['subject']}</a>
</div>
<div style="text-align: left;">
{$message}
{$post['attachments']}
<div class="artbot">
<span class="smalltext">{$lang->posted_by} {$profilelink} - {$anndate} {$anntime} </span>
</div>
</div>
</div>We have HTML ready now, then will add the css, adding this to global.css(or simply can add a portal.css only attched to portal.php
).title {
margin-left: -3px;
margin-right: -3px;
margin-top: -3px;
padding: 6px;
border-bottom: 1px solid rgba(22, 22, 22, 0.2);
background: rgba(222, 222, 222, 0.1);
font-size: 15px;
margin-bottom: 3px;
}
.artprin {
width: 32%;
border: 1px solid rgba(22, 22, 22, 0.2);
display: inline-block;
vertical-align: top;
padding: 3px;
border-radius: 3px;
margin-bottom: 3px;
}
.artprin img {
max-width: 90% !important;
max-height: auto !important;
}
.artbot {
border-top: 1px dashed rgba(22, 22, 22, 0.2);
margin-top: 3px;
padding: 3px;
}
Image on various resolutions:
http://i.minus.com/iF6KuulI7hxnj.png
If only want two columns:
.title {
margin-left: -3px;
margin-right: -3px;
margin-top: -3px;
padding: 6px;
border-bottom: 1px solid rgba(22, 22, 22, 0.2);
background: rgba(222, 222, 222, 0.1);
font-size: 15px;
margin-bottom: 3px;
}
.artprin {
width: 48%;
border: 1px solid rgba(22, 22, 22, 0.2);
display: inline-block;
vertical-align: top;
padding: 3px;
border-radius: 3px;
margin-bottom: 3px;
}
.artprin img {
max-width: 90% !important;
max-height: auto !important;
}
.artbot {
border-top: 1px dashed rgba(22, 22, 22, 0.2);
margin-top: 3px;
padding: 3px;
}