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.


Header Change

Login / Search

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

Fan in action

Trying to edit my header

Hello,

I am trying to edit my header (version 9.06) and have watched the video in the tutorial which is very easy to understand.  The only problem is there is no header.tpl under templates like the video shows.  I have done everything else but this and am stuck.

Any assistance will be greatly appreciated.

Jerry
Back to the top
 
Posted
Rating:
#96458
Avatar

Community saint

Hi Jerry,

I will assume by 'header' you mean the graphic (and text) that ocPortal refers to as the 'logo'. If it is, read on; if not, close this response!

To get to the area in which you need to work, follow these rough instructions …

Home Admin Zone Style Manage themes scroll down to bottom of panel and select a Zone to edit …

OR

Home Admin Zone Structure Zones and select a Zone to edit …

Whichever path you choose, when you are 'editing' a Zone you will find a contracted panel that says something like … Logo for "XXX" theme … and expanding that will offer you the choice of selecting a 'Stock' image or of uploading one of your carefully crafted ones. Your choice.

The clever thing is that if you upload an image it will be renamed to identify it as the one that is to be used for the zone in question (e.g. -logo | Adminzone-logo | Cms-logo | Collaboration-logo | Forum-logo | Site-logo | Trimmed_logo), and it will automatically be made ready for use after you've uploaded. You might need to clear your caches if you haven't chosen the option not to cache during setup.

Does that help?


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
Rating:
#96459
Avatar

Fan in action

Yes I have done that part and have the logo changed but I cannot seem to edit the background on the header.  Since there is no header.tpl file I cant change that.
Back to the top
 
Posted
Rating:
#96460
Avatar

Community saint

ProgRockDotCom said

… I cannot seem to edit the background on the header
Edit it in CSS

 :thumbs:




That looked a bit sparse as far as a helpful comment is concerned, so …

Look for the following in global.css


/* Header */
{$THEME_WIZARD_COLOR,#e3e9f2,header_background,100% area_2_background}
{$THEME_WIZARD_COLOR,#426aa9,navigation_background,100% seed}
{$THEME_WIZARD_COLOR,#edf2f9,navigation_text,15% navigation_top + 85% WB}
{$THEME_WIZARD_COLOR,#426aa9,navigation_message_text,100% seed}
{$THEME_WIZARD_COLOR,#a5bde1,global_navigation_underline_cur
rent,75% navigation_top + 25% FFFFFF}
{$THEME_WIZARD_COLOR,#ffffff,global_navigation_hover,100% WB}
{$THEME_WIZARD_COLOR,#edf2f9,global_navigation_text,15% navigation_top + 85% WB}
{$THEME_WIZARD_COLOR,#fbffc1,zone_jump_out_1_shadow,100% FBFFC1}
{$THEME_WIZARD_COLOR,#ff4264,zone_jump_out_2_shadow,100% FF4264}

OR

header {
   background-color: {$GET,header_background};
   {+START,IF,{$NOT,{$CONFIG_OPTION,fixed_width}}}
      {$BETA_CSS_PROPERTY,box-shadow: 0 0 2px 2px {$GET,navigation_background};}
   {+END}
}


Any help?

 :o


Last edit: by Fletch

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
Rating:
#96463
Avatar

Fan in action

so I have a logo but I want to put a background image on the header as well.  How is that done?
Back to the top
 
Posted
Rating:
#96464
Avatar

Community saint

Merge the 'logo' and the 'background image' using a photo editing proggy and then use the whole image as your 'logo'. This assumes you are using a fixed-width display so it shouldn't pose a problem. Simply adjust the width and height of your image to fit your fixed-width display and the height of your choice.

If you are using an elastic display you are going to run into the problem that you cannot anticipate the width that a user is viewing your site at, so you would necessarily have to use a coloured background or a 'small' image repeated (using the 'repeat' property in CSS), and overlay your 'logo' on that. An example for the latter:
  • assume your header is going to be <indefinite>px wide and 200px high
  • make a background image of 1px wide and 200px high
  • call that background in the CSS using the 'repeat-x' property
  • add the 'logo' image to the same property
  • make sure they are layered in the correct order

example:
background: url('{$IMG;,logo}') left top no-repeat, url('{$IMG;,background}') left top repeat-x, #FFFFFF;

Ask for more detail if that isn't clear enough …

 :thumbs:

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 5 (Liked by Fletch)  
Rating:
#96465
Avatar

Community saint

Hi Jerry,

In addition to Fletch's suggestions, you may want to look at my tutorials on that subject revised for ocPortal version 9+ = Part 1, 2 and 3.  There is a live site where you can see the results.

http://ocportal.com/forum/topicview/misc/themeing/basic-theme-modification.htm

http://ocportal.com/forum/topicview/misc/themeing/basic-theme-modification_2.htm

http://ocportal.com/forum/topicview/misc/themeing/basic-theme-modification_3.htm

Jean
Back to the top
 
Posted
Rating:
#96466
Avatar

Community saint

Jean said

… you may want to look at my tutorials on that subject revised for ocPortal version 9+ = Part 1, 2 and 3 …
My BAD.

Forgot that they are current for the latest version(s).

Good catch, and Jerry ought to read, follow and experiment, and I'm sure he will get what he is after as far as a display is concerned.

thanks

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
Rating:
#96473
Avatar

Fan in action

All your advice was very helpful.  Now just one more thing.

Look here: http://progrock.com/pr/

Can someone tell me how to get rid of that ocportal logo in the way of my header?

Thanks,
Jerry
Back to the top
 
Posted
Rating:
#96474
Avatar

Community saint


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
Rating:
#96475
Avatar

Fan in action

Oh man, that was so easy and right in front of my face.  Thanks so much for your help.
Back to the top
 
Posted
Rating:
#96476
Avatar

Fan in action

I noticed that the banner is showing on your side but not mine.  I need to disable those completely.
Is there an easy quick way to get rid of banners?
Back to the top
 
Posted
Rating:
#96479
Avatar

Community saint

Admin Zone Setup Configuration Feature options Banners

If the 'Permissions' box is checked, uncheck it.

The reason you don't see banners is because you've elected not to "Show banners to admins", i.e. left the box unchecked …

 :thumbs:

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
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: