Frequently Requested Simple Modifications / Tweaks

leftquark

leftquark wrote: »

You're gunna love me! I should start charging an hourly rate

Place a breadcrumb content block below your top breadcrumb and navbar and use this:

/* Hide the 2nd breadcrumb bar completely */
.sm-page-layout-region .sm-page-layout-region-center .sm-page-layout-row:nth-of-type(2) .sm-breadcrumb-item {
  display:none !important;
}

/* Turn back on the current gallery name */
.sm-page-layout-region-center .sm-page-layout-row:nth-of-type(2) .sm-page-widget-body li:last-child {
  display: inline !important;
}

Notice in the code how I used nth-of-type(2)? That means "the 2nd time .sm-page-layout-row is called, do the following". On my test page I added a breadcrumb and this new breadcrumb was the 2nd instance of .sm-page-layout-row in the ".sm-page-layout-region-center" division. On yours, with a menu-bar in between, it might become the 3rd instance. So you may have to change the nth-of-type(2) to 3. It's easy to see in your code.

Let me know if that doesn't work.

For me, it just showed the gallery name.

ChancyRat,
Turns out that your breadcrumb was in the first instance of ".sm-page-layout-row". CHanging the nth-of-type(2) to a "1" fixed it!

Try this:

/* Hide the 2nd breadcrumb bar completely */
.sm-page-layout-region .sm-page-layout-region-center .sm-page-layout-row:nth-of-type(1) .sm-breadcrumb-item {
  display:none !important;
}

/* Turn back on the current gallery name */
.sm-page-layout-region-center .sm-page-layout-row:nth-of-type(1) .sm-page-widget-body li:last-child {
  display: inline !important;
}

mgitelis

leftquark wrote: »

So if I understand your questions:
1) You want to set the Active Page to be a different color in your navbar
2) You want the link transitions to work when the mouse is hovered over the images

Is this correct?

The code should work but there's a couple things to note and let me know:
How did you create the links in your MENU content block (navbar) ... There are options when you created the links for "Custom URL" or "Page I Choose" (there are other options). If you chose "Custom URL" the Active Page will not work. If you chose "Page I choose" my code work. What did you select?

Are you sure the links don't fade in/out when you put your mouse over them. It should be very subtle as 0.2 seconds is very short.

Hi Aaron,

I changed all the links in my navbar to "page i choose" and now the active page is colored by a diffrent color. thanks.

I would like the link in the navbar to change color when the mouse hover over it, like in your site. i changed the time from 0.2s to 0.4s and it still doesn't work. any ideas?

And one last thing, how did you changed the location of the social icons (facebook, twitter etc...)? they are much closer to your navbar than in my navbar.

thanks again

Moshi

leftquark

mgitelis wrote: »

Hi Aaron,

I changed all the links in my navbar to "page i choose" and now the active page is colored by a diffrent color. thanks.

Glad it worked!!!

mgitelis wrote: »

I would like the link in the navbar to change color when the mouse hover over it, like in your site. i changed the time from 0.2s to 0.4s and it still doesn't work. any ideas?

Try the following CSS code:

.menu a:hover {
  color: green;
  -webkit-transition: color 0.25s ease-in;
  -moz-transition: color 0.25s ease-in;
  transition: color 0.2s ease-in;
}

Change where ti says "color: green;" to whatever color you want.

I see you already have some code in there to control the links. To finish the fade-in/fade-out effect add the following to your code for the "menu a" and "menu a:visited"

.menu a, .menu a:visited {
   display: block;
   text-decoration: none;
   color: white;
   background: transparent;
   border: 1px solid black;
   border-width: 0px 1px 1px 1px;
   font-size: 14pt;
   font-family: arial;
   width: auto;
   height: 20px;
   line-height: 20px;
   padding: 0 8px;
   min-width: 60px;
[COLOR="Red"]   -webkit-transition: color 0.25s ease-in;
   -moz-transition: color 0.25s ease-in;
   transition: color 0.2s ease-in;[/COLOR]
}

