Aria vBA CMPS

KrazyFire

New Member
This guide will allow you to integrate the Aria 3.7.x skin with vBadvanced CMPS 3.0.x (Content Management & Portal System).

Main features:
  • Rounded categories
  • Dynamic home and forum buttons
  • Working navbar and dropdown menu

5d1owg.png



http://www.yoursite.com/admincp/
Styles & Templates » Style Manager » Aria » Main CSS

Category Strips (.tcat)

FIND:
Code:
#587CAD url(images/aria/misc/top1.gif) repeat-x top left
REPLACE with:
Code:
#587CAD url(http://www.yoursite.com/forum/images/aria/misc/top1.gif) repeat-x top left
Table Header (.thead)

FIND:
Code:
#587CAD url(images/aria/misc/top1.gif) repeat-x top left
REPLACE with:
Code:
#587CAD url(http://www.yoursite.com/forum/images/aria/misc/top1.gif) repeat-x top left
Table Footer (.tfoot)

FIND:
Code:
#587CAD url(images/aria/misc/top1.gif) repeat-x top left
REPLACE with:
Code:
#587CAD url(http://www.yoursite.com/forum/images/aria/misc/top1.gif) repeat-x top left
Popup Menu Controls (.vbmenu_control)

FIND:
Code:
#587CAD url(images/aria/misc/top1.gif) repeat-x top left
REPLACE with:
Code:
#587CAD url(http://www.yoursite.com/forum/images/aria/misc/top1.gif) repeat-x top left
Additional CSS Definitions

