Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

How can I adjust alignment of rotating header images?


  #1  
Old Jun 21, 2011, 10:48 AM
jennytatjana
 
8 posts · Aug 2010
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

Last edited by jennytatjana; Jun 21, 2011 at 12:39 PM. Reason: original posted in the wrong category
  #2  
Old Jun 21, 2011, 01:17 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Jun 21, 2011, 01:51 PM
jennytatjana
 
8 posts · Aug 2010
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
  #4  
Old Jun 21, 2011, 03:41 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
shut off the FADE IN/OUT - it ignores the CSS position of the image
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Jun 21, 2011, 06:40 PM
jennytatjana
 
8 posts · Aug 2010
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
  #6  
Old Jun 21, 2011, 07:08 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I don't see any image
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Jun 21, 2011, 07:18 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #8  
Old Jun 21, 2011, 07:45 PM
jennytatjana
 
8 posts · Aug 2010
RIght - sorry, I put the image back - see how its off to the left of center just a tiny bit?
  #9  
Old Jun 21, 2011, 07:53 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
You could use the following but you also have some menu issues going on in my browser.
HTML Code:
#imagecontainer {
left: 3px;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #10  
Old Jun 21, 2011, 07:58 PM
jennytatjana
 
8 posts · Aug 2010
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?
  #11  
Old Jun 21, 2011, 08:07 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #12  
Old Jun 21, 2011, 08:11 PM
jennytatjana
 
8 posts · Aug 2010
great! thank you
  #13  
Old Jun 21, 2011, 08:41 PM
jennytatjana
 
8 posts · Aug 2010
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!
  #14  
Old Jun 21, 2011, 09:14 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
rotating header image not working after images/header folder delete cpickeri Header configuration & styling 7 Oct 12, 2011 05:03 AM
[SOLVED] Header images not rotating MiaM Header configuration & styling 11 May 20, 2011 10:16 AM
Adjust alignment of header image? kaiasgram Header configuration & styling 4 Mar 14, 2011 06:39 AM


All times are GMT -6. The time now is 11:18 PM.


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