• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support SmugMug Customization Small Top Border Issue & Request for NavBar suggestion...

FAQtoid

Ever wanted to create an Avatar? Creating an Avatar!

Searching Dgrin with Google Searching with Google

Dgrin Challenges

Congratulations to the Winner of DSS #128 (Sunrise or Sunset), ShootingStar.

The next Dgrin Challenge DSS #129 (Silhouette Revisited ) is open for entries through May 27th, 2013 at 8:00pm PDT.

As always, we look forward to your participation but please do take a moment to read through the rules before posting your entry.

Past DSS Challenge Winners, DSS Challenge Rules, and other important DSS Challenge information is here.

Need some help with Accessories?

Tutorials

Ever find yourself wondering just how someone managed to create an image using different effects?

Here are three simple tutorials we hope will encourage you to try something new.

The Hot Seat

A lifelong interest in landscape photography has led Eyal Oren to make a study of his adopted hometown of Marblehead, MA. As you can see, his dedication is paying off!

Africa!

Dgrinners Harryb, Pathfinder, and others joined Andy Williams and Marc Muench on Safari in East Africa recently. Here are some awesome threads to check out!

 
Thread Tools Display Modes
Old Mar-14-2009, 05:41 PM
#1
CharlesSA is offline CharlesSA OP
Big grins
Huh Small Top Border Issue & Request for NavBar suggestion...
Hi all

I am trying to refine my smugmug site and have today decided to change from the Sand theme to the White theme. After doing that, I noticed that the border along the top does not complete as one would expect. On the Sand theme it worked fine?? Please have a look in my homepage HERE to see what I mean. I have gone through my CSS code and cannot find anything that could be causing this?

My 2nd question is regarding the Navbar. At the moment my one is very basic and plain looking. What suggestions and corresponding code can you recommend I apply to it to make it look more professional and refined?

Lastly, and only if you have time, could you plz scan through my code which appears under Site Custom Configuration to determine if everything there is in fact correct and put together correctly? What I mean is, I don't want code there that is not doing anything and that is just slowing down the loading time. If any code has updated to be more streamlined, kindly let me know so that I can update it accordingly. (Just note that my ability in this is copy and paste).

I look forward to your assistance. As always, it is a pleasure dealing with all you helpful folks.

_______________
Charles
South Africa
Old Mar-15-2009, 06:44 AM
#2
Allen is online now Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by CharlesSA
Hi all

I am trying to refine my smugmug site and have today decided to change from the Sand theme to the White theme. After doing that, I noticed that the border along the top does not complete as one would expect. On the Sand theme it worked fine?? Please have a look in my homepage HERE to see what I mean. I have gone through my CSS code and cannot find anything that could be causing this?

My 2nd question is regarding the Navbar. At the moment my one is very basic and plain looking. What suggestions and corresponding code can you recommend I apply to it to make it look more professional and refined?

Lastly, and only if you have time, could you plz scan through my code which appears under Site Custom Configuration to determine if everything there is in fact correct and put together correctly? What I mean is, I don't want code there that is not doing anything and that is just slowing down the loading time. If any code has updated to be more streamlined, kindly let me know so that I can update it accordingly. (Just note that my ability in this is copy and paste).

I look forward to your assistance. As always, it is a pleasure dealing with all you helpful folks.

_______________
Charles
South Africa
Change your whole header to this.
Code:
<div id="myHeader">
<div id="myHeaderTop"> </div>

<div id="my_banner"> </div>

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/6863492_DuC4Q">Service Options</a></li>
<li><a href="http://www.active-exposure.co.za/Portfolio">Portfolio</a></li>
<li><a href="/gallery/6863515_5Sptx">Contact</a></li>

</ul>
</div> <!-- closed navcontainer -->

</div> <!-- closed myHeader -->
Add this to the top of your CSS
Code:
#myHeader {background: url(http://cdn.smugmug.com/img/themes/White/small_center.jpg) transparent repeat-y;
 height:210px;
}
#myHeaderTop {background: url(http://cdn.smugmug.com/img/themes/White/small_header.jpg) transparent no-repeat;
 height:30px;
}

