Topic: Editing album_header.tml with Dreamweaver

[Dino]

I love Dreamweaver. I use it exclusively for web development. Of course, I also use Notepad, for you die-hards out there.

To edit .tml files in Dreamweaver, you'll need to add that extension in your preferences. Go to Edit->Preferences...->File Types/Editors. Click the "+" button above "Extensions" and then under "Editors" select Dreamweaver (or UltraDev) as primary.

Then, fire up album_header.tml (you may have to restart Dreamweaver for the changes to take effect).

Depending on what version you have, it may only let you edit it in code view. Regardless, to get a basic visual of album_header.tml, just add </table> on the very last line. Click in the viewer, and go to town. Remember, that almost everything with album.pl references Photo_Album.css, so if you want to modify layouts, check there first. I had to delete "table" in the style sheet and create my own, since I didn't want ALL my tables behaving the same way. Experiment. Just remember what you changed, come the next upgrade.

VERY IMPORTANT: When you are done making changes to album_header.tml, be sure to DELETE the </table> you added.

Then, backup your current remote album_header.tml (I just change the name to album_header.tml.bak) and upload the modified album_header.tml. Go ahead. Experiment.

Take a look at mine: http://dinofilias.com/cgi-bin/album/album.pl

[Dino]

Ummm....

Unless you're modifying Version 6.0 Beta, this trick no longer applies. The templates have drastically changed in Version 6.0 (6.1 Pre-Release 02/18/03)...

The style sheets have also changed, with increased detail to every html element on the photo page (which causes havoc when trying to add your own headers). I'll let you know if I find an easy solution.

[Mike Bobbitt]

Thanks for the update. Looks like we're back to vi...

[Dino]

Oh, don't let my few minutes of personal web grief take away from your hard work!

It was funny... I was scratching my head last night trying to figure out how to edit in Dreamweaver with the new template. A few hours into it, I decided to jump on here and look how I did it the first time. I then noticed I had a private message and a user had the exact same question I was having. Ironic.

So, yes, I was able to confirm that the ol' DW trick didn't apply to the new templates. No big deal. Most hard-core programmers/developers write in Notepad anyway (LOL!)

Needless to say, I was able to barely get the stylesheets  in order, but I was not able to add my old header correctly. I might just have to attach another stylesheet. I'm a stylesheet neophyte... knowing just enough to get by and be dangerous. I wish there was a graphical version of stylesheet management out there, so you can watch your changes on the fly. Perhaps something like that already exists.

Anyway, when I figure out how to modify the new templates in DW, I'll post here.

Mike, keep up the good work. You are a super star.

[Bytes_U]

...I wish there was a graphical version of stylesheet management out there, so you can watch your changes on the fly. Perhaps something like that already exists.

I'm not sure if this is what you are looking for, but have you checked out a CSS program called "TopStyle"?

[Dino]

Dreamweaver has some similar characteristics of Top Style.

What I'm looking for is a CSS editor that will allow one to make dynamic changes on the fly. For example, I'd like to load up my album layout, make CSS changes, and WATCH the changes as I make them.

Right now, it's all trial and error. I make a change, save the stylesheet, upload it to my remote server, reload my album page, and the process continues for hours.

Unfortunately, I'm no CSS expert. I'm a minimalist. I just need to conform and learn CSS.

[Mike Bobbitt]

I almost hate to suggest it, but I think FrontPage may have visual CSS editing... Haven't used it with the album CSS though, so it may not be any good...

I know the CSS stuff is pretty hard to deal with. (If it's any consolation, it was hard to write! ) I tried to keep it "relatively" straightforward by using <div>'s to define a scope of "real estate" to deal with. Each div has a class, which corresponds to a class in the style sheet. That class defines how everything between the <div> and </div> tags will appear.

So for example, in album_footer.tml there is this code:

Code: [Select]

      <!-- Insert the information about how many times this photo has been viewed, last viewed date, etc. -->
      <div class="views">
         ####VIEWS####
      </div>

And the corresponding style sheet class is:

Code: [Select]

/* The text saying how many times this photo has been viewed */
.views   { line-height: 200%; width: 50%; text-align: center; font-size: 6pt; display: inline; }

The ####VIEWS#### tag is replaced with the # of views of this photo so far, and the date it was last viewed. The style sheet class, in a nutshell, says to display this info as a 200% high line, taking up 50% of the available width, centered, using a 6pt font and stacked (inline) with the next <div>.

Now that doesn't explain it all... But the "views" div is nested inside this div:

Code: [Select]

<div class="medbanner">
And the css for that is:

Code: [Select]

/* Horizontal banner used to hold "E-Mail This Page" and views information - Medium Gray */
.medbanner   { height: 25px; border: 1px solid #333333; background-color: #666666; }
This says: lets create a visual chunk of real estate, 25px high, with a 1px border (coloured #333333), and a background colour of #666666. That's how I get the "medium gray" coloured banner at the bottom of every page, and it contains the "E-Mail this page" link in the first 50% (left half) and the "views" info in the next 50% (right half).

Further, the "views" info that shows up on the right 50% of the medium gray banner is styled as we defined above ("200% high line, taking up 50% of the available width, centered, using a 6pt font and stacked (inline) with the next <div>").

So that builds up just one small piece of the puzzle, but once you understand the nexting and how the styles apply, the rest is just more of the same.

Hope that helps!

Cheers

[Dino]

Definitely helps! You just taught me about inline. Didn't know that. Also learned your thought process on how you created your classes. Very good to know! Thanks!

Are you ever going to lead up to a "control-panel" configurable layout... perhaps something similar to UBB's (which is pretty elementary). Is it possible to let users select different "available" layouts? That would be cool too. I see that on a great deal of PHP boards, where users can select their own color scheme.

Actually, not on a high priority list for me... but a control panel to change the color schemes, borders, etc, would be REALLY TIGHT!

Keep up the good work... pretty soon your app will be worth $1000/seat. Damn.

[Mike Bobbitt]

I've added a note to the to do list about this. At the minimum, I'd like to add a drop down list for selecting items such as string files and (maybe) templates, if it makes sense...

From there it can be expanded. The problem is, I haven't had a whole lot of people come forward with alternate templates!  

[Lady_Silverwolf]

Actually ... I am trying to work on one now. Although I absolutely LOVE Album.pl, and so do the fellas at 632rl.com, I personally am not a gray kind of gal.

I tend to fly by the seat of my pants while creating web pages, so all this .pl, and .css stuff is like knocking the wind out of me as I try to sit down and learn it. I tend to be a better image manipulator than a text enhancer if you know what I mean.

However, if I ever manage to get the knack of this... I will gladly help deliever a few template ideas myself for the cause Mike.

And once again .. kudos on an exceptional program.


PS. Not completely satisfied yet, but if you would like to see some blues ... take a gander at :

http://www.632rl.com/cgi-bin/album.pl

This particular album is for a Racing League. Mind you all I have modded so far is just the .css at this time, but eventually I hope to work on the actual template so that the Album looks very similar to the web site the league uses.

[Mike Bobbitt]

Nice work! Looks like you've pretty much got the CSS thing figured out...

If I ever get the time, I should develop a few alternate template/CSS combinations. I've seen some great ones out there for sure, and it would be nice to have a selection to work with. The flexibility from templates is a grossly underutilized feature in my opinion. (But since I offer just one template, I'm primarily to blame I guess... )

P.S. Know what you mean about not being the "gray" type... But it seems generic enough, so that's what I went with...