Options

Can any of the CSS guru's help with this

JohnwdJohnwd Registered Users Posts: 33 Big grins
edited September 14, 2013 in SmugMug Customization
Hi,

Hoping someone can help me with something I would like to amend on my smugmug site

www.jdphoto.biz

When in the lightbox,I would like to display the following message with the file name after it

Reference:(Filename)

Now it this could be centered below or on the bottom of the image with a font size of 26 that would be cool.

I have looked at the CSS see below, all i managed to do was increase the font size so the file name would disappear of the bottom of the screen

An help would be most gratefully welcome, John


The code

/* Line 1 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td
{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

/* Line 1 */
h1, h2, h3, h4, h5, h6
{
font-size: 100%;
font-weight: normal;
}

/* Line 443 */
h4, .sm-h4
{
font-size: 14px;
}

/* Line 443 */
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title
{
float: left;
margin-bottom: 4px;
overflow-x: hidden;
overflow-y: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

/* Line 443 */
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title, .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption
{
max-width: 620px;
}

/* Line 443 */
.sm-lightbox-basic .yui3-widget-ft.sm-lightbox-hover .sm-lightbox-title
{
white-space: normal;
}

Comments

  • Options
    AllenAllen Registered Users Posts: 10,011 Major grins
    edited September 14, 2013
    See if this works for you.
    You could add this to your caption.


    caption wording here


    Reference:(Filename)



    and add this in the "all galleries" CSS

    .noShowGallery {display:none;}
    .sm-lightbox-caption .noShowGallery {display:block;}
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    JohnwdJohnwd Registered Users Posts: 33 Big grins
    edited September 14, 2013
    Allen wrote: »
    See if this works for you.
    You could add this to your caption.

    <html>
    caption wording here <br />
    <div class="noShowGallery">
    <span style="color:xxxxxx; font-size: 140%;">Reference:(Filename) </span>
    </div>
    </html>

    and add this in the "all galleries" CSS

    .noShowGallery {display:none;}
    .sm-lightbox-caption .noShowGallery {display:block;}

    Hi Allen,

    Many thanks for your input, but I could not get this code to work, other that on top left corner on image it get the text i entered :(

    I have seen ccs code to center the caption for an image I simply trying to make it easier for clients
    to let me know the images they require.

    At the moment it on the very bottom left of lightbox and the text is way to small.

    Many thanks for taking the to help me

    John
  • Options
    AllenAllen Registered Users Posts: 10,011 Major grins
    edited September 14, 2013
    Johnwd wrote: »
    Hi Allen,

    Many thanks for your input, but I could not get this code to work, other that on top left corner on image it get the text i entered :(

    I have seen ccs code to center the caption for an image I simply trying to make it easier for clients
    to let me know the images they require.

    At the moment it on the very bottom left of lightbox and the text is way to small.

    Many thanks for taking the to help me

    John
    This in the NewSmug? Have you unveiled? Got a link to the photo you tried this on?

    I got it to work here for the lightbox caption. What I don't understand is my lightbox already has the filename on it.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    JohnwdJohnwd Registered Users Posts: 33 Big grins
    edited September 14, 2013
    Allen wrote: »
    This in the NewSmug? Have you unveiled? Got a link to the photo you tried this on?

    I got it to work here for the lightbox caption. What I don't understand is my lightbox already has the filename on it.

    Hi

    Yes site is up and running live :)

    Here is a link to a page to show you

    http://www.jdphoto.biz/Clients/Ann-Cassidy2/Ann-Cassidy/i-NFjh6qF/A

    Its not caption I am trying to centralise just the file name
  • Options
    AllenAllen Registered Users Posts: 10,011 Major grins
    edited September 14, 2013
    I'm assuming the AC-xx is the filename.

    Does this work in your caption? I see no photo info icon in lightbox or gallery?


    Reference:(AC-02)
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    JohnwdJohnwd Registered Users Posts: 33 Big grins
    edited September 14, 2013
    Allen wrote: »
    I'm assuming the AC-xx is the filename.

    Does this work in your caption? I see no photo info icon in lightbox or gallery?

    <html>
    <span style="text-align:right; font-size: 140%;">Reference:(AC-02) </span>
    </html>

    Hi Allen,

    I think i have totally confused you, your html code simple posted the one file name in a gallery.

    Ok lets see if i can explain it better, ok when you visited the lightbox from the link i gave you you can see the file name on the bottom left of the images.

    I am trying to get that file name displayed centrally below the image and in a large font size

    I do appreciate you time in trying to help
Sign In or Register to comment.