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.


Some very basic questions-- logo and background color

Login / Search

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

Fan in action

Hello,  just wondering how I go about changing the image I created in "logowizard" (my company name in text over OC Portal's image) to my own logo (an image file).  I can't seem to find how to customize it and have tried doing a search.

Secondly, I'd like to change the background color of the main site (it's currently white).  But I'm not sure how to begin.  I'm new to all this, so please keep that in mind!;)

Many thanks,
Kelli
 
Back to the top
 
Posted
Rating:
#35259
Avatar

Hi,

The logo is a 'Theme image', like most of the images in ocPortal that aren't user-submitted content.
The quickest way to edit it is to hold down the ctrl+shift+alt keys and to click it. That'll open up the Theme image editor with the image, and allow you to upload a replacement.

To change the background color, you'll need to know some CSS (CSS is the way modern web pages are styled). Again, this is a part of the theme. If you go to 'Style' in the Admin Zone, then 'Themes', you'll see an option to edit CSS there. You'll need to pick the 'global' CSS file when asked.
When you do this you'll see all the CSS code. The background color is about 7% through the file in this chunk of code:

Code

body, .re_body {
   margin: 0;
   padding: 0;
   font-size: 0.8em;
   background-color: #45608B; /* {$,wizard, 83% (seed sat_to 50) + 17% !W/B} */
   font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif
}

A good image editor (e.g. photoshop, paint shop pro, the gimp [free], paint.net [free]) will be able to find you a new colour code to replace '45608B'.


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:
#35265
Avatar

Fan in action

Thanks, Chris- the control+shift+alt worked!  Do you know if there is an equivalent Mac keyboard shortcut?  I have both a PC and Mac, but I usually prefer to work on my Mac.

The problem I was having with the background color was not knowing which .css file to choose, so thank you, that should be an easy fix now!

Kelli
 
Back to the top
 
Posted
Rating:
#35268
Avatar

Hi firefly,

I believe we wrote it so the Apple key works in place of the alt key. So ctrl+apple+shift. However, I don't have a Mac myself, so I've never tried this. If in doubt, try all 'accelerator' (shift, ctrl, alt, apple - whatever is there) keys at once.


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:
#36765
Avatar

Community saint

I searched for editing header and other key words but was unable to locate if its possible to edit the header where the logo is.  The reason I would like to edit is I would like to load a larger image than a smaller one but the larger one grossly over laps the header bar up top.  I thought it would be the header.tpl file but I didn't see anything that stood out.  

The new image size that I would like to upload is 760x196.  Thanks.
Back to the top
 
Posted
Rating:
#36767
Avatar

Hi,

This is defined in CSS, specifically global.css. In there a height is defined for .global_top.
For reference, the template that references .global_top of the CSS is TOP.
(The HEADER templates is the HTML header, whilst TOP is the visual header)


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:
#36773
Avatar

Community saint

Thanks Chris that worked out, now I have another stupid question regarding the similiar area.  The top moved down fine but the text remained at the top ie: site, forums, personal content, admin…so what is the script to move that down?

I have some knowledge with this stuff but I am learning as I go, thanks again for your answers.
Back to the top
 
Posted
Rating:
#36775
Avatar

Look a little further down in the CSS file and you'll see there's a 'top' property defined for '.global_zones'. Raise that as required.


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:
#36778
Avatar

Community saint

Thank you once again. :thumbs:
Back to the top
 
Posted
Rating:
#36779
Avatar

Community saint

hmm actually after uploading a new global.css file into the directory with the increased value for the top

Code

.global_zones {
   text-align: right;
   position: relative;
   top: 230px;
   z-index: 10;
   font-weight: bold;
   color: #f4eeed; /* {$,wizard, 15% zg_top + 85% W/B} */
 The default was

Code

.global_zones {
   text-align: right;
   position: relative;
   top: 68px;
   z-index: 10;
   font-weight: bold;
   color: #f4eeed; /* {$,wizard, 15% zg_top + 85% W/B} */
my text is still floating at the top, in its original location.
Thanks again and sorry for the troubles.
My site is http://pantherden.net/portal/index.php?page=
Back to the top
 
Posted
Rating:
#36781
Avatar

Community saint

Ok oddly enough when I change themes everything is ok, so...what did I do wrong that in one theme it is correct but the other is not??
Back to the top
 
Posted
Rating:
#36782
Avatar

Hi,

The CSS files get compiled and cached, so if they are manually replaced and that cache is turned on, then the cache manually needs flushing. The quickest way to do that is to hold down ctrl+alt+shift and click refresh (whilst logged in as an admin).


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:
#36783
Avatar

Community saint

Thanks, problem solved.  For some reason the last change wasn't taken and it was still at default.

Again thanks for your help.
Back to the top
 
Posted
Rating:
#51102

Non-joined user

Hi,

When I hold down the ctrl+shift+alt keys and click the logo, I get:

The requested resource does not exist.

Please help!
Back to the top
 
Posted
Rating:
#51139
Avatar

This is a known bug and will be fixed in the next patch release. You'll need to edit the 'logo/-logo' theme image from inside the Admin Zone.


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:
#51332
Avatar

Fan in training

For the Mac, the shortcut key by the way is Command + Shift + Left Mouse Click. :)

Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: