Newbie (non profit)--- design issues

Wednesday 30 June 2004 9:07:37 am

Kevin, would it be possible for you to post an image of what you are wanting? It doesn't have to be the actual design (though that would be good), it could just be a white background with some boxes to show the general layout. While you can't upload an image to this site, if you upload it to your own site and provide a link from here, we can view the image and provide some ideas.

Alex
Come join the IRC channel: #eZpublish

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Wednesday 30 June 2004 1:17:11 pm

Alrighty, here are some general directions to get you started. Don't be afraid to ask questions if something doesn't make sense. :)

First, set up an Override template for your front page (should be Node ID 2). This will allow you to make whatever changes you want without risk of hurting anything. If you mess the page up really bad you can just start from scratch in the override template, or just remove it completely to use the one that comes with the system. You'll use overrides a lot. If you want to make a change to a template, use an override, do not edit the default ('Standard') one.
<b>Override Tempaltes Documentation:</b> http://ez.no/ez_publish/documentation/customization/custom_design/override_templates

Once you have a fresh work area, add the News Nodes to your <i>content</i> area and populate them withsome example articles.

Next, edit your main page override templates, adding a <i>fetch</i> block for each News node you want to post on the site. So, you may have some code in your template that looks like this:

{* Grab all the news articles for the first news block *}
{let News1=fetch( content,
                     list,
                     hash( parent_node_id, XXX,
                           sort_by, $node.sort_array,
                           class_filter_type, include,
                           class_filter_array, array( 'article' ) 
                         )
                    )
}
<div id="NewsContainer1">
  <ul>
    {* Loop through all articles that we just fetched. *}
    {section loop=$News1}
       {* Display a link to the article. *}
       <li><a href={$:item.url_alias|ezurl}>{$:item.name}</a></li>
    {* End of loop. *}
    {/section}
  </ul>
</div>
{/let}

{* Grab all the news articles for the second news block *}
{let News2=fetch( content,
                     list,
                     hash( parent_node_id, XXX,
                           sort_by, $node.sort_array,
                           class_filter_type, include,
                           class_filter_array, array( 'article' ) 
                         )
                    )
}
<div id="NewsContainer2">
  <ul>
    {* Loop through all articles that we just fetched. *}
    {section loop=$News2}
       {* Display a link to the article. *}
       <li><a href={$:item.url_alias|ezurl}>{$:item.name}</a></li>
    {* End of loop. *}
    {/section}
  </ul>
</div>
{/let}

This code wil ldisplay an unordered list of links to <i>articles</i> for each of the News nodes. You will need to replace XXX in each block with the <i>Node ID</i> corresponding to the News folder you want to pull from. The same can be done for your Features area.
<b>Fetch Function Examples:</b> http://ez.no/ez_publish/documentation/customization/tips_tricks/fetch_function_examples
<b>Template Language:</b> http://ez.no/ez_publish/documentation/customization/custom_design/examples/template_language

Does this help?

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Thursday 01 July 2004 12:26:29 pm

l

Friday 02 July 2004 11:30:09 am

Thanks Alex!

Tuesday 20 July 2004 8:06:56 am

Have you tried implementing the code I listed above (the ClearFloat horizontal rule)? Try adding the CSS to your style sheet and adding the horizontal rule just before the close div tag for each of the problematic boxes.

If that doesn't work, let me know.

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Tuesday 20 July 2004 1:10:09 pm

Try changing "margin: -0.6em 0;" to something less, like "margin: -0.2em 0;" to see if that makes a difference.

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Wednesday 21 July 2004 9:53:20 am

Glad it worked for you Clay!

Hrrrm, yes, I guess it probably should be reported as a bug in the template.

Alex
bald_technologist on the IRC channel: #eZpublish
http://www.agrussell.com :: http://www.cuttingedge.com

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Wednesday 21 July 2004 1:32:42 pm

Kevin, when I view the page in IE on Windows, I do see a problem where the side borders of the div extend a bit further than the bottom border. Is this what you mean by weird stuff? If so, they can be fixed by playing with that margin rule as Clay did. You may want to change it to <i>margin: -0.1em 0;</i> as Clay did. It is possible, even likely that the first value may be different depending on the browser and/or operating system being used to view it. Rather frustrating I know.

If I am totally off the mark, could you perhaps post a screenshot of the problem area, circling it? This may sound odd, but I think that will be the best way to ensure we are on the same page. :)

Alex
bald_technologist on the IRC channel: #eZpublish
http://www.agrussell.com :: http://www.cuttingedge.com

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Wednesday 21 July 2004 3:23:20 pm

Glad that worked for you Kevin.

1. I would wager that this could be fixed by removing the width assigned to the table data cell that contains the text. Change <i><td height="16" td width="60"></i> to <i><td height="16"></i>. Actually, even better than that, remove that table entirely as it doesn't provide any real value. This code:

<table><table width="100%">
   <td height="16" td width="60"> join uhrp mail list
            <input class="searchtext" type="text" size="8" name="email"  value=" your-email-here" />

        <input type="image" name="email" class="searchimage" src="/cms/design/standard/images/1x1.gif" />
      <div class="joinemailtext"></div></div></td>
  </tr></table></div></class>
</div>

Could well be condensed down to:

<div>
join uhrp mail list
<input class="searchtext" type="text" size="8" name="email"  value=" your-email-here" />
<input type="image" name="email" class="searchimage" src="/cms/design/standard/images/1x1.gif" />
</div>

Granted, that is a pretty rough estimation as you would need to add a bit of CSS to ensure it lines up like you want, but it will cut down on download time and bandwidth. :)

2. The problem you are seeing cropped up before CSS. :P Try setting the width of <i>.searchtext</i> in your style sheet to see if that provides consistent results. You may want to assign a unique ID to this input element so you can assign the width to it without affecting any other input fields. I believe your e-mail subscription list uses the same class.

3. I tried to see this, but when I clicked through the same sub-menu was showing up for every page of the site, and it didn't extend to two lines, so I couldn't see the problem. :( This reminds me of a problem I had a while back that was caused by cache-block usage. If your menus are within a cache-block, make sure that the cache-block key isn't so generic as to place the same bit of output on every page. Actually, you may want to ensure the sub menus aren't in cache-blocks to avoid a problem like this. If you aren't using cache-blocks, I'm not sure what else could be the problem.

Alex
bald_technologist on the IRC channel: #eZpublish
http://www.agrussell.com :: http://www.cuttingedge.com

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Thursday 22 July 2004 3:33:21 pm

Hrrrm, try removing the size attribute from the tag in addition to adding the width to <i>.searchtext</i> style sheet. Also, make sure that <i>#search</i> isn't causing a style conflict. Actually, in addition to setting a width, you may want to explicitly set margin and padding as those can cause cross-browser problems as well.

Perhaps that will help...?

Alex
bald_technologist on the IRC channel: #eZpublish
http://www.agrussell.com :: http://www.cuttingedge.com

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>