Forums

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?
 
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">
Viewing 15 lines of 31 lines. View entire code block.


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

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;
Viewing 15 lines of 221 lines. View entire code block.
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;
Viewing 15 lines of 227 lines. View entire code block.


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">
Viewing 15 lines of 35 lines. View entire code block.


hope this helps