HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS. ocPortal 9 is superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


second theme online

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#92318
Avatar

Community saint

Code

.global_middle
solution is not a option because it use the main_backround color code. This need in this case to be transperant for header and global-navigation.  See what we need:



This gives a better idea what the question is. How do we get this in the comcode page by template?
Now I use a table code in the page.



Last edit: by Harry-S


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Rating:
#92324
Avatar

Community saint

Harry,

My understanding is that wicked need a shaded content area (does not include the side panels).
.global_middle is the class covering that area in global.css.
This is tricky, as apparently because it breaks Safari it contains float elements which still have to be dealt with to make this work as such.
See attachment when I give it a background attribute red.
To make it semi-transparent, don't use 'opacity' as it will also affect the foreground, but use 'background: rgba(255, 0, 0, 0.4);' for a background effect only.

 

Edited: added one column panel view (works better)



Last edit: by Jean
Back to the top
 
Posted
Rating:
#92325
Avatar

Community saint

He Jean,
Oke, I tryed this also, will check this on my test site. Will let you know what this brings.  :thumbs:

Harry


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Rating:
#92326
Avatar

Community saint

Jean,
This way it takes again the whole background, not only the content area. :(

look the second picture in the earlier post and see than this picture, hope that this can clear up what I mean  :)



The text is my table solution within the compage itself. But you see it takes also the header/navigation area to.


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Rating:
#92333

Fan in action

thanks for all the posts :)

yes harry's screenshot explained the problem.
this is what I'm aiming for:


but every solution given has also put the semi-transparency behind the panels and the header. Or as shown in Jean's first photo, it bleeds over a little bit under the panels.

I just wanted to add the semi-transparency to the text content so people can read the text a little easier while still being able to see the background.

inspecting that element says its div.module_content or div.module_content_wrap. Maybe since it's nested inside the global middle it has to be all or nothing?


Last edit: by wicked
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#92349
Avatar

Community saint

Yes got it working now…. Thanks Jean

Code

.global_middle {
   /*overflow: hidden; Breaks Safari so we'll let the surrounding element contain floats*/
        background: rgba(158,217,251,0.5);
   margin-bottom: 1em;

Set the background code above into this. (color code is mine for Fourth  theme) :)


Harry


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Rating:
#92352
Avatar

Community saint

So now to only questions is how to get the global_middle not overlapping the both panels, have try to change the margins, but thats not work. For screen with one panel column it is not a problem.


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Rating:
#92354
Avatar

Community saint

Harry-S said

So now to only questions is how to get the global_middle not overlapping the both panels, have try to change the margins, but thats not work. For screen with one panel column it is not a problem.
Right, I'll have a look at it later.
This space is part of the float system going on with the left and right panels. It is also noteworthy that the bottom spacing is not consistent between browsers. 
Back to the top
 
Posted
Rating:
#92356
Avatar

Community saint

Jean said

Harry-S said

So now to only questions is how to get the global_middle not overlapping the both panels, have try to change the margins, but thats not work. For screen with one panel column it is not a problem.
Right, I'll have a look at it later.
This space is part of the float system going on with the left and right panels. It is also noteworthy that the bottom spacing is not consistent between browsers. 

yes I have seen the bottom problem also, global_middle respond to text only, so if the image is bigger then the text in the screen it will be overlapping. Looks great as 3D, but not in all browsers. Opera takes the picture as bottom, but Chrome not.

For the width of the middle, I hve try sevral things but have not found a solution at now. So great if you can look to this.

Thanks Harry


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Item has a rating of 5 (Liked by Fletch)  
Rating:
#92362
Avatar

Community saint

Which Selectors to edit for the spacing around the .global_middle?

Code


#panel_left ~ .global_middle {
margin-{!en_left}: 15em;
padding-{!en_left}: 3.5em;
}
#panel_right ~ .global_middle {
margin-{!en_right}: 15em;
padding-{!en_right}: 3.5em;
}


Back to the top
 
Posted
Item has a rating of 5 (Liked by FletchLiked by Jean)  
Rating:
#92365
Avatar

Community saint

Jean, you are great!!!
I had not found this one grrrrrrrrrr… I own you a beer.. cheers!

Harry


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Rating:
#92367
Avatar

Community saint

You are welcome Harry!
I'll take you on for that beer when I get to visit Holland again.:cool:

Jean
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#92370

Fan in action

yay! that worked great. thank you both so much for all your help :)
Back to the top
 
Posted
Rating:
#92371
Avatar

Community saint

Jean said

You are welcome Harry!
I'll take you on for that beer when I get to visit Holland again.

Jean
Let me know :)


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Rating:
#92372
Avatar

Community saint

wicked said

yay! that worked great. thank you both so much for all your help :)

Glad to could help you out.


http://digiflash.nl Photo community  (dutch)
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: