Switching from LiveBooks Flash to Smugmug HTML site

cucaracha

Hi,

I have managed to transfer my LiveBooks Flash design to a Smugmug compatible version. For the most part, I am happy but I would like a few more changes. Here is my request list:

1. Shorten the distance between the top and bottom text in the menu content block.
2. Change the text of “Work” and “Info” to a lesser of a bold font.
3. Space the text “Info” a little further from the right of the text “infrared + product”.
4. Create graphic lines underneath and on the sides of the text gallery names like on my LiveBooks site.

Thanks, Alex

LiveBooks version: http://www.alexroachphoto.com
New Smugmug site: https://alexanderroach.smugmug.com

Hikin' Mike

I took a look at your sites and I might suggest a different route. I was able to blend my SmugMug site to my WordPress pretty seamlessly. Give me some time and I'll see if I can come up with something "better".

cucaracha

Thanks Mike!

Hikin' Mike

I took a look at your SmugMug site on 'quirktools.com/screenfly/' to see what it's going to look like on different displays. Looks like you're going to have 3 'Hamburger Menus' because SmugMug can't replicate your old site. I'm suggesting "hand-coding" your menu so it will look similar to your old site, but you're not going to have the 'Hamburger Menu'.

If you want a single 'Hamburger Menu' you're going to have to re-design your menu.

This is what I came up with. Remove your old menu stuff and add a HTML/CSS block next to your Logo. Add this in the boxes:


HTML:
[html]
<div class="navigation">

<div class="work">

<span>Work</span>
<div class="multi-link">
<a href="https://alexanderroach.smugmug.com/Website-Content/Lifestyle&quot; class="single-link">Lifestyle</a>
<a href="https://alexanderroach.smugmug.com/Website-Content/Creative&quot; class="single-link">Creative</a>
<a href="https://alexanderroach.smugmug.com/Website-Content/Fashion&quot; class="single-link">Fashion</a>
</div>

<div class="multi-link">
<a href="https://alexanderroach.smugmug.com/Website-Content/Nightlife&quot; class="single-link">Nightlife</a>
<a href="https://alexanderroach.smugmug.com/Website-Content/Landscape--Architecture&quot; class="single-link">Landscape/Arch.</a>
<a href="https://alexanderroach.smugmug.com/Website-Content/Portraiture&quot; class="single-link">Portraiture</a>
</div>

<div class="multi-link">
<a href="https://alexanderroach.smugmug.com/Website-Content/Infrared&quot; class="single-link">Infared</a>
<a href="https://alexanderroach.smugmug.com/Website-Content/Product&quot; class="single-link">Product</a>
</div>

</div>

<div class="info">

<span>Info</span>
<div class="multi-link">
<a href="https://alexanderroach.smugmug.com/Website-Content/About/&quot; class="single-link">About</a>
<a href="https://alexanderroach.smugmug.com/Website-Content/Contact/&quot; class="single-link">Contact</a>
</div>

</div>

</div>
[/html]

CSS:

/**
* Navigation Stuff
************************************************/
.navigation {	
	text-align: right; 	
	}

.navigation span,
.navigation div{
  	display: inline-block;
	vertical-align: bottom;
	font-size: 14px;
	line-height: 1;
	}	

.work,
.info {
	border-bottom: 1px solid;
	}

	.info{
		margin-left: -4px;
		}

.multi-link {	
	border-left: 1px solid;
	margin: auto 20px auto 5px;
	}	

.single-link {
	clear: both;
  	float: left;
  	margin: 0 5px;	
	}
	
	/* Colors */
.navigation,
.work,
.info,
.multi-link {
	border-color: #dc9245;
	}	
	
.navigation a {
	color: #dc9245;
	}	
	
.navigation span{
	color: white;
	}	

cucaracha

Brillant, it works great!

Is it possible to increase the distance between just the column that has Infrared + Product from "INFO"? I tried changing some numbers through your CSS but had no luck. It looks like it all moves together in unison.

LiveBooks is calling me at 11am today to talk design, but I think I am going to cancel my service with them. I really like how SmugMug is integrated with Lightroom.

Cheers, A

denisegoldberg

cucaracha wrote: »

Brillant, it works great!

