[Rezwan]

Re: those links to ee templates posted earlier. Yep. Boring. The Joomla stuff is much more eyecatching.

Here’s one other source of templates: http://themeforest.net

[Rezwan]

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.

It’s not so bad. Well, I’ve never done it before, either, so it may turn out to be bad. Let’s just start with developing a design first, and then see how hard it is to adapt the joomla code to ee templates. And no hurry.

I have Joomla template envy, I won’t deny it. But I think ee is better in the long run (unless Joomla has changed since I looked at it before).

EE is more customizable, less structured. EE can handle multiple web sites with ease (and we’re going to add a plasma cosmology site and the plasma network site soon), multiple weblogs, nearly unlimited number of member groups, custom fields, and so on.

About weblogs, examples on our site would be the forthcoming “instruments” weblog that we’ll be setting up and the contenders weblog. They will have a number of custom fields for different attributes.

Sculptable Weblogs, i.e. different fields for each one and the open-ended thinking that this fosters…

As someone once said, things should be as simple as they can be but no simpler. Not every object to be published on a site is the same type of thing. Rather, they can be abstracted through discussion into various types, each of which type should be definable. That’s what I meant before by sculptable weblogs. Without them, objects to be published are squeezed into a standard shape of title/summary/body. When your structure is too simple for what you’re trying to do with it, you end up complicating things hopelessly.

The other ee advantage is the “templating”, which, as noted, is different from Joomla templates:

While I don’t think EE’s learning curve is difficult, there is an initial slow start because how to get started is different than in WP or Drupal or Joomla and friends. There’s what I call a light bulb moment when you begin to get it.

That moment usually starts with templates. Once you understand that a template in EE is not like a template/theme in anything else, and functions like includes, complete with nested embedding, then the light bulb goes on. After that, it gets brighter, even if you’re dim like me.

True, I haven’t exploited these attributes yet, so it just looks like the focus fusion site is a minimalist blog and/or brochure site with some basic info that fits into that structure. But I believe the site will grow in all kinds of unexpected ways, with various content applications from various different classes of members. I’m obviously not communicating it well now.

In any case, “every girl crazy bout a sharp dressed man”, so if we get some nice design elements onto the site, that would be fantastic. Do your magic with the design for now, and let me worry about the code integration part.

[Rezwan]

amcnea wrote: Hence, it may take good understand of the HTML and the CSS in it’s entirety in order to parse it.

I have more difficulty with design decisions, not with code. E.g., it’s harder for me to decide on colors, backgrounds, box shapes, font sizes, border thickness, spacing, etc. Once those decisions are made and someone has coded them, cutting and pasting the relevant piece of code is not a problem.

Also, I have trouble with graphics. But once the graphic is designed, calling it up in the css and html isn’t a problem. A lot of graphics people take for granted, like the rounded corners of boxes.

But once all the graphic assets are there, and someone has developed the code that describes the design, really, putting the code where it belongs isn’t too hard.

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.

Yes, this was my other developer friend’s complaint about Joomla. It meant you couldn’t really modify the template much. You just had to choose it and stick with it.

Also, a large portion of the CSS will be completely irrelevant to what is being displayed because Joomla is created to be heavily modifiable.

True enough. Like in the code snippets above, there was no banner, and the em tags were empty. But this gets us back to modularity. We only need the bits of code we use. From glancing at the code, it looked pretty well documented, so you could pull out the pieces you need.

I like doing this a la cart.

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

Certainly, if you loaded all the code, it should all logically (not magically) work. It’d be overkill, but not magic.

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.

Yes, one would need to know where those controls are.

About that blue rotating thing. As mentioned, I preferred the one on your other site with a picture that changed when you click one of the six shown links. So you can see the relationship between image and action.

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:

Yes, I’m all strict. Perhaps transitional is the way to go. A kinder, more forgiving approach.

[Rezwan]

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.

[Rezwan]

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>

[Rezwan]

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.

[Rezwan]

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.

[Rezwan]

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

and end with the close of the footer div.

So, when you embed it with the handy

{embed=bits/footer}

the template that your web user is calling up would in turn call up the bit of html code for the footer and plop it into the final html document served up to the user.

Then, if you want to change the footer design AND structure, you change 2 documents: the css, and the bits/footer doc. Then the footer changes site-wide.

These names are chosen arbitrarily. For example I just started this template-group “av” that stands for audiovisual, and I’m starting to put pieces of movies there. Like Eric’s google video is {embed=bits/google-video}

NOTE: I may change my approach to “av” at some point and create an “av weblog” instead. The difference? The av weblog would be called up with content based expression engine weblog tags, instead of the more structure/design based template tags. More dynamic that way, for video content that changes a lot. If new stuff is coming up, which it should.

Back to your question: we wouldn’t be “inserting it into expression engine” (that statement doesn’t mean much). We would be calling up the bits and pieces of relevant html coding and stitching together the whole document with expression engine.

I’m just trying to emphasize the modularity of each part of design.

I think it’s pretty flexible. All the hairy html is in the “bits”. But overall, a website is a simple plate with compartments, and you div(vy) up those compartments however you like.

OK, i know you know. I’m saying this is how elegant it is with ee.

[Rezwan]

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.

[Rezwan]

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

[Rezwan]

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.

[Rezwan]

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

[Rezwan]

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

[Rezwan]

Rezwan wrote: About that grey nav bar, maybe it can be split into two, top tier and bottom, different colors, the top being “content” as in, “things to read”, and the bottom, “action”, as in things to do and other features.

Or perhaps:
Content: About FFS | What is focus Fusion | LPP Experiment | Aneutronic etc.
Resources: Plasma network | Learning Center | Fun | Gallery | Forums | Events

There will be a lot of cross reference, which may be seen as redundancy.

[Rezwan]

Back to JShell and the yearning for a professional look – I put that down to design.

I’m working on structure, and W3 compliance.

Goal is to set up a kalashnikov of websites that won’t jam.

If we clearly define structural bits, it will mean that we can get people to design a great site just by changing one css document.

Design comes at the end.

Like “Avatar”, where the actors spent years in spandex with dots on their faces in rooms with green screens and tape all over the place, getting the motion capture down. The final creatures and settings you see on the screen are from the next set of years where the designers fill in the color and fur and stuff. Insert bushes, cliffs, bugs and waterfalls. (I haven’t seen it yet, so I’m not sure what all they insert).

I’m going for the csszengarden.com school of design. Use flash only for specific educational features – interactive movies embedded on the site and the like.

[Author]

Posts