Help with a hover overs / title backgrounds

Haldog · November 2, 2015

Hi, this is my first post, I'm just trying to get my site looking slick, but I'm stuck on a few things.

1 - With the SmugMug theme, landscape collage gallery -I'd like to change the hover over colour to red at about 70% opacity and make the gallery title font white, larger and centralised, rather than to the left. I've attached a screenshot of how it currently is.

2 - Can I get rid of the opaque background on the title/caption bar in the slideshow gallery, so it is just text with no background?

3 - Also in the slideshow gallery can I get rid of the opaque background for the directional arrows on either side of the image?

rainforest1155 · November 3, 2015

Hi and welcome to DGrin!

What you're looking for might only be possible with CSS code. For the customization helpers to be able to take a look, could you include a link to your site / the pages in question?

Hikin' Mike · November 3, 2015

You can add this to your site's CSS. That should take care of your first question. I'm not sure about the other questions without seeing your site/page.

.sm-user-ui .sm-tile-content > .sm-tile-info {
    background-color: rgba ( 255, 0, 0, .7 );
    }
    
.sm-user-ui .sm-tile-info .sm-tile-title {
    color: #fff;
    font-size: 20px;
    text-align: center;
    }

Haldog · November 11, 2015

Thanks Mike, that works a treat.

Here's a link to my site, there's not much on it yet, but you should be able to see what I'm talking about in this gallery: https://halshinnie.smugmug.com/Euphemia/

Ideally - the title of the first image not to have a coloured background - so that the text is directly on the image, or so that it sits below the image in black text.
- the navigational arrows on the wider landscape images have a box around them - is it possible to have the arrow without the box - directly on the image?

I hope this makes sense...

Thanks again.

Hikin' Mike · November 11, 2015

Add this to your CSS:

/**
* Slideshow Gallery Tweaks
************************************************/
    /* Transparent Slideshow Buttons and Title Background */
.sm-user-ui .sm-slideshow .sm-slideshow-nav .sm-button, 
.sm-user-ui .sm-slideshow .sm-slideshow-fullscreen-button, 
.sm-user-ui .sm-slideshow .sm-slideshow-play-pause,    
.sm-user-ui .sm-gallery-slideshow .sm-tile-content .sm-tile-info {
    background-color: rgba( 0, 0, 0, 0 );
    }
    
    /* Positions Title Below the Image */
.sm-user-ui .sm-tile-single.sm-tiles-uncropped .sm-image {
    padding-bottom: 50px;
    }

Haldog · November 12, 2015

Thanks again Mike, that works pretty well - nearly there...

The title is now below the image, which is great, but there is some sort of margin there which is cutting it off, which I'm not sure how to change. https://halshinnie.smugmug.com/Euphemia/i-vHn3vN8

Also, can I change the colour of the directional arrows to a lighter grey so that they are more likely to show up on both light and dark backgrounds?

THANK YOU!

Hikin' Mike · November 12, 2015

You can increase the 'padding-bottom' to give you more room between the title and the image.

This will change the arrows...

.sm-user-ui .sm-slideshow .sm-slideshow-nav .sm-button, 
.sm-user-ui .sm-slideshow .sm-slideshow-fullscreen-button, 
.sm-user-ui .sm-slideshow .sm-slideshow-play-pause {
    color: #ccc;
    }

Haldog · November 13, 2015

Thanks Mike. The CSS for the arrows didn't seem to do anything. Perhaps it's conflicting with the previous code, I have no idea...

I've seen the option for padding around the pictures somewhere, but can't for the life of me remember where, do you know where this option is?

Thanks,
Hal

Haldog · November 13, 2015

Hikin' Mike wrote: »
You can add this to your site's CSS. That should take care of your first question. I'm not sure about the other questions without seeing your site/page.
.sm-user-ui .sm-tile-content > .sm-tile-info {
    background-color: rgba ( 255, 0, 0, .7 );
    }
    
.sm-user-ui .sm-tile-info .sm-tile-title {
    color: #fff;
    font-size: 20px;
    text-align: center;
    }

Hi Mike, sorry to keep plaguing you with questions. The first bit of this code: to make the hover over background of the gallery thumbnail images red and 70% opaque isn't working for some reason. It's staying white and at the default opacity. Is there another way to do this that you can think of? https://halshinnie.smugmug.com/

Thank you. Hal.

Allen · November 13, 2015

