Colors by new SM aren't right

ChancyRat · October 14, 2013

I replicated a color from legacy, for the new default color (starting from scratch theme-wise), and the resulting color is not the correct one. In this snapshot on the left you see the yellow color it should be, the webpage I pulled the color from, then the code input, and the grey results.

I verified #FDFCC3 on the CS3 color picker site, it shows the pale yellow.

Is this a bug in the SM format?

EDIT: I should mention I tried other misc. colors and they all don't "take"; a different color is on the SM format.

ChancyRat · October 14, 2013

Should this be moved to the bug reporting forum?

leftquark · October 15, 2013

Are you sure the opacity slider is set to 100%? If you slid it down it will change the color.

ChancyRat · October 15, 2013

leftquark wrote: »

Are you sure the opacity slider is set to 100%? If you slid it down it will change the color.

I'm sure you can hear this coming, but - what opacity slider? Please direct me to it.

ChancyRat · October 15, 2013

I did look everywhere for opacity for the "basic primary color", and cannot find anything.

Related: I thought I had begun to make a theme from scratch, but now I see copy of turbo at the top.
Isn't there a way to start from scratch and not involve any of the theme templates?

I ask because there is something about some of the color in the theme templates that is not modifiable.

leftquark · October 15, 2013

ChancyRat wrote: »

I'm sure you can hear this coming, but - what opacity slider? Please direct me to it.

On the same settings screen that you screenshotted, the "theme" settings -> background tab, there's a number of slider bars for "Alpha" like "header alpha", "left sidebar alpha", "body alpha", etc. If those are dragged down away from 100% it will start changing your colors to be slightly transparent.

I imagine you're doing something with the CSS or with those sliders to muck with the colors. All SmugMug is doing is taking the color you're picking and plopping that into the code. They're not doing anything fancy to change colors.

ChancyRat · October 15, 2013

leftquark wrote: »

On the same settings screen that you screenshotted, the "theme" settings -> background tab, there's a number of slider bars for "Alpha" like "header alpha", "left sidebar alpha", "body alpha", etc. If those are dragged down away from 100% it will start changing your colors to be slightly transparent.

I imagine you're doing something with the CSS or with those sliders to muck with the colors. All SmugMug is doing is taking the color you're picking and plopping that into the code. They're not doing anything fancy to change colors.

I've never moved a slider. All of them are on the far right.
Not sure if you saw my next comment: Related: I thought I had begun to make a theme from scratch, but now I see copy of turbo at the top.
Isn't there a way to start from scratch and not involve any of the theme templates?

I ask because there is something about some of the color in the theme templates that is not modifiable.

In this theme that I'm modifying, I currently have no CSS for the site.

ChancyRat · October 15, 2013

SM has definitely restricted the color options for primary site color. There are no yellows (all yellow codes revert to a grey. I tried another theme, Zoe, and it has the same restrictions on color. I think SM should open up the color palette for primary site color. It would also be nice not to have to select a default theme. Why not just a blank template so that all color choices, etc., can be build from the ground up?

leftquark · October 15, 2013

ChancyRat wrote: »

SM has definitely restricted the color options for primary site color. There are no yellows (all yellow codes revert to a grey. I tried another theme, Zoe, and it has the same restrictions on color. I think SM should open up the color palette for primary site color. It would also be nice not to have to select a default theme. Why not just a blank template so that all color choices, etc., can be build from the ground up?

I'm confused which colors your talking about? The background color? The "primary" color? I just did some tests and everything works fine ... except for the "Primary color". If I tell smugmug to use your #FDFCC3 color it shows up as below:

SM_colors.jpg

See how the colors match between SmugMug and the HTML Color Picker?

However, if I set that color as the "Primary" color, it shows up on the page as basically white. If I were you I'd avoid using that color picker. I think because the page loads on top of that "Primary" color there's some built in transparency working that's futzing with it. Setting body, footer, header, etc color to be the one you wanted worked perfectly. Or we can use CSS to do it.

ChancyRat · October 15, 2013

It is in the Basic tab, primary color, that does not take the code I want.

If you really can change the color with CSS, I would love to know the code. In multiple other threads users reported being able to manipulate lots of color but not this one.

I also was confused because I hoped to start with an empty template but I think one cannot do that. You must choose an existing template and then "start a theme from scratch". Yet, this is one color area is only narrowly modifiable. For example there are no yellows available.

I submitted this as a bug.It affects the drop-down menu background color (which no one has been able to help me change), and it's the color for the background of the thumbs where the image doesn't fill the entire area (red arrow). There are probably other site areas that will crop up as I go along.

I don't think the system should allow you to input a color code where the right value returns the wrong color. It also extremely limits customization one can do to a site. I would think if they're going to offer you the full color palette, they should offer the full color palette.

leftquark · October 15, 2013

ChancyRat wrote: »

It is in the Basic tab, primary color, that does not take the code I want.

If you really can change the color with CSS, I would love to know the code. In multiple other threads users reported being able to manipulate lots of color but not this one.

I also was confused because I hoped to start with an empty template but I think one cannot do that. You must choose an existing template and then "start a theme from scratch". Yet, this is one color area is only narrowly modifiable. For example there are no yellows available.

I submitted this as a bug.It affects the drop-down menu background color (which no one has been able to help me change), and it's the color for the background of the thumbs where the image doesn't fill the entire area (red arrow). There are probably other site areas that will crop up as I go along.

I don't think the system should allow you to input a color code where the right value returns the wrong color. It also extremely limits customization one can do to a site. I would think if they're going to offer you the full color palette, they should offer the full color palette.

It's not that the right value returns the wrong code -- they're doing everything right, it's just that features of the website cover up that color and turn it into another color. What happens when you combine 2 colors -- you get a different one, that's what's happening here.

Colors are VERY easy to modify in CSS. All you need to do is ask (I have yet to see you ask? Or perhaps I just missed the posts? I try to check out any of your posts when I see them!). :ivar

Just make sure to be specific about which sections you want to change the color to. Include screenshots ... or better yet, unveil already so I can just go to your site and give you the code

ChancyRat · October 15, 2013

All you need to do is ask (I have yet to see you ask? Or perhaps I just missed the posts? I try to check out any of your posts when I see them!).

There needs to be an emoticon for doe eyes dropping a tear. Thank you.
I'll settle for smiles as you pull me along despite myself. :ginger

I might submit a bug report - 2 actually. One I've had in mind for some time but now a 2nd one. One is that it's a bug that jfriend doesn't have access to JS so he can make JS blocks for us, and two is that you're not on SM payroll.

At the moment the grey that is in the snapshot, I would like to make it a different color. This is on any thumbnail where the image doesn't fill the areas. I think only folders are affected.
The 2nd affected color is the dropdown menu hover. I have added CSS now (pulled from another theme), which has, on the sub-link hover:
- transparency
- a fade-in color effect, except the fade-in starts with the Pesky Grey before reaching the yellow.

I have a different theme background presently, and I can't figure out how to snapshot the problem from home, but there's a picture of the problem on this thread, for a different theme, see my message 16:
http://www.dgrin.com/showthread.php?t=241269

In this thread I first mention the issue with the Pesky Grey.

EDIT: actually it's message #15 that shows the hover-grey-to-yellow problem.

leftquark · October 16, 2013

Hmm... I dunno about the navbar issues. I really can't debug it for you because you haven't unveiled and it's way too difficult to try to fix. For now, I'd remove the transition so that it doesn't have the issue. When you unveil, send me a message and I can make the code work for you.

For what it's worth, I've been using this code to modify the navbar submenu (dropdown):

/* Set the default navbar submenu background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
  background: #008000;
}

/* Set the navbar submenu hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
  background: #00F;
}

/* Change the border color */
.yui3-menu .yui3-menu-children, .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
   border-color: #000000;
}

Also, use this code to fix the color of the box around those small thumbnails:

.sm-tiles-grid .sm-tiles-list .sm-tile-content {
   background-color: #FFFFFF;
}

Change the color white (#FFFFF) to the color of your choosing.

Also, don't you think you're ready to unveil by now? It'd make it a lot easier to help ya out ... and you've gotta have mucked with your site so much by now it's perfect

ChancyRat · October 16, 2013

Thanks so much. Plugged in the thumbnail-change-background-color bit, and it worked like a charm. Then plugged in the rest of your code and the above broke. Also the fade over the navbar dropdown link color isn't working.

Work has me around my neck at the moment so this will be slowing down a bit. But regarding the unveil, no can do. I have too much broken HTML - esp, I have iframes of other sites - trying to figure out that one - but other broken html. Many pages look totally cruddy in new SM at the moment.

For what it's worth here is the total code I have in entire site:

/* Add personal background image */
/*html.sm-user-ui { */
/*background-attachment: fixed;*/
/*background-image: url(http://www.joinrats.com/photos/i-LJT5VSk/0/M/i-LJT5VSk-M.png);*/
/*background-position: center top;*/
/*background-repeat: repeat;*/
/*background-size: 20%*/
}
.sm-breadcrumb
{
border-bottom: 1px solid #595959;
padding-bottom: 4px;
}
.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;
}
/*
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%;
}
/* Change the way the sub-menu bar looks */
.sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
padding: 5px 15px 4px 9px !important;
font-size: 12px;
border: 1px solid rgba(242,208,152,0.9);
border-bottom: 1px solid #1F272A !important;
background-color: rgba(0, 0, 0, 0.0);
}
/* Set the background transparency on the navbar */
/* .sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu, */
/* .sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu-children { */
/* background-color: rgba(68, 68, 68, 0.1); */
/* }*/
/*/* Turn off the background color that was making it not transparent enough */ */
/*.yui3-menu-item .yui3-menu-label { */
background-color: rgba(0, 0, 0, 0.0) !important; */
/*} */
/*.yui3-menu .yui3-menu-label:hover { */
/*background-color: rgba(253, 247, 198, 0.9) !important; */
/*} */
/* Set the default navbar submenu background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
background: #008000;
}

/* Set the navbar submenu hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
background: #00F;
}

/* Change the border color */
.yui3-menu .yui3-menu-children, .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
border-color: #000000;
/* 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 1.0s ease-in;
}
/* Make each sub-menu item fade in/out as the mouse moves over it */
.yui3-menu-label {
-webkit-transition:all 0.5s ease-in;
-moz-transition:all 0.5s ease-in;
transition:all 0.5s ease-in;
}
/* Make thumb background color different */
.sm-tiles-grid .sm-tiles-list .sm-tile-content {
background-color: #FDFCC3;
}

