View Full Version : customizing filmstrip gallery S.O.S.
digital faerie
Jan-07-2006, 12:31 PM
Okay, I decided to try and apply principles provided by the wonderful Mr. Lane in Chapter 5 for a Filmstrip gallery.
While I am using the nifty Firefox tools, everything seems to be working great! However, the firefox preview (the view you see while you're testing out CSS and what the page looks like from the changes you're making) shows that everything is lining up very nicely.....but it is not in all actuality.
NOTE: I tried to attach a screen capture, but I can't get the image size small enough for it to fit. :dunno
The gallery in question is http://digitalfaerie.smugmug.com/gallery/941633
The code for this is as follows:
/* ALL FILMSTRIP STYLES */
#filmstrip .filmstrip
{border:6px solid #635A63;
margin:30px;
padding:6px;}
#filmstrip #albumNav
{width:738px;}
#filmstrip #albumNav_bottom
{display:none;}
#filmstrip #albumNav_top
{width:718px;
border:6px solid #635A63;
border-bottom:0px;
margin-bottom:0px;
padding:10px;}
#filmstrip .photoNav
{width:200px;
padding:5px;}
#filmstrip #moveContainer
{border:6px solid #635A63;
border_top:0px;
border-bottom:0px;
width: 738px;
height: 90px;
margin: 0px auto;
position: auto;
padding-top: 5px;}
#filmstrip #leftMove {
cursor: pointer;
cursor: hand;
left: 20px;
position: absolute;
height: 85px;
width: 25px;
/* IE PNG FIX */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale src='/img/filmstrip_left_black.png');}
#filmstrip #rightMove {
cursor: pointer;
cursor: hand;
padding-right:21px;
float: right;
height: 85px;
width: 25px;
/* IE PNG FIX */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale src='/img/filmstrip_right_black.png');}
#filmstrip #thumbnails
{background: #E2CEFC;
width:628px;
height:80px;
padding:5px;
position:absolute;
left:50px;}
#filmstrip #caption_top
{border:6px solid #635A63;
border-top:0px;
border-bottom:0px;
margin-bottom:0px;
padding:5px;
text-align:center;}
#filmstrip #photos
{border:6px solid #635A63;
border-top:0px;
margin-top:0px;}
#filmstrip #mainPhoto
{margin:10px;}
Now, I know that I probably have a lot of stuff in here that's not even necessary, I just had to play with stuff to get things lined up properly. I just find it so odd that the firefox preview shows everything ok, but then when I apply the styling in my CSS stylesheet under "customize", if I view a filmstrip gallery, things are all off. Any suggestions? :scratch
Andy
Jan-07-2006, 12:56 PM
NOTE: I tried to attach a screen capture, but I can't get the image size small enough for it to fit. :dunno
Put your screen shot in a gallery on your SmugMug site and link it :thumb
Instructions in my sig in you need 'em.
digital faerie
Jan-07-2006, 01:23 PM
here ya go:
http://digitalfaerie.smugmug.com/photos/51422103-L.jpg
Andy
Jan-07-2006, 01:31 PM
Tanna,
I think that the stylers will want to know more specifics: what are you trying to accomplish? What's "off"? Also, put a bunch more photos in the gallery so that the filmstrip will run, ok?
digital faerie
Jan-07-2006, 01:39 PM
Tanna,
I think that the stylers will want to know more specifics: what are you trying to accomplish? What's "off"? Also, put a bunch more photos in the gallery so that the filmstrip will run, ok?
the preview screen shot shows the page as it SHOULD look. I have all the styling that I used in the firefox developer tool in my CSS stylesheet. If you click on the gallery link I gave above, you will see things not lined up on the left and right sides.....do you not see it that way? Let me know. thanks!
digital faerie
Jan-07-2006, 02:53 PM
the preview screen shot shows the page as it SHOULD look. I have all the styling that I used in the firefox developer tool in my CSS stylesheet. If you click on the gallery link I gave above, you will see things not lined up on the left and right sides.....do you not see it that way? Let me know. thanks!
in the process of getting another screen shot for visual comparison, I noticed the "add photo" link shows up in firefox, but not in IE??? :dunno
anyway, here's a comparison shot. The screen shot above shows the Firefox web developer tool in action, and the preview screen shows that the border lines up all the way down quite nicely.
However, in the screen shot below, it's quite apparent that things don't line up so nicely. I'm sure this has to do with the fact I jumped the gun and decided to use what Mike had suggested for other styles on the filmstrip style :D but any and all suggestions/corrections/whippings would be most appreciated. hehe
http://digitalfaerie.smugmug.com/photos/51434516-L.jpg
aaargh, and what the *#(*& is that dashed line doing in that one? Yeah, someone just shoot me now.
can you put some more pics in that gallery so the slideshow will play?
it'll help make sure we get everything.
digital faerie
Jan-09-2006, 08:46 AM
can you put some more pics in that gallery so the slideshow will play?
it'll help make sure we get everything.
I guess I could but all the galleries do it in filmstrip, including the screenshot I provided lastly. Still want me to add pics to the first gallery? :dunno
I guess I could but all the galleries do it in filmstrip, including the screenshot I provided lastly. Still want me to add pics to the first gallery? :dunno
sorry bout that. I just looked at the one you posted as it was refered to as "the gallery in question". I'll just use one of your other ones.
digital faerie
Jan-09-2006, 09:04 AM
sorry bout that. I just looked at the one you posted as it was refered to as "the gallery in question". I'll just use one of your other ones.
hmmm, now that I'm looking at all the settings (smugmug, smugmug small, etc.) the border I applied is broken on all of them......any gallery.
maybe something is going on with right and left columns?
hmmm, now that I'm looking at all the settings (smugmug, smugmug small, etc.) the border I applied is broken on all of them......any gallery.
maybe something is going on with right and left columns?
yeah, borders are tough, especially with the smugmug and smugmug small styles.
I had someone ask me the other day if they could change the colors of the borders on my sand theme, I said absolutely, but the easiest thing to do is to make a copy of the theme code and modify it directly. Since you are using borders almost like the sand theme, that's what i'm going to recommend to you. The borders are already all there and everything is accounted for, we just have to change the colors around a bit.
you up for it?
digital faerie
Jan-09-2006, 03:12 PM
yeah, borders are tough, especially with the smugmug and smugmug small styles.
I had someone ask me the other day if they could change the colors of the borders on my sand theme, I said absolutely, but the easiest thing to do is to make a copy of the theme code and modify it directly. Since you are using borders almost like the sand theme, that's what i'm going to recommend to you. The borders are already all there and everything is accounted for, we just have to change the colors around a bit.
you up for it?
not a bad idea, and since I can modify all colors and have my nifty color theme saved on my computer, I can easily reference everything I need. I may not get to this tonight, but heck yeah, I'm up for it! :clap
Just tell me where to start and what code I may need to take out to start over, etc.
*hugs you* thanks!
not a bad idea, and since I can modify all colors and have my nifty color theme saved on my computer, I can easily reference everything I need. I may not get to this tonight, but heck yeah, I'm up for it! :clap
Just tell me where to start and what code I may need to take out to start over, etc.
*hugs you* thanks!
ok, if you don't have it already, you'll need to get mozilla firefox (http://www.mozilla.com) and the web developer extension. (http://chrispederick.com/work/webdeveloper/) They have been referenced uncountable times in this forum..pretty sure you're good with this so we'll move on.
go to control panel and where it says "all pages theme", select "sand"
now visit one of your galleries and go into web devloper and edit css. one of the tabs should say theme_2.css (that's the sand theme). Select that tab and hit the save button (it's next to the scissors). Remember where you save it.
now go to your control panel > themes
under where it says "add new theme", enter a name for your theme (can be anything you want) and select "black" for the base color. Dont save or close this window yet, we'll come back to it.
now open up the file we saved earlier into wordpad. We are going to do a bunch of find and replaces so i'll try and explain what's what.
the first thing you run into is the body {...} code. this is the main page background and fonts. replace what's there with:
body {
background-color: #171717;
font-family: comic sans;
font-size: 10pt;
padding: 0px;
}
Now find the comment that says /*== Logo and Graphics ==*/ and delete everything from there to the line that says /*== Box ==*/
Next we'll get rid of all the background images and colors inside the boxes. Do a find on
background-image: url(http://themes.smugmug.com/photos/39973731-O.png); and replace it with nothing (this will delete it in a bulk kinda way).
Do the same thing for :
background-image: url(http://themes.smugmug.com/photos/39973727-O.png);
_background-image: url(http://themes.smugmug.com/photos/39973730-O.gif);
_background-image: url(http://themes.smugmug.com/photos/39973729-O.gif);
background-color: #E4E7D9;
background-color: #E7E5D5;
Borders are next so change all instances of 10px solid #F7F7F7 to 5px solid #635A63 (that's your purple border).
last thing is to change the green text (this may take some work on your part to get them all). replace all instances of color: #696F4C; with color: #CCCCCC;
Now copy all of that code from wordpad and paste it into the css block on your theme page and click the "add theme" button.
now go back into your control panel and where it says "all pages theme", select your new theme. if you need to update your theme, click on the "themes" link in your control panel and select your theme from the dropdown box under "edit theme". this is where you should make all your future changes
that should get you 90% there, the theme is commented pretty well so you should be able to find your way around. If you get stuck with something, just post here or shoot me a PM and we'll get you taken care of.
Good luck!
digital faerie
Jan-10-2006, 03:13 AM
should I delete all the previous css I had in there from Customizing for Dummies - Chapter 5? :scratch Seems like I should, but thought I would check.
what about any other CSS styling I had in there before chapter 5? Keep or delete? Seems like some things would conflict.
Have I mentioned you rock yet? :super
Andy
Jan-10-2006, 03:17 AM
should I delete all the previous css I had in there from Customizing for Dummies - Chapter 5? :scratch Seems like I should, but thought I would check.
what about any other CSS styling I had in there before chapter 5? Keep or delete? Seems like some things would conflict.
Have I mentioned you rock yet? :super
You can always delete, and put back. Make a copy of it by copying/pasting to a text doc first :)
Andy
should I delete all the previous css I had in there from Customizing for Dummies - Chapter 5? :scratch Seems like I should, but thought I would check.
what about any other CSS styling I had in there before chapter 5? Keep or delete? Seems like some things would conflict.
Have I mentioned you rock yet? :super
yeah, some things will conflict, some things will be duplicated and some things will be ignored. You're doing a great job with understanding the CSS code so i'll issue the challenge:
the theme already has everything you need to style your site. You just need to find it and change it. The theme is sectioned and commented logically and the class and ID names are very descriptive...use those as your guide.
Go ahead and take out all of your non-theme css and save it to a text file so you can refer to it later.
Now check out your site and figure out what parts of your old CSS need to go into the theme CSS. I promise you it's much less than you think, you'll not even use most of your old CSS.
And a tip to get you started: None of your gallery specific code (gallery_XXXXXX) should go in your theme, that should all go back into your regular CSS so if you should change themes down the line it will still be there.
Get the hang of this and you'll be out creating themes in no time..
I'll be around if you get stuck.
digital faerie
Jan-10-2006, 04:15 AM
sweet. thanks!
"creating themes" . . . :uhoh yah, right!
vBulletin® v3.8.5, Copyright ©2000-2012, Jelsoft Enterprises Ltd.