where is the CSS

sjvrensburg · January 2, 2014

Hi there,

This is probably a stupid question, but how do I get to a place where I can view and change my site's CSS? I used to be able to this with the old SmugMug, you just navigated to some section of the customization options.

While I love the new SmugMug, I find that all the fonts are too small (even XL) and I want to change that via CSS / HTML.

Any help, whatsoever, would be greatly appreciated.

Stefan

Allen · January 2, 2014

There is not a single area for CSS but CSS for different levels.

Go to any page and click customize > customize site.
In the right flyout you'll see "homepage", "entire site", "all folders" and "all galleries".
As you highlight each of these, out on the page will be a CSS block. If not you can add one.
So you can add CSS to apply to any level.

If you just want to customize a single page click "Make this .... Custom"
It will then have a CSS block for "Just this page". If you're adding blocks or editing existing blocks
make sure the correct area is highlighted on the right. Like "all galleries" or "Just this ..."

When I mention "page" above it could be a folder or gallery or page.

Charly · January 2, 2014

sjvrensburg wrote: »

Hi there,

This is probably a stupid question, but how do I get to a place where I can view and change my site's CSS? I used to be able to this with the old SmugMug, you just navigated to some section of the customization options.

While I love the new SmugMug, I find that all the fonts are too small (even XL) and I want to change that via CSS / HTML.

Any help, whatsoever, would be greatly appreciated.

Stefan

Though I know little, to place CSS code to effect your entire site: Click on Customize, then Customize Site... when there in the right hand panel at the top you'll see Entire Site, Homepage, All Folders, All Galleries. Click on Entire Site which will be all in Red. Above your footer you should see at the left side CSS APP Placeholder. Hover to turn red and then click on the wrench. Now you can place your CSS code to effect your entire site.

denisegoldberg · January 2, 2014

Charly wrote: »

Though I know little, to place CSS code to effect your entire site: Click on Customize, then Customize Site... when there in the right hand panel at the top you'll see Entire Site, Homepage, All Folders, All Galleries. Click on Entire Site which will be all in Red. Above your footer you should see at the left side CSS APP Placeholder. Hover to turn red and then click on the wrench. Now you can place your CSS code to effect your entire site.

There will not be a CSS APP PLACEHOLDER in Entire site unless the OP has already placed it there.

You must first drag a CSS block from the HTML section of content to the location where you want to place the CSS.

As Allen noted above, you can place CSS in many places. I have most of my CSS in my theme. Some folks have chosen to add a CSS block to Entire site and place it there. Others have CSS scattered throughout their sites.

--- Denise

Allen · January 2, 2014

BTW, after making a page custom, highlighting "Just this ..." and opening the CSS block out on the page I find it already
filled with CSS from above (flow down?). I delete all that and only add in CSS that overrides the higher
level CSS. Not sure if this is the correct way but works for me.

sjvrensburg · January 2, 2014

Thank you!
Thanks everyone for helping out... Now lets see if I can remember how CSS works! :-P

mylifeinfocus · January 22, 2014

To ask what may be a silly question: I'm able to get to the CSS block on my pages, but what I seem to be not doing correctly is where I'm doing it (Homepage level, etc.). I'm trying to change the custom right-click message and did so on the Entire Site level (assuming that would apply the change to all subsequent pages), but after publishing the changes, the old stock message remains.

Not sure what I'm doing wrong....

denisegoldberg · January 22, 2014

mylifeinfocus wrote: »

To ask what may be a silly question: I'm able to get to the CSS block on my pages, but what I seem to be not doing correctly is where I'm doing it (Homepage level, etc.). I'm trying to change the custom right-click message and did so on the Entire Site level (assuming that would apply the change to all subsequent pages), but after publishing the changes, the old stock message remains.

Not sure what I'm doing wrong....

It should work in a CSS block on entire site. Before I turned right click protection off I had the message in the CSS for my theme so I know it worked there.

What code are you using? Is it the code from here - http://www.smugocity.com/CSS/Text-Replace/Custom-Right-Click-Protection?

--- Denise

mylifeinfocus · January 22, 2014

denisegoldberg wrote: »

It should work in a CSS block on entire site. Before I turned right click protection off I had the message in the CSS for my theme so I know it worked there.

What code are you using? Is it the code from here - http://www.smugocity.com/CSS/Text-Replace/Custom-Right-Click-Protection?

--- Denise

That is the code I'm using, Denise. I thought I had it in the right place, but it doesn't seem to show up. Will it not work while in Preview mode, maybe?

I'm in the Entire Site tab, then I've selected the theme, advanced CSS and entered to code there. I put it after the CSS code I used to change "The Question" text on my Contact form. Should it go before that?

Here's what I have in my CSS:

/* Set the The Question text to your own wording */
.sm-contact-pro-form:before {
content: "Please type your question below.";
position: absolute;
top: 215px;
left: 200px;
}

/* Hack to hide the The Question */
.sm-contact-pro-form .sm-form-contents .sm-form-field-overhead:nth-child(4) label {
visibility: hidden;
}

.sm-right-click-message:after {
content: 'All images are © Alice A. Thompson. All rights reserved. Please contact me if you want to use this image.';
}

.sm-right-click-message .sm-tooltip-content {
display: none;
}

Allen · January 22, 2014

Are all your galleries using that theme? The CSS will only apply when that theme is active.

mylifeinfocus · January 23, 2014

Allen wrote: »

Are all your galleries using that theme? The CSS will only apply when that theme is active.

That was it, Allen! Thanks! I had forgotten that the Galleries are actually inside Folders. It was the Folders that didn't have the CSS. Once I added that to the theme on the Folders, it seems to be fine now. Thanks for your help!

Is there a way to get the custom message to "fade" off after a few seconds? I'm not sure what the CSS for that would be. I like the way the box looks (css below), but would like the message to fade away after it appears instead of making it remain visible (until the user clicks off of it).

.sm-tooltip.sm-right-click-message {
background-color: #fff;
border-radius: 7px;
border: 2px solid #00c4ff;
box-shadow: -4px 5px 10px #000;
color: #000;
padding: 10px;
}

where is the CSS

Comments