Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » FAQ - Atahualpa » Header »

How To: keep the blog title over the header image when using fade in/out


  #1  
Old Jan 11, 2012, 02:27 PM
juggledad's Avatar
juggledad
 
23,511 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
NOTE: this is no longer needed as of version 3.7.18)

(Thanks to lmilesw for this tip)
Due to the way the fade in/out jscript code works, the blog title and tag line will disappear almost immediately. But here is a trick to keep the blog title over the header image. The way it is done is give the 'wrapper' a 'position: relative;' then use the %logo and position it.

1) Normally to cause the blog title to overlay the header image you go to ATO->Header Image->Overlay Blog TITLE over Header Image(s)? and set it to YES. (same thing for the tabline). In this case set it to 'NO'

2) Go to 'ATO->Style & edit HEADER AREA->Configure Header Area', enter '%logo' right before %image.

3) go to 'ATO->Style & edit HEADER AREA->Show Logo Image?' and blank it out.

4) go to 'ATO->Style & edit HEADER AREA->Show Blog Title?' and set it to yes.

5) go to 'ATO->Style & edit HEADER AREA->Show Blog Tagline?' and set it to yes.

6) finally add the following to ATO->Add HTML/CSS Inserts->CSS Inserts
HTML Code:
#wrapper {position: relative;}
table#logoarea {
    border-spacing: 0;
    left: 30px;
    position: absolute;
    top: 34px;
    width: 100%;
    z-index: 99;
}
you will want to play with the numbers to get it where you want it.

And that's it! - Don't forget to thank Larry if you use this.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Sep 8, 2014 at 12:14 PM.
  #2  
Old Mar 16, 2012, 01:54 PM
JaneFancher
 
16 posts · Nov 2011
You're going to earn a donation, yet, fella! (When I've got this site up and running...believe it!)

This is close, but not quite what I need. I see it conceptually, but unfortunately, I don't want WP to create my title, I want to use a transparent PNG to overlay the rotating images. I've got the "logo" on top of the header, so I can't use that wrapper.

Can you use the "overlay header image" option in a similar manner? (I got my png to work right on the first image using this code:

<div id="header_title">
<img src="/TheCaptainAndLime/wp-content/themes/atahualpa/images/HotNTitle.png">
</div>

but then it disappears.)

I'm going to go ahead and switch the site over to Atahualpa...it's usable right now, just not how I want it, yet (basically, I've got the title incorporated into the images, which is what I'd like to get rid of.

http://www.janefancher.com/TheCaptainAndLime/

Thanks!
  #3  
Old Mar 16, 2012, 02:24 PM
juggledad's Avatar
juggledad
 
23,511 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
put the code
HTML Code:
<div id="header_title"> 
<img src="http://www.janefancher.com/TheCaptainAndLime/wp-content/themes/atahualpa/images/HotNTitle.png">
</div>
before the %logo then use
HTML Code:
div#header_title {
    border-spacing: 0;
    left: 30px;
    position: absolute;
    top: 34px;
    width: 100%;
    z-index: 99;
}
change the numbers to match what you want
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Mar 16, 2012, 03:20 PM
JaneFancher
 
16 posts · Nov 2011
Thou art brilliant! Worked like a charm. I'll get my background layers saved without the title, and it'll be just what I want!

Question: Does the "z-index" attribute put it above all other layers? i.e. is that what puts the div box on top of the headers?

Thanks again, and you'd better believe I'm sending a donation. Wish it c/b more, but know you've been incredibly helpful (and I'm sure I'll be back...sigh. :D)
  #5  
Old Mar 16, 2012, 03:45 PM
juggledad's Avatar
juggledad
 
23,511 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Yes the z-index controls what layer of the stack an element shows. The higher the number the more on top it is
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Jul 11, 2012 at 06:12 AM.
  #6  
Old Mar 17, 2012, 09:42 AM
JaneFancher
 
16 posts · Nov 2011
Yipes! Suddenly my site is showing white behind the menus and in an edge around the body. I don't remember changing anything. It s/b black. I have background: #000000; as my body default, but that doesn't seem to change anything (I tried changing the color on that and it didn't change anything on the page. I also tried background-color, but that didn't do anything either.)

Anyway: site is: http://www.janefancher.com/TheCaptainAndLime/

also, oh wise one, I'm probably asking the impossible, but is there anyway to link the overlay title png to the header images table cell? When you squeeze the table and the menu tabs go to two lines, the absolute positioning screws up the relative position of the header image and the title image.

Thanks as always!
  #7  
Old Mar 17, 2012, 10:05 AM
lmilesw's Avatar
lmilesw
 
10,172 posts · Jul 2009
Central New York State USA
You should be able to get rid of the white background but putting a background of your choice on the menu. Something like
HTML Code:
#menu1 {
    background: black;
}
The white around the the "edge of the body" is most likely a border setting in the layout container style area and the white background for the cat menu looks to be the background for the header. You can use Firebug to determine those. Firebug also helps you to learn CSS.

