Help with a hover overs / title backgrounds

Haldog

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Allen

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

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

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

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

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

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

Allen, you bloody legend!

That's sorted. Thank you!

denisegoldberg

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