On second thought, I don't think that code will work because I assumed your homepage was SmugMug ... it isn't. Can you send me a link to your SmugMug? I assume you haven't unveiled yet? Are you using a VERTICAL navbar or a HORIZONTAL navbar?

If you're using a vertical one, this should work:

.sm-page-widget-nav-toplink > a {
  color: #FFF;
  -webkit-transition: color 0.25s ease-in;
  -moz-transition: color 0.25s ease-in;
  transition: color 0.2s ease-in;
}

.sm-page-widget-nav-toplink > a:hover {
  color: green;
  -webkit-transition: color 0.25s ease-in;
  -moz-transition: color 0.25s ease-in;
  transition: color 0.2s ease-in;
}

mgitelis wrote: »

And one last thing, how did you changed the location of the social icons (facebook, twitter etc...)? they are much closer to your navbar than in my navbar.

It would help me give you code if you unveiled. Basically I had to reduce the margin-bottom on the navbar.

ko04

I vote for this to be a this thread to be one of the locked forms

Oscour

Hi,

Thanks for this work !

Is there a way to enlarge thumbs on over like it is in the Browse page of Smugmug.com ?

I tried to put this but images overlap each over :

li .sm-tile {
-moz-transition:-moz-transform 0.1s ease-in; 
-webkit-transition:-webkit-transform 0.1s ease-in; 
-o-transition:-o-transform 0.1s ease-in;
}
li .sm-tile:hover {
-moz-transform:scale(2); 
-webkit-transform:scale(2);
-o-transform:scale(2);
}

Thanks for your help !

leftquark

Oscour wrote: »

Is there a way to enlarge thumbs on over like it is in the Browse page of Smugmug.com ?

I tried to put this but images overlap each over :

I'm not sure what you're asking. Could you send me a link to an example page of how you want it? The smugmug.com/browse page is a legacy site, so I'm not sure what you mean...

You want the pictures to get larger when the mouse hovers over them? Did you mean like on the search results page? I've never seen photos change size on the browse page.

miseryshusband

Thanks
Aaron, I have been following along for about the last week. You are awsome. I have used alot of the code you have posted for other people.

How do I change for size and color of my captions. I have centered them, how do I make them a little bigger and bold. I know this is a simple css but it is eluding me right now.

leftquark

miseryshusband wrote: »

Aaron, I have been following along for about the last week. You are awsome. I have used alot of the code you have posted for other people.

How do I change for size and color of my captions. I have centered them, how do I make them a little bigger and bold. I know this is a simple css but it is eluding me right now.

.sm-page-layout-region .sm-page-layout-region-center .sm-tile-info {
  color: green !important;
  font-size: 18px;
}

You may be able to simplify it to just ".sm-tile-info {" in the first line but I'm not sure if that will effect the Lightbox too.

leftquark

2013-10-01 11:55am: Added Changing Font Color/Size of Caption

miseryshusband

leftquark wrote: »

.sm-page-layout-region .sm-page-layout-region-center .sm-tile-info {
  color: green !important;
  font-size: 18px;
}

You may be able to simplify it to just ".sm-tile-info {" in the first line but I'm not sure if that will effect the Lightbox too.

You are way too quick, found the code for the captions from the front. Overlooked it. added a font: bold 26px tahoma; line to you lightbox centering code and all is perfect.

Again thanks for what you are doing on here. Have made my sons football boosterclub picture site 1000x better.

http://hickoryfootball.smugmug.com/

ChancyRat

