Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header (http://forum.bytesforall.com/forumdisplay.php?f=43)
-   -   How To: keep the blog title over the header image when using fade in/out (http://forum.bytesforall.com/showthread.php?t=16478)

juggledad Jan 11, 2012 02:27 PM

How To: keep the blog title over the header image when using fade in/out
 
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.

JaneFancher Mar 16, 2012 01:54 PM

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!

juggledad Mar 16, 2012 02:24 PM

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

JaneFancher Mar 16, 2012 03:20 PM

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)

juggledad Mar 16, 2012 03:45 PM

Yes the z-index controls what layer of the stack an element shows. The higher the number the more on top it is

JaneFancher Mar 17, 2012 09:42 AM

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!

lmilesw Mar 17, 2012 10:05 AM

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.

JaneFancher Mar 17, 2012 12:28 PM

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.

lmilesw Mar 17, 2012 01:16 PM

It's kind of hard to reverse engineer these kinds of things but you could probably use border: none instead of border-collapse.

juggledad Mar 17, 2012 05:08 PM

try adding
HTML Code:

div#menu1 ul.rMenu {
    background: none repeat scroll 0 0 black;
}


JaneFancher Mar 18, 2012 12:49 AM

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." :o

juggledad Mar 18, 2012 05:34 AM

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'

JaneFancher Mar 18, 2012 07:49 AM

WHOA! Too cool!

That's actually what I've been using to inspect the element, but I didn't know where it came from. :o 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 :o

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! :confused:

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!

juggledad Mar 18, 2012 08:56 AM

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

JaneFancher Mar 18, 2012 09:02 AM

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...)

JaneFancher Mar 18, 2012 01:24 PM

That's what I did...different folder names...but when I tried to switch, they were all the same. Very weird. But solved now!


All times are GMT -6. The time now is 08:49 AM.

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