Is it possible to increase the distance between just the column that has Infrared + Product from "INFO"? I tried changing some numbers through your CSS but had no luck. It looks like it all moves together in unison.

Your header looks fine in a relatively large browser window but it doesn't work well when the browser window is sized smaller horizontally. I very rarely use full screen browser windows and the one I used when I entered your site showed the header overlapping the menu, and the menu spanning multiple lines with the info section below the work section and the work section spanning 2 lines of entries.

I'd also recommend looking at your site on a phone, or using http://quirktools.com/screenfly/ to simulate different size devices.

Are you aware that you can easily remove the smugmug header and change to the mini-footer? Click Customize... Content and Design, then click the settings button.

--- Denise

Hikin' Mike

cucaracha wrote: »

Brillant, it works great!

Is it possible to increase the distance between just the column that has Infrared + Product from "INFO"? I tried changing some numbers through your CSS but had no luck. It looks like it all moves together in unison.

LiveBooks is calling me at 11am today to talk design, but I think I am going to cancel my service with them. I really like how SmugMug is integrated with Lightroom.

Cheers, A

Add the padding here:

.info{
  margin-left:-4px;
  padding-left: 20px;
}

You're going to have to add some code and/or change your logo size to make smaller devices work.

cucaracha

Yes, thank you for the suggestion.
I have modified it accordingly.

Cheers, A

cucaracha

That worked.
Thanks again Mike.

Hikin' Mike

cucaracha wrote: »

Yes, thank you for the suggestion.
I have modified it accordingly.

Cheers, A

Using this to view websites with different screen sizes: http://quirktools.com/screenfly/#u=https%3A//alexanderroach.smugmug.com/&w=1024&h=600&s=1

cucaracha

Link to SmugMug Contact Form/ Window
Great tool.

Thanks again for all your help. I am very pleased with the outcome of the site. I am making the switch today from LiveBooks. I had one more question that I asked SmugMug support but they didn't have an answer. I am trying to link the "contact" text from the menu bar you created in HTML to the Smugmug contact window/ form. Normally this is done thru their Menu widget which has that link as a selection.

-A

Hikin' Mike

cucaracha wrote: »

Great tool.

Thanks again for all your help. I am very pleased with the outcome of the site. I am making the switch today from LiveBooks. I had one more question that I asked SmugMug support but they didn't have an answer. I am trying to link the "contact" text from the menu bar you created in HTML to the Smugmug contact window/ form. Normally this is done thru their Menu widget which has that link as a selection.

-A

The only way to use the SmugMug contact link is via the Menu. It doesn't work if you use a custom menu, like you're doing now. If you want a custom contact page, you'll have to use a WooFoo form.

cucaracha

Mike, I take it your site is SmugMug based? If so, how did you remove the SmugMug logo, photosharing, login and search field?

-A

denisegoldberg

cucaracha wrote: »

how did you remove the SmugMug logo, photosharing, login and search field?

• Customize...
• Content and Design
• Settings
• Set SmugMug header to off

--- Denise

Hikin' Mike

cucaracha wrote: »

Mike, I take it your site is SmugMug based?

-A

Only my 'Portfolio' and 'Smugmug Customizations' pages are SmugMug. Everything else, including the home page is WordPress.

cucaracha

Thanks.

cucaracha

About Page
Hi Mike,

I am trying to optimize my site specifically for mobile devices in the vertical position. SmugMug said it was already optimized but it's not. I gave Aaron Meyers' code a shot but had no luck: http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations

Quirktools is showing me the text on the title bar is collapsing onto itself with the current CSS.

I am also trying to make the height in the container window on my about page taller. The code that Smug gave me made the text completely visible w/o having to scroll which is great, but I want the window to fill the page a little more.

Here is what SmugMug said,

"I’ve added a css block to your about page and this code.

.sm-page-widget-profile-v2-description {
max-height: 100% !important;
}

The profile block does not accept large amounts of text. If you want to add more, I suggest replacing it with a single photo block
next to a text block or create a custom image with text on it and then use a single photo block.

Andy"

I tried what Andy suggested but the layout is limited: http://www.alexroachphoto.com/About2. I believe it would need coding as well to make the background picture a specific dimension, the text a particular color and font.

Cheers, A