Misc. Updates

[travischance]

There are a few minor changes I'd like to make to my site & I have not been able to find the threads or answers in the SM FAQ. Thanks!!!

1 - CHANGE TEXT COLOR in my FOOTER (all pages):
I added both #footer {color: 6699cc;} & .footer {color: 6699cc;} to the CSS and both were unsuccessful. I’ve searched on both http://www.smugmug.com/help/custom-colors (http://www.smugmug.com/help/custom-colors) & http://www.smugmug.com/help/customize-faq (http://www.smugmug.com/help/customize-faq) (#15)

2 - FORCE SINGLE TEXT TO BOLD, LARGER FONT & DIFFERENT COLOR
Welcome! I’m Travis M. Chance…… (color #6699cc)

3 - ADD COLOR TO SPECIFIC TEXT IN GUESBOOK
Canon 16-35mm f/2.8L USM (color #930707)
Canon EF 24-105mm f/4L IS USM
Canon EF 100-400mm f/4.5L IS USM
***Is it possible to set Hyperlinks to this text but keep the color?

4 - FORCE THE HEADERS in THE EQUIPMENT SECTION of GUESTBOOK TO BOLD
BODIES, LENSES, FILTERS….all bold


5 - REMOVE THE DEAD SPACE between the last line of my equipment and first line of the comments

http://www.travischancephotography.com/photos/688186416_ckvYp-L.jpg

http://www.travischancephotography.com/photos/688186400_tCpUy-L.jpg

[polysubstrate]

Hi Travis,

I'll try to help with some of these. I'll start with number 5 and the following changes.

In CSS:

Find the following code and change 3rd from left padding value 40px to 0px (it's a clockwise CSS shortcut as if you were looking at a 2 dimensional box. First padding value is top padding [top of the box], second is right, third is bottom, fourth is left.)

.gallery_7572699 #albumDescription {
margin-top: 1px; /* gap from navbar at top */
background: #FFFFFF; /* background of description box */
padding: 20px 40px 40px 40px;
width: 850px;
margin-right: auto;
margin-left: auto;

Add the following code to CSS:

.gallery_7572699 .journal_entry {
display:none;
}

.gallery_7572699 #journal{
width: auto;
height: auto;
}

In your guestbook html description:

Remove any <br> html commands at the end of your software list in your description (i.e., any that appear after the last line of text: Adobe Photoshop CS4). If after doing this the spacing becomes too crowded then go back to the CSS bottom padding number we changed to zero in the first step and adjust to suit (10px might be a good number to start with)

I'll look for other solutions and post if I can help.

Kevin

[polysubstrate]

In the footer you have your name and copyright but I'm not sure where you added this info. Was it added automatically using the easy customizer or did you add it manually to the custom footer window in the Site-Wide Customization page? Most of your changes relate to HTML font colors or styles and I can see the album description text easy enough, but not sure about that footer text.

The way it's coded where I can see it is like this:
<center>© 2009 Travis M. Chance | All rights reserved.</center>

If you can find it let me know where you can access is from. I'm assuming it's in the site wide custom page.

Thanks

[polysubstrate]

For editing the text color and style of specific letters you are better off using html to do these changes. To the best of my knowledge the CSS is good if you want to affect large changes to all your text in the same way, or smaller groupings of text site-wide. The headings you mentioned can be done in both css or html, but since it's isolated to one page and only to specific letters it's probably better to use the html. Your footer on the other hand is on all pages so we will use CSS to change that once we know where it's hiding.

We'll start with the text in your guestbook description.

The L in your lens list that is red would be handled like this:

Canon EF 100-400mm f/4.5<font color="#930707">L</font> IS USM

For each L lens you will want to add this line:
<font color="#930707">L</font>

For your first letter in the description you can add some additional commands to the same code:

<font size="5" color="#6699cc"><b>W</b></font>elcome! I’m Travis M. Chance, ...

That will increase/decrease (depending on value) the font size, change the color, and embolden the text.

Adding just the <b>title text</b> will embolden the font of your titles:

<b>BODIES</b>

Give it a try. Make a copy of all the text in that description before making changes and save it in a file on your computer so you can recover it if needed. I find it easiest to paste the text in a text editing program such as notepad or wordpad on a pc, not sure about a mac.

[travischance]

<center>© 2009 Travis M. Chance | All rights reserved.</center>

The footer above is posted in the Footer section. I used the Advanced Site Wide customization for everything on the site...The changes so far look great (you're the man!). I'm sure it's pretty simple, but the spacing is off after the "Welcome" line in my bio.

[polysubstrate]

<center>© 2009 Travis M. Chance | All rights reserved.</center>

The footer above is posted in the Footer section. I used the Advanced Site Wide customization for everything on the site...

Thanks,

I think the way to configure it so that you can customize it with CSS is to give it a name, such as my_footer in html like this:

<div id="my_footer">© 2009 Travis M. Chance | All rights reserved.</div>

Then in CSS you can define it like this:

my_footer {
color:#6699cc;
margin-left: auto;
margin-right: auto;
}

those two entries should apply the change to your entire site

I'm not sure if you can edit the style of the smugmug footer which resides below your custom footer. I believe all or part of it is restricted, at least from hiding it, but perhaps the style too.

[polysubstrate]

If everything goes bold you missed closing a tag in the html

For every <b> you have there needs to be a </b> after it to tell the web browser that the bold ends. I think you may have typed it as <b>L<b> and should be <b>L</b>



The description centers up nicely now and the W looks great. The spacing at the bottom looks good but to my eye the breaks between paragraphs may be too wide. If you want to adjust that you just need to remove a <br> or two in or after the paragraphs in your description to suit.

[travischance]

Kevin:

How does the spacing after the "W" look? On my monitor, it appears that the subtext doesn't wrap around the larger font.

[polysubstrate]

Kevin:

How does the spacing after the "W" look? On my monitor, it appears that the subtext doesn't wrap around the larger font.

Included a screenshot.

the elcome! is out a bit which is forced due to the square character shape inherent to Vs and Ws that angle out like that. It's not too distracting. Off hand I can't think of an easy way to adjust it unless you reduce the size of the W.

[polysubstrate]

You mentioned justifying the text, I'm not sure if this is what you were seeking, but at least with FF it doesn't behave badly. The code is:

text-align: justify;

You can add it to this code in your CSS and see if it's what you were looking for.

.gallery_7572699 #albumDescription {
margin-top: 1px; /* gap from navbar at top */
background: #FFFFFF; /* background of description box */
padding: 20px 40px 0px 40px;
width: 850px;
margin-right: auto;
margin-left: auto;
/* top right bottom left */
/* spacing inside box from edges */
}

The effect is like a newspaper column where it lines up on both sides and adjusts the text spacing between to fit, and only to text that spans the distance between the two sides.