Aaron your site is awesome i thought it was the new smug at first, i got exited when i looked in your galleries and saw the old style next/prev buttons etc then i realised it was legacy. have you come up with a code for adding these back into new smug ?
Webster, do you have an example you can show me? When I looked at your page I don't see any borders. Are you just trying to make the vertical height of each smaller (with no border).
Sorry to confuse you. I've since removed the borders again, pending resolution of my issues. I'm surprised about your reference to 7px up and 7px down because the menu wording was sitting low in each band, and I was looking for narrower and equal spacing as in your site. But if that's the key to solving this, I'll experiment with the "7px" parameters and see what i can achieve.
But I was also trying to achieve a line across under the bottom to fully "enclose" the bottom menu item as you have done, but still can't see how.
Sorry to be slow in responding to you, but the present problem with no notifications is a pain!
Sorry to confuse you. I've since removed the borders again, pending resolution of my issues. I'm surprised about your reference to 7px up and 7px down because the menu wording was sitting low in each band, and I was looking for narrower and equal spacing as in your site. But if that's the key to solving this, I'll experiment with the "7px" parameters and see what i can achieve.
But I was also trying to achieve a line across under the bottom to fully "enclose" the bottom menu item as you have done, but still can't see how.
Sorry to be slow in responding to you, but the present problem with no notifications is a pain!
Yes, the lack of notifications has been bothering me too. Doh!
Which navbar are you trying to change? The main one with "Home", "New and Featured", "Browse Galleries", etc ... or the sub-navbar under galleries with "Airplanes", "Art", "Architecture", etc?
My code for adding a border on the bottom of each main navbar link is up top but here's a repaste:
/* Add a line underneath each link in the menu (nav) bar */
.sm-page-widget-nav-toplink {
border-bottom: 1px solid #FFFFFF;
padding:7px 0;
width: 90%;
}
That puts a 1px border on the bottom. I changed the color to white for you (#FFFFFF) since my original grey color is similar to your normal background color. Not sure if you had changed the color when you tried to get it to work?
The "padding:7px 0;" puts a 7px padding on top/bottom. As you'll see from the graphic here (http://www.htmldog.com/guides/css/beginner/margins/), padding puts 7pixels inside from the border (or in this case, leaves a 7 pixel gap below your text and the bottom line... and puts the next menu-item 7 pixels below the previous bottom line. I squished the line in to 90% so it didn't fill the entire width of the "left" column of the page. Then I went into the Menu Content block and played with the left/right margins until it moved in to be centered.
I assume you know you can control your left column width under the customizer "Entire Site" -> "Layout" tab and then scrolling down to "sidebars".
i got exited when i looked in your galleries and saw the old style next/prev buttons etc then i realised it was legacy. have you come up with a code for adding these back into new smug ?
I assume you just want it to say "Next and Previous" (or did you also want it to say "1 of 22" instead of "1 / 22"). I spent about 45 minutes this morning trying to get the "next" and "prev" text to show up but I can't figure out what SmugMug is doing with spacing out the "share" and "info", "download", etc buttons. Here's a start and you can go from there:
Perhaps email SmugMug Support Heroes and see if they can get it to work?
The above code places the word "Prev" after the "<" arrow, and "Next" after the ">" arrow. I wanted the "Next" to come before the ">" but when I tried to move the RightSlim bracket to "before" instead of "after", for whatever reason it made the ">" arrow disappear.
Thanks for trying, i was hoping to get it back as it is legacy and its been requested by several people on the here but as yet smugmug havent changed it....
Thanks for trying, i was hoping to get it back as it is legacy and its been requested by several people on the here but as yet smugmug havent changed it....
Did you see the other thread where a SM developer mentioned they were working on fixing it ... they were just trying to figure out the best way to implement it. That's a good sign
- Still no luck with the galleries not showing (other posts do not give much details of how to fix it). tried with gallery settings - and no luck!
- in the meantime in the bottom navbar SmugMug added (UNLISTED) next to the link to the gallery (it is supposed to be unlisted -- but can I remove the information?
- still no luck with changing the colour of the secondary navbar: thought it would be eaier for navigation to have all text changes in white and try to change the colour of the main navmar. Still no idea which 'name' need to use - a screengrab of FF inspector:
- in both preview and done -- the navbars are loading with quite a delay. sort of annoying (is it because of the extra CSS code?)
I can understand customisation to be a bit of a challenge -- but when folder don't show up it becomes a bigger problem with the whole 'upgrade'...
cheers,
To change the bottom navbar use the following:
.sm-page-widget-nav-footer a {
color: blue !important;
}
Change "blue" to whatever color code you want. The ".sm-page-widget-nav-footer" is the footer navbar. You can use that to change additional features like the a:hover, or to add the borders similarly to the code for the top-navbar.
Don't worry about SmugMug adding (unlisted) to the text in the navbar. It won't show's up for you -- nobody else will see it. Only when you're logged in will you see it.
Settings are inherited from parent folders. Are you sure you looked at the gallery settings in the folders above it? It sounds like you need to email the Support Heroes about this. They've been responding within an hour or two to my emails so they'll be your best bet. I have no problems having my folders show up. I have a feeling you're doing something funky with your settings still.
Also, all navbars load fine for me. It may just be your internet connection. If you're really worried, email smugmug about that as well.
Don't worry about SmugMug adding (unlisted) to the text in the navbar. It won't show's up for you -- nobody else will see it. Only when you're logged in will you see it.
Great. wasn't sure as it shows in preview / done (and can't see when being logged out)
In the footer navbar settings (click the wrench), is it of type "footer" or is of type "horizontal". I assumed you inserted it as a "footer" navbar.
ahhh - it was not set as footer. now works for both top and footer navbar as needed.
awesome - thank you.
Re folders & galleries: opened a couple of galleries from the organiser and they were showing fine - but not the folders they are in. no news from heroes so far - hopefully can sort it out tomorrow!
Did you see the other thread where a SM developer mentioned they were working on fixing it ... they were just trying to figure out the best way to implement it. That's a good sign
Thanks, no ive not seen that thread theres so many threads flying about things just get lost in them
another simple (if not silly!) question: after 2 handfuls of hair pulled still can't work out how to make folders and galleries display together rather than in two separate rows. In the theme before it worked fine - but here cannot make it stay in one content box. Hate the three separate containers . . .
As I have 3 galleries and 1 folder here - is there any way to make the galleries in that folder to pop up below the folder (new row) rather than take me to the folder itself on click (or is that java ? that would be fantastic...
another simple (if not silly!) question: after 2 handfuls of hair pulled still can't work out how to make folders and galleries display together rather than in two separate rows. In the theme before it worked fine - but here cannot make it stay in one content box. Hate the three separate containers . . .
As I have 3 galleries and 1 folder here - is there any way to make the galleries in that folder to pop up below the folder (new row) rather than take me to the folder itself on click (or is that java ? that would be fantastic...
Unfortunately it looks like JavaScript was required in Legacy to do this. I don't know of any way to do it in the New SM
another simple (if not silly!) question: after 2 handfuls of hair pulled still can't work out how to make folders and galleries display together rather than in two separate rows. In the theme before it worked fine - but here cannot make it stay in one content box. Hate the three separate containers . . .
If you add a 'Folders, Galleries & Pages' content block, it'll show them all on the same row.
2013-08-28 6:18pm PT: Simplified "Add a Line or Border Around Each Item in Your Menu". Previously I had one set of code for all the menu items and one set of code for the last child. I combined them to take up less lines of code.
almost there - but still struggling with the 2 navbars. All good for the "main' navbar - but wandered how to:
- apply the lines only to the top(main) navbar rather than both
- disable showing of sublinks in the secondary one.
That's what I get from the inspector -- can't find the right class
You already should have the code for the footer. I thought you said it was working? Just remove the "border" part to remove the lines from the footer nav-bar.
In your footer nav bar your sublinks only show up because you've indented them in your menu block. Why not just delete the links or move them out of being a sub-link?
You already should have the code for the footer. I thought you said it was working? Just remove the "border" part to remove the lines from the footer nav-bar.
worked as long as the second navar was set as footer -- but not with horizontal set-up (changed the theme) the whole thing collapsed (argh). so back to looking for the right css id / name to use. tried to work out from the inspector -- but no luck. do I need to get the class -- or what this might look like?
In your footer nav bar your sublinks only show up because you've indented them in your menu block. Why not just delete the links or move them out of being a sub-link?
worked as long as the second navar was set as footer -- but not with horizontal set-up (changed the theme) the whole thing collapsed (argh). so back to looking for the right css id / name to use. tried to work out from the inspector -- but no luck. do I need to get the class -- or what this might look like?
This should do the trick for you. All I did was find the DIV tag that was called the footer. You should really be able to figure out from the inspector what the area is called. All you have to do is put your mouse over the different DIV tags and it highlights the area that fits in that. Find the one that looks right ... There aren't many options (header, left, right, footer, etc).
/* Add a 1 pixel border on the right with 7 pixels padding on the left and right */
.sm-page-layout-region-footer .sm-page-widget-nav-toplink, .sm-page-layout-region-footer .sm-page-widget-nav-toplink:last-child {
border-right: 1px solid #595959 !important;
padding: 0px 7px 0px 7px !important;
}
/* Make the footer nav links blue */
.sm-page-layout-region-footer .sm-page-widget-nav-toplink a {
color: blue !important
}
/* Make the footer nav links hover white */
.sm-page-layout-region-footer .sm-page-widget-nav-toplink a:hover {
color: #FFFFFF !important
}
Change colors and features as you need. In your case you prob. want to set the border-top (or whatever border you're using in your main nav bar) to 0px. The other option is to figure out the DIV code for the header ... it's prob. called "sm-page-layout-region-header" ... and add that before the .sm-page-widget-nav-toplink ... basically the way the CSS works is that every DIV you give (with a "." before it) calls out a specific area ... The original code assumed you only had 1 nav-bar so I had it apply to all navbars, no matter where it was placed (.sm-page-widget-nav-toplink)... however, if you want to specify a certain area, then you put that area's div code before it (.sm-page-layout-region-footer .sm-page-widget-nav-toplink). Make sense?
Add the word "Download" after the download icon
Code:
/* Add the word "Download" after the download button */ .sm-button.sm-button-image-download:after { content: " Download" !important; font-size: 100%; }
If you feel the font for "Download" is too large, change font-size: 100% to something smaller. I used 95% on my page.
I haven't unveiled yet would you know if that just shows up on pages that i have marked for originals and have not right clicked protected or will it always be there?
I haven't unveiled yet would you know if that just shows up on pages that i have marked for originals and have not right clicked protected or will it always be there?
It will only be there if the download button is there. For you, when you're logged in, it will always show up. For visitors, they'll only see it when they're able to see it. Any time SmugMug shows the download icon it'll add the word "Download" to it. There should never be a case where the download icon is there and the text isn't. Additionally, there should never be a case where the "download" text is there but the icon is not.
The OP really needs to be stickied. This is the most useful post out of all in the "New Smugmug Customization" forum. Not sure how you go about making that happen here.
The OP really needs to be stickied. This is the most useful post out of all in the "New Smugmug Customization" forum. Not sure how you go about making that happen here.
Thanks -- one of the smuggies would have to do it bow
another few hours of playing and finally getting towards the right look.
but still trying to get the 2 vertical navbars look and behave - neded up with the following config:
- main vertical accordion navbar
- vertical navbar below
all displays well, on hover both change colour (guess that's my setting in the theme) but:
- active page in the accordion not the right colour anymore (code works fine for the bottom navbar)
- lost the lines in accordion menu - can these be added here as well or work just for 'normal' navbar?
The code being:
.sm-page-widget-nav-activepage > a {
color: #8cca1e!important;
}
I tried to add / replace with .sm-page-widget-nav-accordion and .sm-page-widget-nav-accordion-activepage into the codes - that did not work. Any ideas what it should be?
This appears to be another design inconsistency within SmugMug. The accordian nav bar doesn't have the option to highlight the active page. I looked into this the other day and there's no "activepage" set in it's code. You can either file this as a bug or as a feature request. It seems like a bug to me though?
Here was my code for the accordion before I abandoned it and went back to a vertical nav-bar:
/* Accordion: Add a line underneath each link in the menu (nav) bar */
.sm-page-layout-region-left .sm-nav-item-toplevel {
border-bottom: 1px solid #595959 !important;
padding: 7px 0px 7px 0px !important;
width: 90%;
margin-bottom: 0px !important;
}
/* Accordion: */
.sm-user-ui .sm-page-layout-region-left .sm-accordion-item-label {
line-height: 17px !important;
border: 0px !important;
}
This appears to be another design inconsistency within SmugMug. The accordian nav bar doesn't have the option to highlight the active page. I looked into this the other day and there's no "activepage" set in it's code. You can either file this as a bug or as a feature request. It seems like a bug to me though?
Here was my code for the accordion before I abandoned it and went back to a vertical nav-bar:
/* Accordion: Add a line underneath each link in the menu (nav) bar */
.sm-page-layout-region-left .sm-nav-item-toplevel {
border-bottom: 1px solid #595959 !important;
padding: 7px 0px 7px 0px !important;
width: 90%;
margin-bottom: 0px !important;
}
/* Accordion: */
.sm-user-ui .sm-page-layout-region-left .sm-accordion-item-label {
line-height: 17px !important;
border: 0px !important;
}
at least this time it was not my inability:) will wait till they fix it - and back to vertical navbar for the time being...
hopefully last question for a while (if all this works - back to uploading and sorting the photos before going life!)
I want to add a white border to each photo that is displayed - as a thumb of a gallery or folder, as a thumb inside the gallery and as a photo (whether fullscreen, in journal etc) - basically every visible photo to get a bit of a border.
Found some codes to do it for smugmug gallery - but that really was the only one that worked so far. is there any way to do it?
cheers,
Just remove the smugmug gallery identifier in my original code. This should work ...:
/* Add 1 pixel border around the thumbnails and photos */
.sm-user-ui .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-tile-content {
position: relative;
display: block;
overflow: visible;
}
Comments
But I was also trying to achieve a line across under the bottom to fully "enclose" the bottom menu item as you have done, but still can't see how.
Sorry to be slow in responding to you, but the present problem with no notifications is a pain!
Yes, the lack of notifications has been bothering me too. Doh!
Which navbar are you trying to change? The main one with "Home", "New and Featured", "Browse Galleries", etc ... or the sub-navbar under galleries with "Airplanes", "Art", "Architecture", etc?
My code for adding a border on the bottom of each main navbar link is up top but here's a repaste:
That puts a 1px border on the bottom. I changed the color to white for you (#FFFFFF) since my original grey color is similar to your normal background color. Not sure if you had changed the color when you tried to get it to work?
The "padding:7px 0;" puts a 7px padding on top/bottom. As you'll see from the graphic here (http://www.htmldog.com/guides/css/beginner/margins/), padding puts 7pixels inside from the border (or in this case, leaves a 7 pixel gap below your text and the bottom line... and puts the next menu-item 7 pixels below the previous bottom line. I squished the line in to 90% so it didn't fill the entire width of the "left" column of the page. Then I went into the Menu Content block and played with the left/right margins until it moved in to be centered.
I assume you know you can control your left column width under the customizer "Entire Site" -> "Layout" tab and then scrolling down to "sidebars".
Hope this helps.
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 assume you just want it to say "Next and Previous" (or did you also want it to say "1 of 22" instead of "1 / 22"). I spent about 45 minutes this morning trying to get the "next" and "prev" text to show up but I can't figure out what SmugMug is doing with spacing out the "share" and "info", "download", etc buttons. Here's a start and you can go from there:
Perhaps email SmugMug Support Heroes and see if they can get it to work?
The above code places the word "Prev" after the "<" arrow, and "Next" after the ">" arrow. I wanted the "Next" to come before the ">" but when I tried to move the RightSlim bracket to "before" instead of "after", for whatever reason it made the ">" arrow disappear.
Sorry
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Did you see the other thread where a SM developer mentioned they were working on fixing it ... they were just trying to figure out the best way to implement it. That's a good sign
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
To change the bottom navbar use the following:
Change "blue" to whatever color code you want. The ".sm-page-widget-nav-footer" is the footer navbar. You can use that to change additional features like the a:hover, or to add the borders similarly to the code for the top-navbar.
Don't worry about SmugMug adding (unlisted) to the text in the navbar. It won't show's up for you -- nobody else will see it. Only when you're logged in will you see it.
Settings are inherited from parent folders. Are you sure you looked at the gallery settings in the folders above it? It sounds like you need to email the Support Heroes about this. They've been responding within an hour or two to my emails so they'll be your best bet. I have no problems having my folders show up. I have a feeling you're doing something funky with your settings still.
Also, all navbars load fine for me. It may just be your internet connection. If you're really worried, email smugmug about that as well.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Great. wasn't sure as it shows in preview / done (and can't see when being logged out)
Based in NZ (so we 20 years behind the world) -- still, logo and footer are fine, they stay on all time, navbars disappear and load for ever.
Will get Smugmug to work on it
Thanks!
http://franeksiedlok.blogspot.com/
In the footer navbar settings (click the wrench), is it of type "footer" or is of type "horizontal". I assumed you inserted it as a "footer" 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
ahhh - it was not set as footer. now works for both top and footer navbar as needed.
awesome - thank you.
Re folders & galleries: opened a couple of galleries from the organiser and they were showing fine - but not the folders they are in. no news from heroes so far - hopefully can sort it out tomorrow!
http://franeksiedlok.blogspot.com/
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Thanks, no ive not seen that thread theres so many threads flying about things just get lost in them
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Screen Shot 2013-08-28 at 23.21.46.jpg
As I have 3 galleries and 1 folder here - is there any way to make the galleries in that folder to pop up below the folder (new row) rather than take me to the folder itself on click (or is that java ? that would be fantastic...
http://franeksiedlok.blogspot.com/
YES ~ Thank You Aaron!!! I've been trying to figure this out for to long.
Unfortunately it looks like JavaScript was required in Legacy to do this. I don't know of any way to do it in the New SM
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
If you add a 'Folders, Galleries & Pages' content block, it'll show them all on the same row.
It's a specific content block in new that is Folders, Galleries & Pages
Support Hero and Customeister
http://www.smugmug.com/help
Aha! Good to know! I was always curious what the difference in that was ... vs just inserting a "Folder" a "Galleries" and a "Pages" block! Thanks
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
You already should have the code for the footer. I thought you said it was working? Just remove the "border" part to remove the lines from the footer nav-bar.
In your footer nav bar your sublinks only show up because you've indented them in your menu block. Why not just delete the links or move them out of being a sub-link?
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
worked as long as the second navar was set as footer -- but not with horizontal set-up (changed the theme) the whole thing collapsed (argh). so back to looking for the right css id / name to use. tried to work out from the inspector -- but no luck. do I need to get the class -- or what this might look like?
http://franeksiedlok.blogspot.com/
This should do the trick for you. All I did was find the DIV tag that was called the footer. You should really be able to figure out from the inspector what the area is called. All you have to do is put your mouse over the different DIV tags and it highlights the area that fits in that. Find the one that looks right ... There aren't many options (header, left, right, footer, etc).
Change colors and features as you need. In your case you prob. want to set the border-top (or whatever border you're using in your main nav bar) to 0px. The other option is to figure out the DIV code for the header ... it's prob. called "sm-page-layout-region-header" ... and add that before the .sm-page-widget-nav-toplink ... basically the way the CSS works is that every DIV you give (with a "." before it) calls out a specific area ... The original code assumed you only had 1 nav-bar so I had it apply to all navbars, no matter where it was placed (.sm-page-widget-nav-toplink)... however, if you want to specify a certain area, then you put that area's div code before it (.sm-page-layout-region-footer .sm-page-widget-nav-toplink). Make sense?
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 haven't unveiled yet would you know if that just shows up on pages that i have marked for originals and have not right clicked protected or will it always be there?
It will only be there if the download button is there. For you, when you're logged in, it will always show up. For visitors, they'll only see it when they're able to see it. Any time SmugMug shows the download icon it'll add the word "Download" to it. There should never be a case where the download icon is there and the text isn't. Additionally, there should never be a case where the "download" text is there but the icon is not.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Thanks -- one of the smuggies would have to do it bow
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
This appears to be another design inconsistency within SmugMug. The accordian nav bar doesn't have the option to highlight the active page. I looked into this the other day and there's no "activepage" set in it's code. You can either file this as a bug or as a feature request. It seems like a bug to me though?
Here was my code for the accordion before I abandoned it and went back to a vertical nav-bar:
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
at least this time it was not my inability:) will wait till they fix it - and back to vertical navbar for the time being...
cheers!!
http://franeksiedlok.blogspot.com/
Just remove the smugmug gallery identifier in my original code. This should work ...:
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations