where is the CSS

sjvrensburgsjvrensburg Registered Users Posts: 2 Beginner grinner
edited January 23, 2014 in SmugMug Customization
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

Comments

  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited 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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • CharlyCharly Registered Users Posts: 86 Big grins
    edited 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

    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.
    www.ImagerybyCharly.com | Serving the DFW area of Texas and beyond
  • denisegoldbergdenisegoldberg Administrators Posts: 14,373 moderator
    edited 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
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited 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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • sjvrensburgsjvrensburg Registered Users Posts: 2 Beginner grinner
    edited January 2, 2014
    Thank you!
    Thanks everyone for helping out... Now lets see if I can remember how CSS works! :-P
  • mylifeinfocusmylifeinfocus Registered Users Posts: 208 Major grins
    edited 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....
  • denisegoldbergdenisegoldberg Administrators Posts: 14,373 moderator
    edited 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....
    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
  • mylifeinfocusmylifeinfocus Registered Users Posts: 208 Major grins
    edited January 22, 2014
    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;
    }
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited January 22, 2014
    Are all your galleries using that theme? The CSS will only apply when that theme is active.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • mylifeinfocusmylifeinfocus Registered Users Posts: 208 Major grins
    edited 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;
    }
Sign In or Register to comment.