Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • beyondsports Friend
    #128628

    please bear with me… we just downloaded the ja barite template and we want to add some content to the header… i know the header right is a compilation of slice’s…. we would like to utilize at the minimum of 3 seperate file’s: left – middle – right…. and at what dimensions / width do i have to work with… what change’s to the css file would i need to make….

    thanks
    trey

    beyondsports Friend
    #249613

    Once Again It Would Be Nice To Have Some Support For This Product… Can Someone Help Me …
    Trey

    script06 JATCJA JobBoard
    #249781

    I wonder whether contents you expect to add to the header of JA Barite are images or text. Below are some customization applied for image header. Supposed you change the header image which are cut into 3 slices. In order to load these 3 slices to the header, you need to edit file index.php and file template.css as follows:

    In line 100 of file index.php, replace:

    <blockquote><div id=”ja-header” class=”clearfix”></blockquote>

    With:

    <blockquote> <div id=”ja-header”>
    <div id=”bg1″></div>
    <div id=”bg2″></div>
    <div id=”bg3″></div>
    <div class=”clearfix”></div></blockquote>

    In line 926 of file template.css, replace:

    <blockquote>#ja-header {
    position: relative;
    height: 120px;
    }</blockquote>

    With:

    <blockquote>
    #ja-header {
    position: relative;
    width:950px; // you can change this value to suit your need
    height:120px;
    margin:auto;
    }

    #bg1 {
    background: url(../images/hbg_01.gif) no-repeat; //Suppose hbg_01 is your 1st slice of header image
    height:120px;
    width: 350px;
    display:inline;
    float:left;
    }

    #bg2 {
    color: #CCCCCC;
    background:url(../images/hbg_02.gif) no-repeat; //Suppose hbg_02 is your 2nd slice of header image
    height: 120px;
    width: 350px;
    display: inline;
    float:left;
    }

    #bg3 {
    color: #CCCCCC;
    background: url(../images/hbg_03.gif) no-repeat; //Suppose hbg_03 is your 3rd slice of header image
    height: 120px;
    width: 250px;
    float:right;
    display: inline;
    }</blockquote>

    Please play around with the customization to see if it works for you.

    beyondsports Friend
    #249790

    That actually blew it out… royally… heck I am ok with just one graphic across the whole top of the page..
    any other idea’s…
    Trey

    Menalto Friend
    #249801

    I would say that too, the code could work for him but there is other ways to do it on.

    How do you actually want it to be?

    beyondsports Friend
    #249810

    well take a look at my site right now: http://unfl.beyondsportsnetwork.com/

    i would like to either have 1 graphic across the top or maybe 3 piece’s [ right- middle – left ]…. what would i need to do… i know i have to edit the index.php and cs file…i just dont know how… and if i wanted to add another pix to say the left—that overlaps the top and body left to the left menu bar…
    thanks
    trey

    beyondsports Friend
    #249814

    menalto the template’s are great… for us to use them we will need to edit and add header’s… is it pretty generic to edit each template or is each one different ….
    thanks
    trey

    Menalto Friend
    #249835

    You can try the following:
    Find this code here in the index.php file for the template:


    <!-- BEGIN: HEADER -->
    <div id="ja-headerwrap">
    <div id="ja-header" class="clearfix">

    <?php
    $siteName = $tmpTools->sitename();
    if ($tmpTools->getParam('logoType')=='image') { ?>
    <h1 class="logo">
    <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
    </h1>
    <?php } else {
    $logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
    $sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText'); ?>
    <h1 class="logo-text">
    <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
    </h1>
    <p class="site-slogan"><?php echo $sloganText;?></p>
    <?php } ?>

    <?php if($this->countModules('user4')) : ?>
    <div id="ja-search">
    <jdoc:include type="modules" name="user4" />
    </div>
    <?php endif; ?>

    <?php if ($this->countModules('top')) { ?>
    <div id="ja-login">
    <jdoc:include type="modules" name="top" style="raw" />
    </div>
    <?php } ?>

    <!-- BEGIN: MAIN NAVIGATION -->
    <div id="ja-mainnav" class="clearfix">
    <?php $jamenu->genMenu (0); ?>
    </div>
    <!-- END: MAIN NAVIGATION -->

    <!-- BEGIN: USER TOOLS -->
    <?php if ($tmpTools->getParam(JA_TOOL_USER)) { ?>
    <div id="ja-usertoolswrap">
    <span class="ja-sitetool"> </span>
    <div id="ja-usertools" style="width:<?php echo $ja_tool_width; ?>px">
    <?php $tmpTools->genToolMenu($tmpTools->getParam(JA_TOOL_USER)); ?>
    </div></div>
    <?php } ?>
    <!-- END: USER TOOLS -->

    </div>
    </div>
    <!-- END: HEADER -->

    Replace it with this:

    <!-- BEGIN: HEADER -->
    <div id="ja-headerwrap">
    <div id="ja-headerm">
    <div id="ja-headerl">
    <div id="ja-headerr">
    <div id="ja-header" class="clearfix">

    <?php
    $siteName = $tmpTools->sitename();
    if ($tmpTools->getParam('logoType')=='image') { ?>
    <h1 class="logo">
    <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
    </h1>
    <?php } else {
    $logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
    $sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText'); ?>
    <h1 class="logo-text">
    <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
    </h1>
    <p class="site-slogan"><?php echo $sloganText;?></p>
    <?php } ?>

    <?php if($this->countModules('user4')) : ?>
    <div id="ja-search">
    <jdoc:include type="modules" name="user4" />
    </div>
    <?php endif; ?>

    <?php if ($this->countModules('top')) { ?>
    <div id="ja-login">
    <jdoc:include type="modules" name="top" style="raw" />
    </div>
    <?php } ?>

    <!-- BEGIN: MAIN NAVIGATION -->
    <div id="ja-mainnav" class="clearfix">
    <?php $jamenu->genMenu (0); ?>
    </div>
    <!-- END: MAIN NAVIGATION -->

    <!-- BEGIN: USER TOOLS -->
    <?php if ($tmpTools->getParam(JA_TOOL_USER)) { ?>
    <div id="ja-usertoolswrap">
    <span class="ja-sitetool"> </span>
    <div id="ja-usertools" style="width:<?php echo $ja_tool_width; ?>px">
    <?php $tmpTools->genToolMenu($tmpTools->getParam(JA_TOOL_USER)); ?>
    </div></div>
    <?php } ?>
    <!-- END: USER TOOLS -->

    </div>
    </div> </div>
    </div></div>
    <!-- END: HEADER -->

    Then find this:

    <style type="text/css">
    #ja-header,
    #ja-subnav,
    #ja-container,
    #ja-botsl,
    #ja-footer {
    width: <?php echo $tmpWidth; ?>;
    margin: 0 auto;
    }

    </style>

    And add this:

    #ja-headerm,

    So the code will look like this:

    <style type="text/css">
    #ja-headerm,
    #ja-header,
    #ja-subnav,
    #ja-container,
    #ja-botsl,
    #ja-footer {
    width: <?php echo $tmpWidth; ?>;
    margin: 0 auto;
    }

    </style>

    Save the file.
    Then open up the template.css file and add this at the very bottom:

    #ja-headerm {
    background:url(../images/m.jpg) repeat-x;
    }
    #ja-headerl {
    background:url(../images/l.jpg) no-repeat 0 0;
    }
    #ja-headerr {
    background:url(../images/r.jpg) no-repeat 100% 0;
    }

    By doing the above you have a image called l.jpg stuck on the left side, a image called r.jpg stuck on the right side and the last image called m.jpg repeating below them.
    I attached a image on how it will look(very simple images i used), but you get the idea.


    1. barite-header
    beyondsports Friend
    #249891

    thanks but that is not what i want… forget about the 3 different piece’s… let’s just stick with 1 pix to lay across for the header… i dont want this to just cover the width of the site but the whole width of the screen….picture this the left side is blue and middle and right side are red… in my case my monitor is 1400px wide…. i want the header going across the whole width of my page…

    Menalto Friend
    #249893

    Then you can just remove this one marked in red here and it should cover the whole screen:

    <style type="text/css">
    #ja-headerm,
    #ja-header,
    #ja-subnav,
    #ja-container,
    #ja-botsl,
    #ja-footer {
    width: <?php echo $tmpWidth; ?>;
    margin: 0 auto;
    }

    </style>

    OR find this in the css file:

    ja-headerwrap

    you have a background image there allready, replace it with yours and youre set.
    Maybe you need to change it to background: url(../images/yourimage) no-repeat 0 0; to make it stuck at top left and no repeat or anything

    beyondsports Friend
    #249894

    menalto thanks… i ended up doing a bit of a workaround… i just placed the pix here and took out the ” repeat-x ” to get the placement i was looking for… thanks for the help…

    /* HEADER
    ——————————————————— */
    #ja-headerwrap {
    background: url(../images/m.png) repeat-x top #CC0000;
    color: #CCCCCC;
    line-height: normal;
    height: 120px;
    }
    thanks again
    trey

    beyondsports Friend
    #249898

    hey when you get a chance take a look…http://unfl.beyondsportsnetwork.com/

    can i pick your brain some more… under the unfl logo on the left if i wanted to place a pix in the white space / next to the all categories menu what would i need to do… since this is a football website– id like to place a football player there… or maybe at some point embed a flash object in that place? is that possible?
    see the attached screenshot to see what i am talking about…thanks again for the help…trey


    1. sample
Viewing 12 posts - 1 through 12 (of 12 total)

This topic contains 12 replies, has 3 voices, and was last updated by  beyondsports 16 years, 6 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum