The most recent changes to the picture page code has rendered some of the information on this page false.
I will update this soon. The search is no longer in the span, as it was, and now I am not successfully hiding it.
=====
Due to changes to this area, some of the code being given out to hide some of the top menus, on the picture/photo page, is also hiding the ad banner.
(I was made aware of this when someone asked me to help them recover their ad banner, and I looked at the code they were using). I have no idea when the code change occurred, because this is the first time I have looked at the picture page code.
I made a copy and added some of my own style to better see how the page was laid out.
The below diagram does NOT show all the div and table layers (that looked way too messy). It does show the key levels, along with some other details related to addressing page elements (span, classes, etc ...)
 |
| ||||||||||||||||||||||||||||||||||||||||||
Not on the above Diagram:
| Blue Line near Top | Defined in a linked style sheet. It is the top border of div id=feature_subheadContainer | |
| Stuff that shows up when you have multiple pages | ||
| div.pagingContainer | ||
| div.pagingLeft | ||
| div.pagingCenter | ||
| span.currentpage | ||
Using the above diagram, the code needed to modify the style of the page, can be more easily seen.
I can see that a lot of the page is 5 divs deep, so if I try to hide at this level, I will loose a lot of content, including the ad banner.
I can see that the bottom advertisements are packed neatly into their own class. I can easily bring them back, if I hide at a higher level.
I like what I see with the span (the lightgreen background).
I see a huge ugly area I can eliminate.
I can also see tha tthe use of the span, within my picture area (it is used for the caption and the "X Comment(s)"), has either a class, or a unique way I can address the item. Also this is an option:
The darkgreen area, that has a few links in it, I think it is really poorly place.
Ideally I would like to keep those links, but not there. In the end I choose to cover them, due to limitations on places to put code.
The top menu, above the ad, is a problem area. I don't like it. I would like to get my ad up closer to the top of the page, so my own picture content moves closer to the top.
But there is NO addressing difference, between the Ad Banner and that Top menu.
I could shrink the font, but that means hard setting it at the level of my pictures (if I want captions or links there). I could move up the page body, pushing it off the page. That worked in FF, not IE. In the end I choose to keep it, but eliminate the gif next to the International.
Hide the blue line
<style>div{border-top:0px !important}</style>
Hide the span stuff (shown with light green background on diagram.
It won't hide the picture captions unless you also use the keyword important.
<style>span {display:none}</style>
Unhide the span stuff we want to keep
The "X Comment(s)
<style>td td td span{display:block}</style>
The span in the bottom advertisements
<style>div.horz span {display:block}</style>
OR Instead this:
<style>span{display:none}table span{display:block}</style>
Hide some ugly img stuff, and then unhide our pictures
<style> img {display:none}table img {display:block}</style>
background color, same for div and table. Some of it needs !important.
<style>div, table {background-color:D9D9D9 !important}</style>
background image for page
<STYLE>body{background:url(URL-OF-YOUR-PICTURE)}</STYLE>
background Music for page (Works in IE only and ONLY IF the user has multimedia options, with "play sounds in web pages" set to Yes. I wish this was the case with all sounds coming from the internet :-).
<bgsound src="URL OF YOUR MUSIC" loop="-1" />
Keep in mind that it must be a short URL address. If this line goes over 70 characters it truncates, and this will not work.
For this purpose I got my own domain name.
The below statement only effects FF (not IE).
Move the body up to take up the space the top menus used to occupy
<style>body{position:relative; top:-26px; margin-bottom:-26px}</style>
Move up the table to take the up the space of the menu parts we were able to hide, but not eliminate the space for.
(I only recommend using the below lines as the captions to clear gif files,
or a photo you do not expect anyone to click on to view on its own page).
I also recommend only using these lines if you have a way to turn off style,
or are certain you know what you are doing.
If the task requires a set of commands,
one to DO something, and another to unDO the effect on something else,
apply the unDO first.
Keep in mind that the effect of the DO or unDO will each individually
effect the page for the individual picture if that picture is clicked.
Hide the lower top menu and the bottom links, un-hide level we want to keep
<style>div div div {visibility:visible; font-size:10px}</style>
<style>div div{visibility:hidden; font-size:0}</style>
If you turn the main top menu (the one below the google search) invisible, you may want to move up the table with the pictures in them.
<style>table {position:relative; top:-35px}</style>
Account for the movement we did up and a bunch of that extra space that was already there.
If you make this value too large, it effects the bottom ad stuff.
In IE I actually got it to crash when I tried to move something outside of its outer container.
<style>table{margin-bottom:-50}</style>
Prevent movement of 2nd level tables
<style>table table {position:static; margin-bottom:0px}</style>
On my own page, I decided to just remove the links to add a comment and the "X comment(s)" thing, and allow the user to click on the picture if they want to do that.
I ended up with these 6 lines of code.
The first 2 I put as captions to actual pictures.
The last 4 I put into the captions of a row of clear gifs along the bottom of the page.
<style>div, table{background:silver !important;border-top:0px}</style>
<style>br {line-height:2px;}</style>
<style> .feature_subheadLeft, span {display:none} </style>
<style>div{border-top:0px !important}</style>
<style>td b, a.BreadcrumbLinkTopRight{display:none}</style>
<style>img{display:none} table img{display:block}</style>
Click Here
WARNING: remember to close your style tags.At first I thought I could use this to manipulate my page, such as changing how many pictures in a row and such, while allowing me to squeeze in more style commands. Don't Do It. Unless you can turn off style (such as with FF), it can inhibit your ability to do further edits to that particular picture caption, meaning it is difficult to go in and add back the style tag.
Some other ideas:
Put a row of clear gifs on the top or bottom giving you caption space to put in style commands.
This works best, and the bottom, combined with hiding the "Add Comment" and "X Comment(s)" stuff (Users can always click on a picture to get to this functionality).
If you keep the "Add Comment" and/or "X Comment(s)" then you can still use a row of clear gifs, you can put them along the top. On one page I was able to use relative positioning to move the table up, and the "Add Comment" and "X Comment(s)", for the row of clear gifs, ended up under the ad banner. (I guess the ad banner is of some value, besides making the service free*).
For some additional stuff related to the picture page:
Hiding Comments for Individual Pictures:
Click Here, skbryan.com
Some other useful codes:
www.skem9.com picture page There is some stuff there I don't have here.
DO NOT USE THIS LINE: div div div {visibility:hidden}. The rest of the stuff should be fine.
(If anyone has a logon to the skem9 page, maybe someone can inform the page owner of this issue. I don't want to create an account there right now.)
1 comments:
Got LOTS of help from your blogs today! Thank you, as always... Cx
Post a Comment