Hi, I am using Drupal for a class. I changed the slideshow so it only displays on the right side of the page. But, the location of the left navigation bar is below where the slideshow was. I want the left navigation bar to be at the top of the page next to the slideshow and I would like any help I can get to get it up there.

I know if I take out the slideshow in the php it goes up there, but I obviously want to keep the slideshow. Any ideas? Also I have a photo of what the page looks like now.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Deepika.chavan’s picture

FileSize
90.24 KB

Hi,
I tried the same thing on my local site. What i did is I placed the left sidebar's code inside slideshow wrapper(previously it was inside div id="wrapper" div). Now the code looks like :

<?php if($is_front): ?>
<div id="slideshow-wrapper">
<div class="slideshow-inner">
<div id="slideshow-preface">
 <?php if ($page['preface']): ?>
          <div id="preface">
            <?php print render ($page['preface']); ?>
          </div><!-- end preface -->
 <?php endif; ?>
</div>
<?php if ($page['highlighted']) : ?><div id="slideshow-bottom">
<div id="mission"><?php print render ($page['highlighted']); ?></div></div><?php endif; ?>
<div class="slideshow">
<img src="<?php print $base_path . $directory; ?>/images/slideshows/sea.jpg" width="950" height="355" alt="slideshow 1"/>
<img src="<?php print $base_path . $directory; ?>/images/slideshows/noon.jpg" width="950" height="355" alt="slideshow 2"/>
<img src="<?php print $base_path . $directory; ?>/images/slideshows/snow.jpg" width="950" height="355" alt="slideshow 3"/>
</div>
</div>
    <?php if ($page['sidebar_first']): ?>
      <div id="sidebar-left" class="column sidebar"><div class="section">
        <?php print render($page['sidebar_first']); ?>
      </div></div> <!-- end sidebar-first -->
    <?php endif; ?>
</div><!-- slideshow-wrapper -->
<?php endif; ?>

And Changed the css in local.css file (I don't know how you changed the width of slideshow , but this is what I did).
I added following code in local.css file (Please see the instructions given in local_sample.css file to activate the css file.)

#slideshow-wrapper {
  background: none;
  height: 420px;
  margin: 14px auto -45px auto;
  width: 950px;
}

.slideshow-inner {
  width: 70%;
  float: right;
}

Please clear cached data. Check the attachment.
HTH!!

Rgrds,

Deepika Chavan.