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.


Basic Theme Modifications - Part 3 (updated to v9)

Login / Search

 [ Join | More ]
 Add topic 
Posted
Item has a rating of 5 (Liked by SahsLiked by OneRingRulesLiked by ironfeatherLiked by Paraz1t)  
Rating:
#52310 (In Topic #11415)
Avatar

Community saint

Follow a simple method to apply dramatic changes to your Theme

Basic Theme Modifications - Part 3

Expand: Click here for a tutorial covering previous versions of ocPortal Click here for a tutorial covering previous versions of ocPortal

​​​​​​​
Tutorial Updated to ocPortal version 9
With very few background replacement images and some changes to the glogal.css file, the front page can be dramatically enhanced from the basic theme to suit your style.

You can preview the result of this tutorial HERE.

Alpha transparency or translucency of backgrounds and foregrounds does a lot to harmonize a site around a central image theme. I used to circumvent cross-browser lack of alpha transparency with semi-transparent png images, but today's apparent support of the RGBa property by most modern browsers give this design concept a much needed boost.

RGBa is a way to declare a color in CSS that includes alpha transparency support. It looks like this:
 background: rgba(200, 54, 54, 0.5);
This allows us to fill areas with transparent color; the first three numbers representing the color in RGB values and the fourth representing a transparency value between 0 and 1 (zero being fully transparent and one being fully opaque). We have long had the opacity property, which is similar, but opacity forces all descendant elements to also become transparent. Cross-browser opacity is also a bit sloppy. With RGBa, we can make a box transparent and leave its descendants alone. Using Photoshop or some utilities on the Internet, it is easy to find RGB values to translate the normal hex values.
A central Theme Image
​​
Step 1: Let's start by replacing the original basic background with our central theme image:
At Home–>Admin Zone–>Style–>Manage themes; choose your current theme and click on Manage theme images,

Select General, scroll down to outer_background and click to edit.

Upload a new version of your outer_background image:(suggesting an image not smaller than 1920 x 1080 px)

Step 2: Let's modifying the global.css file to accommodate this new background:
Home–>Admin Zone–>Style–>Manage themes; choose your current theme and click on Edit CSS (styles)

Select global.css and press the 'Choose' button.

Scroll to line 377 just below the 'background: url' and add this new property: ' background-repeat: no-repeat; ' on the next line add: ' background-color: #929aa7  !important; ' and move the ' background-attachment: fixed; ' property from line 370 to line 379, or just below the previous addition. Continue, adding one more line below: ' background-size: 100% 100%; '.
These new properties will do the following:
​​
  • background-repeat: no-repeat;  will prevent the new image from being replicated to the right and bottom if the screen if the visitor's screen resolution is greater than its size, as this would not look very nice unless your image is specifically designed to be seamless.
  • background-color: #929aa7  !important;  The original background was WHITE (#ffffff). Adding an image that has darker tones than white will produce a flickering effect between page changes. To attenuate this, the background-color should be modified to something more harmonized with the new background image.
  • background-attachment: fixed; needs to be moved in this section of code to be effective on the new background image. Its purpose is to prevent it from moving up or down when the 'main_website_inner' is scrolling on long content.
  • background-size: 100% 100%;  is to prevent the background image from moving out of bound when the visitor's monitor has a larger or smaller resolution. This will always adjust the background image to any resolutions, helping to maintain the site's look as close as possible to your original concept.

Step 3: Next, add 'transparent' on line #417 header background-color property and comment out the color variable, making sure not to drop the semi-colon ; at the end.
Applying Transparency Attributes
​​
Step 4: Next, adding an rgba attribute value to the background-color will give the website inner space a nice translucent effect. Note that the alpha value of 0.5 can be modified up or down to increase or decrease the opacity. .

At Home–>Admin Zone–>Style–>Manage themes; choose your current theme and click on Manage theme images, select General, scroll down to gradient and click to edit.  Upload a new image 'ocean1.jpg'. This will add some texture to all box_inner titles.

Repeat the same process for zone_gradient

Step 5: Let's go back to our global.css file to modify our boxes backgrounds:
Home–>Admin Zone–>Style–>Manage themes; choose your current theme and click on Edit CSS (styles)
Select global.css and press the 'Choose' button.
Scroll to line 1192 or '.box' selector.
Follow the instructions on the following reference image to comment-out two lines and add an rgba value to the background-color property. This will serve to slightly integrate our middle content boxes with our theme.