With regards to the wrapping menus throwing off the layout... That is why I never use a flex width. That is especially true if your menu items can wrap. I would suggest using more dropdowns and then set the site to a static width or at least a minimum width per the theme settings.
__________________
~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.

Last edited by juggledad; Mar 17, 2012 at 10:20 AM.
  #8  
Old Mar 17, 2012, 12:28 PM
JaneFancher
 
16 posts · Nov 2011
I'm really confused. I did check firebug before I posted my problem, and it's saying that the color (white) is inherited from "body". I did try the menu background code and had no change.

My body css is:

font-size: 13px;
color: #ffffff;
border-collapse: collapse;
background: #000000;
padding-top: 20px; padding-bottom: 20px;
text-indent: 15px;
padding-top: 20px; padding-bottom: 20px;
-moz-border-radius:5px;
-khtml-border-radius: 5px;
-webkit-border-radius:5px;
border-radius: 5px;

The white line around the edge is the table border (according to firebug) and I can't find anywhere to get rid of it. I've tried collapse border, and it did nothing. As I say, I'd done nothing (that I can remember) to the "body" properties between the time it was displaying perfectly and when I brought FireFox up and here was this white background and border.

When I change the "color" here, the font color within the entire page does indeed change, but that white background is coming from somewhere I haven't been able to track. Is there a default worked into the theme that is somehow overriding? Again...in three setups, I've never encountered this problem...and it seems to have come out of nowhere. The only thing I did that might have affect it was take out the table defaults within the table content tab because I tend to take care of content tables manually.

I'm not idiot enough to believe it did this spontaneously, but whatever I did wasn't the least bit obvious.
  #9  
Old Mar 17, 2012, 01:16 PM
lmilesw's Avatar
lmilesw
 
10,172 posts · Jul 2009
Central New York State USA
It's kind of hard to reverse engineer these kinds of things but you could probably use border: none instead of border-collapse.
__________________
~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 Mar 17, 2012, 05:08 PM
juggledad's Avatar
juggledad
 
23,511 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try adding
HTML Code:
div#menu1 ul.rMenu {
    background: none repeat scroll 0 0 black;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Mar 18, 2012, 12:49 AM
JaneFancher
 
16 posts · Nov 2011
Thanks. That at least got the black behind the top menu. I'll keep working on the rest with that example in mind.

I've got a related puzzle for you.

I completely wiped out atahualpa on TheCaptainAndLime. Deleted the folder using FTP. Then loaded a sparkling clean version up...copied the ATA settings exactly from the site with the black background the way I want it (closed-circle.net) which was the way I began the site the first time...which worked beautifully the first time...but this time it still had the white behind the menu and the white border on the parent table.

The first thing I tried to do, even before I copied the settings from CC, was to simply change the body default background color to black...nothing. Not a single cell changed. Wait...that's not quite true. It does make the edge around the table go black. I can change the default font color from there, but not the default BG color. Or a BG image, for that matter, using the supplied code.

Then I went through and deleted every other instance of background anywhere in the defaults and I still couldn't get that menu or header or logo background to go black and I can't find the table border mentioned anywhere, so I can't make it disappear within the supplied defaults. I know I didn't do anything special to the CC site to make it disappear.... I mean...I can see adding code to get rid of it, but can you think of any reason for the background default not to work in the first place? We aren't talking regressing. This was a clean install.

Do these themes actually leave any footprints in the WP installation itself? I thought the whole idea was modular, but there's got to be something fundamentally different between these two sites...both of which were on Constructor before I moved them over to ATA.

Also...just out of curiosity, is there a reason why the menu and logo and header pages don't have an option for general formatting of the cell like the body and widgets do? It seems as if it w/b a similar problem, i.e. setting the cell properties...but I admit, I don't know that much about CSS. Just did a lot of html back in the 90's and early 2000's.

I literally spent all day deleting and reformatting Ata on TCAL and could never figure out any way to make that body default background to manifest. I can't get it to load a background image, and I can't get it to pay any attention to that color command. I've reset, I've deleted the bfa_ata4 (which had absolutely no visible affect on the page). I'm terrible at letting go of puzzles, and this one is about to drive me crazy because it makes no sense.

I thought it might be connected to WP's new "saving widgets" function, since that definitely screwed up the formatting of one of my recreations today. In that case, I made the clean install, copied the formatting from the CC site...and the fonts in the widgets were wrong! (that was weird) but I took all the widgets out before switching themes preparatory to yet one more delete and reinstall, which took care of the font problem but did nothing about the white border and background.

I really don't have many plugins...the only one I thought might be a problem was theme switch, which I deactivated and deleted, before yet another wipe and reload, but it still didn't solve the problem.

Sorry...I'm rambling. I've been working on this since 5am. It's now 11pm and I have yet to write the scene that was begging to be written this AM. Any thoughts w/b seriously appreciated, even if it's just "God did it."
  #12  
Old Mar 18, 2012, 05:34 AM
juggledad's Avatar
juggledad
 
