It's under Settings -> Privacy -> "Content Settings" box -> scroll down to "Fullscreen" -> "Manage Exceptions" -> then you have to enter the website URL of the page you want to allow to go full screen.
For example: set "[*.]www.flickr.com" to "Allow"
Wow, was that hidden! Went there and it is already set to "allow" for my smugmug url and my custom url. Maybe I did that a long time ago There is one there for youtube, too.
So, now I ask a really dumb question. Where are the double arrows that we are talking about since I SHOULD be seeing them. Sorry for the basic question.
It's under Settings -> Privacy -> "Content Settings" box -> scroll down to "Fullscreen" -> "Manage Exceptions" -> then you have to enter the website URL of the page you want to allow to go full screen.
Anything with a Custom URL will not get the activepage class added to it and won't be able to be highlighted when you're on that page.
Weird, when I use Quote and Reply, it is sticking in an extra previous quote. Just started doing that a few posts ago. I just deleted them. I left this one there for you to see.
So, I'm out of luck with those non-working items. Although /date wouldn't be considered custom would it as it is straight from SM programming with the lowercase "d" which worked in the Search with the lowercase "s" in /search.
Weird, when I use Quote and Reply, it is sticking in an extra previous quote. Just started doing that a few posts ago. I just deleted them. I left this one there for you to see.
So, I'm out of luck with those non-working items. Although /date wouldn't be considered custom would it as it is straight from SM programming with the lowercase "d" which worked in the Search with the lowercase "s" in /search.
When you look at your menu content block, under the LINKS option ... you have a number of options for what kind of link it is:
Custom URL
Page I Choose
Search
Contact Form
Login / Logout
Homepage
etc
Anything that is a "Custom URL" will not show up as an active-page. It just doesn't get the active-page class designation. I Believe all the rest will. At least "Page I Choose" and "Homepage" do, from my own experiences.
For the fullscreen thing ... use Safari or Firefox to check. I think because Chrome is basically full-screen already, the option doesn't exist? I dunno.
When you look at your menu content block, under the LINKS option ... you have a number of options for what kind of link it is:
Custom URL
Page I Choose
Search
Contact Form
Login / Logout
Homepage
etc
Anything that is a "Custom URL" will not show up as an active-page. It just doesn't get the active-page class designation. I Believe all the rest will. At least "Page I Choose" and "Homepage" do, from my own experiences.
For the fullscreen thing ... use Safari or Firefox to check. I think because Chrome is basically full-screen already, the option doesn't exist? I dunno.
Cool beans! I get it now. Those non-working items did indeed use Custom Url. I was able to point everything except 3 that don't matter anyway to the proper place using Page I Choose. Voila! Works like a champ. Can't thank you enough for sticking with us as we plow through the changes. You are a Hero in my book.
I used this code on my site and love it in the gallery and folders... however I tried putting an image block on my homepage (which also has a slide show) and the code effects those thumbs too... but upon hover the image goes goofy.... looks like a test pattern... I put it back in but can't leave it forever as it looks bad... HELP
/* Make the folder images slightly transparent when the mouse hovers over it */
.sm-user-ui .sm-tiles .sm-tile-content:hover { opacity: 0.6; /* Have the transparency fade in */
-webkit-transition: all 0.15s ease-in;
-moz-transition: all 0.15s ease-in;
transition: all 0.15 ease-in; }
/* Fade out the transparency. This code can be removed if you do not want it to fade */
.sm-user-ui .sm-tiles .sm-tile-content {
-webkit-transition: all 0.15s ease-in;
-moz-transition: all 0.15s ease-in;
transition: all 0.15 ease-in; }
Regarding the suggestion that my inability to remove the breadcrumb at the gallery level - because it was basically redundant, because I already have the full breadcrumb "all site" at the top - it turns out the problem was that I shouldn't have added the breadcrumb to the gallery level in the first place. I needed to add just the title. So now it looks just right. It wasn't a bug to have the 2nd breadcrumb at the gallery level, that's what it was meant to do, show the path.
I was wrong again and don't know how to fix this now. I removed the breadcrumb from the gallery (page) level because it was showing one level up as well as the gallery level. I replaced it with a Title block. But that title is just what I type in as the name. This means "Title A" shows up as the title of every gallery on the site. What do i do to have the gallery title show up as the title, such that it dynamically changes correctly in each gallery? None of the blocks that I can see work to achieve this, I think. Thanks.
Edit: the correct way it should look is in mess. #192. Except I need to not use a text block and use something else (other than a breadcrumb, I think.)
I used this code on my site and love it in the gallery and folders... however I tried putting an image block on my homepage (which also has a slide show) and the code effects those thumbs too... but upon hover the image goes goofy.... looks like a test pattern... I put it back in but can't leave it forever as it looks bad... HELP
/* Make the folder images slightly transparent when the mouse hovers over it */
.sm-user-ui .sm-tiles .sm-tile-content:hover { opacity: 0.6; /* Have the transparency fade in */
-webkit-transition: all 0.15s ease-in;
-moz-transition: all 0.15s ease-in;
transition: all 0.15 ease-in; }
/* Fade out the transparency. This code can be removed if you do not want it to fade */
.sm-user-ui .sm-tiles .sm-tile-content {
-webkit-transition: all 0.15s ease-in;
-moz-transition: all 0.15s ease-in;
transition: all 0.15 ease-in; }
Try adding ".sm-gallery-content" after .sm-user-ui ... this should restrict the code to only effect the .sm-tiles and .sm-tile-content when it's part of the gallery and not part of an image-block.
/* Make the folder images slightly transparent when the mouse hovers over it */
.sm-user-ui .sm-gallery-content .sm-tiles .sm-tile-content:hover { opacity: 0.6; /* Have the transparency fade in */
-webkit-transition: all 0.15s ease-in;
-moz-transition: all 0.15s ease-in;
transition: all 0.15 ease-in; }
/* Fade out the transparency. This code can be removed if you do not want it to fade */
.sm-user-ui .sm-gallery-content .sm-tiles .sm-tile-content {
-webkit-transition: all 0.15s ease-in;
-moz-transition: all 0.15s ease-in;
transition: all 0.15 ease-in; }
I was wrong again and don't know how to fix this now. I removed the breadcrumb from the gallery (page) level because it was showing one level up as well as the gallery level. I replaced it with a Title block. But that title is just what I type in as the name. This means "Title A" shows up as the title of every gallery on the site. What do i do to have the gallery title show up as the title, such that it dynamically changes correctly in each gallery? None of the blocks that I can see work to achieve this, I think. Thanks.
Edit: the correct way it should look is in mess. #192. Except I need to not use a text block and use something else (other than a breadcrumb, I think.)
Chancy, you're makin' me all confused here! What exactly are you trying to do? The "breadcrumb" is the mechanism for displaying where the user is within your navigation: Home -> Folder -> Gallery. I'm not sure why "Show (or hide) Full Breadcrumb" isn't working -- have you submitted a ticket to SM Support Heroes?
However, didn't I already paste some code that forces it to work how you want: Home -> Gallery?
/* Hide the breadcrumb bar completely */
.sm-page-layout-region .sm-page-layout-region-center .sm-breadcrumb-item {
display:none !important;
}
/* Turn back on the home icon, the separator icon,
and the current gallery name */
.sm-page-layout-region-center .sm-page-widget-body li:first-child,
.sm-page-layout-region-center .sm-page-widget-body li:nth-of-type(2),
.sm-page-layout-region-center .sm-page-widget-body li:last-child {
display: inline !important;
}
Or do you want it to just display the gallery name only and no "Home > "? If that's the case, use the code from above but remove first 2 lines of "turn back on the home icon, the seperator icon ..."
/* Turn back on the home icon, the separator icon,
and the current gallery name */
.sm-page-layout-region-center .sm-page-widget-body li:last-child {
display: inline !important;
}
Currently I have a breadcrumb at the top of all pages. I want the gallery title to be largish and visible beneath the navbar and just above the photos. To achieve this I added another breadcrumb for all galleries and emphasized the title. However this now produces two prominent breadcrumbs, which is redundant and unsightly.
There is no block to add just the gallery title. It appears I would have to add a title block to every gallery and manually type in the gallery name. That makes no sense as a fix either.
I suggest adding a block for gallery name that can be modified for size and type, color, and position, just like any other blocks. Automating this for hundreds of galleries seems logical to the process.
I'm not sure if what you posted as a fix, does this. Let me play a little.
/* Hide the breadcrumb bar completely */
.sm-page-layout-region .sm-page-layout-region-center .sm-breadcrumb-item {
display:none !important;
}
/* Turn back on the home icon, the separator icon,
and the current gallery name */
.sm-page-layout-region-center .sm-page-widget-body li:first-child,
.sm-page-layout-region-center .sm-page-widget-body li:nth-of-type(2),
.sm-page-layout-region-center .sm-page-widget-body li:last-child {
display: inline !important;
}
Or do you want it to just display the gallery name only and no "Home > "? If that's the case, use the code from above but remove first 2 lines of "turn back on the home icon, the seperator icon ..."
/* Turn back on the home icon, the separator icon,
and the current gallery name */
.sm-page-layout-region-center .sm-page-widget-body li:last-child {
display: inline !important;
}
Rather than play, I'll ask questions. I want a full breadcrumb at the very top of the page.
Then comes the Navbar.
Then comes the gallery title.
If I add your code above, won't that change the navbar at the very top too?
Lefty, here's an image example that does what I want. Except, the large title under the navbar, is a Title block, not a navbar or other kind of block. I don't know how to get the gallery name there by itself (and have all the gallery names populate properly to their respective galleries, AND have a full navbar at the top of all pages.
Lefty, here's an image example that does what I want. Except, the large title under the navbar, is a Title block, not a navbar or other kind of block. I don't know how to get the gallery name there by itself (and have all the gallery names populate properly to their respective galleries, AND have a full navbar at the top of all pages.
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.
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.
I DO love you I DO. But - I don't think it worked.
This is what I see in one example of a gallery.
I DO love you I DO. But - I don't think it worked.
This is what I see in one example of a gallery.
If you just do the first section of code (to hide the entire 2nd breadcrumb), does it go away completely? Or does it stay on screen? If it stays on screen, did you try changing the nth-of-type(2) to the (3)?
If you just do the first section of code (to hide the entire 2nd breadcrumb), does it go away completely? Or does it stay on screen? If it stays on screen, did you try changing the nth-of-type(2) to the (3)?
No change either way. In case there is something else in my CSS causing a problem, this is what I have. I'm aware that some of these may not be working on the site but haven't had time to investigate why. I'm one of those users who can cut and paste code in but not have a clue about why it works or breaks.
You are so sweet to help with this, I'm sure there are others who would like a gallery title big and bold, without a breadcrumb trail.
.sm-tiles-grid .sm-tile-info p {
/*
font-size: 95%!important;
color: gold!important;
text-align:center;
*/
padding-left: 0!important;
padding-right: 0!important;
overflow: visible !important;
white-space:normal !important;
}
.sm-gallery-slideshow-button
{
display: none;
}
/* Set the buttons to transition grey on mouse hover */
.sm-user-ui .sm-button-skin-accent:hover {
background-color: #286DC3;
border-color: #286DC3;
}
/*
when a user hovers over a link instead of it instantly going
to the hover decoration, it will fade in and out to it
*/
a {
-webkit-transition:color 0.2s ease-in;
-moz-transition:color 0.2s ease-in;
transition:color 0.2s ease-in;
}
/*
remove the buy button
*/
.sm-gallery-buymenu
{
display: none;
}
/* Hide the search form and social media links for mobile browsers */
@media only screen and (max-width: 640px) {
.sm-search-form, .sm-page-widget-social-links { display: none; }
}
/* Add 1 pixel border around the thumbnails and photos */
.sm-user-ui .sm-gallery-smugmug .sm-image {
border: 1px solid #4F4F4F;
padding: 0px;
}
/* Set the overflow of the images to be visible so the border actually displays properly */
.sm-user-ui .sm-gallery-smugmug .sm-tile-content {
position: relative;
display: block;
overflow: visible;
}
/* Lightbox: Add the word "Close" next to the X */
.sm-user-ui .sm-lightbox-tools .sm-lightbox-close:after {
content: ' Close';
font-size: 18px;
}
/* Set the color of the "X" */
.sm-user-ui .sm-lightbox-tools .sm-fonticon-XCross2 {
/* color: #fff !important; */
}
.sm-user-ui .sm-lightbox .sm-lightbox-tools {
padding: 5px;
}
/* Set the properties for the entire close box */
/* If you want to change the color of the "Close" text, uncomment out the color and set your color */
.sm-user-ui .sm-lightbox-tools .sm-lightbox-close {
/* background-color: red !important; */
border: 1px solid #fff;
/* color: #fff; */
font-size: 14px;
opacity: 1.0;
}
.sm-user-ui .sm-lightbox-tools .sm-lightbox-expand:after {
content: ' Full Screen';
font-size: 18px;
}
/* Make the width of the lightbox caption wider */
.sm-user-ui .sm-lightbox-caption {
max-width: 1000px !important;
}
/* The lightbox caption area is really wide but the text in it is much
skinner. The scroll bar was very far away. Bring it in to match
the width of the lightbox caption */
.sm-user-ui .sm-lightbox-panel {
max-width: 1010px !important;
}
/* Properly center the image pagination */
.sm-user-ui .sm-gallery-smugmug .sm-gallery-image-pagination {
margin-left: auto;
margin-right: auto;
width: 50%;
}
/* 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(3) .sm-page-widget-body li:last-child {
display: inline !important;
}
No change either way. In case there is something else in my CSS causing a problem, this is what I have. I'm aware that some of these may not be working on the site but haven't had time to investigate why. I'm one of those users who can cut and paste code in but not have a clue about why it works or breaks.
You are so sweet to help with this, I'm sure there are others who would like a gallery title big and bold, without a breadcrumb trail.
Since you haven't unveiled and I can't see the code specific to your site ... Send me a PM with the "View -> Source" of your page and I'll see if I can figure out why it's not playing nice.
Since you haven't unveiled and I can't see the code specific to your site ... Send me a PM with the "View -> Source" of your page and I'll see if I can figure out why it's not playing nice.
I can do that if you tell me how.
But first - I've re-put-in the original code you told me to. What about the settings? Here's what I have for both levels.
I can do that if you tell me how.
But first - I've re-put-in the original code you told me to. What about the settings? Here's what I have for both levels.
Press Ctrl + U to pull up the source (it should work).
In chrome: click on the 3 lines thing -> Tools -> View Source (Ctrl + U)
In firefox: Tools -> Web Developer -> View Source (Ctrl + U)
In IE: View -> Source
Edit -> Select All -> Copy.
Then click on my name on the left of one of my posts. It should pop up a box that says "Send a Private Message". Paste in the code there.
Press Ctrl + U to pull up the source (it should work).
In chrome: click on the 3 lines thing -> Tools -> View Source (Ctrl + U)
In firefox: Tools -> Web Developer -> View Source (Ctrl + U)
In IE: View -> Source
Edit -> Select All -> Copy.
Then click on my name on the left of one of my posts. It should pop up a box that says "Send a Private Message". Paste in the code there.
Sorry, the web tools are defeating me. The DG message tells me the limit is 100,000 char, and I have over 400k char. Saving as a .txt truncates the material into almost one run on sentence. I was going to chop it up into 5 messages but is that really right?
Sorry, the web tools are defeating me. The DG message tells me the limit is 100,000 char, and I have over 400k char. Saving as a .txt truncates the material into almost one run on sentence. I was going to chop it up into 5 messages but is that really right?
I sent you a private message with my email address. Shoot me the text file and I'll take a look.
Sorry, the web tools are defeating me. The DG message tells me the limit is 100,000 char, and I have over 400k char. Saving as a .txt truncates the material into almost one run on sentence. I was going to chop it up into 5 messages but is that really right?
I sent you a private message with my email address. (You should see an icon on the top of these forums that says "Welcome, ChancyRat" and next to it should be something that says "Unread 1". Click that to get to your inbox. Email me the entire text file (1 file) of our page source and I'll see what I can do.
First of all, thank you for your efforts, it's been very helpful.
I have a question: I've put the code that suppose to make the link on the navbar fade and to change color when i'm on the active link.
I've put it in the "entire site" Theme css and it does not work. the borders of the links dop work.
here is the code:
/* Add a line underneath each link in the menu (nav) bar */
.sm-page-widget-nav-toplink, .sm-page-widget-nav-toplink:last-child {
border-bottom: 1px solid #595959 !important;
padding: 7px 0px 7px 0px !important;
width: 90%;
margin-bottom: 0px !important;
}
Sorry, the web tools are defeating me. The DG message tells me the limit is 100,000 char, and I have over 400k char. Saving as a .txt truncates the material into almost one run on sentence. I was going to chop it up into 5 messages but is that really right?
ChancyRat,
Can you email me the code again, but this time, when you placed the 2nd breadcrumb in there. It doesn't look like the version you sent me has the 2nd breadcrumb. If you do that, I should be able to get you some code that works to show only the gallery name.
I did not unveil my site yet. i'm using the vertical bar
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.
help with html questions please
Greetings all. I'm trying to create a 'this page only' for my About page. I've added an image and several test paragraphs (skeletons thereof) and so far, so good. But I have no idea how to format the page so that the name 'About' is above the text as the title would be in a gallery. Now the name is on the right side of the page in line with the top of the html block.
Can I have that page be found from the nav but also have that title (About) not be present when the page is opened?
That page is at http://www.charlesdalyphotography.com/About
Any help would be great.
I'm trying to create a 'this page only' for my About page. I've added an image and several test paragraphs (skeletons thereof) and so far, so good. But I have no idea how to format the page so that the name 'About' is above the text as the title would be in a .
It's actually really simple ... although SmugMug seems to make it a bit more "complicated" then it needs to be. I'll explain ...
All you have to do is drag your Breadcrumb content block (the one that has the home icon and "About" in it) up. Drag it so that it's above your image and text. It'll show a green outlined box when it's properly above, then let go and it'll stick in place. I say it's more "complicated" because I've found that it's very difficult to find the 'sweet spot' where the green outlined box shows up and is where you want it. It seems like you have to play around with your mouse, as you drag, to get SmugMug to recognize where you want the content block to be. You'd think as long as you got it close enough it would jump to a given spot. You should be able to accomplish this easily.
Yes, when you're in your navbar creating your links you can choose "Page I Choose..." and then find this "About" page. It'll put a link to this page, just like you can create a link to any folder or gallery.
Can I have that page be found from the nav but also have that title (About) not be present when the page is opened?
I'm not sure what you're saying in the 2nd part here. Do you want the link to not be in the navbar when you're on the About page? Or do you want the breadcrumb (the home icon and the word 'About') to not be there when you're on the page?
It's actually really simple ... although SmugMug seems to make it a bit more "complicated" then it needs to be. I'll explain ...
All you have to do is drag your Breadcrumb content block (the one that has the home icon and "About" in it) up. Drag it so that it's above your image and text. It'll show a green outlined box when it's properly above, then let go and it'll stick in place. I say it's more "complicated" because I've found that it's very difficult to find the 'sweet spot' where the green outlined box shows up and is where you want it. It seems like you have to play around with your mouse, as you drag, to get SmugMug to recognize where you want the content block to be. You'd think as long as you got it close enough it would jump to a given spot. You should be able to accomplish this easily.
Yes, when you're in your navbar creating your links you can choose "Page I Choose..." and then find this "About" page. It'll put a link to this page, just like you can create a link to any folder or gallery.
I'm not sure what you're saying in the 2nd part here. Do you want the link to not be in the navbar when you're on the About page? Or do you want the breadcrumb (the home icon and the word 'About') to not be there when you're on the page?
Aaron, thanks so much for looking. This reply was a big long para detailing all my woes. Waiting for a response, I emptied my cache and did a major clean. And there you have it! Done.
As usual, you nailed it.
Comments
Wow, was that hidden! Went there and it is already set to "allow" for my smugmug url and my custom url. Maybe I did that a long time ago
So, now I ask a really dumb question. Where are the double arrows that we are talking about since I SHOULD be seeing them. Sorry for the basic question.
Weird, when I use Quote and Reply, it is sticking in an extra previous quote. Just started doing that a few posts ago. I just deleted them. I left this one there for you to see.
So, I'm out of luck with those non-working items. Although /date wouldn't be considered custom would it as it is straight from SM programming with the lowercase "d" which worked in the Search with the lowercase "s" in /search.
When you look at your menu content block, under the LINKS option ... you have a number of options for what kind of link it is:
Anything that is a "Custom URL" will not show up as an active-page. It just doesn't get the active-page class designation. I Believe all the rest will. At least "Page I Choose" and "Homepage" do, from my own experiences.
For the fullscreen thing ... use Safari or Firefox to check. I think because Chrome is basically full-screen already, the option doesn't exist? I dunno.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Cool beans! I get it now. Those non-working items did indeed use Custom Url. I was able to point everything except 3 that don't matter anyway to the proper place using Page I Choose. Voila! Works like a champ. Can't thank you enough for sticking with us as we plow through the changes. You are a Hero in my book.
www.brandolinoimaging.com
/* Make the folder images slightly transparent when the mouse hovers over it */ .sm-user-ui .sm-tiles .sm-tile-content:hover { opacity: 0.6; /* Have the transparency fade in */ -webkit-transition: all 0.15s ease-in; -moz-transition: all 0.15s ease-in; transition: all 0.15 ease-in; } /* Fade out the transparency. This code can be removed if you do not want it to fade */ .sm-user-ui .sm-tiles .sm-tile-content { -webkit-transition: all 0.15s ease-in; -moz-transition: all 0.15s ease-in; transition: all 0.15 ease-in; }I was wrong again and don't know how to fix this now. I removed the breadcrumb from the gallery (page) level because it was showing one level up as well as the gallery level. I replaced it with a Title block. But that title is just what I type in as the name. This means "Title A" shows up as the title of every gallery on the site. What do i do to have the gallery title show up as the title, such that it dynamically changes correctly in each gallery? None of the blocks that I can see work to achieve this, I think. Thanks.
Edit: the correct way it should look is in mess. #192. Except I need to not use a text block and use something else (other than a breadcrumb, I think.)
Try adding ".sm-gallery-content" after .sm-user-ui ... this should restrict the code to only effect the .sm-tiles and .sm-tile-content when it's part of the gallery and not part of an image-block.
/* Make the folder images slightly transparent when the mouse hovers over it */ .sm-user-ui .sm-gallery-content .sm-tiles .sm-tile-content:hover { opacity: 0.6; /* Have the transparency fade in */ -webkit-transition: all 0.15s ease-in; -moz-transition: all 0.15s ease-in; transition: all 0.15 ease-in; } /* Fade out the transparency. This code can be removed if you do not want it to fade */ .sm-user-ui .sm-gallery-content .sm-tiles .sm-tile-content { -webkit-transition: all 0.15s ease-in; -moz-transition: all 0.15s ease-in; transition: all 0.15 ease-in; }Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Chancy, you're makin' me all confused here!
However, didn't I already paste some code that forces it to work how you want: Home -> Gallery?
/* Hide the breadcrumb bar completely */ .sm-page-layout-region .sm-page-layout-region-center .sm-breadcrumb-item { display:none !important; } /* Turn back on the home icon, the separator icon, and the current gallery name */ .sm-page-layout-region-center .sm-page-widget-body li:first-child, .sm-page-layout-region-center .sm-page-widget-body li:nth-of-type(2), .sm-page-layout-region-center .sm-page-widget-body li:last-child { display: inline !important; }Or do you want it to just display the gallery name only and no "Home > "? If that's the case, use the code from above but remove first 2 lines of "turn back on the home icon, the seperator icon ..."
/* Turn back on the home icon, the separator icon, and the current gallery name */ .sm-page-layout-region-center .sm-page-widget-body li:last-child { display: inline !important; }Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
http://www.dgrin.com/showthread.php?t=241096
"Add Gallery block title"
I'm not sure if what you posted as a fix, does this. Let me play a little.
Rather than play, I'll ask questions. I want a full breadcrumb at the very top of the page.
Then comes the Navbar.
Then comes the gallery title.
If I add your code above, won't that change the navbar at the very top too?
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.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
I DO love you I DO. But - I don't think it worked.
This is what I see in one example of a gallery.
PS I am a she not a he.
If you just do the first section of code (to hide the entire 2nd breadcrumb), does it go away completely? Or does it stay on screen? If it stays on screen, did you try changing the nth-of-type(2) to the (3)?
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
No change either way. In case there is something else in my CSS causing a problem, this is what I have. I'm aware that some of these may not be working on the site but haven't had time to investigate why. I'm one of those users who can cut and paste code in but not have a clue about why it works or breaks.
You are so sweet to help with this, I'm sure there are others who would like a gallery title big and bold, without a breadcrumb trail.
.sm-tiles-grid .sm-tile-info p { /* font-size: 95%!important; color: gold!important; text-align:center; */ padding-left: 0!important; padding-right: 0!important; overflow: visible !important; white-space:normal !important; } .sm-gallery-slideshow-button { display: none; } /* Set the buttons to transition grey on mouse hover */ .sm-user-ui .sm-button-skin-accent:hover { background-color: #286DC3; border-color: #286DC3; } /* when a user hovers over a link instead of it instantly going to the hover decoration, it will fade in and out to it */ a { -webkit-transition:color 0.2s ease-in; -moz-transition:color 0.2s ease-in; transition:color 0.2s ease-in; } /* remove the buy button */ .sm-gallery-buymenu { display: none; } /* Hide the search form and social media links for mobile browsers */ @media only screen and (max-width: 640px) { .sm-search-form, .sm-page-widget-social-links { display: none; } } /* Add 1 pixel border around the thumbnails and photos */ .sm-user-ui .sm-gallery-smugmug .sm-image { border: 1px solid #4F4F4F; padding: 0px; } /* Set the overflow of the images to be visible so the border actually displays properly */ .sm-user-ui .sm-gallery-smugmug .sm-tile-content { position: relative; display: block; overflow: visible; } /* Lightbox: Add the word "Close" next to the X */ .sm-user-ui .sm-lightbox-tools .sm-lightbox-close:after { content: ' Close'; font-size: 18px; } /* Set the color of the "X" */ .sm-user-ui .sm-lightbox-tools .sm-fonticon-XCross2 { /* color: #fff !important; */ } .sm-user-ui .sm-lightbox .sm-lightbox-tools { padding: 5px; } /* Set the properties for the entire close box */ /* If you want to change the color of the "Close" text, uncomment out the color and set your color */ .sm-user-ui .sm-lightbox-tools .sm-lightbox-close { /* background-color: red !important; */ border: 1px solid #fff; /* color: #fff; */ font-size: 14px; opacity: 1.0; } .sm-user-ui .sm-lightbox-tools .sm-lightbox-expand:after { content: ' Full Screen'; font-size: 18px; } /* Make the width of the lightbox caption wider */ .sm-user-ui .sm-lightbox-caption { max-width: 1000px !important; } /* The lightbox caption area is really wide but the text in it is much skinner. The scroll bar was very far away. Bring it in to match the width of the lightbox caption */ .sm-user-ui .sm-lightbox-panel { max-width: 1010px !important; } /* Properly center the image pagination */ .sm-user-ui .sm-gallery-smugmug .sm-gallery-image-pagination { margin-left: auto; margin-right: auto; width: 50%; } /* 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(3) .sm-page-widget-body li:last-child { display: inline !important; }Since you haven't unveiled and I can't see the code specific to your site ... Send me a PM with the "View -> Source" of your page and I'll see if I can figure out why it's not playing nice.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
I can do that if you tell me how.
But first - I've re-put-in the original code you told me to. What about the settings? Here's what I have for both levels.
Press Ctrl + U to pull up the source (it should work).
In chrome: click on the 3 lines thing -> Tools -> View Source (Ctrl + U)
In firefox: Tools -> Web Developer -> View Source (Ctrl + U)
In IE: View -> Source
Edit -> Select All -> Copy.
Then click on my name on the left of one of my posts. It should pop up a box that says "Send a Private Message". Paste in the code there.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Sorry, the web tools are defeating me. The DG message tells me the limit is 100,000 char, and I have over 400k char. Saving as a .txt truncates the material into almost one run on sentence. I was going to chop it up into 5 messages but is that really right?
I sent you a private message with my email address. Shoot me the text file and I'll take a look.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
I sent you a private message with my email address. (You should see an icon on the top of these forums that says "Welcome, ChancyRat" and next to it should be something that says "Unread 1". Click that to get to your inbox. Email me the entire text file (1 file) of our page source and I'll see what I can do.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
First of all, thank you for your efforts, it's been very helpful.
I have a question: I've put the code that suppose to make the link on the navbar fade and to change color when i'm on the active link.
I've put it in the "entire site" Theme css and it does not work. the borders of the links dop work.
here is the code:
/* Add a line underneath each link in the menu (nav) bar */
.sm-page-widget-nav-toplink, .sm-page-widget-nav-toplink:last-child {
border-bottom: 1px solid #595959 !important;
padding: 7px 0px 7px 0px !important;
width: 90%;
margin-bottom: 0px !important;
}
.sm-gallery-buymenu
{
display: none;
}
.sm-page-powered-by A:first-child
{
display: none;
}
/* Make the menu nav bar text for the active page a different color */
.sm-page-widget-nav-activepage > a {
color: #E3E3E3!important;
}
a {
-webkit-transition:color 0.2s ease-in;
-moz-transition:color 0.2s ease-in;
transition:color 0.2s ease-in;
}
any idea?
thank you
moshi
Hi Moshi,
You'll need to give me some additional background. It looks like you have NOT unveiled your site yet? So there's nothing for me to look at.
Are you using a "Horizontal", a "Vertical", or an "Accordion" navbar?
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
I did not unveil my site yet. i'm using the vertical bar
ChancyRat,
Can you email me the code again, but this time, when you placed the 2nd breadcrumb in there. It doesn't look like the version you sent me has the 2nd breadcrumb. If you do that, I should be able to get you some code that works to show only the gallery name.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
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.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Greetings all. I'm trying to create a 'this page only' for my About page. I've added an image and several test paragraphs (skeletons thereof) and so far, so good. But I have no idea how to format the page so that the name 'About' is above the text as the title would be in a gallery. Now the name is on the right side of the page in line with the top of the html block.
Can I have that page be found from the nav but also have that title (About) not be present when the page is opened?
That page is at http://www.charlesdalyphotography.com/About
Any help would be great.
Charles
Port Credit. Canada
http://charlesdalyphotography.com
It's actually really simple ... although SmugMug seems to make it a bit more "complicated" then it needs to be. I'll explain ...
All you have to do is drag your Breadcrumb content block (the one that has the home icon and "About" in it) up. Drag it so that it's above your image and text. It'll show a green outlined box when it's properly above, then let go and it'll stick in place. I say it's more "complicated" because I've found that it's very difficult to find the 'sweet spot' where the green outlined box shows up and is where you want it. It seems like you have to play around with your mouse, as you drag, to get SmugMug to recognize where you want the content block to be. You'd think as long as you got it close enough it would jump to a given spot. You should be able to accomplish this easily.
Yes, when you're in your navbar creating your links you can choose "Page I Choose..." and then find this "About" page. It'll put a link to this page, just like you can create a link to any folder or gallery.
I'm not sure what you're saying in the 2nd part here. Do you want the link to not be in the navbar when you're on the About page? Or do you want the breadcrumb (the home icon and the word 'About') to not be there when you're on the page?
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Aaron, thanks so much for looking. This reply was a big long para detailing all my woes. Waiting for a response, I emptied my cache and did a major clean. And there you have it! Done.
As usual, you nailed it.
Charles
Port Credit. Canada
http://charlesdalyphotography.com