Does this belong with the "fading links" code?
Does the "a" before the { belong as part of the code? I made it pink here.
I ask because the code is not working on my site, either with or without the a and I'm not sure how to fix it.

Fading Links: (when a user hovers over a link instead of it instantly going to the hover decoration, it will fade in and out to it)
Code:

a { -webkit-transition:color 0.2s ease-in; -moz-transition:color 0.2s ease-in; transition:color 0.2s ease-in; }

EDIT: The question is about fading in and out of the navbar links. I assume this code should work for the navbar?

More EDIT: Maybe this code is about the bubble text that pops up, that replicates the title of the link? If that's the case, then it's working with the a

leftquark

ChancyRat wrote: »

Does the "a" before the { belong as part of the code? I made it pink here.
I ask because the code is not working on my site, either with or without the a and I'm not sure how to fix it.



EDIT: The question is about fading in and out of the navbar links. I assume this code should work for the navbar?

More EDIT: Maybe this code is about the bubble text that pops up, that replicates the title of the link? If that's the case, then it's working with the a

The "a" is necessary and it tells the code what HTML attribute is getting the transition settings. In this case, we're applying a transition to all links (links in HTML are defined with an <A ... like <A HREF="blah.com">Click me</A>.

Your navbar elements, although they have links in them, they aren't specifically links. They're actually list items that have CSS to make them appear as ovals, rectangles, etc. The only part of the navbar item that is a link is the text.

As you mentioned, the transition is working properly. When you put your mouse over the text for a link, and it changes color, and it fades in/out, it's working.

If you want other elements to fade you have to specify which specific element you want to do that. You'd do that by writing some similar code:

.whatever_the_navbar_div_class_name {
  -webkit-transition:all 0.2s ease-in; 
  -moz-transition:all 0.2s ease-in; 
  transition:all 0.2s ease-in;
}

Try this for your navbar. This will make each sub-menu fade-in/out as the mouse moves over them:

/* Make each sub-menu item fade in/out as the mouse moves over it */
.yui3-menu-label {
  -webkit-transition:all 0.2s ease-in;
  -moz-transition:all 0.2s ease-in;
  transition:all 0.2s ease-in;
}

/* Make the entire menu fade-in when the mouse first goes over it */
.yui3-menu-children {
  -webkit-transition:all 0.2s ease-in;
  -moz-transition:all 0.2s ease-in;
  transition:all 0.2s ease-in;
}

ChancyRat

/* Make each sub-menu item fade in/out as the mouse moves over it */ .yui3-menu-label { -webkit-transition:all 0.2s ease-in; -moz-transition:all 0.2s ease-in; transition:all 0.2s ease-in; } /* Make the entire menu fade-in when the mouse first goes over it */ .yui3-menu-children { -webkit-transition:all 0.2s ease-in; -moz-transition:all 0.2s ease-in; transition:all 0.2s ease-in; }

Thanks, I tried these and they worked! However I opted to not use the 'entire menu'
section because it caused a loud BLINK before the sub-menu items appeared. The blink
was more noticeable when there were many sub-menu items. The section for the submenu works great
though.

Now if I could get the transparency thing worked out from this thread
http://www.dgrin.com/showthread.php?t=241269
I might be all set. Maybe.

Thank you your help has been invaluable.

Oscour

leftquark wrote: »

I'm not sure what you're asking. Could you send me a link to an example page of how you want it? The smugmug.com/browse page is a legacy site, so I'm not sure what you mean...

You want the pictures to get larger when the mouse hovers over them? Did you mean like on the search results page? I've never seen photos change size on the browse page.

You're right, like it 's on the search results page.
Like this one for example : http://www.smugmug.com/search/index.mg?searchWords=mauritius&searchType=global#c=galleries&i=378&q=portrait

Do you think it's possible in the new Smugmug ?
Thanks

leftquark

Oscour wrote: »

You're right, like it 's on the search results page.
Like this one for example : http://www.smugmug.com/search/index.mg?searchWords=mauritius&searchType=global#c=galleries&i=378&q=portrait

Do you think it's possible in the new Smugmug ?
Thanks

There should be a way to do it but I'm not sure what the CSS is. SmugMug doesn't make it possible ... yet. I know a number of people have requested this over in the Feature Requests forum.

Oscour

Ok thanks !

krashedmykarch

trying to delete hover css
Hi Aaron, I have two issues I'm seeking to solve. On my homepage and on all opened galleries my navs are black and static which is what I want. If you click on 'galleries' the breadcrumb and the navs are a lighter gray color and when hovered, disappear (or are colored white which is my background color) I don't want any hover affect at all but I cannot find in any css or theme where I added the hover info. That page: http://www.charlesdalyphotography.com/Photography

The second is more annoying: When I'm in customize, the page that is opened is homepage. I can then select entire site, all folders, all galleries to do whatever tweaks but I cannot get access to my about or my prints page which I set up as 'pages' and not as galleries. I was able to create those pages but can't workaround to open them in customize. I have gone to preview, opened 'about'/customize and still the home page opens with no access to the pages that I can see.
The about page: http://www.charlesdalyphotography.com/About

Hope this is clear and thanks yet again for all your help

ChancyRat

I can answer this one:

The second is more annoying: When I'm in customize, the page that is opened is homepage. I can then select entire site, all folders, all galleries to do whatever tweaks but I cannot get access to my about or my prints page which I set up as 'pages' and not as galleries. I was able to create those pages but can't workaround to open them in customize. I have gone to preview, opened 'about'/customize and still the home page opens with no access to the pages that I can see.
The about page: http://www.charlesdalyphotography.com/About

Publish your site, whatever state it is in for the moment. Publish is still private to you, it's not the same as "unveil" which is the final cliff to drop off of.
Now navigate to the page you want to customize. Then enter site customization. I think you will find "customize this page only" is highlighted. From there make your edits.

krashedmykarch

ChancyRat wrote: »

I can answer this one:



Publish your site, whatever state it is in for the moment. Publish is still private to you, it's not the same as "unveil" which is the final cliff to drop off of.
Now navigate to the page you want to customize. Then enter site customization. I think you will find "customize this page only" is highlighted. From there make your edits.

Thanks ChancyRat. I have already unveiled. Your suggestion works but only if I go to my about page without being logged in. If I log in from my about page, then customize, I am able to work on that page. But once logged in I cannot access the 'about' page even if I try to do it from the preview state. So far it always opens on the homepage with access to other galleries from the right side customize menu. The 'just this page' option is not listed in the right side panel.

leftquark

krashedmykarch wrote: »

Thanks ChancyRat. I have already unveiled. Your suggestion works but only if I go to my about page without being logged in. If I log in from my about page, then customize, I am able to work on that page. But once logged in I cannot access the 'about' page even if I try to do it from the preview state. So far it always opens on the homepage with access to other galleries from the right side customize menu. The 'just this page' option is not listed in the right side panel.

Hi Charles,
What ChancyRat describes is quite accurate. I think the problem that you're having is that you're using the "Preview" link. I AVOID THAT LIKE THE PLAGUE! It's so painful to use, for the exact reason you describe, that I really don't use it. When you click "Preview" it always takes you to the homepage. When you are done and you click "Customize" it also always takes you to Customize the Homepage view. It should take you to the page 1) that you were on when you clicked preview, and 2) that you were on when you clicked customize. I'm going to submit a Bug Report on this becaues it drives me nuts too!