Step 6: Continue, scrolling to line 1227 .global_side_panel…and change 'background-image: none;' to 'block'
This will add texture to all title boxes.


Step 7: Follow-up with line 1221 .global_side_panel and add 'transparent' commenting-out the existing color variable as per image reference below.


Step 8: Follow-up with line 3180 .menu_type__embossed, .menu_type__top, .menu_type__dropdown, .menu_type__embossed li, .menu_type__top li, .menu_type__dropdown li.toplevel {
Again, adding 'transparent' and commenting-out the existing color variable as per image reference below. This will add transparency to the side panels menu.


You can view the result of this tutorial HERE.


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

Community saint

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

Good job and keep up the good work.

I run http://otakuplayground.com and am hopping to make themes and other things for ocportal even though I no longer use it for otakuplayground.com I still love it and feel it could go far with the right help. It needs themes and needs people to advertise for it.
Back to the top
 
Posted
Rating:
#52315
Avatar

Thanks for sharing Jean - much appreciated :thumbs:

Back to the top
 
Posted
Rating:
#52318
Avatar

Community saint

Allen said

Thanks for sharing Jean - much appreciated :thumbs:
Indeed she did a good job.

I run http://otakuplayground.com and am hopping to make themes and other things for ocportal even though I no longer use it for otakuplayground.com I still love it and feel it could go far with the right help. It needs themes and needs people to advertise for it.
Back to the top
 
Posted
Rating:
#52324
Avatar

Community saint

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!

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Item has a rating of 1  
Rating:
#52326
Avatar

Community saint

OOps sorry Jean is usually a girls name.

I run http://otakuplayground.com and am hopping to make themes and other things for ocportal even though I no longer use it for otakuplayground.com I still love it and feel it could go far with the right help. It needs themes and needs people to advertise for it.
Back to the top
 
Posted
Rating:
#52360
Avatar

Community saint

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.:cool:
Back to the top
 
Posted
Rating:
#52361
Avatar

Community saint

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.

Eric DeMars . com
My electronic portfolio and personal site. Uses ocPortal!
Back to the top
 
Posted
Rating:
#58969
Avatar

Fan in action

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:

Code

.re_body, #htmlarea {
margin: 0;
padding: 0 !important;
font-size: 0.8em;
font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif;
}

.re_body {
color: #000000; /* {$,wizard, 20% seed + 80% !W/B} */
background-image: url('{$IMG,CB}');
background-repeat:no-repeat;
background-position:top center;
}


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 :(

Back to the top
 
Posted
Rating:
#58981
Avatar

Community saint

Hello Dragons Files!

Try this code:

Code

background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
/* Sets whether a background image is fixed or scrolls with the rest of the page */
Hope this can help.
Jean
Back to the top
 
Posted
Rating:
#58982
Avatar

Fan in action

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

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





EDIT: The Hard Way solved footer prob :)


Last edit: by Dragons Files

Back to the top
 
Posted
Rating:
#58997
Avatar

Community saint

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 :thumbs:

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!:):cool:
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.
Back to the top
 
Posted
Rating:
#59130
Avatar

Fan in action

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 :)

Back to the top
 
Posted
Rating:
#59132
Avatar

Community saint

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.
Back to the top
 
Posted
Rating:
#59133

Non-joined user

( 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   :lol:  )
Back to the top
 
Posted
Rating:
#59135
Avatar

Fan in action

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.

Back to the top
 
Posted
Rating:
#101785

Fan in training

Nice tutorial, I'm seeing some good ones from Jean, and I found a good video from Allen Ellis on Youtube.  I'm still hunting for an easy way to add a slide show to OCPortal.  Current version is Adult Expectations
Back to the top
 
Posted
Item has a rating of 5 (Liked by Guest)  
Rating:
#101787
Avatar

Honoured member

By a slideshow do you mean of Images or like a Powerpoint presentation. I am guessing that you mean of images in which case will the Image fader comcode block work as this fades between images just like a slideshow?

And welcome to the forums

Just Jarv
Back to the top
 
Posted
Rating:
#101790

Fan in training

Thanks, I an image slider, you're right.  That's what we're working on.  I'll take a look at comcode for image fader.  What comcode is used to add member login to top of site?
Back to the top
 
Posted
Rating:
#101791

Fan in training

Where do you add code for skitter slider, that's what I'm trying to accomplish.  Can't find a decent tutorial.  I tried adding code to the global html file in template, but html code is covering up entire page.
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Expand