Thanks, Jason . . . I’ll try that.
Thanks Scott . . . going to do that now to see what happens!
Found some transparent stacks earlier – for $10 – which I thought was an okay gamble for tonight. It didn’t work, though, because I couldn’t figure out 1) how to layer it with text, and 2) How to get rid of the page background and the ExtraContent2, both of which are opaque.
Looks like after tonight I am going to be in heavy tutorial mode with Foundation. I hope I can learn it quickly enough to do this design because this is the design that I want, and I love that you can scroll down the page and have the type scroll over the background.
The text container does NOT have to be totally clear. It should have SOME oyster- or cream-color in it to fade back the photo so you can read the text. It should be translucent, not totally clear, but usually when you get something that promises transparency, there are degrees of transparency and you can select whatever color you want to see through. I thought you could do that with Gamma, which is why I got it. But not in this text box! Darn. You lay the shading over the whole photo – but you cannot control the degree of shading. You can either do it in about 60 or 70 percent over the WHOLE background photo, or not at all. And in black or white. And I want it ONLY over the part that will be text so that viewers can always see our beautiful coastline. There are other features where you can use the bright red, or bright blue or bright green . . . none of which are appropriate for this site.
When I posted this earlier, TAV was among those who wanted to see it online, so I hope maybe he might come back and tell me what he had in mind when he looked at it the first time.
I looked at the code, Jason, with the idea of finding the place where you inserted those instructions. . . . but I don’t have time to figure it all out right now. That you were able to do that in your BROWSER by viewing Developer Tools is something I’ve never done so I don’t even know where to begin with that. If you could refer me to a specific instruction for that I would be so happy! Thanks!
What is your URL?
This thread is large and I didn’t spot it.
Are you changing this? Look at once and it was one way now it is different. Looks like you have added something with an opacity setting. looks like there is no longer a sky behind the writing.
might set everything back and try:
#content {
background-color: rgba(0, 0, 0, 0.0);
}
Hard to tell since things have changed.
Oh . . . well . . . . I can go back to the initial settings if you like. I am trying many things to see if I can make the text container (page background and Extra Content 2) transparent. I’m always changing things, but not significantly. Those two devices (text container stack on page background and Extra Content 2/Footer) are still there. But I was just playing with their color a little since I cannot make them transparent. I do want there to be a sky behind the writing.
For your instructions: (The screen-grab) Should I assume that I should put thiis code into the CSS box for Page 1?
I will try that now.
thank you.
The result is above. There is the page background, which should be transparent, and then there is a Production stack, into which I have inserted a text stack. I went to the stacks inspector and – since I could not get anything to be transparent – I colored them to match the sky on top. The Extra Content 2/footer section below that was colored to match the portion of the sky that was behind the hills and matching the horizon. And yes, I altered the photo a bit – I could bring back the all-blue sky since I still have the art for it, but my aim is to get a transparent text container so that this appears to be letters over the sky and showing the full gradient of the sky.
I don’t think that those instructions worked . . . maybe I did something wrong. I included the stacks inspector at right.
Hi @Seajoule
you can add opacy = 0 to the background and also the the white sharing
the DIV is #extraContainer3box_color + #shading
put this cose in the sidebar HTMLcode/CSS
/* remove flat color */
#extraContainer3box_color{
opacity: 0;
border-top-width: 0px;
border-top-style: none;
}
/* remove gradient */
#shading {
background-image: none !important;
}
if you need help drop me email
infoATmultithemes.com
hope this helps
thanks @jabostick @tav @swilliam
2 Likes
@Seajoule maybe we could add this feature in a new update, as a further option.
The EX 3 without background is nice.
1 Like
I am sorry but I seem to have confused some of you because I, myself, was confused by some of Gamma’s features. Because apparently there is no manual to go with this theme (that is somewhat complex for a virtually self-taught person like me) you have to click on all the features to determine what they are. I use the make-it-an-obnoxious-bright color-and-then-click-on-it-to-see-where-it-is-and-what-it does method to see where all the extra content features are. In Gamma there are four extra content locations. And I got them mixed up.
ExtraContent 3 is merely the “open” button which is under the name of the site. That is not the one that I wanted to be transparent. I wanted the main page text container to be transparent and also ExtraContent 2, which also, apparently is the footer as it shows up in the inspector as ExtraContent 2/Footer. Either that, or I wanted to HIDE IT ALL TOGETHER. But it does NOT hide. So, if you put a hide feature on that one, that would be lovely!
I do love to be able to scroll the text over the background photo. However, when the page is made narrower, or viewed on smaller devices, the main page text section (unless it is transparent) cuts off the bottom of the slogan. And so many people view these sites on their phones that it apparently is impossible to avoid that unless the text section is transparent or clear.
At any rate, most of this is moot for me at this point. I intend to learn Foundation and already have the training materials. This option was facilitated at the board meeting last night – which went really well – and, as it turned out, members preferred a completely different cover page photo anyway, one that does not lend itself to the scrolling the scrolling text feature. So the problem is solved and I’ll be using a different theme for the cover page. Also will be tutoring myself by using many of the RapidWeaver and Foundation videos that are available to me and which many of you recommended I do. Now that I have gotten past last night’s board meeting, there will be a bit of time to learn more! And I will do that.
Thanks very much to all who spent their valuable time trying to help me through this. Maybe some day I’ll be able to return the favor in one way or another. . . or – ha, ha – it will come back to you through “universal energy.” 
Again, many thanks to all!
Ann, check you mail with the new code
In CSS, the !important means that “this is important”, ignore all the subsequent rules, and apply !important rule and the !important keyword must be placed at the end of the line, immediately before the semicolon. Defining a rule with the !important ‘attribute’ (?) discards the normal concerns as regards the ‘later’ rule overriding the ‘earlier’ ones.
In CSS, there is no property such as transparancy. But, you can achieve transparancy by inserting a pseudo element with regular opacity the exact size of the element behind it. The CSS3 property for transparent is opacity and it is a part of the W3C CSS3 recommendation.
div
{
opacity: 0.6;
}
The opacity-level describes the transparency-level, it ranges from 0.0 to 1.0. The level 0.0 is completely transparent, 0.5 is 50% see-through and level 1.0 is not transparent. Opacity has a default initial value of 1 (100% opaque).
You’re replying to a post over 2 years old.