So here's what I do. And it's basically what Chancy described but maybe in other words:
1. Be Logged in.
2. Go to your About page (http://www.charlesdalyphotography.com/About)
3. Click Customize -> Customize Site
You should be taken to your About page. As Chancy mentioned, it should show up on the right side as "Just This Page" ... not your "Entire Site", "Homepage", "All Folders", etc.

One other really easy way to get to customize any page you want is to just add "#customize" to the end of the URL. For example, your About Page (http://www.charlesdalyphotography.com/About) would become: http://www.charlesdalyphotography.com/About#customize. That will take you right to it.

Again, don't click "Preview" or you'll be taken to your homepage.

krashedmykarch wrote:

On my homepage and on all opened galleries my navs are black and static which is what I want. If you click on 'galleries' the breadcrumb and the navs are a lighter gray color and when hovered, disappear (or are colored white which is my background color) I don't want any hover affect at all but I cannot find in any css or theme where I added the hover info

You'll need to add the following CSS to make the hover color match your link color:

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:hover {
   color: #8F919C !important;
}

Although, personally, I think hover colors work really well. I experimented on your site using a black hover color (#000000) and it looks really nice. I'd suggest changing the "#8F919C" above to "#000000".

ChancyRat

krashedmykarch wrote: »

Thanks ChancyRat. I have already unveiled. Your suggestion works but only if I go to my about page without being logged in. If I log in from my about page, then customize, I am able to work on that page. But once logged in I cannot access the 'about' page even if I try to do it from the preview state. So far it always opens on the homepage with access to other galleries from the right side customize menu. The 'just this page' option is not listed in the right side panel.

Sorry, I haven't unveiled yet so I don't know what options one has for modifying the site. I assume you are still able to change anything you want? Similar to the options we have during the private publish phase?

krashedmykarch

Chancy and Aaron, thanks for responding so quickly. I was able to access that page once I logged in as you both suggested. Is that the only way to achieve that? I don't remember having to do that each time I worked on that page. re: the navs hover on my gallery page, I found that my theme color code for text was off a bit. It's now changed to the same (#000000) as the rest of my site navs and the hover problem is gone. Chancy, as confusing as this new sm was (and is) for me one of the more annoying things for me is that there are often several different ways to add/change or delete an element/item/whatever. I'm finding things that I added (cut and pasted from others suggestions) in one area (entire site for example) and a month later changed that 'thing' in my theme caused problems. Once one has their doctorate in CSS there should be less problems.
Thanks!

rht

leftquark wrote: »

Hi Charles,
What ChancyRat describes is quite accurate. I think the problem that you're having is that you're using the "Preview" link. I AVOID THAT LIKE THE PLAGUE! It's so painful to use, for the exact reason you describe, that I really don't use it. When you click "Preview" it always takes you to the homepage. When you are done and you click "Customize" it also always takes you to Customize the Homepage view. It should take you to the page 1) that you were on when you clicked preview, and 2) that you were on when you clicked customize. I'm going to submit a Bug Report on this becaues it drives me nuts too!

Thanks for that suggestion, the preview mode is painful!

It never goes back to the correct page. I resorted to having two pages open in the same browser to get around this.

One thing that annoys me is that to see my CSS changes, I often have to go into the preview mode. I wish it would take effect in the customise mode immediately. Time consuming - especially since I'm working on styling the navigation at the moment (top nav and the second tier left navigation).

ChancyRat

rht wrote: »

Thanks for that suggestion, the preview mode is painful!

It never goes back to the correct page. I resorted to having two pages open in the same browser to get around this.

One thing that annoys me is that to see my CSS changes, I often have to go into the preview mode. I wish it would take effect in the customise mode immediately. Time consuming - especially since I'm working on styling the navigation at the moment (top nav and the second tier left navigation).

I have never used preview mode so now I know I never will. Instead I "publish". Yes, it takes a couple of clicks and the screen blinks a couple of times, but that's the way I see the CSS changes. Then re-edit site to go back into edit. Publish is publish to you only, not to the public. "Unveil" is the public cliff to fall off.

leftquark

ChancyRat wrote: »

I have never used preview mode so now I know I never will. Instead I "publish". Yes, it takes a couple of clicks and the screen blinks a couple of times, but that's the way I see the CSS changes. Then re-edit site to go back into edit. Publish is publish to you only, not to the public. "Unveil" is the public cliff to fall off.

Chancy,
The problem is that once you have unveiled, you don't necessarily want to publish bad code that a viewer could potentially see while you're in the process of updating the site.

pileofprints

Force Captions to Have Line-Breaks ??
Force Captions to Have Line-Breaks ????

I apologize if what this does is explained somewhere in this thread, but I couldn't find it. it isn't explained enough for me in the first post with all the great hacks outlined.

I think it is necessary to have line breaks for long captions for photos presented in landscape view. The lines string out too long for the eye to follow. I have been using in html brackets "br" to achieve this. The supplied code strips out the "br" as it should if it is going to break the text on its own. However, it doesn't seem to create line breaks for me. The caption text just stretches the length of the landscape photo.

What am I missing?

leftquark

pileofprints wrote: »

Force Captions to Have Line-Breaks ????

I apologize if what this does is explained somewhere in this thread, but I couldn't find it. it isn't explained enough for me in the first post with all the great hacks outlined.

I think it is necessary to have line breaks for long captions for photos presented in landscape view. The lines string out too long for the eye to follow. I have been using in html brackets "br" to achieve this. The supplied code strips out the "br" as it should if it is going to break the text on its own. However, it doesn't seem to create line breaks for me. The caption text just stretches the length of the landscape photo.

What am I missing?

It's possible you're using a different gallery layout that has some slightly different code. Do you have an example page you can show me / send me a link? What gallery view are you using? SmugMug layout? Journal?

pileofprints

leftquark wrote: »

It's possible you're using a different gallery layout that has some slightly different code. Do you have an example page you can show me / send me a link? What gallery view are you using? SmugMug layout? Journal?

I am using Journal style for all my galleries. I think I really don't understand what this hack is supposed to do, and I just assumed it would do what I want it to do. What is it supposed to do?

http://www.pileofprints.com/PhotoEssays/Team-Cascadia

If you go this link for the first caption I painstakingly add "br" tags (in <>) to create line breaks so that the column size for the captions for landscape photos more or less matched those for portrait photos. However, if you scroll down you will see landscape photos for which I haven't done this, and the captions stretch across the width of the landscape photo. These lines are more difficult for the eye to read.

leftquark

pileofprints wrote: »

I am using Journal style for all my galleries. I think I really don't understand what this hack is supposed to do, and I just assumed it would do what I want it to do. What is it supposed to do?

http://www.pileofprints.com/PhotoEssays/Team-Cascadia

If you go this link for the first caption I painstakingly add "br" tags (in <>) to create line breaks so that the column size for the captions for landscape photos more or less matched those for portrait photos. However, if you scroll down you will see landscape photos for which I haven't done this, and the captions stretch across the width of the landscape photo. These lines are more difficult for the eye to read.

Legacy SmugMug could handle a mix of HTML and non-HTML. If you had line-breaks (hit enter on your keyboard) it would automatically add <BR>'s for you. The New SM detects HTML and assumes you've entered the HTML. If you didn't add <BR>'s, it won't add breaks for you, even if you hit a gazillion "Enter" (return) keys.

So:

The quick brown fox jumped over <a href="#">the fence</a>.

And ate a cow.

Would look like:

The quick brown fox jumped over [U][COLOR="Blue"]the fence[/COLOR][/U]. And ate a cow.

Instead of:

The quick brown fox jumped over [U][COLOR="Blue"]the fence[/COLOR][/U]. 

And ate a cow.

The code to force line-breaks makes the breaks come back, without having to put <BR>'s all over.

The code I provided doesn't work for journal view. Use the following for journal layout:

/* Force linebreaks to have a break */
.sm-gallery-images .sm-tile-info, .sm-lightbox-caption {
  white-space: pre-wrap;
}

/* Disable all BR tags */
.sm-gallery-images .sm-tile-info br, .sm-lightbox-caption br {
  display: none;
}

pileofprints

leftquark wrote: »

Legacy SmugMug could handle a mix of HTML and non-HTML. If you had line-breaks (hit enter on your keyboard) it would automatically add <BR>'s for you. The New SM detects HTML and assumes you've entered the HTML. If you didn't add <BR>'s, it won't add breaks for you, even if you hit a gazillion "Enter" (return) keys.

Thanks so much for that new code and the explanation. It is working as I expected now.