Haldog wrote: »

Hi Mike, sorry to keep plaguing you with questions. The first bit of this code: to make the hover over background of the gallery thumbnail images red and 70% opaque isn't working for some reason. It's staying white and at the default opacity. Is there another way to do this that you can think of? https://halshinnie.smugmug.com/

Thank you. Hal.

First, try adding !important to it. Might have to override something.
background-color: rgba ( 255, 0, 0, .7 ) !important;

Hikin' Mike · November 13, 2015

Haldog wrote: »

Hi Mike, sorry to keep plaguing you with questions. The first bit of this code: to make the hover over background of the gallery thumbnail images red and 70% opaque isn't working for some reason. It's staying white and at the default opacity. Is there another way to do this that you can think of? https://halshinnie.smugmug.com/

Thank you. Hal.

I had a space between the 'rgba' and the parenthesis '('

It should be this:

.sm-user-ui .sm-tile-content > .sm-tile-info {
    background-color: rgba( 255, 0, 0, .7 );
    }

Haldog · November 18, 2015

BOOOOM! Genius. Thank you.

These are hopefully my last questions......

- Can I get rid of the login button at the bottom?

- Can I make my "About" page not show up as a thumbnail in the smugmug collage gallery on the homepage?

https://halshinnie.smugmug.com/

- Can I change the mailto link to on my about page from pink to black with a red hover over?

I think that is all.

Thanks sooo much.

denisegoldberg · November 18, 2015

Haldog wrote: »

- Can I make my "About" page not show up as a thumbnail in the smugmug collage gallery on the homepage?

If you change your About page to unlisted (instead of public) it will only show up when explicitly referenced.

--- Denise

Haldog · November 18, 2015

Thanks Denise, but it's still showing up and it now says "About (unlisted)" in the nav bar.

Allen · November 18, 2015

Haldog wrote: »

Thanks Denise, but it's still showing up and it now says "About (unlisted)" in the nav bar.

You only see that logged in, visitors will not.

Haldog · November 18, 2015

Thank you both, I've just checked it on my gf's computer and it's all good.
It's really annoying that when you are previewing your site it doesn't show exactly what it will look like - like having that incredibly annoying smugmug menu bar across the top.

Anyway,
thanks again.

Do you happen to know if it is possible to hide the login button? Or maybe just change the font colour to white so it's invisible?

denisegoldberg · November 18, 2015

Haldog wrote: »

Do you happen to know if it is possible to hide the login button? Or maybe just change the font colour to white so it's invisible?

I have this CSS on my site to hide the login but still show Powered by Smugmug:

/* hide powered by smug */
.sm-page-powered-by a {
  display: none;
}
/* re-show "powered by smugmug" without the login link */
.sm-page-powered-by a:first-child {
  display: inline;
  margin-left: 25px;
  font-size: 90%;
}

I believe that just using the first piece of the CSS will remove both the login and the Powered by SmugMug.

Since I don't have a login link on my site I login from www.smugmug.com.

--- Denise

Haldog · November 18, 2015

Thanks Denise, that didn't quite work - it gave me either "Powered by Smugmug" or "login", but I changed it around a bit and got rid of both of them. Result!!!

I'm starting to get the hang of this CSS code business, it's pretty satisfying when it actually works

This is the CSS I used in case you want it:

/* hide powered by smug and login link */
.sm-page-powered-by a {
display: none;
}

Haldog · November 18, 2015

So the only thing that's niggling me now is if I can I change the mailto link to on my about page from pink to black with a red hover over...?

Allen · November 18, 2015

Haldog wrote: »

So the only thing that's niggling me now is if I can I change the mailto link to on my about page from pink to black with a red hover over...?

Try this. Because it has that unique widget class name you can put it in "entire site" or "Just This Page" CSS.

.sm-page-widget-13025691 a {color:black !important}
.sm-page-widget-13025691 a:hover {color:red !important}

Haldog · November 19, 2015

Allen, you bloody legend!

That's sorted. Thank you!

denisegoldberg · November 19, 2015

Haldog wrote: »

...the mailto link to on my about page

Are you aware that a mailto link only works on computers where an email client is installed?

I believe a better option is to use SmugMug's contact form. See help page at http://help.smugmug.com/customer/en/portal/articles/1248294-how-do-i-create-a-contact-page-.

--- Denise

Help with a hover overs / title backgrounds

Comments