Code to make page backgrounds, extra content backgrounds transparent


(Ann Doneen) #1

Does anyone know how to make page backgrounds, and extra content backgrounds transparent. I really need to do this even though the theme I’m using doesn’t feature it. I think it can be done by putting code in the proper sections, but I don’t know either. Using Gamma theme by Multi plus various plug-ins. But the background for Page 1 and for ExtraContent 3, I think, need to be clear.


(Will Woodgate) #2

I don’t have access to the Gamma theme and can’t see a free demo version for it. But the normal procedure would be to use custom CSS code (entered in either the sitewide or page inspector Custom CSS boxes) combined with a background property and RGBa:

#extraContainer3 {
background: rgba(0, 0, 0, 0.70);
}

You can use an online generator like this, to preview and get the RGBa colour value:
http://www.cssportal.com/css3-rgba-generator/

Although an ‘opacity’ property exists for CSS, the problem with this is that it changes the transparency of ALL elements - including text and images - not just the background. So for a page background or ExtraContent container, I think you would be better to use RGBa.


(Ann Doneen) #4

Thank you so much, Will. I will try that and see if it works. It was so nice of you even to consider trying to look at the free demo version!!! Since I know next to nothing about code, I will follow your model. Of course I do know the dif between RGB and CMYK, etc., but am not sure what you mean by getting the RGBa color value. Does the “a” after the RGB stands for “clear”? And no, I don’t want to affect all containers, just the page background one on the cover. I doubt I will EVER use another ExtraContent container on this entire site, though, so it would be okay to use it for the ExtraContent3 if the RGBa solution doesn’t work. I’ll report back and let you know how it goes. I am so so so very happy that it looks like there will be a way to make this happen! This is wonderful news! Thank you!


(Ann Doneen) #5

Hey, Steve – I appreciate your chiming in, too! I do not know if I can add @tav SectionPro stack to themed project extra content zones. I don’t think I’ve ever tried to add any stacks to an EC zone. I can try to add one to an ec zone – and see if it works. If it takes, say, the “production” stack, or a photo stack, maybe it would take the @tavs SectionPro stack. I am not familiar with the @tavs Section Pro stack, but I will assume that it makes its background transparent. What does the @tavs stand for?
This sounds like a pretty simple solution if all that is required is to purchase the SectionPro stack. Then I would never have to worry about turning anything clear again and could use it anywhere. I would think that this would be a grand solution because there are all kinds of extra content that could be used creatively with this concept. It opens up all kinds of creative possibilities! Wonderful idea. Thank you. I just need more info so will look for the SectionPro stack in the RapidWeaver stores.


(Ann Doneen) #7

I decided to try all your suggestions one at a time. I started with Will’s. Maybe I’m doing something wrong, Will, but I tried what you suggested, and it didn’t work. Maybe I’m entering the CSS code in the wrong place. I copied what you suggested and put it here. In the bottom image you will see why I need the content boxes to be clear.

This is why I need it:

