Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Center area post/pages (http://forum.bytesforall.com/forumdisplay.php?f=32)
-   -   How can I adjust alignment of rotating header images? (http://forum.bytesforall.com/showthread.php?t=14729)

jennytatjana Jun 21, 2011 10:48 AM

How can I adjust alignment of rotating header images?
 
Hello, on my Atahualpa themed site, although I set the header image alignment to "top center" the images are hugging the left side. Is there a way to fix this? I noticed that if I choose to have both CSS and javascript inline then the images ALMOST line up correctly but do not rotate. If i put javescript external and CSS inline then I get two images, on aligned left (rotates) and the other ALMOST lined up correctly )does not rotate) - many thanks! I'm familiar with CSS, but don't know how to implement it effectively through the theme - help appreciated - thanks!

also: Although its recommended that the header images bw the saem size as the layout if the layout is fixed, my layout width is 1043px to accommodate my background image, my header images are 799px. If the remedy is to change the layout size, then how can i get the bg image to show?

This is the site "www.tanyasofia.com"

thanks a million - J

lmilesw Jun 21, 2011 01:17 PM

The image appears to be 795px which isn't quite wide enough for the area it is in. If you change the layout size the only thing you might have to do is tweak the bg image. I am not clear on why you think it won't show.

jennytatjana Jun 21, 2011 01:51 PM

Hi there - it's Jenny, you did some awesome work for me on a site called ccc tiburon before :) - nice to hear from you! You're right I mis-spoke, the header image is 795px not 799px, but making it larger isn't going to solve the problem that it is shifted to the left instead of being centered. Any ideas how to handle that? Also, the images only rotate when I change the javascript setting to "external" and when i do that the images jump all the way to the left.

What I mean about the background image not showing is that the background image is IN the layout container so if i decrease the size of that layout container the bg image gets cutoff.

thanks again

juggledad Jun 21, 2011 03:41 PM

shut off the FADE IN/OUT - it ignores the CSS position of the image

jennytatjana Jun 21, 2011 06:40 PM

yup that moved it back to the center (ALMOST) still is hangning about 4 px left of center - is there a way to fix that? And I guess I ahve to go with a plugin if a iwant a fade? - thanks for your help - Jenny

juggledad Jun 21, 2011 07:08 PM

I don't see any image

lmilesw Jun 21, 2011 07:18 PM

I have used the Cimy Header Imager Rotator plugin with success. You have a tiny bit of CSS you have to implement but you can put the code for the rotator in place of %image. It also lets you link each of the images to a unique URL if you wish.

jennytatjana Jun 21, 2011 07:45 PM

RIght - sorry, I put the image back - see how its off to the left of center just a tiny bit?

lmilesw Jun 21, 2011 07:53 PM

You could use the following but you also have some menu issues going on in my browser.
HTML Code:

#imagecontainer {
left: 3px;
}


jennytatjana Jun 21, 2011 07:58 PM

YES!! that worked - thanks so much, in a more general note - that will hopefully keep me from posting for a while - how/where do I go to find out the id of each element - for example "#imagecontainer" since this is not in the .css file that's visible through ATA/Appearance/Editor?

lmilesw Jun 21, 2011 08:07 PM

Good question... The Firebug addon for Firefox is the ticket. I use it all the time as you can find a selector and then "try" some code to see if it works. Here is a short video to show you what I mean.

jennytatjana Jun 21, 2011 08:11 PM

great! thank you :)

jennytatjana Jun 21, 2011 08:41 PM

Ah, so another question - would you mind telling me what css i need to paste and where to paste it onorder to replace the %image with the CIMY IMAGR ROTATOR? thanks!

lmilesw Jun 21, 2011 09:14 PM

This is what I past into Configure Header Area
HTML Code:

<div id="cimy_div_id">Loading images...</div>
<div class="cimy_div_id_caption"></div>
<style type="text/css">
        #cimy_div_id {
                float: left;
                margin: 1em auto;
                border: 1px solid #000000;
                width: 100%;
                height: 150px;
               
        }
        div.cimy_div_id_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_nojs">
                <img id="cimy_img_id" src="http://www.cnybiz.com/wp-content/Cimy_Header_Images/image1.jpg" alt="" />
        </div>
</noscript>

And this is the CSS I added to ATO>Add HTML/CSS Inserts>CSS Inserts for my particular instance. I added rounded corners.
HTML Code:

#cimy_div_id {
-moz-border-radius:10px;
-khtml-border-radius: 10px;
-webkit-border-radius:10px;
border-radius: 10px;
overflow:hidden;
z-index:-1;
}



All times are GMT -6. The time now is 11:36 AM.

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