CSS Help

[moondragon]

I'm not sure if this is the right place to post this, so if it isn't, feel free to move/lock this.

I've been experimenting with CSS since I fist joined magistream, and recently I've been experimenting with opacity and transparent stuff. I have been working with Rosehill's base code from the Starry Starry night theme, because I liked the layers.
This is the code I started with.

Code: Select all

/* Magistream Custom Profile CSS "Starry Starry Night" by Rosehill 2013-01-19 */

body
{
background-color: #01081a;
background-image: url(http://i793.photobucket.com/albums/yy217/jrosehill/artthread/bg5.png);
background-repeat: repeat;
background-attachment: fixed;
color: #010a1e;
padding-top: 10px !important;
}

#wrap
{
background-color: rgba(30,201,255,0.1);
border: 2px solid #00bffb;
border-color: rgba(0,191,251,0.3);
padding-top: 20px !important;
-moz-border-radius: 35px;
-webkit-border-radius: 35px;
border-radius: 35px;
}

#page-body
{
background-color: transparent;
}

.headerbar img, .header_nav img
{
opacity: 0.0;
}

.headerbar img
{
height: 250px;
width: 850px;
}

.header_nav
{
margin-top: -50px;
}

.icon-gold img
{
opacity: 1;
}

.headerbar
{
background-image: url(http://i793.photobucket.com/albums/yy217/jrosehill/artthread/msheader5.png) !important;
background-repeat: no-repeat !important;
background-color: transparent !important;
height: 250px !important;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

.bg2, .bg1, .navbar
{
background-color: rgba(0,102,134,0.7);
background-image: none;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

#page-header .navbar
{
margin-bottom: 10px;
}

a:link
{
color: #0080ff !important;
border-bottom: none !important;
text-decoration: underline;
}

a:visited
{
color: #052f4a !important;
border-bottom: none !important;
text-decoration: underline;
font-style: italic;
}

a:hover
{
background-color: transparent !important;
color: #012976 !important;
border-bottom: none !important;
text-decoration: none;
}

a.button2:hover, input.button2:hover
{
color: #0060ff !important;
border: 1px solid #0060ff;
}

input.button2
{
background-image: none;
color: #010a1e;
border-color: #010a1e;
background-color: #012976;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}

h3
{
background-image: none;
color: #010a1e;
border-bottom: 1px solid #010a1e;
}

ul.navlinks, .custom_css_rank
{
border-bottom-color: #010a1e;
}

.custom_css_location, .custom_css_age, .custom_css_Gender, .custom_css_joined, .custom_css_lastvisit, .custom_css_totalposts, .custom_css_interests, .content, .custom_css_occupation, dd, dt
{
color: #010a1e !important;
}

dt
{
font-weight: bold;
}

.spoiler .inner
{
background-color: rgba(56,109,169,0.4);
border: 1px solid #012976 !important;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}

.codebox, blockquote
{
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}

.signature
{
max-height: 100%;
}

.copyright, .copyright a
{
color: #00bffb !important;
font-size: 90%;
}

.border-bottom, a.fontsize, .jumpbox, h2
{
display: none;
}

.icon-ucp, .icon-logout, .leftside icon-home, .icon-home, .border-right, .border-left, .border-top, .border-top-left, .border-top-right, span
{
background-image: none !important;
}

I am looking at this section of the CSS specfically.

Code: Select all

.bg2, .bg1, .navbar
{
background-color: rgba(0,102,134,0.7);
background-image: none;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

Now, in mine, I've changed it to this, making the boxes solid blue. You can see what I have so far on my profile right now.

Code: Select all

.bg2, .bg1, .navbar
{
background-color: #7FD1EA;
background-image: none;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

Now, my question is, how do I change the opacity of that blue, so that it is half transparent like it is in Rosehill's original, but the shade of blue I've changed it to?
Or in other words, how do I give my blue color an opacity of .7 instead of the default 1? I want to incorporate it into the rgba code.

Sorry if this is confusing, I could try to elaborate if you need, and thanks to anyone that reads it and tries to help

[Pok]

Lazy way out:

Code: Select all

opacity: 0.7;

By adding it in, this will set the opacity of EVERYTHING to 0.7.

Slightly more complicated, works better, equally lazy way out:
RGBA from here
This website can convert HEX to RGBA, complete with the opacity bits, so just use this in your background-color CSS thingthing.

Code: Select all

rgba(127, 209, 234, 0.7)

I hope this helps ^^

[moondragon]

Lazy way out:

Code: Select all

opacity: 0.7;

By adding it in, this will set the opacity of EVERYTHING to 0.7.

Slightly more complicated, works better, equally lazy way out:
RGBA from here
This website can convert HEX to RGBA, complete with the opacity bits, so just use this in your background-color CSS thingthing.

Code: Select all

rgba(127, 209, 234, 0.7)

I hope this helps ^^

Yes, it's perfect Thank you so much, I really appreciate it! I figured it had something to do with those front numbers, but I'm not very good at coding