How do I make a new position collapsible?

Forums    Joomla Templates Club    JA Teline II    How do I make a new position collapsible?
Viewing 12 posts - 16 through 27 (of 27 total)
1 2
  • Author
    Posts
  • cgc0202 Friend
    March 12, 2009 at 10:50 am #295581

    <em>@scotty 117219 wrote:</em><blockquote>Thanks Menalto, I think it’s a different way of doing the same thing?

    So we know now how to render the HTML for a left column ONLY if there is a module published there. We also know how to set a different CSS ONLY if there is a module in the left column.

    So the only problem now is the actual CSS for each scenario.</blockquote>

    Thanks for your help Scotty,

    Your original suggestion and persistence kept the ball rolling. If my analysis in the previous post was correct (can you review it please), it is not the CSS that is incorrect, just the closing argument in the proposed .conditional statement.

    Cornelio

    scotty Friend
    March 12, 2009 at 2:43 pm #295614

    cgc0202;117234Suggested revision by Scotty
    Layout correct also, like the original, but still does not collapse.

    Was the error in the Scotty proposed script just the incorrect closing script — <?php } ?> changed to <?php endif; ?> — for the conditional statement?

    No, the ENDIF is not required here. My original script does indeed work.

    I think the reason you thought it didn’t work is because you had adjusted the #ja-content to allow for a left column being there – but had no alternative CSS for when it wasn’ there. So… if you made #ja-content {float:right; width: 80%;} this would be fine when there was a left column but when there wasn’t one you would have a 20% empty space on the left. This is not actually a left column it is just an empty space.

    The script I was working on last night worked the same as Menaltos except rather than writing the styling into the head I was giving two diffrent ID’s to ja-content. One for when there is a module in left position and one for when there isn’t.

    I was also using the ja-container div instead of ja-content as I thought it would work out easier but I realised later that this was a mistake.

    This is the script…

    [php] <?php if($this->countModules(‘iblab-lefcol’)) : ?>
    <div id=”iblab-lefcolwrap”>
    <jdoc:include type=”modules” name=”iblab-lefcol” style=”xhtml” />
    </div>
    <?php endif; ?>

    <?php if($this->countModules(‘iblab-lefcol’)) : ?>
    <div id=”ja-content”>
    <?php else: ?>
    <div id=”ja-content-wide”>
    <?php endif; ?>

    [/php]Anyway…. glad it’s sorted now and hopefully other members will find this thread useful.

    questbg Friend
    March 12, 2009 at 3:04 pm #295618

    <em>@scotty 117284 wrote:</em><blockquote>Anyway…. glad it’s sorted now and hopefully other members will find this thread useful.</blockquote>

    Can’t say ‘useful’ is the exact word, but certainly fascinating! 🙂

    This level of code-hacking was way beyond me but great to see it come together for the final result.

    Collaboration of this kind should be multiplied … watch your Inbox chaps 😉

    scotty Friend
    March 12, 2009 at 3:15 pm #295620

    questbg;117288This level of code-hacking was way beyond me but great to see it come together for the final result.

    Entry level PHP to be honest but yea, it can look very complicated at first.

    I’d love to see more active members on the forum with PHP knowledge. There are tons who can help with CSS and Joomla configuration but very few who can write or debug PHP.

    cgc0202 Friend
    March 12, 2009 at 5:36 pm #295628

    <em>@Menalto 117237 wrote:</em><blockquote>You can do this in many different ways, but the thing i did was the easy way, and easy for other to test it out for them self.
    Above the <head> tag i added this here:
    [PHP]<?php if ($this->countModules(‘iblab-lefcol’)) : ?>
    <style type=”text/css”>
    #ja-content div.ja-innerpad {
    float:right;
    overflow:hidden;
    padding:0 5px 0 10px;
    width:85%;
    }
    </style>
    <?php else: ?>
    <style type=”text/css”>
    #ja-content div.ja-innerpad {
    float:right;
    overflow:hidden;
    padding:0 5px 0 10px;
    width:98%;
    }
    </style>
    <?php endif; ?>
    [/PHP]
    Which means IF a module is published in iblab-lefcol position([PHP]<?php if ($this->countModules(‘iblab-lefcol’)) : ?>[/PHP]) it will output the css:

    <style type="text/css">
    #ja-content div.ja-innerpad {
    float:right;
    overflow:hidden;
    padding:0 5px 0 10px;
    width:85%;
    }
    </style>

    And if no position is published in iblab-leftcol([PHP]<?php else: ?>[/PHP]) it will output the css:

    <style type="text/css">
    #ja-content div.ja-innerpad {
    float:right;
    overflow:hidden;
    padding:0 5px 0 10px;
    width:98%;
    }
    </style>

    And ofcourse, your module code in the index.php file is here:


    <!-- BEGIN: *** left column position module site *** -->

    <?php if ($this->countModules('iblab-lefcol')) : ?>
    <div id="iblab-lefcolwrap">
    <div class="iblab-lefcol">

    <jdoc:include type="modules" name="iblab-lefcol" style="xhtml" />

    </div>
    </div>
    <?php endif; ?>

    <!-- END: left column position module site -->

    </blockquote>

    Hi Menalto,

    My main interest would be what would be more stable of the various options of layouting. Before you responded, I was looking at the “left” and “right” columns in the JA designated “columns”.

    There is a slight change in the php script here that I missed in my previous response??? There is an additional php code:
    [PHP]<?php else: ?>[/PHP]
    and also placed at the head, as you clarified here, but also mixed with the “style” codes — apart from the two other — I recognized earlier (see my previous post) placed in the body of the index.php itself.

    If the script and the stylesheets codes are separated as follows: php sctipt in the index.php body and stylesheets codes (tags) in the template.css:

    What exactly would be added to the index.php and the template.css?

    cgc0202 Friend
    March 12, 2009 at 5:53 pm #295631

    <em>@scotty 117284 wrote:</em><blockquote>No, the ENDIF is not required here. My original script does indeed work.

    I think the reason you thought it didn’t work is because you had adjusted the #ja-content to allow for a left column being there – but had no alternative CSS for when it wasn’ there. So… if you made #ja-content {float:right; width: 80%;} this would be fine when there was a left column but when there wasn’t one you would have a 20% empty space on the left. This is not actually a left column it is just an empty space.

    The script I was working on last night worked the same as Menaltos except rather than writing the styling into the head I was giving two diffrent ID’s to ja-content. One for when there is a module in left position and one for when there isn’t.

    I was also using the ja-container div instead of ja-content as I thought it would work out easier but I realised later that this was a mistake.

    This is the script…

    [php] <?php if($this->countModules(‘iblab-lefcol’)) : ?>
    <div id=”iblab-lefcolwrap”>
    <jdoc:include type=”modules” name=”iblab-lefcol” style=”xhtml” />
    </div>
    <?php endif; ?>

    <?php if($this->countModules(‘iblab-lefcol’)) : ?>
    <div id=”ja-content”>
    <?php else: ?>
    <div id=”ja-content-wide”>
    <?php endif; ?>

    [/php]Anyway…. glad it’s sorted now and hopefully other members will find this thread useful.</blockquote>

    Hi Scotty,

    I recognize the conditional statements you were doing. I was trying to make it work, as you were trying to layout, but I am not just knowledgeable enough on PHP scripting. I thought no one else would respond, so I decided I will wait for it. I fell asleep as I was trying.

    So, the post by Menalto was a welcome surprise.

    As Menalto indicated, there are different ways of doing it. This is apparent in the different modes of collapsing the various positions — for example, the “left” and “right” columns in the standard Teline II columns (the true right column) has a different conditional script.

    What is the CSS for your “ja-content-wide”? Is it:

    #ja-content-wide
    (
    float: left;
    width: (value in %);
    (other specifications???);
    )

    Would you consider sharing a complete index.php just like Menalto, as well as the changes in the affected tags in the template.css?

    I would like to try the choices in some demo installations, and see how each method behave when I combine them with the other layouts I am experimenting with.

    Thanks,

    Cornelio

    scotty Friend
    March 12, 2009 at 8:54 pm #295642

    Well I should actually have said…
    [php]<?php if($this->countModules(‘iblab-lefcol’)) : ?>
    <div id=”iblab-lefcolwrap”>
    <jdoc:include type=”modules” name=”iblab-lefcol” style=”xhtml” />
    </div>
    <?php endif; ?>

    <?php if($this->countModules(‘iblab-lefcol’)) : ?>
    <div id=”ja-content-narrow”>
    <?php else: ?>
    <div id=”ja-content”>
    <?php endif; ?>[/php]So #ja-content would use the original template.css unmodified and #ja-content-narrow would use a new section in the CSS that displays the #ja-content at 80% or whatever. The ja-col (telines left and right) would have to be a set px width though to keep the layout neat.

    I’ll post both the index.php and template.css later tonight.

    As to which method is best… my and Menaltos methods are pretty much the same. We are both calling a particular sytle based on a particular condidtion. The only difference is Menaltos style variants are within the document (in the HEAD) and mine are in an external stylesheet (template.css)

    scotty Friend
    March 12, 2009 at 10:36 pm #295646

    OK… finished.

    I put the true left column INSIDE #ja-content (as you were already doing). I was working off the teline demo so I kept the mass-col at it’s original width regardless of if there is a true left column or not so the video module and ja-tabs still look fine. This can easily be adjusted in the CSS (as you have done with your own site). This means when there is a true left column some of the images in the main content area are a little wide so this is something to be careful of when publishing articles as I mentioned in a previous post.

    I’ve changed some names too. the position is called trueleft and it’s wrapped by #trueleft-wrap

    The important part of the index.php is…
    [php]<!– BEGIN: CONTENT –>
    <div id=”ja-content”>
    <!– BEGIN: TRUE LEFT COLUMN –>
    <?php if($this->countModules(‘trueleft’)) : ?>
    <div id=”trueleft-wrap”>
    <jdoc:include type=”modules” name=”trueleft” style=”xhtml” />
    </div>
    <?php endif; ?>

    <!– END: TRUE LEFT COLUMN –>

    <?php if($this->countModules(‘trueleft’)) : ?>
    <div class=”ja-innerpad-narrow clearfix”>
    <?php else: ?>
    <div class=”ja-innerpad clearfix”>
    <?php endif; ?>[/php]and the change to CSS…

    div.ja-innerpad-narrow {
    padding: 0 15px 0 0;
    float: left;
    width: 78.8%;
    }

    #trueleft-wrap {
    float:left;
    overflow:hidden;
    padding:0 5px 0 0;
    width: 18%;
    }


    I’ve attached both files in full. To use them first backup your teline template folder and then extract the zip to your /templates folder and overwrite what’s there. The zip contains 3 files… index.php, templateDetails.xml, and template.css.

    As I said, this is not a better way than Menaltos, it’s just a slightly different way.

    1. ja_teline_ii.zip

    1 user says Thank You to scotty for this useful post

    1. cgc0202
    cgc0202 Friend
    March 12, 2009 at 11:44 pm #295655

    Thanks Scotty,

    I will update one of my “older” Sandbox sites and try your scripts either later tonight or tomorrow and get back to you to show a revised Sandbox page.

    <em>@scotty 117340 wrote:</em><blockquote>OK… finished.

    I put the true left column INSIDE #ja-content (as you were already doing). I was working off the teline demo so I kept the mass-col at it’s original width regardless of if there is a true left column or not so the video module and ja-tabs still look fine. This can easily be adjusted in the CSS (as you have done with your own site).
    </blockquote>

    I agree. Initially, I was trying a standard “left-center-right” but I realized, not only was it tricky and can easily unravel but it will entail revisions of the default ja CSS tags. I actually modified the CSS of the template.css extensively to get a new feel as well as variations of the layout.

    What I found was that the “nested divs” layout is much easier to keep track and layout than the standard “left-center-right”. If over done though, to many “nested divs” can further slowdown the already slow Joomla 1.5.x-Teline II

    <em>@scotty 117340 wrote:</em><blockquote>
    This means when there is a true left column some of the images in the main content area are a little wide so this is something to be careful of when publishing articles as I mentioned in a previous post..
    </blockquote>

    Yes indeed. I kept on postponing my attempt on the “true left column”, but I realized it has potential applications and with collapsibility, it is possible to go from three main columns (in the home page) to two main columns in articles or to use a largely vacant left column (minimal text modules included) as a “wide margin”. I have planned applications also where the “Article Index” could be very long, and the layout would be better served with a wider “Content” column.

    As to the images, I found something very interesting. At least in the FrontPage module, if you specific the width and height — not only would it have the correct “WxH” ratio that would be limited not to exceed the width as specified in the JA News FrontPage.

    <em>@scotty 117340 wrote:</em><blockquote>
    I’ve changed some names too. the position is called trueleft and it’s wrapped by #trueleft-wrap

    The important part of the index.php is…
    [php]<!– BEGIN: CONTENT –>
    <div id=”ja-content”>
    <!– BEGIN: TRUE LEFT COLUMN –>
    <?php if($this->countModules(‘trueleft’)) : ?>
    <div id=”trueleft-wrap”>
    <jdoc:include type=”modules” name=”trueleft” style=”xhtml” />
    </div>
    <?php endif; ?>

    <!– END: TRUE LEFT COLUMN –>

    <?php if($this->countModules(‘trueleft’)) : ?>
    <div class=”ja-innerpad-narrow clearfix”>
    <?php else: ?>
    <div class=”ja-innerpad clearfix”>
    <?php endif; ?>[/php]and the change to CSS…

    div.ja-innerpad-narrow {
    padding: 0 15px 0 0;
    float: left;
    width: 78.8%;
    }

    #trueleft-wrap {
    float:left;
    overflow:hidden;
    padding:0 5px 0 0;
    width: 18%;
    }


    I’ve attached both files in full. To use them first backup your teline template folder and then extract the zip to your /templates folder and overwrite what’s there. The zip contains 3 files… index.php, templateDetails.xml, and template.css.

    As I said, this is not a better way than Menaltos, it’s just a slightly different way.</blockquote>

    It is really tricky understanding the meaning of terms in the JA CSS. When I started using them, I was quite confused because Top is not truly at the top, and neither do the mean the same thing for “left” and “right”. Since I revised my CSS files quite a bit, I decided to use “new prefix” for added CSS tags.

    I also changed quite a few files, so it gets tricky whenever there is a new update.

    Thanks again.

    Cornelio

    cgc0202 Friend
    March 13, 2009 at 1:00 am #295661

    <em>@questbg 117288 wrote:</em><blockquote>Can’t say ‘useful’ is the exact word, but certainly fascinating! 🙂

    This level of code-hacking was way beyond me but great to see it come together for the final result.

    Collaboration of this kind should be multiplied … watch your Inbox chaps ;)</blockquote>

    Chris,

    Actually, there are many potential applications for the addition of a “true left column” — to use the term of Scotty (in a later post).

    First, with collapsibility feature that Menalto and Scotty suggested, it allows you to go from “three major columns” to two major columns for example.

    And you can add variability more specifically to individual sections or categories. For example, the “true left column” explored here can be used creatively to create left margin for aesthetic purposes.

    I stated “major complexity” because you can have more complexity (more columns, if you want) by using what I referred to here as “nested divs” layouting. If you want you can “easily create” either two or three major columns, or even more columns — using the simple scripts suggested by Menalto or Scotty.

    Note that you can achieve “multiple” columns using the feature of the JA News module — but the columns created are always of equal width of 2, 3, 4, etc.

    As I illustrated in the skeletal layout in the original thread, you can now create side by side columns with different widths, or even different heights (in the same “major” column).

    This is part of the key features of the “modular” template design that I was discussing with you in private correspondence late Summer last year.

    If you are patient enough, you can literally create a news-magazine, as complex as that of the New York Times, again using similar scripts as that suggested by Menalto and Scotty.

    This is the reason why I requested both Menalto and Scotty to provide a more detailed files, in this case, as was done by Scotty — the index.php, the template.css, and the templateDetails.xml — to help us who are not experts in php and css design to simply “copy and paste” with patient substitution of the CSS tags with new ones (for new sets of “nested divs” module).

    Thus, I hope Menalto will be kind enough to share the same set of files.

    The php scripting is more tricky, but all website owners must learn a bit of CSS — tags identification and modification. [I provided a few tutorials before.[ Most of the questions asked here in the forum would never be asked, if each of us take the time to learn CSS basics.

    Of course, the CSS files of more complex templates may be more tricky because there are so many components to consider.

    Cornelio

    cgc0202 Friend
    March 13, 2009 at 1:37 am #295667

    <em>@ShannonN 117222 wrote:</em><blockquote>Hey! guys have you only just noticed JA couldn’t care less about Teline II? or other templates that have been out for a long time?:D

    Maybe they’re too busy developing the Magento stuff for the very elite few at this point to give a rats about the long term template club supporters. OOps wash my mouth with soap 😉 I’ll have you know who making comments about my attitude 😮 Whooo ooo:p</blockquote>

    ShannonN,

    I was browsing the JM Purity tonight and with some redesign, it could actually great possibilities. I am glad they are taking the time to develop it — a lot more “professional” as a commerce site compared to previous standard JA Commerce Templates.

    And, I thought of your post here, thus I came back to respond to it.

    Yeah, last year around Summer, there was almost a “revolt” because of lack of support, especially in the Teline II with so many unresolved issues then. And I was one of those who complained loudly. That was the reason why last Summer, I advocated also in numerous threads the formation of an independent Collaborative Support Group.

    However, as argued quite effectively by some members — not just because they are sympathetic to Joomlart — if you examine many of the opened new threads (and old threads), each one could be easily answered by each member, if each of us take the time to do some basic reading.

    For example these questions:
    How do I change the background color to red? or blue?
    How do I change the text to bold (or the reverse, not bold)?
    Uppercase to lowercase? or vice versa.
    Make the spacing wider, or narrower?
    etc., etc., etc., etc.

    All the above are related questions — CSS issues (not php scripting which may be more difficult for most of us without formal training in scripting, myself included; thus this thread.)

    But if one knows how to use the feature “Page Source” one can identify the specific set of CSS tags to start answering each of the above questions. The next step is to go to the most likely CSS file (most are in template.css, then next is ja-news.css, etc.)

    Of course, even CSS issues are not always easy. For the life of me, I could not find the complete CSS tags that define the layout of Page Counter of a multipage article, even if I found the “pagenavcounter” and related CSS tags.

    It takes time, but it is worth the effort. In my case, it beats waiting for an answer that may never come.

    I agree that Joomlart should do more. However, there must be fair compromise on what we expect from Joomlart and what we can do to help ourselves, especially for what we pay.

    Just considering both sides.

    Cornelio

    csolar Friend
    September 25, 2009 at 1:01 am #318502

    This is fabulous, thanks!

    I increased the padding-right on #trueleft-wrap to 10px instead of 5px; it looked a bit cramped to me. Still, though, I’m noticing that what’s missing is the thin vertical line that normally separates module positions. Any idea how I’d add that for trueleft?

  • Author
    Posts
Viewing 12 posts - 16 through 27 (of 27 total)
1 2

This topic contains 27 replies, has 6 voices, and was last updated by  csolar 15 years, 2 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum

Important Notice :

New Unified Portal is live

Must Read

Jump to forum

Categories