Loading...
 
Skip to main content

Themes

Forum List Topic List

 
Thread actions
Print this page
  • Print all pages

    • Header layout

    Posted by cgc0202

    Hello,

    Thanks to all those who have been helping people like me (here in the forum) with not much scripting experience. I am beginning to make more radical changes in the layout myself.

    I created a section of my website that combined five different programs (essentially each a separate webpage on its own), including Tikiwiki as the anchor website. I used the "header" section to unify these separate webpages, so that the visitor can go from one website to another almost seamlessly — using multiple logos instead of just one logo, as well as elaborate navigation links, in the header.

    In the first attempt, I modified the tiki-site_header.tpl, and I did not check sitelogo box in the Admin "Site Identity". I modified all the stylesheets also (i.e., adding more stylesheet specifications) and/or editing the existing specifications.

    This is how "Header Version1"Question looks using "Safari"Question. I missed some closing "divs" in the "Header Version1"Question, and made the corrections so that the navigation links at the bottom are either aligned left or aligned right (final layout not shown).

    Here's what I encountered. While this is how "Header Version1"Question looks using "Safari"Question, it did not look like that in any of the other Mac browsers, I tried Camino (v1.0), Firefox and Netscape.

    In the other browsers, the "header content" showed only up to the GenIndex (A->Z) navigation. The red (Pamana ~ Legacy) centered logo, as well as the right and left navigational links (below the red logo) were missing in the header. [Note that when I view the "Page Source", the scripts and tags for the missing items were there in the other browsers.]

    As an alternative to resolve the issue of missing items, I checked the "Top bar" in the Admin and placed the entire stuff in the "tiki-top_bar.tpl", but the same problem was encountered in the other browsers, but not with "Safari"Question. [I did more modifications in an attempt to resolve this layout issue. These are outlined in a separate post in the future because other sections of the webpage layout have been modified too.]

    I should note also that, the same "Header Version1"Question layout, albeit with slight modifications in the logos and navigation links were used in some of the other programs. Except for minor variaions, all browsers I tested provided the same layout as in the "Safari"Question.


    Any bright ideas on how to resolve this would be most welcome.


    cgc0202

    Reads: 1651
    Posted by Rick Sapir / Tiki for Smarties United States

    I'd have to see the actual TPL and HTML code, but off the top of my head some things to check:

    1. Confirm that your HTML and CSS are valid. Different browsers render invalid code differently.
    2. I'm not 100% sure what you're trying to accomplish, but it sounds like you simply want differenet versionsof tiki-top_bar to display in different Tiki sections (wiki, article, forums). Am I close? If so, you can simply set up a check in tiki.tpl for each header type:
    Image
    Copy to clipboard
    {if $feature_top_bar eq "1"}
insert the code for wiki-specific top bar here
{elseif $feature_top_bar eq "2"}
insert the code for article-specific top bar here
{elseif $feature_top_bar eq "3"}
insert the code for forum-specific top bar here
{else}
insert your default top bar here
{/if}


    Then, in the PHP file for each section, simply assign the correct value to $feature_top_bar. For example, in tiki-index.php (for wiki) add:

    Image
    Copy to clipboard
    $smarty->assign('feature_top_bar', '1');


    HTH,

    -RickQuestion

         Posted by cgc0202

    Thanks Rick,

    I used your suggestions as a starting point, since I read your response, and I was able to create a header layout that now works on most of the browsers — essentially solving the issues raised above. It was a bit slow, as I did trial and error. The key point from your response above was finally getting the correct tpl, i.e., the "tiki.tpl" that showed the overall structural layout of a tikiwiki page.

    I have modified the "header" and the "footer" further, to include a vertical line from top to bottom in both the left and right sides. This time, as before, it works with Safari but not with the other browsers. The additional layout changesQuestion I introduced previously in the "header" and the "footer" of two other different programs, and they worked for all browsers I have tested — Safari, Camino, Firefox, Netscape and Internet Explorer.

    This Demo LayoutQuestion demonstrates that if I strip the page with most of the tikiwiki scripts, it works in all browsers. I included also in the Demo LayoutQuestion the links to the actual modifications of the tpls, as you suggested in your response above.

    I have related questions also in the Demo LayoutQuestion, on how I might be able to further improve the layout. I would be grateful of any suggestions from others too.

    Thanks.

    cgc0202

    N.B.

    Note that removing the added scripts for the vertical lines on the left and the right sides would create a revised layout that works on Safari, Camino, and Firefox. The stripped version works also on Netscape or Internet Explorer but there are other tikiwiki-related layout issues with Netscape and IE, even before any modifications. These issues, as I stated above I encountered mostly when using the tikiwiki, they are minor or non-existent with the other programs I have used to date.