You can see the faint line separating Extra Content 3 from the page background (which needs to be clear, also as the sky has a gradient in it and I don’t want to have to match that and transfer it into the page background as a “color.” Then also, there is a color differentiation between the EC3 and the photo. If I could just LOSE the EC3 altogether, I’d prefer that. I will try the next idea now, but maybe, Will, I’m doing something wrong so will come back to it if so.

I also tried it using the words “extracontent3” and I tried it with other numbers, too, in case I was confused on exactly WHICH extra content it was.

Don’t know why the letters and first 0 turned to the color magenta.

By the way, that CSS color code generator is VERY COOL!


(Ann Doneen) #8

Good question as to whether these SectionPro stacks apply to extra content areas, but – I guess – if you’re using a Foundation theme that’s a moot point since you can create whatever you want without any constraints, apparently.

I looked through Foundation and also SectionPro… I have a busy day today and have to get going on other things, but have been sitting here with my jaw dropped down to my chest on some of the remarkable things that seem possible. So then, Section Pro is free, but the stacks that are used with it are not? Not everything is entirely clear to me. And SectionPro CAN be used with an existing theme? Or, do you have to use it ONLY with Foundation? If this takes off, Joe Workman his himself quite a good deal here . . . when appealing to folks like me. It would probably be easier for someone like me to just go back to school and learn code, but once you’re busy with your life that’s not so easy. You teach yourself a lot and pick up info wherever you can.

What does the “@tavs” term that you used above mean? I would want to be sure that if I got this SectionPro stack, I’d know what other stack to use with it so that I could make clear containers for text or graphics. And want to know if that’s even possible. I don’t want to end up on a buying spree gettin one thing after another in search of flexibility only to find out I’m getting things that don’t work here.

Seems like some code might do the job as easily, so I’m hoping either Will or one of you knows how to tell RW to make a background container or an EC container clear. Some of these themes – as I"m sure you know – have the capacity to do these things (for example, the new thing is to create a wonderful theme that relies heavily on a background image, but then you have to search for instructions on how to customize the background image – because that’s really what it’s all about, not matter how pretty the standardized shots or graphic patterns might be. When I looked at this theme (Gamma), I actually thought I could make the text containers clear. Not sure why.

The Foundations/Sections Pro options sound wonderful – but, as you say – they’re heavy and involve a learning curve, and I’ve done a lot of heavy learning here over the past six weeks, as it is. Not that I mind it… I like it, but it sure slows things down to do that, and when you’re swamped with other life commitments, it robs you of the rest of your life.

Anyway, hoping that Will will be back soon to comment on whether I made a mistake putting in the code he gave me.

I would like to try Foundation. When I first got hooked on doing RW websites I found an open-ended theme like that . . . . in fact, maybe I’ll see if I still have it. But, I’m not sure that it gives you clear text windows. You can just move sections all around at will.

The very first website I ever did – back in the iWeb days – did have the open structure so you could put anything on top of anything else. That was fabulous. I miss that so much. Too bad that folded because I managed to push it way beyond its original intent. It was so simple but so flexible.


(Lisa Sandler) #9

@tav is the developer of Section Pro. His name is Andrew Tavernor. He is tagged so that he knows his products are being talked about. Usually when you see the @, it’s to tag someone here in the forum.

I just started with it, and Foundation as well… still learning. It’s really overwhelming, for sure.

and I started with iWeb as well :slight_smile:


(Ann Doneen) #10

Thanks, LIsa. I love knowing all these things. This is a great group and I’m lucky I finally decided to try it. I honestly didn’t believe people could be so generous with their time and help and thought it would take forever to get answers to my issues. Appreciate the information.


(Andrew Tavernor) #11

Lots of points in your post which I will try to address but first the best advice anyone can give if you need help with any sort of problem/enhancement to a page is to publish it and provide a url with your question. This can be a hidden page on your site or a test domain. This way people can see the specific elements involved and likely provide you with a definitive answer.

In the case of your extra content area, you do not need to use a stack.

As @willwood suggested a simple line of CSS is most likely the solution. Without being able to see your page though, everyone is guessing to some degree. For example it may be that you have erroneously added a colour somewhere or indeed that the theme is adding it. Whichever the case, seeing the actual page will make a solution quick and easy for people to provide.

Regarding SectionsPro, it will work in any theme does not require Foundation although lots of people use the two together.

The decision to use a “freeform” theme and associated stacks (like Foundation, Foundry, UIKit etc) is one that many people take when they feel that they no longer want to be constrained by the impositions of a regular theme and design everything themselves. As you say, this does involve more of a learning curve but allows a lot more freedom.

Only you can decide whether this is right for you and your site(s) and of course, properly researching the options is the best course of action. There is no best way to do things except the way that best fits your requirements.


(Ann Doneen) #12

Cannot tell you how grateful I am for your thoughtful advice. I will publish it, then.
I have taught myself a lot of things so far with RapidWeaver, so I plan to experiment with SectionsPro, but for now the most expedient thing is probably to add the code properly.

Can’t do that today as houseguests will be over soon until Wednesday, but as soon as I get free I will do that.

Overcome with gratitude here. What a fabulous community this is!!! So many experts willing to help! Just amazing.


(Ann Doneen) #13

OKAY – After some hassles getting this dummy/display site published, it finally is up. Keep in mind this is NOTHING like it eventually will look, but just a sampling of styles for the board to consider. They are not computer savvy and very – uh – “detail conscious” and that is why I am giving them so many choices and giving them such a free reign in helping me make most decisions as we go. Some members are very “old-fashioned” and classical in their approach. Others want nothing but clean modern lines. So, they have a little of each to choose from and the choice will be theirs.

But I STILL WANT TO KNOW HOW TO TURN THOSE TEXT BLOCKS INTO TRANSPARENT BLOCKS because I really like Multi’s Gamma theme and want to use it. I predict they will pick that theme and if they don’t there is another website I’m doing where I’ll be using it, for sure. And it is coming fast on the heels of this one.

So, I really would appreciate all the help I can get! Thank you so much! The site is at: MalibuTownshipCouncil.org.

Also, we probably will end up dropping the old ship as our logo unless we pick a classical style. Even then, it’s too complex, I think. Have to show them how it looks on the pages, though. Would include some without knocked-out backgrounds… or could simplify the design of the ship itself. However, it also would be really wonderful to be able to have the option to kill the logo but I don’t think there’s an option to do that whether I am or am not relying on Master Page styles. Even if I’m using most of the master page styles but NOT relying on them (I have unchecked that box) I don’t see an option on any of the menus NOT to use the logo. And if I just don’t include a logo on the master styles page, then it doesn’t get included anywhere that I am using master styles. So, my master page would be without it and I’d have to drop it into pages that were NOT master style pages. But I don’t know how to do that. Best to include it on the master style page and override it on the subsidiary pages. NO??? Thanks!


(Jason Bostick) #14

I don’t have the Gamma theme but there must be a way to get those boxes transparent. If you look in the browser inspector, it is easily done. CSS edits are not my speciality however. Will’s original suggestion should be close, it’d just be a matter of changing the class name I think??

On a side note, if you think the audience/client is going to be very picky, it might be worth switching to a free-form theme now. You could use Gamma as the ‘inspiration’ to try and design to, which would at least give you direction…


(scott williams) #15

@jabostick is correct, you can do it by over-riding the CSS but you need to set the background-color: rgba(0,0,0,0) (or whatever tint you want, not just color:…

He also gave you some good advice about using a freeform theme, if you have a picky client, it may be the only way to get exactly what you want.


(Ann Doneen) #16

OH!!! That is SO exiting!!!
Thank you so much. I am going to try that.
(How did you DO that without the software? Magic! I love it!!!)

Thanks, Scott and Jason . . . I will remove the ship from the text part because the way I originally placed it (to the left of the text), no longer is necessary. Under the menu will be fine… Unfortunately, the slogan still is covered with the tinted area, but is low enough that it does not appear to be cut off, anyway, as it did in the original. Is there any way I can get that body text section to drop down a little lower so that it does not butt up against the title and cover the slogan? Maybe add some padding to the bottom of the title and slogan? How would I do that???

I see all of the code that you wrote in the image above. Where to I put that in my RW theme edit section? I know I seem completely ignorant and dumb, but RapidWeaver is a good place for computer-ignorant people who are good at design to LEARN these things! I used to lay out pages and write for magazines and newspapers – back in the day. But, times have changed. Ya gotta adapt. But as you move forward in life, the opportunities to do that seem to dwindle, so RW is perfect and this community of helpers is THE VERY BEST!!!

I do have Foundation, also, but am not sure my knowledge still is insufficient to handle it before this deadline presentation. I could drop in text or graphics stacks, but still wouldn’t know how to make them transparent and how to layer them. There probably is a course that comes with Foundation online somewhere. I will watch it after tonight’s presentation if I can find one. Once I finish this presentation, I will have more time to play with this and see if I can improve on it. (All my “jobs” are “free” right now – hoping to get good enough to be able to charge soon . . . and have NO idea what the going rate would be for that, even. I just know I love doing this and it would be so great to get paid something. But I have to be able to deliver swiftly and have to know enough that I’m not going to hold things up for clients… When you do it free of charge, they cannot complain. . . and these are nonprofits, so they are ever so grateful for whatever you do, particularly if it looks really great.)

I ALSO need to get rid of that EXTRACONTENT section – the opaque section on the bottom there…… do you see it? Gamma doesn’t seem to have an option that allows me to just drop that ExtraContent2 and Footer section. Do either of you know? Or should I start a new thread? Just want to get rid of it completely.

Again! So grateful! Thank you so very much!!!


(Jason Bostick) #17

It looks like that Extra Content area 3 should be able to be hidden in the settings (just going off of the product page, as I don’t have this theme). http://www.multithemes.com/examples/gamma/features/


(Ann Doneen) #18

I know!! But I couldn’t find it there – (Extra Content and Footer Section) – I just revised the post above with the correct information and our posts crossed in transmission.
I cannot imagine why we don’t have that option. That’s a great ad link that you gave me. I wish I knew how to do half the things it says can be done. So, where’s the manual that shows you how to do those things? I see that there ARE colors choices on the page inspector menus, but nothing for “no color.” While I can click various choices on those menus, judging from the ad you sent there are many more things that can be done. I don’t know how to get the manual. Maybe it would explain. Wonder if I need to buy it separately. I don’t think it said what to do when I bought it. . . of course I would expect a manual to come with the product, but some of these software products are too subtle and not very “in your face” when they sell you things. My background is not in websites, but in writing and layout – the OLD way. Trying to update myself here, but it seems like so many instructions and manuals are written for people who already know these things or take them for granted. I feel so stupid having to ask, “How do I get the manual?” I guess it’s a small price to pay for living and being productive at my age, but for clueless nongeeks like me, it would be so nice if things were spelled out in the metaphorical “large capital letters.” I can learn this, but have to know where to look. (Now tell me that it is really obvious somewhere and I’ll eat my words.) The other aspect is that – by necessity – I’m always doing way too many things at once. I just don’t know where to poke around to find these things.


(Jason Bostick) #19

I am not at my RW computer to show you screenshots but, when you click on a color to change it, you should also see a slider that is at 100 as a default - this is your transparency. So to have it like in my screenshot above, you’d set it to about 70%. To have it 'invisible, set it to 0. That won’t hide it, per se, as the space it occupies will still be there. But it’ll be transparent… (Apologies if you’ve tried this already).

I’m guessing the theme does not have a manual. Some developers have manuals, some have an FAQ, and some just have their support email. You can try emailing specific questions, or perhaps @MultiThemes can chime in.

Whenever you have some time (and if you plan on building sites with some regularity), I think it’d be worth the investment to get a month or two pass at www.rapidweaverclassroom.com and go through the tutorials there. They’re really well done, step-by-step, and has a ton of different topics / plugins, etc. I found it helpful anyway…


(Ann Doneen) #20

Thank you. I do plan to view additional RW training videos. I have subscribed to some – learned the “beginning” ones some years ago and progressed to the intermediate ones, but apparently what I want/need to do now is going beyond that level. I just got myself involved with some projects and my desire to do things exceeded my ability level.

I did try the color slider set at Zero for transparent. But it just turned everything opaque white. That was for the text stacks that I had dropped into the plug-in or stacks page.

I wonder if there are TRANSPARENT text stacks. Must be some somewhere. That would probably solve the problem for now

I just ordered the Foundation training package, but wanted a quick fix for tonight. WE’ll see what happens. I have another hour or so to play with this and then need to do some other work today… You are great and thank you for contributing your time to this “worthy cause” here in Malibu . . . Preserving open space and keeping this small rural coastal community from being overrun by big buildings, traffic, shopping malls, and other obnoxious forms of development will be appreciated for years to come by people who want to relax and get away from it all!

BY THE WAY – MAYBE YOU MISSED IT ABOVE – BUT WHERE DO YOU INSERT ALL THAT GREAT CODE THAT YOU SHOWED ME ABOVE? I WOULD LIKE TO TRY IT.


(Jason Bostick) #21

That is done by viewing the Developer Tools in your browser. Each browser is a tiny bit different but if you right-click on something, click ‘Inspect’, you can view those. None of the changes you make will save, it’s just for testing/previewing purposes, but you can play around with the settings.

Unfortunately, I don’t quite have the knowledge/skills to turn my screenshot into CSS code, but it does help me better understand how my site is designed or other troubleshooting.

As for the other settings, it’s tough to say without knowing the theme / options - just a bit of a stab in the dark for me, unfortunately.


(scott williams) #22

Depending if you want it to be for the entire site or just a single page, the code goes either in the CSS section of the page or site-wide CSS.