Options

CSS code to make the text box slightly opaque?

OcamrzrOcamrzr Registered Users Posts: 7 Beginner grinner
edited September 5, 2013 in SmugMug Customization
Here is my site www.thelazygoan.com
As you can see the text on there,especially the logo and my name under it seem to be a lost on the white track lines,was wondering if there is any way to change that,without changing my background image.
Perhaps giving the text box a opaque background, or will that make it look a bit out of place as it would look like a opaque square in the middle of the page ?or perhaps may be change the colour combination and use some other colour text instead of white?

Any suggestions would be much appreciated.

Comments

  • Options
    The MechanicThe Mechanic Registered Users Posts: 197 Major grins
    edited September 4, 2013
    Hello,

    You can change the background color and opacity by adding the following CSS code to a CSS Block for the areas you want to affect, it looks like in this case, the Homepage Only. Please know you will need to do some work on the container size to make this look correct or use an HTML block to create your own customization for the logo and text.

    Here is an example CSS code, this will need to be altered to your liking:

    .sm-page-widget-logo-text {
    background-color: rgba(175, 0, 190, 0.6);
    padding: 20px;
    }

    .sm-page-widget-logo-subtext {
    background-color: rgba(175, 0, 190, 0.6);
    padding: 20px;
    }

    I hope this will help you to get started.
  • Options
    OcamrzrOcamrzr Registered Users Posts: 7 Beginner grinner
    edited September 5, 2013
    Hello,

    You can change the background color and opacity by adding the following CSS code to a CSS Block for the areas you want to affect, it looks like in this case, the Homepage Only. Please know you will need to do some work on the container size to make this look correct or use an HTML block to create your own customization for the logo and text.

    Here is an example CSS code, this will need to be altered to your liking:

    .sm-page-widget-logo-text {
    background-color: rgba(175, 0, 190, 0.6);
    padding: 20px;
    }

    .sm-page-widget-logo-subtext {
    background-color: rgba(175, 0, 190, 0.6);
    padding: 20px;
    }

    I hope this will help you to get started.

    Thanks for the help,will see what I can do with it and post a update soon :)
Sign In or Register to comment.