Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   [SOLVED] Center Header (http://forum.bytesforall.com/showthread.php?t=16588)

jonzilla45 Jan 25, 2012 01:30 AM

[SOLVED] Center Header
 
I've been trying different things with no luck to get my four header images to re-size to the center when I make my browser smaller - it bleeds into the right sidebar

Thanks!

http://www.redknightschapter40.com

juggledad Jan 25, 2012 03:32 AM

When you use the fade in/fade out option, th code always locks your image to the left side of the screen. You might want to try a plugin in place of the Atahualpa images - add a new widget area to the 'Configure Header Area' option and then add the widget to that area.

You could try the cimy-header-image-rotator plugin

jonzilla45 Jan 30, 2012 12:34 PM

Thanks JuggleDad, I am trying the cimy-header-image-rotator plugin. One plus is that potential future clients can install header images themselves. One big minus, is that it is very slow loading. The Atahualpa loads instantly. Also with the Cimy, I still haven't been able to center the images when reducing the browser. I tried replacing the "left: 50%;" with "left: 0%;" Below is the code, thanks John.

================================================== ======================

<!-- Header -->
<td id="header" colspan="<?php echo $cols; ?>">

<?php echo bfa_header_config(); ?>
<!-- Cimy -->
<div id="cimy_div_id_0">Loading images...</div>
<div class="cimy_div_id_0_caption"></div>
<style type="text/css">
#cimy_div_id_0 {
float: left;
margin: 1em auto;
border: 1px solid #000000;
width: 100%;
height: 150px;
}
div.cimy_div_id_0_caption {
position: absolute;
margin-top: 175px;
margin-left: -75px;
width: 150px;
text-align: center;
left: 50%;
padding: 5px 10px;
background: black;
color: white;
font-family: sans-serif;
border-radius: 10px;
display: none;
z-index: 2;
}
</style>
<noscript>
<div id="cimy_div_id_0_nojs">
<img id="cimy_img_id" src="http://www.redknightschapter40.com/wp-content/Cimy_Header_Images/0/Header-1.jpg" alt="" />
</div>
</noscript>


<!-- / Cimy -->


</td>
<!-- / Header -->

================================================== ===================

http://www.redknightschapter40.com/

juggledad Jan 30, 2012 02:10 PM

Here is an idea, make the site a fixed width site. then you can make all the header images the width of the site and use the atahualpa fade in/out.

jonzilla45 Jan 30, 2012 05:27 PM

Keep rolling JuggleDad - RedKnightsChapter40.com looks great now. The header images loads instantly, and they are centered when I reduce my browser, so it will look proper on small screens (no bleeding into the right sidebar.) I did the following:

I deactivated the Cimy Header Image Rotator. I thought I was still having problems, so I deleted the plugin. But then I realized that I had to delete the Cimi code that I put in the header file. I went to the Atahualpa "Layout WIDTH and type (FLUID or FIXED)" and entered 1300px (the original Atahualpa header images were 1300 x 150) for fixed width and eureka - problem solved.

Thanks again!
John


All times are GMT -6. The time now is 03:17 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.