Looking for a semi transparent background color

J_deitschJ_deitsch Registered Users Posts: 11 Big grins

I have been tweaking things on my smugmug site recent. I have done a good bit of editing lately and even been working on html, which i really know nothing about. I have redone my Bio page, and like the layout as of right now. The only problem i am having is, I would like a semi-transparent background like the one on my left sidebar. I just don't know where to enter this in, or even how to do it. Any help would be greatly appreciated.
www.jamesdeitschphotography.com/Pages/About-Me

Also any critiques or thoughts would be appreciated. I have gotten several of the ideas I like from leftquark's site. I really like the layout and design, but I do not want it to be a direct copy or anything.

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    Since you are using inline styles <div style="float:left; border: 1px solid #a60e0e; width:950px; padding-left:30px; padding-right:20px; margin-top:15px; margin-right:75px; padding-bottom:25px; padding-top: 15px; border-radius: 8px;"> just add this to that line:

    background: rgba( 0, 0, 0, .5 );

    adjust the .5 to 0 to 1; 0 being transparent and 1 is solid.

  • J_deitschJ_deitsch Registered Users Posts: 11 Big grins

    Thanks again Mike. I had a feeling I would need to add something about the background in there. I just didn't have a clue how to go about it. Thanks again for the quick response.

  • denisegoldbergdenisegoldberg Administrators Posts: 14,372 moderator

    @J_deitsch said:
    www.jamesdeitschphotography.com/Pages/About-Me

    Are you aware that your About Me text is so wide that sideways scrolling is needed unless you are using a very wide browser window? Although I have a large screen I normally do not have browser windows open to full width.

    Take a look at your page on different sized monitors - including tablets and phones. A good tool to look at your site on different device sizes is quirktools.com/screenfly.

  • J_deitschJ_deitsch Registered Users Posts: 11 Big grins

    @denisegoldberg said:

    @J_deitsch said:
    www.jamesdeitschphotography.com/Pages/About-Me

    Are you aware that your About Me text is so wide that sideways scrolling is needed unless you are using a very wide browser window? Although I have a large screen I normally do not have browser windows open to full width.

    Take a look at your page on different sized monitors - including tablets and phones. A good tool to look at your site on different device sizes is quirktools.com/screenfly.

    Thank you Denise. I was not aware until later when I looked at the page on my phone. After seeing it on mobile I thought maybe I needed to just make a mobile version. I will now look into adjusting the page to look correctly on differnt monitors. Do you have any suggestions to a fix for this?

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
  • J_deitschJ_deitsch Registered Users Posts: 11 Big grins

    I changed it to width: auto. It now fits on the screen on my phone. Its a little smaller than the main menu, but it is something I can live with. Maybe it will look better on other monitors as well. I can always adjust picture sizes and locations if that causes a problem. Thanks again.

  • denisegoldbergdenisegoldberg Administrators Posts: 14,372 moderator

    @J_deitsch said:
    I changed it to width: auto. It now fits on the screen on my phone. Its a little smaller than the main menu, but it is something I can live with. Maybe it will look better on other monitors as well. I can always adjust picture sizes and locations if that causes a problem. Thanks again.

    That's much better.

    You might want to increase the size of the font you are using. I find the tiny font and the gray text against black background to be very uncomfortable to read. Check with some of your viewers for their impressions.

    Also - you are currently allowing access to your Original images. I know, you have right click message turned on - but if someone wants a copy of the image it can easily be grabbed from the browser cache. Simply select the original, then go to a new tab and open the cache. Find the url, open it, save it locally. You should think about the size of image you are comfortable with displaying online and set your max image size. You can change that in gallery settings for a single gallery or you can go into the organizer, select multiple galleries, open settings to change for multiple galleries at once.

  • J_deitschJ_deitsch Registered Users Posts: 11 Big grins

    Thank you for your feedback Denise. I guess I never really thought about someone grabbing images from the cache. That gives me something else to look into. I will also look into the font size. I really do appreciate the feedback.

Sign In or Register to comment.