FIND:
Code:
/* ***** Header and Nav  ***** */
.header_bg {
background: #FFFFFF url(images/aria/misc/nav_bg.gif) ;
}
REPLACE with:
Code:
/* ***** Header and Nav  ***** */
.header_bg {
background: #FFFFFF url(http://www.yoursite.com/forum/images/aria/misc/nav_bg.gif) ;
}
FIND:
Code:
/* ***** dotted hr ***** */
div.hr {
height: 1px;
background: url(images/aria/misc/hr.gif) repeat scroll center;
}
REPLACE with:
Code:
/* ***** dotted hr ***** */
div.hr {
height: 1px;
background: url(http://www.yoursite.com/forum/images/aria/misc/hr.gif) repeat scroll center;
}
FIND:
Code:
.userinfo_bg {
background: #ededed url(images/aria/misc/postbit.jpg) ;
color: #000000;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
}
REPLACE with:
Code:
.userinfo_bg {
background: #ededed url(http://www.yoursite.com/forum/images/aria/misc/postbit.jpg) ;
color: #000000;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
}
Done!


http://www.yoursite.com/admincp/
vBa CMPS » Defaul Settings » Global vBadvanced Settings » Header Replacements

Enter the following:

Code:
memberlist.php
usercp.php
register.php
faq.php
calendar.php
search.php
login.php
forumdisplay.php
profile.php
private.php
subscription.php
member.php
online.php
Done!


http://www.yoursite.com/admincp/
Styles & Templates » Style Manager » Aria » StyleVars

FIND:
Main Table Width: 760
REPLACE WITH:
Main Table Width: 800

Change all of the images paths from
Code:
/images/aria/.....
to
Code:
http://www.yourwebsite.com/yourforum/images/aria/.....
Done!


http://www.yoursite.com/admincp/
vBa CMPS » Defaul Settings » Style Options

FIND:
Left Column Width: 175
REPLACE WITH:
Left Column Width: 200

FIND:
Right Column Width: 175
REPLACE WITH:
Right Column Width: 200

Done!


http://www.yoursite.com/admincp/
Styles & Templates » Style Manager » Aria » Edit Templates

adv_portal_module_wrapper

FIND:
Code:
$mods[formcode]
ADD below:
Code:
<!-- Categoty Top -->
<table border="0" cellpadding="0" cellspacing="0"  width="$stylevar[tablewidth]"  align="center">
  <tr>
    <td width="21" height="31" align="left" valign="top" style="background-image: url($stylevar[imgdir_misc]/top_bg.gif)"><img border="0" src="$stylevar[imgdir_misc]/top_left.gif" width="21" height="31" alt="" /></td>
    <td  height="31" width="60%" align="left" valign="middle" style="background-image: url($stylevar[imgdir_misc]/top_bg.gif)"><div class="category_title"><strong>$vba_style[portal_blockbullet] <if condition="$mods['link']"><a href="$mods[link]">$mods[title]</a><else />$mods[title]</if></strong>   </div></td>
    <td width="19" align="left" valign="middle"><img src="$stylevar[imgdir_misc]/top_end.gif" alt="" width="19" height="31" border="0" /></td>
    <td  align="right" valign="top" style="background-image: url($stylevar[imgdir_misc]/top_center.gif)"><if condition="$vba_style['portal_collapsemods']">
                <a href="#top" onclick="return toggle_collapse('module_$mods[collapse]')" style="float:$stylevar[align=right]; padding-top: 9px"><img alt="" border="0" id="collapseimg_module_$mods[collapse]" src="$stylevar[imgdir_button]/collapse_tcat$modimgcollapse.gif" /></a>
            </if>
</td>
    <td width="14" height="31" align="right" valign="top"><img border="0" src="$stylevar[imgdir_misc]/top_right.gif" width="14" height="31" alt="" /></td>
  </tr>
</table>
<!-- /Categoty Top -->
FIND and DELETE:
Code:
<thead>
        <tr>
            <td class="tcat" colspan="$mods[colspan]">
            <if condition="$vba_style['portal_collapsemods']">
                <a href="#top" onclick="return toggle_collapse('module_$mods[collapse]')" style="float:$stylevar[align=right]"><img alt="" border="0" id="collapseimg_module_$mods[collapse]" src="$stylevar[imgdir_button]/collapse_tcat$modimgcollapse.gif" /></a>
            </if>
            <span class="smallfont"><strong>$vba_style[portal_blockbullet] <if condition="$mods['link']"><a href="$mods[link]">$mods[title]</a><else />$mods[title]</if></strong></span></td>
        </tr>
    </thead>
FIND:
Code:
</div>

<if condition="$mods['formcode']"></form></if>
ADD above:
Code:
<!-- Aria Categoty Bottom -->
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="12" align="left" valign="top"><img src="$stylevar[imgdir_misc]/blc.gif" width="12" height="13" alt="" border="0" /></td>
        <td  width="100%" style="background-image:url($stylevar[imgdir_misc]/bottom.gif)"><img src="$stylevar[imgdir_misc]/clear.gif" width="100%" height="13" alt="" border="0" /></td>
        <td width="12" align="right" valign="top"><img src="$stylevar[imgdir_misc]/brc.gif" width="12" height="13" alt="" border="0" /></td>
      </tr>
    </table>
   <!-- /Aria Categoty Bottom -->
Done!


http://www.yoursite.com/admincp/
Styles & Templates » Style Manager » Aria » Edit Templates

navbar

FIND:
Code:
<!-- Categoty Top -->
<table border="0" cellpadding="0" cellspacing="0"  width="100%"  align="center">
ADD above:
Code:
<if condition="in_array(THIS_SCRIPT, array(adv_index))"> <else />
FIND:
Code:
<!-- /Aria Forum Description -->
<div class="spacer"></div>
<br />
ADD below:
Code:
</if>
Done!


http://www.yoursite.com/admincp/
Styles & Templates » Style Manager » Aria » Edit Templates

header

FIND:
Code:
<!-- Register -->
ADD before:
Code:
<if condition="in_array(THIS_SCRIPT, array(adv_index))">

<!-- Forum --><td width="78"><table width="78"  border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td style="background:#FFFFFF url($stylevar[imgdir_misc]/xforum.gif);"><a href="$vboptions[bburl]?$session[sessionurl_q]"
        onmouseover="JSFX.fadeIn('forum')"
        onmouseout="JSFX.fadeOut('forum')"><img
        src="$stylevar[imgdir_misc]/xforum.gif" name="forum"  width="78" height="39" border="0" class="imgFader" id="forum" alt="" /></a></td>
      </tr>
    </table></td><!-- /Forum -->


<else />

<!-- Home --><td width="78"><table width="78"  border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td style="background:#FFFFFF url($stylevar[imgdir_misc]/xhome.gif);"><a href="$vboptions[homeurl]?$session[sessionurl_q]"
        onmouseover="JSFX.fadeIn('home')"
        onmouseout="JSFX.fadeOut('home')"><img
        src="$stylevar[imgdir_misc]/xhome.gif" name="home"  width="78" height="39" border="0" class="imgFader" id="home" alt="" /></a></td>
      </tr>
    </table></td><!-- /Home -->

</if>
Done!


http://www.yoursite.com/admincp/
Styles & Templates » Style Manager » Aria » Edit Templates

headinclude

FIND:
Code:
JSFX.Rollover("logout",    "$stylevar[imgdir_misc]/logout_over.gif");
ADD below:
Code:
JSFX.Rollover("home", "$stylevar[imgdir_misc]/xhome_over.gif"); 
JSFX.Rollover("forum", "$stylevar[imgdir_misc]/xforum_over.gif");
Done!


Upload the attached images to your forum/images/aria/misc/ folder.

and you are done!


Thanks to cor3y from GYSn for this
 

TheProphet

New Member
KrazyFire said:
FIND:
Code:
<!-- Register -->
ADD before:
Code:
<if condition="in_array(THIS_SCRIPT, array(adv_index))">

<!-- Forum --><td width="78"><table width="78"  border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td style="background:#FFFFFF url($stylevar[imgdir_misc]/xforum.gif);"><a href="$vboptions[bburl]?$session[sessionurl_q]"
        onmouseover="JSFX.fadeIn('forum')"
        onmouseout="JSFX.fadeOut('forum')"><img
        src="$stylevar[imgdir_misc]/xforum.gif" name="forum"  width="78" height="39" border="0" class="imgFader" id="forum" alt="" /></a></td>
      </tr>
    </table></td><!-- /Forum -->


<else />

<!-- Home --><td width="78"><table width="78"  border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td style="background:#FFFFFF url($stylevar[imgdir_misc]/xhome.gif);"><a href="$vboptions[homeurl]?$session[sessionurl_q]"
        onmouseover="JSFX.fadeIn('home')"
        onmouseout="JSFX.fadeOut('home')"><img
        src="$stylevar[imgdir_misc]/xhome.gif" name="home"  width="78" height="39" border="0" class="imgFader" id="home" alt="" /></a></td>
      </tr>
    </table></td><!-- /Home -->

</if>

Should be 3.8 style

Code:
<if condition="in_array(THIS_SCRIPT, array(adv_index))">

<!-- Forum --><td width="78"><table width="78"  border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td style="background:#FFFFFF url($stylevar[imgdir_misc]/xforum.gif);"><a href="$vboptions[forumhome].php$session[sessionurl_q]"
        onmouseover="JSFX.fadeIn('forum')"
        onmouseout="JSFX.fadeOut('forum')"><img
        src="$stylevar[imgdir_misc]/xforum.gif" name="forum"  width="78" height="39" border="0" class="imgFader" id="forum" alt="" /></a></td>
      </tr>
    </table></td><!-- /Forum -->


<else />

<!-- Home --><td width="78"><table width="78"  border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td style="background:#FFFFFF url($stylevar[imgdir_misc]/xhome.gif);"><a href="$vboptions[homeurl]?$session[sessionurl_q]"
        onmouseover="JSFX.fadeIn('home')"
        onmouseout="JSFX.fadeOut('home')"><img
        src="$stylevar[imgdir_misc]/xhome.gif" name="home"  width="78" height="39" border="0" class="imgFader" id="home" alt="" /></a></td>
      </tr>
    </table></td><!-- /Home -->

</if>

Now the forum link works ;P
 
Top