[For 1.8] Square theme

[eNvy]

You want to remove the space? or you want to have the space between each post but minor space?

[zaishen]

yes, i want the space between the posts to be smaller, i want the post to be closer

[eNvy]

yes, i want the space between the posts to be smaller, i want the post to be closer

Remove the <br /> you add, and search in showthread template something like this:

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder tfixed clear">

the only thing you need to change is "tborder" to "tborder2", something like this:

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder2 tfixed clear">

now, in global.css or square.css add this class:

.tborder {
background: #fff;
width: 100%;
margin: 3px auto;
}

You can play with the 3px margin until you find the space you want.

[zaishen]

yes, i want the space between the posts to be smaller, i want the post to be closer

Remove the <br /> you add, and search in showthread template something like this:

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder tfixed clear">

the only thing you need to change is "tborder" to "tborder2", something like this:

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder2 tfixed clear">

now, in global.css or square.css add this class:

.tborder {
   background: #fff;
   width: 100%;
   margin:  3px auto;
}

You can play with the 3px margin until you find the space you want.

Thank you, worked, first time not worked because you write only:
 

.tborder {

i added 2 and worked

[eNvy]

Seems like I forgot to write the 2 haha, yes, you need a new class because tborder is used in another places too, sorry about that.

Greetings!

[zaishen]

the theme dont have "Portal" link? 

[eNvy]

No, the theme don't have portal link, you can add it if you want, follow this steps:

1. Edit header template, search this:

<div id="header">
    <div class="wrapper">
        <div class="logo"><div class="logo2"><i class="fa fa-cube fa-fw"></i></div> Square</div>
        <div class="menu">
            <ul>
                <li><a href="{$mybb->settings['bburl']}/index.php"><i class="fa fa-comments fa-2x"></i><br />Index</a></li>
                <li><a href="{$mybb->settings['bburl']}/search.php"><i class="fa fa-search fa-2x"></i><br />Search</a></li>
                <li><a href="{$mybb->settings['bburl']}/memberlist.php"><i class="fa fa-users fa-2x"></i><br />Members</a></li>
                <li><a href="{$mybb->settings['bburl']}/calendar.php"><i class="fa fa-calendar-o fa-2x"></i><br />Calendar</a></li>
                <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><i class="fa fa-question-circle fa-2x"></i><br />Help</a></li>
            </ul>
        </div>
    </div>
</div>

And add the portal link in this way:

<div id="header">
    <div class="wrapper">
        <div class="logo"><div class="logo2"><i class="fa fa-cube fa-fw"></i></div> Square</div>
        <div class="menu">
            <ul>
                <li><a href="{$mybb->settings['bburl']}/portal.php"><i class="fa fa-home fa-2x"></i><br />Portal</a></li>
                <li><a href="{$mybb->settings['bburl']}/index.php"><i class="fa fa-comments fa-2x"></i><br />Index</a></li>
                <li><a href="{$mybb->settings['bburl']}/search.php"><i class="fa fa-search fa-2x"></i><br />Search</a></li>
                <li><a href="{$mybb->settings['bburl']}/memberlist.php"><i class="fa fa-users fa-2x"></i><br />Members</a></li>
                <li><a href="{$mybb->settings['bburl']}/calendar.php"><i class="fa fa-calendar-o fa-2x"></i><br />Calendar</a></li>
                <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><i class="fa fa-question-circle fa-2x"></i><br />Help</a></li>
            </ul>
        </div>
    </div>
</div>

2. Open square.css, search this class:

.menu ul li {
    list-style: none;
    display: inline-block;
    margin: 0 0 0 25px;
    padding: 0;
    text-align: center;
    width: 60px;
    height: 60px;
    line-height: 30px;
}

Now, modify the 25px margin for 15px, in this way:

.menu ul li {
    list-style: none;
    display: inline-block;
    margin: 0 0 0 15px;
    padding: 0;
    text-align: center;
    width: 60px;
    height: 60px;
    line-height: 30px;
}

And that's all.

Now, if you want to change the symbol in that button:

1. Open postbit_email in post bit templates, and you will see something like this:

<span class="minibutton"><a href="member.php?action=emailuser&amp;uid={$post['uid']}" title="{$lang->postbit_email}" title="{$lang->postbit_button_email}"><i style="font-size: 14px;" class="fa fa-envelope fa-fw"></i></a></span>

Now, replace all that with this:

<span class="minibutton"><a href="member.php?action=emailuser&amp;uid={$post['uid']}" title="{$lang->postbit_email}" title="{$lang->postbit_button_email}"><i style="font-size: 14px;" class="fa fa-at fa-fw"></i></a></span>

What's the change? this: <i style="font-size: 14px;" class="fa fa-at fa-fw"></i>, that's the @ symbol in FontAwesome icons.

Of course, if you want to add a symbol, or even words, you need to remove this "<i style="font-size: 14px;" class="fa fa-at fa-fw"></i>" and add your symbol/text there.

Greetings!

[zaishen]

Great, worked like a charm , thank you,



You know if we can we add some timer on collapse categories? to make the collapses close smooth?

[eNvy]

I assume you can, but I don't know where is the time for the collapse animation, maybe in a core file, but don't know which.

[iAndrew]

You know if we can we add some timer on collapse categories? to make the collapses close smooth?

You can edit the speed of the effect in jscripts/jquery.plugins.js

I changed mine from fast to slow, make a back up of the file before messing with anything if you don't know what you're doing.