5 replies to this topic

[ryanjohnjackson]

How can I make the canvas/content area partially transparent?
example:


Thanks

[ryanjohnjackson]

I tried the way that this theme's style sheet has but nothing changed.

[Rob]

I thought I had replied to this before, but evidently it didn't process. Let me try once more. I've seen this done, but it takes some coding, all of which is unnecessary. Simply use your graphics editor. Get the image you want as the lower of the two and make a copy. Work with that. Set your graphics editor to apply a new layer at 40% transparency, then draw a filled rectangle to exactly where you want it on the image. That will create that 'glaze' look. You may want to try it several times with percentages ranging from 20% to 80% to get just the effect you wish. Save the file but don't merge or flatten it. Don't close it either. Make a copy. With the copy, flatten/merge the layers once you're satisfied with the transparency. Upload the image as a background and check to see if the canvas area (the glazed bit) is where you want it. If not, simply adjust the layer you created by highlighting the entire area and sliding it over here or there to where it would be best. Repeat the copying, flattening and upload till you get it just right. Shouldn't take more than 20 minutes, max. The benefit of this is saving the hours of coding plus the fact that browsers will have to load 2 backgrounds the other way, slowing your site.

[ryanjohnjackson]

Rangelone, You had answered me on the glare area but I thought it was correct for me to post this separately since it delt with a different "layer". I posted both questions as the same time. My issue with that is doesn't that require me to have this image at like 2000+ px size in order to cover every screen rez? The patterned background is a texture similar to old books which I want to be clear. If I do that in pattern it looks great. If I were to do it huge I'd have to really compress it and lose detail correct? I have the css for this I just don't fully understand how the "IDs" and such work in pagelines yet. I wish there were a spreadsheet listing each id name, and what area it controls. I know I can go into the main css sheet but I am pretty new to css and so far only 1 out of 20 things I try to change actually changes anything. Learning curve for me.

[kastelic]

Can we see a link to your site? The reason being that the id's can change based on the layout you have chosen. If you want to find the correct id's, install Google Chrome. It comes with a web inspector that lets you right-click and "inspect' elements in the page, laying them out in a nice way with collapsibility.

[ryanjohnjackson]

Kastelic, (and Rangelone) Thanks for the chrome tip. I used it when it first came out but hated its plugin management. Though it seems like a good choice for dev from what you're saying. As for my sites, I'm giving up on doing that layout for now kinda worried about page load times. We're going to convert our 15yr old library website over to wordpress/platform pro. I have to figure everything out and I'm throwing almost all my own time into it. I'm also working on a site for my complex, my brother's business, and a librarian organization for free to get me up to speed.