main body & bottom spotlight layout

hello

i am trying to make the inner body white and bottom black any ideas on how to make this work?

222.jpg

thanks

Hi
Can you givw us url to your site ?

hi

it is on a local server.
and the image is just for illustration it's a combination of corporate2 and appsite.

ok, i figured it out
if any one wants the layout ask here and i will give it

Yeah im interested, please share

hello
first of all to make the inner body white you should open default.php in the layouts folder

and change this line

Code: Select all

<div id="gk-mainbody" style="width:<?php echo $this->getColumnWidth('mw') ?>%">

to this

Code: Select all

<div id="gk-mainbody" style="background:#fff; width:<?php echo $this->getColumnWidth('mw') ?>%">

to add the btsl
replace this

Code: Select all

      <!-- BOTTOM MODULES -->

      <?php $this->loadBlock('botsl') ?>

      <!-- FOOTER -->

      <?php $this->loadBlock('footer') ?>

with this

Code: Select all

<div id="gk-bottom-wrap" class="main clear">
   <?php if($this->getParam('socialIcons') || $this->countModules('search')) : ?>
   <div id="gk-middle-bar">
      <?php if($this->getParam('socialIcons')) : ?>
      <div id="gk-social-icons">
         <?php if($this->getParam('socialIcons1')) : ?>   
         <a href="<?php echo $this->getParam('socialIcons1url', '', true); ?>" id="gk-icons-facebook" target="_blank"><?php echo $this->getParam('socialIcons1text'); ?></a>
         <?php endif; ?>
         <?php if($this->getParam('socialIcons2')) : ?>   
         <a href="<?php echo $this->getParam('socialIcons2url', '', true); ?>" id="gk-icons-vimeo" target="_blank"><?php echo $this->getParam('socialIcons2text'); ?></a>
         <?php endif; ?>
         <?php if($this->getParam('socialIcons3')) : ?>   
         <a href="<?php echo $this->getParam('socialIcons3url', '', true); ?>" id="gk-icons-twitter" target="_blank"><?php echo $this->getParam('socialIcons3text'); ?></a>
         <?php endif; ?>
      </div>
      <?php endif; ?>
      <?php if($this->countModules('search')) : ?>
      <div id="gk-search">
         <jdoc:include type="modules" name="search" style="none" />
      </div>
      <?php endif; ?>
   </div>
   <?php endif; ?>
   <!-- BOTTOM MODULES -->
   <?php $this->loadBlock('botsl') ?>
   <!-- FOOTER -->
   <?php $this->loadBlock('footer') ?>
</div>

and now to delete the borders open open template.css

search for

Code: Select all

div#gk-current-content>div>div.inner { padding:24px; background:#fff; border:1px solid #c8c3be; border-top:none!important; border-left:none!important; }


Code: Select all

.moduletable_text { margin-top:10px!important; padding:24px; background:#fff; border:1px solid #c8c3be; border-top:none!important; border-left:none!important; }


change to

Code: Select all

div#gk-current-content>div>div.inner { padding:24px; background:#fff; border:1px solid #fff!important; }


Code: Select all

.moduletable_text { margin-top:10px!important; padding:24px; background:#fff; border:1px solid #fff!important; }


also add

Code: Select all

/*Bottom */
#gk-middle-bar { background: #222; height: 45px; line-height: 45px; }
#gk-social-icons { float: left; margin-left: 36px; }
#gk-bottom-wrap {  background: #151515; overflow:hidden; font-size: 12px}
#gk-bottom-wrap .moduletable div > h3 { text-transform: uppercase; color: #b9b9b9;border-bottom: 1px solid #333; margin-bottom: 18px; font-size: 20px}
#gk-bottom-wrap a { color: #555}
#gk-bottom-wrap a:hover { color: #b9b9b9}
#gk-botsl1,
#gk-botsl2 { padding: 28px 36px 0 36px; width:auto; overflow:hidden; }
/* social icons */
#gk-social-icons a { background: transparent url('../images/social_icons.png') no-repeat 0 16px; display: block; float: left;  height: 45px; line-height: 45px;  margin: 0 36px 0 0; padding-left: 36px; font-size: 18px; text-decoration:none; font-family:verdana; }
#gk-icons-vimeo { background-position: 0 -13px!important; }
#gk-icons-twitter { background-position: 0 -46px!important; }
#gk-social-icons a:hover { text-decoration:bold; color: #36B0E4 !important}
a:hover#gk-icons-facebook { background-position: 0 -80px!important; }
a:hover#gk-icons-vimeo{ background-position: 0 -109px!important; }
a:hover#gk-icons-twitter { background-position: 0 -142px!important; }

open templateDetails.xml
and add this after t3_logo

Code: Select all

            <param name="socialIcons" class="gk_switch" type="list" default="1" label="Social Icons" description="Enable social icons at top of the page">
                  <option value="1">Enabled</option>
                  <option value="0">Disabled</option>
            </param>
            <param name="socialIcons1" class="gk_switch" type="list" default="1" label="Social Icons - Facebook" description="">
                  <option value="1">Enabled</option>
                  <option value="0">Disabled</option>
            </param>
            <param name="socialIcons1url" type="text" default="#" label="Twitter url" description=""/>
            <param name="socialIcons1text" type="text" default="Twitter" label="Twitter text" description=""/>
            <param name="socialIcons2" class="gk_switch" type="list" default="1" label="Social Icons - Vimeo" description="">
                  <option value="1">Enabled</option>
                  <option value="0">Disabled</option>
            </param>
            <param name="socialIcons2url" type="text" default="#" label="Vimeo url" description=""/>
            <param name="socialIcons2text" type="text" default="Vimeo" label="Vimeo text" description=""/>
            <param name="socialIcons3" class="gk_switch" type="list" default="1" label="Social Icons - Twitter" description="">
                  <option value="1">Enabled</option>
                  <option value="0">Disabled</option>
            </param>
            <param name="socialIcons3url" type="text" default="#" label="Facebook url" description=""/>
            <param name="socialIcons3text" type="text" default="Facebook" label="Facebook text" description=""/>
            <param name="stylearea" type="list" class="gk_switch" default="1" label="Style switcher" description="Enable this option if you want to enable style switcher in floating panel">
                  <option value="1">Enabled</option>
                  <option value="0">Disabled</option>
            </param>

don't forget not to publish tpsl in main page and to copy the social_icons.png from appsite templaste
and in the Module Class Suffix in module manager write color

that should do it
good luck