Adjust background image when logged in...

toddbuchanan · October 12, 2014

I am trying to adjust a background image that I added with CSS in the Theme panel and it looks perfect when you are visiting and not logged in, but it moves up (and behind the menu bar at top) when you are logged in and was trying to see if there was a way to add some more css to load a different size when logged in versus logged out.

See below....it's just enought that I know the client will not understand why it doesn't look the same logged in versus logged out...

Here is the CSS I'm using for the background image:

html.sm-user-ui {
background-attachment: scroll;
background-image: url(http://otcimages.smugmug.com/Internal/Web-resources-logos-etc/i-3j8DTVf/0/X3/bg_hero-X3.jpg);
background-position: 0 95px;
background-repeat: no-repeat;
background-size: 100%;
}

And here is some CSS Guessing I was trying but it doesn't seem to do the job:

html.sm-user-ui .loggedIn {
background-attachment: scroll;
background-image: url(http://otcimages.smugmug.com/Internal/Web-resources-logos-etc/i-3j8DTVf/0/X3/bg_hero-X3.jpg);
background-position: 0 135px;
background-repeat: no-repeat;
background-size: 100%;
}

Any thoughts?

Allen · October 12, 2014

These are class names that appear in the tag when you are logged in.
sm-user-loggedin sm-user-owner

sm-user-loggedin will appear in the body for every visitor visiting your site if they are logged in to their own site.

But not sm-user-owner

So use
.sm-user-owner

toddbuchanan · October 12, 2014

Allen wrote: »

These are class names that appear in the <body> tag when you are logged in.
sm-user-loggedin sm-user-owner

sm-user-loggedin will appear in the body for every visitor visiting your site if they are logged in to their own site.

But not sm-user-owner

So use
.sm-user-owner

Hmmm....

Just tried this in both the CSS in the Theme panel and in a system wide CSS panel and doesn't seem to change the positioning...any thoughts:

html.sm-user-owner {
background-attachment: scroll;
background-image: url(http://otcimages.smugmug.com/Internal/Web-resources-logos-etc/i-3j8DTVf/0/X3/bg_hero-X3.jpg);
background-position: 0 165px;
background-repeat: no-repeat;
background-size: 100%;
}

Allen · October 12, 2014

Maybe try this?

.sm-user-owner > html.sm-user-ui {

Allen · October 12, 2014

Or

.sm-user-owner html.sm-user-ui {
.sm-user-owner html {

toddbuchanan · October 12, 2014

Thanks for those, but doesn't seem to be responding...I
'm trying to think if there is a way to put in a clear .png that is onlhy called on the hoem page or something...

Thank you again for the suggestions!

leftquark · October 13, 2014

Hi Todd,
A few lines of CSS code should fix this for you. I see you have 2 SmugMug sites. Would you mind letting me know which site (or a sample URL) is having this issue?

toddbuchanan · October 13, 2014

Sure...I actually have about a dozen sites I run for clients and 3 of my own but I am setting up a new site for as a sample for a client here.

It's not a huge deal but when you are dealing with a potential client who doesn't undertand why it looks different, you want to make sure it looks the best possible...

Thanks

leftquark · October 14, 2014

toddbuchanan wrote: »

Sure...I actually have about a dozen sites I run for clients and 3 of my own but I am setting up a new site for as a sample for a client here.

It's not a huge deal but when you are dealing with a potential client who doesn't undertand why it looks different, you want to make sure it looks the best possible...

I'm a perfectionist, so I completely agree!

If you let me know which site I can take a look and provide some CSS for ya.

toddbuchanan · October 14, 2014

leftquark wrote: »

I'm a perfectionist, so I completely agree! If you let me know which site I can take a look and provide some CSS for ya.

Sorry I put is as a html link here yesterday...here it is as standard link: http://otcimages.smugmug.com/

leftquark · October 14, 2014

toddbuchanan wrote: »

Sorry I put is as a html link here yesterday...here it is as standard link: http://otcimages.smugmug.com/

OOoppps ... apparently I am blind! You did, it said "here" and I missed it

toddbuchanan · October 14, 2014

I just appreciate the help!

It seems like it is just a matter of the number of px that the top smugmug login banner occupies that would need to move the background image down to line up with the top of the sites menu...

leftquark · October 15, 2014

toddbuchanan wrote: »

I just appreciate the help!

It seems like it is just a matter of the number of px that the top smugmug login banner occupies that would need to move the background image down to line up with the top of the sites menu...

Todd,
It turns out it stems from how you're creating the background image. You applied it to the entire smugmug user ui, which is outside of the tagging on whether or not a user is logged in or the site owner. Because of this, any of the sm-user-owner tags don't exist and you won't be able to do custom CSS based on that. The way you're doing it now, you have to push the background down 95pixels to fit it where you want when you could potentially be doing it a better.

You're only applying this background to the body content of the page. Using the Chrome developer tools I hid your background and tried the following code. It seemed to mimic your background exactly in both Chrome and Safari. Will this work instead?

/* Set the background image of the content area */
.sm-page-layout-region-body .sm-page-layout-region-center {
   background-image: url('http://otcimages.smugmug.com/Internal/Web-resources-logos-etc/i-3j8DTVf/0/X3/bg_hero-X3.jpg');
}

toddbuchanan · October 15, 2014

Perfecto! THANK YOU!

It looks perfect now...

leftquark · October 16, 2014

toddbuchanan wrote: »

Perfecto! THANK YOU!

It looks perfect now...

Wahoo -- glad it solved the problem

Adjust background image when logged in...

Comments