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, which is now in beta. ocPortal 9 will be 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.


Translucent Forum

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#56268 (In Topic #12233)
Avatar

Fan in action

Hey guys,


I have followed the tutorial regarding the changes one must make to have the translucent boxes on the main page and everything went smoodly.
My problem is that I wold like to have the same translucent "style" in the forum zone and I donīt know how to do it.
Just to be clear on what I'm looking for I'm leaving you guys a picture of the forum as is and another one with what I would like to accomplish.

actual


future

Photoshop does wonders…

If someone could point me in the right direction I would apreciate it.


Regards,

;)
Back to the top
 
Posted
Rating:
#56271
Avatar

Community saint

You will find what you are looking for in ocf.css

.ocf_row1
.ocf_row2

And so on, there are several.

Also
.ocf_information_bar
.ocf_post1 (there may be more)

There may be a few more places to check out but that should get you started and I am sure you will find the rest from there.
Back to the top
 
Posted
Rating:
#56273
Avatar

Fan in action

Thanks Brian, I'll give it a try!!!
Back to the top
 
Posted
Rating:
#56277
Avatar

Fan in action

Hey again,

Thanks to Brian I manage to change the appearance of my forum. However there as been a new development :P  :P  :P

My sub forums became fully transparent.

Here are the images.

Forum


sub forum



Any thoughts?
Back to the top
 
Posted
Rating:
#56281
Avatar

Community saint

Hello one2much,

You will find "ocf_row" 1 to 8 in the ocf.css. Each one must be changed with the correct RGBA code. Here is the code from my example: Desert Combat: (use the correct rgb shades according to your own theme)
Also, make sure the last part of the rgbA is 0.5 for 50% alpha reduction)
Note that if you view your site through Internet Explorer, this will look fully transparent.

Code

.ocf_row1 {
/* {$, ocf_row1 is used across various table cells, including the forum view (OCF_FORUM_IN_CATEGORY.tpl).
The 1 does not necessarily always mean a first row - it is simply a class we use to bring
variety in table cells. } */
background-color: rgba(253, 253, 250, 0.5); /* {$,wizard, 60% bgcol + 40% W/B} */ /*40% white over bgcol*/
font-size: 0.85em;
vertical-align: middle;
padding: 5px;
}

.ocf_row2 {
/* {$, ocf_row2 is used across various table cells, including the forum view (OCF_FORUM_IN_CATEGORY.tpl).
The 2 does not necessarily always mean a second row - it is simply a class we use to bring
variety in table cells. } */
background-color: rgba(253, 253, 250, 0.5); /* {$,wizard, 100% ocf_row2}*/
font-size: 1.0em;
vertical-align: middle;
padding: 7px;
}

.ocf_row2p5 {
background-color: rgba(253, 253, 250, 0.5); /* {$,wizard, 20% seed + 80% W/B} */
font-size: 0.85em;
vertical-align: middle;
}

.ocf_row3, .ocf_row4 {
background-color: rgba(253, 253, 250, 0.5); /* {$,wizard, 100% bgcol} */
font-size: 0.85em;
vertical-align: middle;
}

.ocf_row5 {
padding: 5px;
}

.ocf_row5, .ocf_row6 {
background-color: rgba(253, 253, 250, 0.5); /* {$,wizard, 60% bgcol + 40% W/B} */ /*40% white over bgcol*/
font-size: 0.85em;
vertical-align: middle;
}

.ocf_row7 {
background-color: rgba(253, 253, 250, 0.5); /* {$,wizard, 30% bgcol + 70% W/B} */ /*70% white over bgcol*/
font-size: 0.85em;
vertical-align: middle;
padding: 5px;
}

.ocf_row8 {
background-color: rgba(253, 253, 250, 0.5); /* {$,wizard, 100% bgcol } */
vertical-align: middle;
text-align: center;
}
From the supplied picture, your theme is starting to look mighty good already. :cool:
Please let us see it when completed.
Good Luck!:)
Back to the top
 
Posted
Rating:
#56287
Avatar

Fan in action

Hey Islander,

Thanks for showing me the code. The problem was on how I was editing it.

Here is what I was doing wrong:

Code

.ocf_row1 {
/* {$, ocf_row1 is used across various table cells, including the forum view (OCF_FORUM_IN_CATEGORY.tpl).
The 1 does not necessarily always mean a first row - it is simply a class we use to bring
variety in table cells. } */
background-color: rgba(227, 234, 227, 0.5); /*
background-color: #e8eee8; /* {$,wizard, 60% bgcol + 40% W/B} */ /*40% white over bgcol*/
font-size: 0.85em;
vertical-align: middle;
padding: 5px;
}

.ocf_row2 {
/* {$, ocf_row2 is used across various table cells, including the forum view (OCF_FORUM_IN_CATEGORY.tpl).
The 2 does not necessarily always mean a second row - it is simply a class we use to bring
variety in table cells. } */
background-color: rgba(227, 234, 227, 0.5); /*
background-color: #e3eae3; /* {$,wizard, 100% ocf_row2}*/
font-size: 1.0em;
vertical-align: middle;
padding: 7px;
}



Strangely, it did the job on the main forums but when I got to the sub-forums or the thread list the background just vanished. By the way I am using both Firefox and Chrome.


Well I guess I inadvertently produced a "short circuit" on the background colors but thanks to your help I was able to fix it.

By the way, thanks for the incentive.

Oh, and I must say that you may recognize the background I'm using as it is your own with a few tweaks. I hope you donīt mind.

And that Desert Combat site… I can only wish I had that kind of knowledge and creativity. Congratulations on that project!

Thanks again for you help.
Back to the top
 
Posted
Rating:
#56295
Avatar

Community saint

You're Welcome, one2much!

Glad you found the code and the background image useful. It is in the tutorial to be shared, and like you did, being creative with the supplied material is the best way to learn and give it your own style.

Good Work!:thumbs:
Looking forward to see the result!

Jean
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: