Custom fonts and hover color for thumbnails

IlyaVishnyakov

I'd like to import non-Google font to Smugmug.

I've found this tutorial http://www.photom.me/Blog/Importing-Fonts-to-SmugMug

However, the tutorial covers the use of a custom font for "text" content block only:

"Once the font is imported to your site - you can use it on any element on
your site HEADERS, NAVIGATION, LABELS etc. You just need to find the ID
tag for the item that you want to target with the new font."

How do I apply the same font to "logo" and "menu" content blocks? Or to every
content block that uses text, sitewide, if that's possible. The tutorial
mentions ID tag for this items, what's that and where do I find it?

Another problem I have is with hover color. Have a look at this beautiful website http://www.halshinnie.com/

How on Earth did he do the red hover color on thumbnails?

What I'd like to try is make thumbnails 20% whiter when the mouse hovers over it, preferably with a fade in/fade out. I only managed to make them 20% less opaque but that doesn't look that good with black background.

My website is www.ilyavishnyakov.com - it's in Russian. The pages where I managed to achieve transparency effect are http://www.ilyavishnyakov.com/Prices and http://www.ilyavishnyakov.com/Portfolio

Any help would be greatly appreciated!

photoclick

Hi Ilya,

Here is a post by Allen that briefly tells you how to find the ID of the element on the page: http://www.dgrin.com/showthread.php?p=2022826#post2022826

I do not see a transparency effect on the pages that you cited above. Enable the Hover effect on the page and I (or someone) can help you do the hover color you like.

IlyaVishnyakov

photoclick wrote: »

Hi Ilya,

Here is a post by Allen that briefly tells you how to find the ID of the element on the page: http://www.dgrin.com/showthread.php?p=2022826#post2022826

I do not see a transparency effect on the pages that you cited above. Enable the Hover effect on the page and I (or someone) can help you do the hover color you like.

I'll look into it, thank you. I removed the code because I didn't like the look of it. I put CSS content block and pasted the code again. I found it here:

http://www.aaronmphotography.com/Customizations/Sitewide/Transparent-Thumbnails

/* 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;
}

So instead of transparency I wanted a 20% overlay of white or another color like on the website I mentioned earlier.

photoclick

ok.. give me a moment.

photoclick

Try adding background color to the part of the code where the hover effect is defined.

background-color: rgba( 255, 0, 0, .7 );

IlyaVishnyakov

photoclick wrote: »

Try adding background color to the part of the code where the hover effect is defined.

background-color: rgba( 255, 0, 0, .7 );

I tried. It doesn't work. The hover effect is disabled altogether.

Here's what it looks like:

.sm-user-ui .sm-tiles .sm-tile-content:hover {
background-color: rgba( 255, 0, 0, .7 );
/* 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;
}

Lille Ulven

IlyaVishnyakov could you give me a link to a page where you have implemented Aaron's css-code so that I could "play with it" and see if I can get it to work? It might be that you would have to lose the ".sm-user-ui" at the beginning of your additions, but it might as easy be something different.

Unfortunately my knowledge of Russian is not close to good enough to decipher your menu (except that I found the contact form )

Thank you

Lille Ulven

IlyaVishnyakov

Lille Ulven wrote: »

IlyaVishnyakov could you give me a link to a page where you have implemented Aaron's css-code so that I could "play with it" and see if I can get it to work? It might be that you would have to lose the ".sm-user-ui" at the beginning of your additions, but it might as easy be something different.

Unfortunately my knowledge of Russian is not close to good enough to decipher your menu (except that I found the contact form )

Thank you

Lille Ulven

It's http://www.ilyavishnyakov.com/Prices and http://www.ilyavishnyakov.com/Portfolio

Second one doesn't work after last modification, but I left it untouched nonetheless.

BTW I gave up on the idea of a custom font, however, I learned how to change nav bar font independently (including sub links). CSS looks like this:

/* Change the navbar fonts */
.sm-page-widget-nav-toplink, .yui3-menu-item .yui3-menu-label,
.sm-page-widget-nav-toplink > a {
font-family: 'Roboto' !important;
font-size: 16px !important;
font-weight: 300;
}

If you get lost again in this cyrillic madness just use URLs for navigation - they're all in EN.

Lille Ulven

I think I know why your hover is not working as in that other page you found as an example

You need to use one of the Collage Gallery styles to get this done, this because you need to be able to use classes like .sm-tile-info which you don't have in your gallery style.
If you then add some CSS like this:

.sm-tiles-infohover-show .sm-tile-content:hover .sm-tile-info {
    opacity: 1;
}

.sm-user-ui .sm-tile-content > .sm-tile-info {
    background-color: white !important;
}

.sm-tiles-infohover-show .sm-tile-info, .sm-tiles-infohover-hide .sm-tile-info {
	-webkit-transition: .25s opacity;
	-moz-transition: .25s opacity;
	transition: .25s opacity;
	-webkit-backface-visibility: hidden;
}

.sm-tile-info {
	-webkit-text-size-adjust: none;
	text-align: left;
	display: flex;
	flex-direction: row;
	align-items: center;
}

It might work, might because there are a few more for sm-tile-info that I haven't copied yet, as I think these should do the trick.

And now I want to look at some cyrillic madness...see if at least some of the letters (except for me deciphering Kontakti as contacts ) stuck in my head
OK...found portfolio (first), contacts (third) and certificate But still this head needs more learning (after I get my Travel Photographer certificate)

Good luck

Lille Ulven

IlyaVishnyakov

Lille Ulven wrote: »

I think I know why your hover is not working as in that other page you found as an example

You need to use one of the Collage Gallery styles to get this done, this because you need to be able to use classes like .sm-tile-info which you don't have in your gallery style.
If you then add some CSS like this:

.sm-tiles-infohover-show .sm-tile-content:hover .sm-tile-info {
    opacity: 1;
}

.sm-user-ui .sm-tile-content > .sm-tile-info {
    background-color: white !important;
}

.sm-tiles-infohover-show .sm-tile-info, .sm-tiles-infohover-hide .sm-tile-info {
	-webkit-transition: .25s opacity;
	-moz-transition: .25s opacity;
	transition: .25s opacity;
	-webkit-backface-visibility: hidden;
}

.sm-tile-info {
	-webkit-text-size-adjust: none;
	text-align: left;
	display: flex;
	flex-direction: row;
	align-items: center;
}

It might work, might because there are a few more for sm-tile-info that I haven't copied yet, as I think these should do the trick.

And now I want to look at some cyrillic madness...see if at least some of the letters (except for me deciphering Kontakti as contacts ) stuck in my head
OK...found portfolio (first), contacts (third) and certificate But still this head needs more learning (after I get my Travel Photographer certificate)

Good luck

Lille Ulven

Thank you for your help. It's indeed not a gallery, but folders/pages/galleries content block with grid style. If I change style to collage landscape it still doesn't work though. I removed the code. Well I guess no animation will do for now.