Basic Theme Modifications - Part 3

Basic Theme Modifications - Part 3

This tutorial will show how, with a few simple changes to the glogal.css file, the front page can be dramatically changed to suit your style.

I have also played with one of the features of CSS 3, in particular with the RGBA color which still has limited support, but is worth looking at to add a bit of funkiness to your site. RGBA lets you specify a color as being translucent (partially transparent).

Using Photoshop or some utilities on the Internet, it is easy to find RGB values for the original hexadecimal #e3e9f2 value used in this example. Here the values are Red 227, Green 233, Blue 242.

CSS 3 adds a new syntax, which allows alpha to be specified as well, such as rgba(227,233,242,0.5); this will set the alpha channel to 50% translucency. Note the "a" and "0.5" in the code.

At the time of writing, browser support for RGBA is pretty weak. Of the major browsers; IE does not support RGBA (including IE8), Firefox 3 and newer do, Safari 3.2.1 and Chrome do. IE8, will ignore the alpha channel and give full transparency. So it is up to you to decide after experimentation if your background can work well for all browsers. I am sure a solution will be found in the near future.

Preview the result: Visit this Test Site

Have fun and follow the numbers; it is easier than it looks!

Code you'll need to Paste:
Middle Transparency code:
RGBA Code:

Code

.standardbox_classic {
background-color: rgba(227, 233, 242, 0.5);
/*background-color: #e3e9f2; */
margin: 0;
}

You and these Tutorials could be very beneficial to the site I want to bring back.

Good job and keep up the good work.

Thanks for sharing Jean - much appreciated

Allen said

Thanks for sharing Jean - much appreciated

Indeed she did a good job.

amichan said

Indeed she did a good job.

HE, Amy. Honest!

Ask HIM.

---

@Jean

Good work on all three.

I've seen a couple on your site previously, but somehow they seem to have a bigger impact here!

OOps sorry Jean is usually a girls name.

Thanks for the kind comments!

I hope newcomers will find them easy enough to experiment with, and be able to quickly transform their front pages to something that suits each personality without knowing much about the deepest details of the program. My thinking is that once someone feels at home on his site, he starts to like working with it, and will eventually attract a crowd.

Indeed amichan, Jean in the French form is masculine and originates from the old French form of a Hebrew name Johanan, and very popular in French Canada where I come from, since parents used all the saints from the Bible to name their kids. Jean, Pierre and Joseph were at the top of the lot and represent John, Peter and Joseph. (sorry about this explanation, that's the teacher in me).

Ami, we could make a good team on your site to illustrate your Themes and get people to use them and make some more.

I do. I just graduated college this past May and think I'll redo my entire personal site with ocPortal as my online portfolio like Allen did. And these tuts are really helping me… so thank you from me as well.

First i must say thanks for this awesome and easy to follow tutorial.

I have small problem, ive been trying all posible variations CSS search gave and i can't get image on center and no repeat.

I like to use only one image on center ( image resolution is: 856x643 ) and this is my last attempt:
Could you please quide me on right direction. I hope i was able to do this by myself, but im very beginner on this and sometimes what i read is so confusing

Hello Dragons Files!

Try this code:
Hope this can help.
Jean

Oh man, thanks big time!!
That would have take weeks to figure out, i give you half of my points left, thanks again

Next thing i need to figure out is how to move footer below that background image.





EDIT: The Hard Way solved footer prob :)

Dragons Files said

Oh man, thanks big time!!
That would have take weeks to figure out, i give you half of my points left, thanks again

Next thing i need to figure out is how to move footer below that background image.


EDIT: The Hard Way solved footer prob :)

Hey! Thanks!
Glad I could help!
If you do not yet use "Firebug", it's worth the time to install this addon to Firefox and experiment with it. It will give you some pointers, as to what is going on on your page and you can even try some changes in virtual mode.

Hmm, after "re-install" everything looked OK, but them came new issue:

i can't get background image to show, no matter what. I did extreme solution and sadly deleted all and did complete fresh install, same issue.

I have no idea what is causing that.. It looks like this "issue" came after i have forums and members.

BTW: Firebug is awesome, i knew it exists, but i never remembered to install it. Now i have

You've got several levels of "cache" that need to be flushed from your server to your computer to the Browser and the cookies. Some will be done automatically as time goes by, but your ocportal browser cookies should be deleted manually to eliminate any possibilities that the images are not viewed immediately. As, I understand it, the mapping of your images is not the same when "ocf" enabled, so there might be some code discrepancy if you paste old ones. Try simple tests, like creating a new codename and uploading a different image with the Theme image manager to see the result.

( i really need ve change my cryptic password to something like "password" so i can login as my user account while im at break from work )
I cleared cache in ocPortal, browser and deleted all temp/caches in server. I also created new set of codes/images with different names and transparency worked and logo worked. Not background image. I do one more fresh install in morning when im back home, hopefully server has "cooled down" if there were some odd stuff happening in server level.
Heh, my wifey laughed at me and told it should be Eternal Files instead of Dragons Files ( because site has been under maintenance technically for months     )

I don't know what happened, but when i got back home i logged in my site and ithere were few pages of Google news o_O
( i didn't put any news )

I have solution for that problem im facing atm, sorry for extra trouble my question(s) have caused.