Adding scrolling testimonials to header logo area - Black Accents theme

Permalink
I'm running 5.6.2.1 with the Black Accents themes tucked away in my /themes directory. I have setup Power Slider Lite with some transparent images and added my testimonial quotes in the 'Power Phrase' field. I want to place this in my header area adjacent to my "My_Site_Name" jpeg logo image. I have all that area to the right of my logo image that would be perfect for some scrolling testimonials. Ideas?

View Replies:
grosik replied on at Permalink Reply
grosik
Hello, you should have edit header.php file. I will post my sample code, on left side there is image logo and on "header-slider" div you can place powerslider block.

html:
<div id="header">
   <div id="logowrapper">
   <a href="<?php echo DIR_REL ?>/" title="<?php echo SITE?>">
<img src="<?php echo $this->getThemePath()?>/images/logo.png" title="xxx" alt="yyy" /></a>
   </div>
   <div id="header-slider">
       <?php     
      $a = new GlobalArea('Header-slider');
      $a->display($c);
       ?>
   </div>
</div>



css:
#header {width: 960px; height: 200px;}
#logowrapper {float:left; width: 200px; height: 200px; }
#header-slider {float: left; width: 760px; height: 200px;}


i hope this might help.
Solarnomics replied on at Permalink Reply
Grosik,
Thank you for the reply! I played around with trying to insert your code into my header.php and I couldn't get it to work. I think it has to do with the css naming of the containers for different page styles. I think all I need from your code is the div-id="header-slider" section along with the corresponding css entry. Is it possible to integrate just that portion to what I have?

I really appreciate your help, I'm learning a lot from this.

Here's what my header.php looks like and beneath all this I've included my main.css.

header.php
<?php  defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<!-- Site Header Content //-->
<link rel="stylesheet" media="screen" type="text/css" href="<?php  echo $this->getStyleSheet('main.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php  echo $this->getStyleSheet('typography.css')?>" />
<?php 
Loader::element('header_required');
?>
</head>
<body>
<div id="container">
   <div class="logo">


##############################################################

main.css

/* CSS Document */
body {
   font:12px Arial, Helvetica, sans-serif;
   color:#484848;
   background:#d3d3d3 url(images/top_bg.gif) repeat-x;
   margin:0px;
   padding:0px;
}
#container {
   width:1170px;
   margin:0px auto;
   margin-top:100px;
}
#container .logo {
   font:40px Arial, Helvetica, sans-serif;
grosik replied on at Permalink Reply
grosik
Hello, look at line #18

#container .logo {
   font:40px Arial, Helvetica, sans-serif;
   color:#ffffff;
   width:auto;
   height:33px;
   position:absolute;
   top:20px;
   left:112px;
}


class .logo in #container is positioned absolutetly, so you can position absolute your upcoming powerslider container (<div>).

The example i posted before was other thing, where containers were floating instead of being position absolute.

below i will post modified code, look at line #28 in css and line #48 in html. there i posted new code.

i dont know how full layout looks like but i assumed that right part from .logo class is empty and it .logo class have 400px width. also i gave 600 px for powerslider div. you can change this value of course.

btw, code below
$menu = new GlobalArea('Slider Area');
or
$menu = new Area('Slider Area');

says if desired container for blocks is GlobalArea or Area. Change it however you like.


css:
/* CSS Document */
body {
   font:12px Arial, Helvetica, sans-serif;
   color:#484848;
   background:#d3d3d3 url(images/top_bg.gif) repeat-x;
   margin:0px;
   padding:0px;
}
#container {
   width:1170px;
   margin:0px auto;
   margin-top:100px;
}
#container .logo {
   font:40px Arial, Helvetica, sans-serif;


html:
<?php  defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<!-- Site Header Content //-->
<link rel="stylesheet" media="screen" type="text/css" href="<?php  echo $this->getStyleSheet('main.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php  echo $this->getStyleSheet('typography.css')?>" />
<?php 
Loader::element('header_required');
?>
</head>
<body>
<div id="container">
   <div class="logo">


hope this helps