leftquark · October 16, 2013

Yea, I didn't give you code to do the fade or anything fancy in the above. It's just strickly navbar background color, hover color, and border color. I tried to keep it simple so your site would at least work. Once you unveil we can work on getting the more fancy parts (fade, transparency, etc) to work. You've got so much code in there for the navbars that it's prob. all conflicting with each other. I figured we'd start clean -- 3 lines and then fancy up from there.

ChancyRat · October 16, 2013

Thank you, I scrutinized the CSS code and removed some of it, aim to be simpler. Now all colors are back and working. I put 3 arrows, to hover color, 1st and 2nd, and then the thumbnail background. Thank you!

The fade effect is somewhat too fast however, even though I changed the value to 1.0. And yes, this can wait.

Thank youuuuu!

ChancyRat · October 16, 2013

Aaron, how can I make the sub-link text size larger? On Buda, which I now have, it's too tiny.

leftquark · October 16, 2013

ChancyRat wrote: »

Aaron, how can I make the sub-link text size larger? On Buda, which I now have, it's too tiny.

I describe how to control sub-menu text (and colors) on my site: http://www.aaronmphotography.com/Customizations/Navbar/Change-Submenu-Colors

but the code is:

/* Change the navbar fonts */
.sm-page-widget-nav-toplink, .yui3-menu-item .yui3-menu-label,
.sm-page-widget-nav-toplink > a {
  font-family: 'Bouda' !important;
  font-size: 12px !important;
  color: #000000 !important;
}

ChancyRat · October 16, 2013

Weee that was fun. I diligently went to your site and copied tons of lovely code into sitewide CSS. Promptly lost my left column navbar on the home page. Removed some suspect code and it's back, and the navbar sublink font size is now lovely too.

Could I trouble you though, how to change the main navbar links, font size? (not sub-menu). The XL option in SM is too large, but now the font size is the same between the main links and the sublinks. I would like to tweak the main navbar font a bit bigger but not so much as the XL does in the template.

leftquark · October 17, 2013

ChancyRat wrote: »

Could I trouble you though, how to change the main navbar links, font size? (not sub-menu). The XL option in SM is too large, but now the font size is the same between the main links and the sublinks. I would like to tweak the main navbar font a bit bigger but not so much as the XL does in the template.

Use the code:

.sm-page-widget-nav-toplink {
   font-size: 20px !important;
}

ChancyRat · October 17, 2013

leftquark wrote: »
Use the code:
.sm-page-widget-nav-toplink {
   font-size: 20px !important;
}

Thank you Aaron. The code set at 64 px did not change anything. I think I must have conflicting code? At the moment will set this aside and pursue frying bigger fish. I will come back to it after I unveil.

Colors by new SM aren't right

Comments