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.


(RESOLVED) 9.0.11 "Stretch" header assistance needed...

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#102137 (In Topic #20020)

Fan in action

First off, I've read through most of the posts in "deploying" back to May of 2012 (early v8). There are several good ones that got me as far as I am. But, since there was such a drastic change in the code between v7, v8 & v9, much of the info is too hard for a newbie to adapt.

I've developed a rudimentary understanding of CSS, enough to get my self in trouble trying to be creative. :'(
So...
At least I'm smart enough to ask for help from the experts before my hole becomes a grave!

Here is what I have so far (v9.0.11 "stretch" format)...


What I want to do is remove the banner ad, center the 817 x 100 logo, and add black fillers on each side of the logo.

Any and all assistance will be greatly appreciated and as my knowledge develops I will pass it on to the next generation of newbies.
Thanks in advance,
Drew


Last edit: by Desert Drew

Desert Drew
Not as dumb as I sound...
Just winded from the STEEP climb to ocPortal nirvana!
Back to the top
 
Posted
Item has a rating of 5 (Liked by Fletch)  
Rating:
#102139
Avatar

Community saint

Hello Drew,

What you are looking for is going to be in the GLOBAL_HTML_WRAP.tpl template file. Go to the Themes Manager in the Admin Zone and use the Edit Templates option for your theme. Then scroll down the list to find the GLOBAL_HTML_WRAP.tpl file. Not far from the top of the file, just inside the <body> html tag you'll find a section with the <header ...> .... </header> tags. That's where the changes can be made to remove the banner, center the logo, and change the background to black. I'll defer the more detailed specifics to someone with more theme experience. If you start removing or changing <div>...</div> sections or removing tempcode, you could mess up the formatting of the header or create critical bailout errors. Important tip: If you haven't created your own theme in your ocPortal installation and are making these changes to the built-in default theme, then you probably want to stop making changes and create a copy of the default theme as a new theme and then restore the default theme back to the original files, then set the new theme as the active theme for zones you need the theme for...it may save you from trouble down the road. And always keep the Admin Zone set with the unedited default theme. That way, if you break a major template like the GLOBAL_HTML_WRAP template and it starts causing you critical bailout errors which prevents any web page that uses that template from loading, it won't prevent you from fixing them through the Admin Zone which will be using the unbroken default template.

Another tip for experimenting with changes like this is to use the Developer Tools that are built into the popular browsers now. I prefer Google Chrome. For example, load your web page in Google Chrome and press F12 on the keyboard. Select Elements in the menu of the Developer Tools pane that pops up and it will give you full access to the HTML and CSS code that makes up your web page. You can double click on HTML code in the left side of the Developer Tools to make changes in realtime so you can see what those changes will do to your web page. You can turn on/off and edit CSS code on the right side of the Developer Tools to see what affect those CSS changes will have. Making these changes only affects the web page loaded in your browser and doesn't do anything to your web site on the web server, so you can experiment as much as you like. Once you've experimented to find out what changes you need to make, then it's just a matter of finding the template or CSS files the code belongs to and applying those changes to the appropriate files.
Back to the top
 
Posted
Rating:
#102141

Fan in action

Jason,
Thank you for your response. I do have the default theme untouched (good advice). I installed Firebug add-on and tried to change the logo alignment with center tags but I could not figure out how to do a preview. Went to admin/themes/edit template/GLOBAL_HTML_WRAP.tpl and added <center></center> tags both outsde of and within the h1 tags as Firebug suggested. Cleared template and image caches, cleared browser history, and the logo image is still on the left? I must be missing something somewher?

Here is the header code as I have it now with the center tags...

Code

<header class="float_surrounder" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
               
                <center><h1><a class="logo_outer" target="_self" href="{$PAGE_LINK*,:}" rel="home"><img class="logo" src="{$?,{$MOBILE},{$IMG*,logo/trimmed_logo},{$LOGO_URL*}}" width="{$IMG_WIDTH*,{$?,{$MOBILE},{$IMG,logo/trimmed_logo},{$LOGO_URL}}}" height="{$IMG_HEIGHT*,{$?,{$MOBILE},{$IMG,logo/trimmed_logo},{$LOGO_URL}}}" title="{!FRONT_PAGE}" alt="{$SITE_NAME*}" /></a></h1></center>

               
                <a accesskey="s" class="accessibility_hidden" href="#maincontent">{!SKIP_NAVIGATION}</a>

               
                <div class="global_navigation">
                    {$BLOCK,block=side_stored_menu,param=zone_menu,type=zone}
                </div>

               
                {+START,IF,{$NAND,{$HAS_ACTUAL_PAGE_ACCESS,admin,adminzone},{$EQ,{$ZONE},adminzone,cms}}}{+START,IF,{$NOT,{$MOBILE}}}
                    {$SET,BANNER,{$BANNER}}
                    {+START,IF_NON_EMPTY,{$GET,BANNER}}
                        <div class="global_banner" style="text-align: {!en_right}">{$GET,BANNER}</div>
                    {+END}
                {+END}{+END}

               
                {+START,IF,{$AND,{$HAS_ACTUAL_PAGE_ACCESS,admin,adminzone},{$EQ,{$ZONE},adminzone,cms}}}
                    <div class="adminzone_search">
                        <form title="{!SEARCH}" action="{$URL_FOR_GET_FORM*,{$PAGE_LINK,adminzone:admin:search}}" method="get" class="inline">
                            {$HIDDENS_FOR_GET_FORM,{$PAGE_LINK,adminzone:admin:search}}

                            <div>
                                <label for="search_content">{!ADMINZONE_SEARCH_LOST}</label> <span class="arr">&rarr;</span>
                                <input size="25" type="search" id="search_content" name="search_content" style="{$?,{$MATCH_KEY_MATCH,adminzone:admin:search},,color: gray}" onblur="if (this.value=='') { this.value='{!ADMINZONE_SEARCH;}'; this.style.color='gray'; }" onkeyup="if (typeof update_ajax_admin_search_list!='undefined') update_ajax_admin_search_list(this,event);" onfocus="require_javascript('javascript_ajax_people_lists'); require_javascript('javascript_ajax'); if (this.value=='{!ADMINZONE_SEARCH;}') this.value=''; this.style.color='black';" value="{$?,{$MATCH_KEY_MATCH,adminzone:admin:search},{$_GET*,search_content},{!ADMINZONE_SEARCH}}" title="{!ADMIN_ZONE_SEARCH_SYNTAX}" />
                                {+START,IF,{$JS_ON}}
                                    <div class="accessibility_hidden"><label for="new_window">{!NEW_WINDOW}</label></div>
                                    <input title="{!NEW_WINDOW}" type="checkbox" value="1" id="new_window" name="new_window" />
                                {+END}
                                <input onclick="if ((form.new_window) &amp;&amp; (form.new_window.checked)) form.target='_blank'; else form.target='_top';" id="search_button" class="button_micro" type="image" src="{$IMG*,admin_search}" alt="{!SEARCH}" value="{!SEARCH}" />
                            </div>
                        </form>
                    </div>
                {+END}
            </header>


I still haven't figured out how to turn off the global banner yet (although I did delete the image), I'm sure this is messing with it. I uninstalled banners add-on for now. Still hoping to have a points banner rotation, just want it in a 125x125 box banner on the side.

I'm from an old-school HTML3 background and I'm a real rookie when it comes to modern tags. I have no clue where to, or how to formulate a background color tag or what that tag should look like. <bgcolor="000000"></bgcolor>?

Hope someone can help with some actual code.

Desert Drew
Not as dumb as I sound...
Just winded from the STEEP climb to ocPortal nirvana!
Back to the top
 
Posted
Rating:
#102144
Avatar

Community saint

Where you have …
 <center><h1><a class="logo_outer" target="_self" href="{$PAGE_LINK*,:}" rel="home"><img class="logo" src="{$?,{$MOBILE},{$IMG*,logo/trimmed_logo},{$LOGO_URL*}}" width="{$IMG_WIDTH*,{$?,{$MOBILE},{$IMG,logo/trimmed_logo},{
$LOGO_URL}}}" height="{$IMG_HEIGHT*,{$?,{$MOBILE},{$IMG,logo/trimmed_logo}
,{$LOGO_URL}}}" title="{!FRONT_PAGE}" alt="{$SITE_NAME*}" /></a></h1></center>
… try changing it to the following …
 <h1><a class="logo_outer" target="_self" href="{$PAGE_LINK*,:}" rel="home"><img style="margin:0 auto;" class="logo" src="{$?,{$MOBILE},{$IMG*,logo/trimmed_logo},{$LOGO_URL*}}" width="{$IMG_WIDTH*,{$?,{$MOBILE},{$IMG,logo/trimmed_logo},{
$LOGO_URL}}}" height="{$IMG_HEIGHT*,{$?,{$MOBILE},{$IMG,logo/trimmed_logo}
,{$LOGO_URL}}}" title="{!FRONT_PAGE}" alt="{$SITE_NAME*}" /></a></h1>

I believe that the <center> … </center> tags are deprecated and should no longer be used (I'm sure somebody will tell me different if I am wrong!).

you said

I still haven't figured out how to turn off the global banner yet (although I did delete the image), I'm sure this is messing with it. I uninstalled banners add-on for now. Still hoping to have a points banner rotation, just want it in a 125x125 box banner on the side.
I found something when I previously read Jason's response to your earlier post, but I sort of 'lost it' assuming he would come back with his usually pretty succinct advice.

If you do an Admin search for 'Banners' it should give you a few indicators to have a look at.

Give it a go, and let us know how you get on.

 :thumbs:




Edit:
  • You should also take a look at the CSS property for .logo which you will find states that it should float:left. That doesn't help the final display …!!

  • The correct HTML for 'black' is #000000 (the hashtag was missing from your original post).

 :thumbs:


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

Community saint

<edit> Looks like Fletch beat me to it :) </edit>

Here are a couple of specifics for you...

To remove the banner from the header of the template, remove this code from the <header> section:

Code

                {+START,IF,{$NAND,{$HAS_ACTUAL_PAGE_ACCESS,admin,adminzone},{$EQ,{$ZONE},adminzone,cms}}}{+START,IF,{$NOT,{$MOBILE}}}
                    {$SET,BANNER,{$BANNER}} 
                    {+START,IF_NON_EMPTY,{$GET,BANNER}}
                        <div class="global_banner" style="text-align: {!en_right}">{$GET,BANNER}</div>
                    {+END}
                {+END}{+END}


To get the logo to center, in addition to the <center> HTML, you will have to change the <img> tag to alter the CSS float from left to center. You can do this by adding a style override by changing this line:

Code

<center><h1><a class="logo_outer" target="_self" href="{$PAGE_LINK*,:}" rel="home"><img class="logo" src="{$?,{$MOBILE},{$IMG*,logo/trimmed_logo},{$LOGO_URL*}}" width="{$IMG_WIDTH*,{$?,{$MOBILE},{$IMG,logo/trimmed_logo},{$LOGO_URL}}}" height="{$IMG_HEIGHT*,{$?,{$MOBILE},{$IMG,logo/trimmed_logo},{$LOGO_URL}}}" title="{!FRONT_PAGE}" alt="{$SITE_NAME*}" /></a></h1></center>

to this:

Code

<center><h1><a class="logo_outer" target="_self" href="{$PAGE_LINK*,:}" rel="home"><img class="logo" style="float: center;" src="{$?,{$MOBILE},{$IMG*,logo/trimmed_logo},{$LOGO_URL*}}" width="{$IMG_WIDTH*,{$?,{$MOBILE},{$IMG,logo/trimmed_logo},{$LOGO_URL}}}" height="{$IMG_HEIGHT*,{$?,{$MOBILE},{$IMG,logo/trimmed_logo},{$LOGO_URL}}}" title="{!FRONT_PAGE}" alt="{$SITE_NAME*}" /></a></h1></center>


For the background color, you will have to alter the background-color CSS code for the <header> tag. You can add the style override to the <header> tag by changing this line:

Code

<header class="float_surrounder" itemscope="itemscope" itemtype="http://schema.org/WPHeader">