.smugmug #myHeaderTop,
.smugmug #myHeader {display:none;}
Check all you pages to see if it works on all. If you select a different style
for any gallery the CSS might need to be tweaked.
Old Mar-15-2009, 06:54 AM
#3
J Allen is offline J Allen
Major grins
J Allen's Avatar
Quote:
I am trying to refine my smugmug site and have today decided to change from the Sand theme to the White theme. After doing that, I noticed that the border along the top does not complete as one would expect. On the Sand theme it worked fine?? Please have a look in my homepage HERE to see what I mean. I have gone through my CSS code and cannot find anything that could be causing this?

Add this to the BOTTOM of your custom header box:



Code:
<div id="myPageTop"></div>
Then add this to your CSS:

Code:
#myPageTop 
{width:950px;
height:30px;
margin:0 auto;
background:transparent
url(http://cdn.smugmug.com/img/themes/White/small_header.jpg) no-repeat scroll 0 0;}

#myPageTop 
{display:none}

.homepage #myPageTop 
{display:block}



Quote:
My 2nd question is regarding the Navbar. At the moment my one is very basic and plain looking. What suggestions and corresponding code can you recommend I apply to it to make it look more professional and refined?
Add/change the red in this rule....theres lots of things you can do with your nav-bar, you can even make your own images in PS and use those:


#navcontainer ul li a {
text-decoration: none;
padding: .2em 4.2em;
color: #FFFFFF;
background-color: #000000;
border: 3px ridge red;
font-size: 108%;
font-weight: bold;

}



Quote:
Lastly, and only if you have time, could you plz scan through my code which appears under Site Custom Configuration to determine if everything there is in fact correct and put together correctly? What I mean is, I don't want code there that is not doing anything and that is just slowing down the loading time. If any code has updated to be more streamlined, kindly let me know so that I can update it accordingly. (Just note that my ability in this is copy and paste).
I think everything looks good in your code..
__________________
-Joe Allen
My Smugmug Site
Old Mar-15-2009, 11:46 AM
#4
CharlesSA is offline CharlesSA OP
Big grins
Thank you so much Al and Joe. Your help is tremendously & sincerely appreciated.

I have applied the code to achieve the required results. The only place where the border is still a problem is for my "unlisted" galleries where I embed a Virtual Tour viewer. An example can be viewed here. For these type of galleries I do not use my header/logo as I just want the embedded viewer displayed. Where and what code can I insert to customize these type of galleries as I create them?

Thanks again gentlemen.
Old Mar-15-2009, 02:24 PM
#5
Allen is online now Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by CharlesSA
Thank you so much Al and Joe. Your help is tremendously & sincerely appreciated.

I have applied the code to achieve the required results. The only place where the border is still a problem is for my "unlisted" galleries where I embed a Virtual Tour viewer. An example can be viewed here. For these type of galleries I do not use my header/logo as I just want the embedded viewer displayed. Where and what code can I insert to customize these type of galleries as I create them?

Thanks again gentlemen.
Tack on the bold lines for that gallery. Removes frame completely from that page.
Code:
.gallery_7406030 #breadcrumb,
.gallery_7406030 #myHeader,
.gallery_7406030 #myHeaderTop,
.smugmug #myHeaderTop,
.smugmug #myHeader {display:none;}

.gallery_7406030 #footer,
.gallery_7406030 #bodyWrapper,
.gallery_7406030 #journal
     {background: none !important;}
Old Mar-16-2009, 12:12 AM
#6
CharlesSA is offline CharlesSA OP
Big grins
Quote:
Originally Posted by Allen
Tack on the bold lines for that gallery. Removes frame completely from that page.
Code:
.gallery_7406030 #breadcrumb,
.gallery_7406030 #myHeader,
.gallery_7406030 #myHeaderTop,
.smugmug #myHeaderTop,
.smugmug #myHeader {display:none;}

.gallery_7406030 #footer,
.gallery_7406030 #bodyWrapper,
.gallery_7406030 #journal
     {background: none !important;}

Thanks Al... that did it perfectly! I am sure I say this on behalf of hundreds of others.... THANK YOU so much. Without help like yours we would be completely lost
Tell The World!  

Thread Tools
Display Modes

Posting Rules  
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump