Style sheets: Keeping the appearance from v1 to v1.5.x

David_Knight

Joined: 2008-01-18
Posts: 8
Posted: Fri, 2008-01-18 06:53

I recently had my ISP upgrade our v1.x Gallery to v1.5.7. All seemed to work, except that the appearance has changed.

I have tried to understand the documentation; but it has just made me more confused, as it seems to refer to pre v1.5; but I cannot find what to do with 1.5.7. References to reading the remarks in the top of css files is no further help either as they seem to have a high degree of assumed knowledge.

Here is the URL of the old website

http://www.artphotobykira.com.au/photogallery/gallery/view_album.php?page=1&set_albumName=MollyBrandon

which has a particular look at feel that I want to replicate. But this is what is looks like under 1.5.7:

http://dev.artphotobykira.com.au/photogallery/gallery/view_album.php?page=1&set_albumName=MollyBrandon

There are question marks in weird places; text sizes are wrong, I had trouble getting the background colour [which was originally a blue-ish colour post install]. The documentation I read talked about trying to create your own "skin"; but that did not seem to work as advertised. I then simply found and edited "screen.css" in the css directory and AT LEAST I could get the background colour. But fonts, and other stuff is just wrong.

I need to get this right, pending a final upgrade to v2.

Can anyone please give me some pointers?

I have attached the screen.css file in use if that helps...[rename to screen.css from screen.doc]

Thank you

David.

AttachmentSize
screen.doc9.06 KB
 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Fri, 2008-01-18 07:19

There has been a lot of changes between v1.4.2 and v1.5.7
so you need to expect to make some changes since you have not made incremental changes at each release.
I would suggest working on one issue at a time.
Start with getting:
Firebug and the FF browser to change css issues:
http://files.jnewland.com/firebug.mov
and another tool in this thread:
http://gallery.menalto.com/node/9602#comment-77989

If you get stuck post back single issues and I will attempt to help out.

@question mark: I see one at:
http://dev.artphotobykira.com.au/photogallery/gallery/html_wrap/gallery.footer
change the ? to a ©

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
David_Knight

Joined: 2008-01-18
Posts: 8
Posted: Fri, 2008-01-18 08:37

Hi Dave,
Great response, thank you. Looked at the video; & shall obtain the tool. I shall have to get bioth FF & Firebug; but I think it will help me debug the stylesheet thing. I still do not know which file I should be editing; apart from guessing. Is all the stuff about skins of no use any more?

So even if I get Firebug to work out what is coming from where; which style sheet to I update?

Thank you for the pointer to the footer; that also allowed me to fix dates; the copyright symbol and also a broken link. I had no idea where this was held, as I inherited this from someone else. [Don't you just hate that?]. The question marks I was referring to appear in my browser next to album names, next to some heading images; and so forth. Are those erroneous tags, or style sheet issues?

Best wishes from Sydney
David.

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Fri, 2008-01-18 16:56

http://dev.artphotobykira.com.au/photogallery/gallery/html_wrap/gallery.header ......." width="720" height="80">
http://dev.artphotobykira.com.au/photogallery/gallery/html_wrap/album.header <?php echo $gallery->album->fields["title"] ?>

With firebug you should be able to tell what style sheet affects what property. Try screen.css fisrt.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
David_Knight

Joined: 2008-01-18
Posts: 8
Posted: Mon, 2008-01-21 08:21

The question marks turned out to be a character set issue, which was why [perhaps] you couldn't see what I was talking about. The new server was [by default] transmitting Unicode UTF-8 instead of Western ISO-8859-1. My ISP was reluctant to make a global change to their server, but instead created a .htaccess file in my Gallery which forces Western ISO-8859-1; and all is ok as far as the Query marks are concerned.

Still have to deal with style issues; though.

Shall make other posts to deal with that.

Cheers

David.

 
David_Knight

Joined: 2008-01-18
Posts: 8
Posted: Mon, 2008-01-21 08:39

I have discovered via Firebug that base.css and screen.css are used. I found that the older version used embedded_style.css.default and standalone_style.css.default which I copied to base.css and screen.css respectively on the new server & most things started working!

However there are still some differences which Firebug does not seem to help me with. Consider for example the following two pages from the old and newer versions of Gallery:

http://www.artphotobykira.com.au/photogallery/gallery/view_photo.php?set_albumName=SindyWisam&id=SW0002b

http://dev.artphotobykira.com.au/photogallery/gallery/view_photo.php?set_albumName=SindyWisam&id=SW0002b

respectively. Note that the navigation bar looks different. Especially the next/previous/first/last etc icons. The new version has borders around the icons which looks bad. Firebug inspector reveals the following html respectively:

<img border="0" title="Next Photo" alt="Next Photo" src="http://www.artphotobykira.com.au/photogallery/gallery/images/nav_next.gif"/>

<img title="Next Page" alt="Next Page" src="http://dev.artphotobykira.com.au/photogallery/gallery/images/icons/nav_next.gif"/>

Note the "old" version includes border="0". I cannot see anywhere in the style sheets where this is controlled. I assume the same thing applies to the other layout elements. So either this is hard-coded into the newer verion, or there is something else I do not know.

Can you please help?

Thank you

David

 
David_Knight

Joined: 2008-01-18
Posts: 8
Posted: Mon, 2008-01-21 12:51

Hopefully the last post in this thread....

If this saves someone else all the heartache I've been through; then perhaps it is all worth it!

I found that there are also includes held in the layout directory that had been modified [I think] in the previous version to change the display of the navigation bar. Initially copying all the ones from the previous version into the new worked in most areas but caused crashes in others; so by judicious copying I worked out those that would still work, and for those that would not I added in the code to suppress the border.

So, now for almost all intents & purposes; the old and new look and work the same. Still some minor annoyances such as fonts displaying differently between IE6, IE7 & Firefox; but I am tired & had enough!!!

Next step [later] is to try to upgrade to v2.x. Hope that will be a lot less painful.

Good luck to those who follow.

David

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Mon, 2008-01-21 14:24

David, Thanks for the followup. I am sure it will come in handy for others.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team