to this:

Code

<header class="float_surrounder" itemscope="itemscope" itemtype="http://schema.org/WPHeader" style="background-color: #000000">


With these changes I only noticed one problem I couldn't readily resolve. Maybe it's because I tested the edits on my already altered theme. In my case, these changes result in a small space between the bottom of the logo and the top of the navigation menu that wasn't there before. With your black background on the logo and black background added to the header, it shouldn't be too noticeable. To fix that extra space I suspect there is some other CSS style that needs to be overridden, but it wasn't obvious what it was using Google Chrome Developer Tools.
Back to the top
 
Posted
Rating:
#102146
Avatar

Community saint

Fletch is right, the <center></center> tags shouldn't be relied on. They should continue to work for the foreseeable future. But for consistency with the newer coding standards, <center> should be replaced with <div align="center"> and then replace </center> with </div>.
Back to the top
 
Posted
Rating:
#102147

Fan in action

Fletch,
Thanks for your input!

I pasted your code string into GLOBAL_HTML_WRAP.tpl and changed the css to float:center but it is still hanging to the left.

I then tried putting bgcolor="#000000" in several different positions but couldn't get that to work either.

I wouldn't mind too much if the logo was on the left and I could get the right side to be black then I could just put the global_banner back in there. That would save me trying to figure out how to get the banner code working as a box in the side panel. Maybe a repeating strip image place in the right spot?

Like here in the css...

Code

.logo_outer {
        margin-bottom: 8px;
        width: 980px;
        height: 100px;
        float: center;
        background: url('{$IMG;,header}') no-repeat !important;


Or maybe I could put the color call there instead of the url call?

Desert Drew
Not as dumb as I sound...
Just winded from the STEEP climb to ocPortal nirvana!
Back to the top
 
Posted
Rating:
#102148
Avatar

Community saint

Desert Drew said

Fletch,
Thanks for your input!

I pasted your code string into GLOBAL_HTML_WRAP.tpl and changed the css to float:center but it is still hanging to the left.

I then tried putting bgcolor="#000000" in several different positions but couldn't get that to work either.

I suspect the CSS background-color style is probably overriding the bgcolor HTML attribute. Check back up a couple of posts where I put some code snippets. Instead of using HTML attributes, you can use the CSS style overrides directly in the template file.
Back to the top
 
Posted
Item has a rating of 5 (Liked by Fletch)  
Rating:
#102149

Fan in action

Jason and Fletch.
You guys are a great asset to the ocPortal community!

Jason's code for the black background is working now but the logo still won't center. I tried changing the <center> call to a <div align="center" call, no go...

I actually like it on the left now that I can see the whole header in black.

So, now I'm trying to get the global_banner back in there (it is a great advertising spot).

I reinstalled the banners ad-on and made sure the code was back in the header template. No show.
I don't see a mention of it when inspecting the page with Firebug.
Any ideas?


EDIT:

Jason said

In my case, these changes result in a small space between the bottom of the logo and the top of the navigation menu that wasn't there before.

I had the logo hanging down 1 pixel into the navbar, fixed it by changing "margin-top: 99px" to "margin-top: 100px" here in global.css...

Code

    .global_navigation {
            .global_navigation {
        margin-top: 100px !important;
        text-align: center !important;
        min-height: 30px !important; !important;
        text-align: center !important;
        min-height: 30px !important;



Last edit: by Desert Drew

Desert Drew
Not as dumb as I sound...
Just winded from the STEEP climb to ocPortal nirvana!
Back to the top
 
Posted
Item has a rating of 5 (Liked by Fletch)  
Rating:
#102150

Fan in action

Never mind...
When I reinstalled banners add-on it reverted to admin banner blockage. Shows fine with my "test" member!

You guys were AWESOME! Thanks!



Last edit: by Desert Drew

Desert Drew
Not as dumb as I sound...
Just winded from the STEEP climb to ocPortal nirvana!
Back to the top
 
Posted
Rating:
#102154
Avatar

Community saint

Desert Drew said

Never mind…
You guys were AWESOME!

 :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
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: