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 2 (updated for v9)

Login / Search

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

Community saint

Follow a simple method to apply dramatic changes to your Theme

Basic Theme Modifications - Part 2

Expand: click here to see the tutorial for previous versions of ocPortal click here to see the tutorial for previous versions of ocPortal

​​​​​
Tutorial Updated to ocPortal version 9
You can preview the result of this tutorial HERE.
This tutorial will show how to change the Header image Background and use the original Logo block to add a simple animation. It will make only two small changes to the global.css file. This should not be too challenging for new users. Follow each step and look at its attached illustration for reference and you should be able to change the Header in a satisfying way.

I've used the logo to overlay a simple animation. You can download it here.
Attachment
» Download: birds.gif (44 Kb, 238 downloads so far)

Otherwise, you can find an extensive library of free animated gif at Gifs.net Free Animations.
CSS Modifications
​​​
step-1 Let's start by modifying the global.css file:
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 440 and 456 and remove the comments.


This will replace the small left top logo with the larger header image template.


step-2  A small css modification will overly the top logo on the header image.
Again In the global.css file, scroll down to line 450 and change display: none; to:
display: block;
​​


Do not worry about the look at this point, it will all make sense in the next steps.
Changing the Images
​​​
step-3 Home–>Admin Zone–>Style–>Manage themes; choose your current theme and click on Manage theme images,


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


Right click on the image and ask your web browser to save it.


Use your favorite Image editor to compose your own header:


Finally, upload the new version of your header image:


step-4 Next, from the Manage theme images interface find and edit the 'logo/-logo' image.


Replace by uploading 'birds.gif' and save.


That's it. You now have a nice new animated top header.

You can view the result of this tutorial HERE.


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

Fan in training

Thanks Jean,

Your tutorial is just great and your site as well. Lots to gain from you.

ocportal fan,
Atul
India
Back to the top
 
Posted
Rating:
#59817

Non-joined user

Jean

Tried to download "blank-logo.png" .. Nothing came up on the download..

Doug
Back to the top
 
Posted
Rating:
#59819
Avatar

Community saint

It's there… it's just "blank"  :lol:

Right click the white space in top left corner when viewing attachment and SAVE AS.

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

Community saint

I think if you also right-click the link, you can download it that way as well.

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

Fan in action

Thanks! ..  I see what you mean now ..

Doug
Back to the top
 
Posted
Rating:
#73376
Avatar

Community saint

I tried this one.  Just got an error when loading the page.   Checked it several times, but can't get it to work.

Paul
Back to the top
 
Posted
Rating:
#73377
Avatar

Community saint

Arbo said

I tried this one.  Just got an error when loading the page.   Checked it several times, but can't get it to work.
Describe in more detail please…


Art and Imagination
of David L Friend

http://davidlfriend.com

  My Art Gallery
powered by ocPortal
Back to the top
 
Posted
Rating:
#73379
Avatar

Community saint

friendly said

Describe in more detail please…

Well, tried it again, and it worked fine.  Sorry about that.


Paul
Back to the top
 
Posted
Rating:
#73380
Avatar

Community saint

Probably needed to clear the caches to display the new theme. Glad your on your way Arbo...


Art and Imagination
of David L Friend

http://davidlfriend.com

  My Art Gallery
powered by ocPortal
Back to the top
 
Posted
Rating:
#106281
Avatar

Fan in action

Back to the top
 
Posted
Rating:
#108713
Avatar

Well-settled

I tried to visit and register at the ocPthemes site but it would not allow it. Is the site no longer in use ? If not, is the domain for sale ?

Driven by imagination.
Back to the top
 
Posted
Rating:
#108719
Avatar

Just bear in mind that we're renaming ocPortal ;).


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#108721
Avatar

Well-settled

I did not know that Chris, what will the new name be ?

Driven by imagination.
Back to the top
 
Posted
Rating:
#108731
Avatar

Composr CMS, abbreviation just 'CMS' :).


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: