Viewing 15 posts - 16 through 30 (of 48 total)
  • Author
    Posts
  • #5516
    Rezwan
    Participant

    Thanks to amcnea for taking the initiative in design. Attached is a screen grab for the design.

    This is a modification of the nexus template by RocketTheme for Joomla. Visit the site and click in the drop down template menu on top. http://demo.rockettheme.com/

    This is a good route to go. We get a spiffy template with all the cool javascript dropdown menus and such already designed, modify it to insert the expression engine tages for dynamic content. I believe these templates have been designed with w3 validation css and xhtml in mind, so it shouldn’t be too tricky to incorporate.

    Well, it probably is a bit tricky. But the result may well be worth it.

    Anyway, check out this draft. Great job! I like the copy on the text and the images as well. The design was in motion with the top bar changing ever few seconds.

    Attached files

    #5517
    Aeronaut
    Participant

    Rezwan wrote: Thanks to amcnea for taking the initiative in design. Attached is a screen grab for the design.

    This is a modification of the nexus template by RocketTheme for Joomla. Visit the site and click in the drop down template menu on top. http://demo.rockettheme.com/

    This is a good route to go. We get a spiffy template with all the cool javascript dropdown menus and such already designed, modify it to insert the expression engine tages for dynamic content. I believe these templates have been designed with w3 validation css and xhtml in mind, so it shouldn’t be too tricky to incorporate.

    Well, it probably is a bit tricky. But the result may well be worth it.

    Anyway, check out this draft. Great job! I like the copy on the text and the images as well. The design was in motion with the top bar changing ever few seconds.

    Yeah, Baby! That theme is a huge improvement imho. There’s a simple script that detects the browser version and shows code that’s appropriate to, say, Mosaic users. I think you can find it on the W3C tutorial sites, but I’m understanding that over 98% of the web is using a constantly updating browser, so that level of detail (100% W3C compliant) may be in the diminishing returns category.

    #5518
    Rezwan
    Participant

    Yeah, I’m not too worried about the browsers yet. Mostly compatible is good for now.

    What I want to do is break designs down into their basic elements and building the code up from there.

    So, let’s take the basic container of the no frills current ffs site (attached) and the design from last post.

    Actually, I’ll just pull out the masthead of that design plus the paypal box. Compare those with current. In fact, let’s just look at the paypal box.

    This is an exercise in breaking this design down by modules or structural elements. Say, the background/body element, plus a container that constrains the whole site, then the line I have on the top which is for users – but could also be placed on a sidebar instead. Then the masthead. The navigation/menu. Each of these needs to be looked at separately. It would be easiest to design the site this way.

    Taking a look at the simple paypal box. Joomla html is:

                                                                                                                                                                <div class="hilite1">
    <div class="side-mod">
    <div class="module-surround">
    <div class="module-surround2"></div><div class="module-surround3"></div><div class="module-surround4"></div><div class="module-surround5"></div>
    <h3 class="module-title">Paypal Donate</h3>
    <div class="moduletable">

    Please donate, and help make free cheap energy a reality!
    <br>
    <br>
    <!-- Paypal Donate Module from Joomlaspan.com -->

    <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_donations">
    <input type="hidden" name="business" value="you@yourdomain.com">
    <input type="hidden" name="item_name" value="Donation for your services">
    <input type="hidden" name="no_shipping" value="0">
    <input type="hidden" name="no_note" value="1">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="tax" value="0">
    <input type="hidden" name="bn" value="PP-DonationsBF">
    <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">

    </form>
    </div>
    </div>
    </div>
    </div>

    It would appear that their grey box has rounded corners, and each corner is referenced by the “module-surroundx” divs. Not sure.

    Also a decision is made with that button for only one time donation. We just have a link to a page which gives the option for subscription or one time donation. Perhaps the one time donation is best. Then later, we can have fund drives and ask people to donate again.

    The current no-frills box is:

    <div class="note"> <a href="{homepage}/site/article/130">Your Donation</a></div>

    Looking at the html, I think that Joomla has a lot of extra things in their css and html that we could simplify.

    So I would still urge the structural design of the site before design, so we can just extract what we want.

    Attached files

    #5519
    Rezwan
    Participant

    Not to imply the joomla paypal box was too complex. Just that it’s best to break down each piece and reverse engineer that way.

    This class:

           <h3 class="module-title">Paypal Donate</h3>

    …has the info for a 2 colored title, plus the line underneath.

    The moving parts are the most code-intensive, so I’d start with gathering code from the static parts. Like background, container, masthead, background of navigation, windows within the site, footer, all the bits that coordinate to make the whole.

    Lots of options on the joomla site, but I couldn’t find access to the css. I did note the links to the stylesheets (quite a few of them) in the source code.

     <link rel="stylesheet" href="/plugins/system/rokbox/themes/light/rokbox-style.css" type="text/css" />
    <link rel="stylesheet" href="/templates/rt_nexus_j15/css/template.css" type="text/css" />
    <link rel="stylesheet" href="/templates/rt_nexus_j15/css/header-dark.css" type="text/css" />
    <link rel="stylesheet" href="/templates/rt_nexus_j15/css/body-light.css" type="text/css" />
    <link rel="stylesheet" href="/templates/rt_nexus_j15/css/primary-blue.css" type="text/css" />
    <link rel="stylesheet" href="/templates/rt_nexus_j15/css/footer.css" type="text/css" />
    <link rel="stylesheet" href="/templates/rt_nexus_j15/css/typography.css" type="text/css" />

    <link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
    <link rel="stylesheet" href="/templates/rt_nexus_j15/css/menu-fusion.css" type="text/css" />
    <link rel="stylesheet" href="/modules/mod_rokstories/tmpl/css/rokstories.css" type="text/css" />

    You can see how they’ve broken up the pieces into sections. css for the footer, for the body, for the header, for typography. Since they sell designs, we can’t just go in there and lift the code and re-engineer it.

    We’ll have to find one most of us like, buy it, and then adapt it.

    Or in the meantime, there may be other sites there you can adapt from, or just submit a new background or header.

    Anyway, back to structure.

    #5520
    Rezwan
    Participant

    You can see how they’ve broken up the pieces into sections. css for the footer, for the body, for the header, for typography.

    I would start with header (masthead – where “Focus Fusion Society” logo and tagline appear), footer (I like the greater detail of amcnea design attached) and body background/container.

    Show me the css and the minimal xhtml markup.

    Attached files

    #5521
    amcnea
    Participant

    I would say from my experience that the W3C standard is of trivial importance when actually designing a site. I would say it’s more of W3C suggestions then standards. This is because Microsoft IE 6&7;(& probably 8) are NOT W3C compliant and IE has about 70% market share. Although it is probably a good idea to keep your pages close to the W3C spec, I wouldn’t break my back over it.

    I would say that it is FAR more important to break up you files into HTML and CSS. But this is generally already done with these templates.

    Anyways, for anyone who want’s you can check the demo site @ http://75.17.88.183/. However, the site is on my laptop and is NOT at a permanent location. So, if you can’t connect to it that’s why. All I can say is try again later.

    #5522
    Rezwan
    Participant

    Just so you realize how simple it is with expression engine, here is the code for the ffs-12-09 page attached previous post. All I do for each “bit” is have a separate include for it, and that would have the tags on it for sticking it into the page :

    {assign_variable:my_weblog="catblog|news|faqs|books|quotes"}
    {assign_variable:my_template_group="site"}
    {assign_variable:gallery_name="gallery"}

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html >

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset={charset}" />

    <title>{exp:weblog:category_heading }{category_name}{/exp:weblog:category_heading}</title>
    <meta name="description" content={exp:weblog:category_heading}"{meta}"{/exp:weblog:category_heading} />

    {embed=bits/icon}
    <link rel='stylesheet' type='text/css' media='all' href='{stylesheet=styles/ffs}' />
    <style type='text/css' media='screen'>@import "{stylesheet=styles/ffs}";</style>

    [removed][removed]
    <link rel="alternate" type="application/rss+xml" title="RSS" href="{path={my_template_group}/rss_2.0}" />
    <link rel="alternate" type="application/atom+xml" title="Atom" href="{path={my_template_group}/atom}" />

    </head>

    <body>

    <div class="container">

    <!--HEADER-->
    {embed=bits/mast}
    {embed=bits/nav}
    <!-- END HEADER -->

    <!--MAIN CONTENT-->

    <div id="main">

    <div class="colFifth">
    {embed=bits/books}
    </div> <!--end colFifth -->


    <div class="colThreeFifth" >
    <div class="content">

    <!-- For content, there would be a series of conditional statements like so -->

    {if segment_3=="lpp_experiment"} {embed=cat/lpp_experiment}{/if}
    {if segment_3=="aneutronic"} {embed=cat/aneutronic}{/if}
    {if segment_3=="environment"} {embed=cat/environment}{/if}
    {if segment_3=="fusion_race"} {embed=cat/fusion_race}{/if}

    <!-- you get the idea -->

    </div> <!--end content -->
    </div> <!-- end colThreeFifth -->


    <div class="colFifthMin">
    {embed=bits/fund}
    {embed=bits/twitter}
    {embed=bits/register}
    </div> <!-- end colFifthMin -->

    </div> <!-- end of main div -->

    <br class="clearBoth"/> <!--because of floating columns -->

    <!--END OF MAIN CONTENT-->

    {embed=bits/footer}

    </div><!--end containter-->

    <!-- deleted ten lines of google analytics script here -->


    </body>
    </html>

    So…by all means, give it to me as css and html. The css would go into, say “styles/footer” and the html into “bits/footer”, and they’d be called in with the embeds.

    #5523
    amcnea
    Participant

    So…by all means, give it to me as css and html. The css would go into, say “styles/footer” and the html into “bits/footer”, and they’d be called in with the embeds.

    I guess I am not exactly sure what you are trying to do. Are you trying to pull the html and css from the joomla template, and insert it into Expression Engine?

    #5524
    Rezwan
    Participant

    amcnea wrote:

    So…by all means, give it to me as css and html. The css would go into, say “styles/footer” and the html into “bits/footer”, and they’d be called in with the embeds.

    I guess I am not exactly sure what you are trying to do. Are you trying to pull the html and css from the joomla template, and insert it into Expression Engine?

    Yes.

    Pull the html and css.

    It’s not so much that you insert it into EE. EE is just a system that separates design, content and structure, and has some tags.

    EE uses a lot of “templates” – but in a different sense from Joomla. In ee’s case, that “bit/footer” signifies the template “footer” in the template-group “bits”.

    “bits/footer” has all the html required for the footer. It would start with

    #5525
    Rezwan
    Participant

    In other words, when you view the source of the focus fusion website it looks like a lot of stuff, but the ultimate “templates” are as simple as what I posted here.

    #5526
    Rezwan
    Participant

    As to css, the plan is to break those style sheets down, and set them up in the styles div. So far I have
    styles/ffs, which is this:

    /*
    css for Focus Fusion Society - media = screen
    */

    @import url(https://focusfusion.org/index.php/styles/ffs_css);
    @import url(https://focusfusion.org/index.php/styles/nav);

    Soon, will be adding:

    styles/saef
    styles/calendar
    styles/mast

    The above for media=screen.
    Then:

    styles/print
    styles/mobi

    etc. Have to think about how to break that down as well. Right now styles/ffs_css has most everything in it, but I want to break it down.

    I want to make it really obvious what the design and structural elements are and how they support the content.

    Recap:
    1. parallel css sheets + html “bits”
    2. correspond to Design and structure called simply into the final served page
    3. via @import + {embed=bits/…}.

    So, yes. Just need the css and html.

    I have belabored the point.

    #5527
    amcnea
    Participant

    EE uses a lot of “templates” – but in a different sense from Joomla.

    Hmm, maybe I am just not seeing things right (I still haven’t download EE yet), but when I run a google search for “Expression Engine Template” (No Quotes), I get pages such as the following:

    http://expressionengine.com/templates/themes/category/site_themes/
    http://www.nikhedonia.com/notebook/entry/6-brand-new-templates-for-expression-engine/

    And these seem to be showing me templates in the joomla sense of the word. I am also seeing the words “theme” and “site-theme” used synonymously.

    So, yes. Just need the css and html.

    Anyways, as for parsing out the CSS and the HTML, this seems like far to much work (at least for my standard, but I live by a code of laziness). Might I suggest a few alternatives to this approach.

    1) The easy route is probably to get a template (in the joomla sense of the word) for expression engine such as the items listed above. However, those templates arn’t that great and finding a really good one might take some time.

    2) If you really like the joomla templates, try to move everything into a joomla template. (I know you don’t like this option, I only list it for purposes of being thorough.)

    3) If you really like the joomla templates, create a hybridized site. From what I have observed, the login and password for the Expression Engine system is only relevant to the forums. The main FFS website really has nothing to do with the user login system. So, replace the website with a joomla site. Have the forums link on the “Joomla site” point to the “Expression Engine Forums”. Then, alter the login script on the “Joomla Site” so that the following will happen:
    Upon attempting to login in
    A) Log the user into the Expression Engine Site.
    B) If (A) is successful, Log the user into the Joomla Site
    C) If (B) failed, then pull the user registration info from the Expression Engine Database, and create a new Joomla Account for the user, and log him in.
    Note: The user registration section would also have to be altered to simultaneously register a user into joomla and expression engine.

    Option 3 has the advantages of being able to use the Joomla Templates without all the hassle of dissecting joomla, and you can use the joomla back-end for managing the site. Also this allows the forums, and user accounts to remain intact. While duplicating the accounts into the new system at the point of login. Which means no sensitive information has to be given to the developer.

    #5530
    Rezwan
    Participant

    amcnea wrote: And these seem to be showing me templates in the joomla sense of the word.

    Yes, they have those kinds of templates, too. But once you download the free version of ee, you’ll see what I mean about the templates. Or not. It’s really simple.

    Anyways, as for parsing out the CSS and the HTML, this seems like far to much work

    Moving the whole site to another cms is much more work. It’s not just the forums, the content of the site is dynamic, and we want to eventually have the folks posting in forums also posting articles on the website. Option 2 & 3 are out.

    Option 3 has the advantages of being able to use the Joomla Templates without all the hassle of dissecting joomla

    How complex are these joomla templates? The html looked pretty basic. I was able to isolate the…A little over-done. The css I just couldn’t access. That would be a bit long. But that would be the easiest part to import. Then some javascript, which, by the way, you can also use ee “templates” for. The “script” template. So you just {embed=script/whatever}.

    Ah, Joomla does the same thing.

    And it divides the rest up pretty easily.

    This is it for the header:

    <!--Begin Header-->
    <div id="header">
    <div class="wrapper">
    <div class="padding">

    <!--Begin Logo-->
    <a href="/" id="logo"></a>
    <!--End Logo-->

    <!--Begin Banner Position-->
    <!--apparently no banner here -->
    <!--End Banner Position-->

    </div>
    </div>
    </div>
    #5531
    Rezwan
    Participant

    And the menu html is simply:


    <!--Begin Horizontal Menu-->
    <div id="horiz-menu" class="fusion">
    <div class="wrapper">
    <div class="padding">

    <div id="horizmenu-surround">
    <div id="horizmenu-surround2"></div>
    <div id="horizmenu-surround3"></div>
    <div id="horizmenu-surround4"></div>
    <div id="horizmenu-surround5"></div>

    <ul class="menutop level1" >
    <li class="item1 active" ><a class="orphan item bullet" href="http://75.17.88.183/"> <span> Home <em></em> </span></a> </li>
    <li class="item62 parent" > <a class="daddy item bullet" href="/index.php?option=com_content&view=article&id=55&Itemid=62">
    <span> What is focus fusion? <em></em> </span> </a>

    <ul class="level2">
    <li class="item154" ><a class="orphan item bullet" href="http://www.google.com"><span> pB11 Fuel <em></em> </span> </a> </li>
    <li class="item155" > <a class="orphan item bullet" href="/"><span> Dense Plasma Focus <em></em> </span></a></li>
    </ul>

    </li>
    </ul>

    <!--continuing in this pattern for the rest of the drop downs -->

    <div class="clr"></div>

    </div>
    </div>
    </div>
    </div>
    <!--End Horizontal Menu-->
    <div id="menu-spacer"></div>

    <!--End Header-->

    Yes, had to delete some spaces to see the code better. It looks messier on the “view source” page.

    #5532
    amcnea
    Participant

    The problems I am guessing will come up is that when you are parsing out the html (and taking sub-sections of HTML), that those sub-sections will have CSS dependent upon the parent sections. Hence, it may take good understand of the HTML and the CSS in it’s entirety in order to parse it. I might just be overly worried and this problem might not even exist, but it something that I would be looking for.

    Furthermore, the same CSS is going to apply to various different places in the HTML, which may be modified by other CSS dependent on structure, and other files might override previous CSS. Anyways, trying to figure all that out will be annoying at best. Also, a large portion of the CSS will be completely irrelevant to what is being displayed because Joomla is created to be heavily modifiable.

    Perhaps if you just load in all of the joomla CSS files, then maybe everything will just work magically.

    Then there will be options from the CMS which will be fed into things like the CSS and the Javascript. For instance the blue thing which rotates is set to change once every 10 secs, however, this is just an option in Joomla which can be changed to anything or turned off. Within the joomla system, these options are easy to find and modify, but I have no clue how deeply these options are hidden in the Javascript files which are sent to the end user.

    Those are the concerns that I have off hand. I guess I just feel a little apprehension about cutting and pasting from joomla to EE because it is the approach that I know the least about and has the highest number of unknowns. I have moved joomla CMS to Drupal CMS before, and from Drupal to Joomla. I have also integrate Joomla with SugarCRM before (genesis site) in a manner similiar to that outlined in part 3 of my previous post.

    But, I don’t have a problem with giving this approach a try.
    ———————————-
    Before I forget, I noticed on a previous post your EE script started off with:

    This will probably need to be changed to what joomla uses, which is:

Viewing 15 posts - 16 through 30 (of 48 total)
  • You must be logged in to reply to this topic.