23,511 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
When you think of a web page being built, imagine you have a whole bunch of transparent shhets you will use. You place the first one down - this is the body of the page - it takes up the full width and height of the browser window but it is currently transparent so you see nothing. we get out some markers and draw a picture of the universe on it and now it looks like a stunning image of the universe.

Now we grab another sheet of the transparenciy and lay it on top of the body. this is the wrapper and we pull out a red marker and color the eire thing red. Now we look at the page and ...oh our beautiful image of the universe is gone, all you see is red...duh, the red transparency completely covers the underlining sheet. so we cut 20% off both sides and place it down agian and now you see a right and left margin that show the image of the universe behind a red center area.

and on and on it goes.Tthere is a new tool in FireFox 11 where you can right click an area and a dropdown shows. One it the items is 'Inspect Element' when you click this three tabs show up in the bottom right of the window and one id '3D View' This will show you a 3D view of all these layers.

Each element on the page can have multiple options set for it and while Atahualpa gives you a lot of places you can set things, if every option was given a spot, the theme wiould have hundreds if not thousands of PAGES of options. Hence the 'CSS Inserts' option - if it isn't a settable theme option, code some CSS here.

This was a long ramble to set the background to be able to answer your question.

the menu background should be setable at ato->MENU 1 (Page Menu)->Background color unless there is something in the CSS Inserts that overrides this option (the CSS Inserts come last so all things being equal - ie order of precedence - the CSS Insert code will win out since it is last.

The theme OPTIONS are stored in the database and are not removed when you delete the theme CODE. To completely remove them, you would have to remove the row in teh wp-options table that has an option-name of 'bfa_ata4'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #13  
Old Mar 18, 2012, 07:49 AM
JaneFancher
 
16 posts · Nov 2011
WHOA! Too cool!

That's actually what I've been using to inspect the element, but I didn't know where it came from. I say firebug because I've got that as well, and since I hadn't put on any other code-inspection plugin, I guess I thought somehow that was an extension of firebug. Not a very smart extrapolation

But I hadn't noticed the 3D option. That's really neat and does help a lot to find the element.

I knew that about the layers...I do a lot of art and did some pretty complex html coding of tables "back in the day" so I know conceptually how it works, but CSS/php is still sometimes opaque so I thought it might be a hidden reason for just those elements not having the cell-specific setting right on their tab. BTW, that's a great way of describing how it works.

I'm betting my problem lies somehow in that bfa_ata4. I don't have access to my wp tables...I leave that to another CC author, Lynn Abbey...but I did try several times to delete the bfa_ata4 through the button on the import/export page of ATA but I never really saw where it had an effect. I'm still betting on something related to the Switch Themes plugin I was using to build the new look being the culprit. At one point, I tried putting a second ATA theme folder up hoping to configure a fresh version...which I've done successfully with other themes...and when I tried to open the site in the new folder through Theme Switch, all the old settings were applied! Theme Switch is doing something insidious, I fear. It seemed like a good idea at the time, and it didn't seem to bother the other site, but I went back and forth a lot more on this one...and I've done all my CSS experimentation with the themes on this site, so who knows what kind of garbage is sitting in my WP tables!

I'm still suspicious of the "save widgets" thing WP is doing now, because it's definitely saving more than widgets. (I need my little ninja emoticon here.)

The main thing is, knowing there's something outside of the ATA folder that's being affected is a huge relief!

Which is a long way of saying THANKS!
  #14  
Old Mar 18, 2012, 08:56 AM
juggledad's Avatar
juggledad
 
23,511 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
There is only one copy of the options stored in the db so if you had 3 versions installed they would all have the same settings.

Nth if you have two folders like 'atahualpa353' and 'atahualpa373' you could use the theme picker to switch between them
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Mar 18, 2012 at 09:01 AM.
  #15  
Old Mar 18, 2012, 09:02 AM
JaneFancher
 
16 posts · Nov 2011
Soooo close.

I finally just put
td#header {background: #000000;}

table#layout {border-style: none;}

into the add CSS

And that fixed all the white issues.

I actually did this one of the first things...and finally realized, looking at the text file I had of that incarnation that I'd put a ] instead of } on the end of the header line. I need new glasses...

WHEW! Such a hassle; such an easy fix.

But then...isn't is usually?

Time to go write...YAYAY (Snoopy dance...)
  #16  
Old Mar 18, 2012, 01:24 PM
JaneFancher
 
16 posts · Nov 2011
That's what I did...different folder names...but when I tried to switch, they were all the same. Very weird. But solved now!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to create more space between the blog title and the header image? strikers041 Header configuration & styling 3 Nov 20, 2010 04:01 AM
How to control blog title over header image joe hark Header configuration & styling 2 Nov 17, 2010 05:12 AM
Fade in/out header Overlayed Blog Title/Tagline Style jj001 Header configuration & styling 1 Sep 5, 2010 06:50 PM
Header image between Blog Title/Sub Title and search box bseppa Header configuration & styling 1 Mar 15, 2009 02:39 PM


All times are GMT -6. The time now is 09:30 AM.


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