Hi everyone!
Looking for a better solution to my current wordpress page project.
I have started with an artisteer template that i've built myself.
The page has a vertical menu in a block on the left side - pretty uncomplicated.
The problems begin in the main article/page area. I want to have a per-page changeable background image (solved with plugin "Custom Post Background"). On top of the background I want three templates that each have different sized semi-transparent layers that contain all text on the page (one with a column like area, one that covers most of the background image - and one that is suitable for image gallery on top of the semitransparent area (which in turn lies on top of the background)).
At the moment I am struggling with creating and controlling the semi-transparent areas with some divs I have added to the style.css.
div.backgroundtransp
{
width:100%;
height:630px;
}
div.transbox
{
width:210px;
height:630px;
margin-top:-40px;
background-color:#000000;
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
One of the problems with this solution is that the end-user of the site cannot handle html at all - so I've been trying to create different templates but that doesn't seem to work since the divs need to be in the post itself (if I add the divs in the template it applies to the whole page (including the vertical menu) and breaks the page layout).
I have also had a look at adding buttons that add the divs as some kind of shortcode. (so that the end-user would click on a specific button in the editor to mark the page as being one with for example the large semi-transparent layer before writing the text itself). That solution might work - but in a way it is asking for trouble if the end-user for example clicks on two buttons or whatever.
I believe that there are much more elegant solutions to this problem - and I really hope that someone out there might be able to point me in the right direction. Hope my description wasn't too cryptic.
Any help much appreciated!