Newbie (non profit)--- design issues

Author Message

Kevin Myles

Monday 28 June 2004 12:36:19 pm

Hi, my non profit doesn't ahve the cash to hire someone competent in web development, so here i am. so if you'd like to help promote human rights in china (indirectly, i guess), please help.

I'd like to put nodes in the center of my front page/main article, so in other words, I'd like to put dynamic content like news, features, etc. in the center of the page, and not just on the right toolbar, and (i'd like to have it in the same design format as the right toolbar). i'm not exactly sure which the best way to do this is, and i'm afraid of doing some damage. I'd like to be able to put more than one node there.

Thanks for help and patience, Kevin.

Alex Jones

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>

Kevin Myles

Wednesday 30 June 2004 9:50:54 am

Alex et al,
thanks for your interest in helping. I've been working a lot to try to figure out how to configure ez to get what I want, but so far i've hit a few roadblocks--(one being unable to change the line_view_news_article.tpl on the tscm website so the pictures are aligned to the right of the text.)

I'd probably prefer to use the default ez templates, but I want to be able to have different nodes (news, news2, news 3) in different areas. What would be great is if i could simply create a new tool bar for the center area of the page and add in the module nodes, so that i have seperate listings for News, features, press releases.

another good example of what i want is on the example pages http://www.morningstaronline.co.uk/ They are able to put multiple nodes (folders) on the same front area.

please let me know if this is sufficient otherwise i'll ramble on more.

Thanks again. cheers!

Alex Jones

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>

Kevin Myles

Thursday 01 July 2004 10:33:35 am

Alex,
thanks for your help.

I added in code to show the bottom toolbar
right below where the welcome page is, in the content section:

{$module_result.content}{tool_bar name=bottom view=full}

since the bottom toolbar can't display nodes, it works. However,
One thing I noticed is that the pictures won't stay in the box,
and i need to add text to make sure the pictures stay within the boxes

Also, it looks horribe in Mac IE 5.3 , Mac Netscape 7 but good on MacOS X safari and pretty good on
WinXP explorer/netscape. this worries me a lot.

Anyway, ii'm going to fiddle with the code you sent me and see which would be better for my needs. thanks for your help and any advice on the browser issue would be appreciated.

Cheers,
Kevin.

Kevin Myles

Thursday 01 July 2004 12:26:29 pm

l

Alex Jones

Friday 02 July 2004 6:58:16 am

Hi Kevin, I checked out the site and am happy to see you are making progress. :) When you say that the pictures don't stay in the box, do you mean they are overlapping the bottom border? If so, that is easily fixed with just a bit of markup and CSS. Add the following line just before the closing div tag of the containing box:

<hr class="ClearFloat" />

Then add this to your style sheet:

.ClearFloat {
  display: block;
  clear: both;
  margin: -0.6em 0;
  visibility: hidden;
}

This should ensure that the image doesn't overlap the bottom border. The style rules tell the horizontal rule to not allow anything to float next to it (using 'clear:both'), this way it guarantess that it is below all other content in the div. We then hide it using 'visibility: hidden', but even if it is hidden, the browser gives it the same amount of space as if it were visible. So, we set the top and bottom margin to negative values to close that space. You may need to tinker with the margins a bit to ensure it doesn't have any ill effects on your layout.

You mention that the design looks bad on a couple of Mac browsers, can you provide more detail? I can't look on my wife's Mac at the moment, but will try to later if you are still having problems.

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>

Kevin Myles

Friday 02 July 2004 11:30:09 am

Thanks Alex!

Clay Pereira

Monday 19 July 2004 10:44:51 am

Hi Alex,

Sorry to barge in but I am having a simallar css issue. In mozilla the background color of my fact box is not containing the entire image if the text on the left doesn't fill the entire size of the image. Here is the link. http://www.darrenwilsey.com/index.php/news/services. If you could take a look I would really appreciate it.

Thank you,

Clay

Alex Jones

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>

Kevin Myles

Tuesday 20 July 2004 12:53:53 pm

Alex,
Hi.
I thought I had solved this problem, but it turns out it is different for different browsers/os. With mac os safari, and winxp firefox, the following code works, however, as you can see [uhrp.org/cms] it doesn't look good in windows IE...it has two things hanging off of the border. If i move the clearfloat tag down two divs, it looks good in IE. is there anything to do to make it look good in both environments?
I would fool around iwth it more, but running ie on virtual windows through mac os x is very slow!
Thanks for any tips.

<div class="toollist">
    <div class="toollist-design"><div class="toolbar-item">
   <h6> <div class="toollink">{let node=fetch(content,node,hash(node_id,$parent_node))}
<a href={$node.url_alias|ezurl}>{$title} </a></div></h6></div>

    <div class="content-view-children">
    {section name=Node loop=$node_list sequence=array(bglight,bgdark)}
        {node_view_gui view=listitem content_node=$Node:item}
    {/section}

   <hr class="ClearFloat" /> </div>
 </div>{/let}
</div>

{/let}
{/section}
{/default}
{/cache-block}</code

Alex Jones

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>

Clay Pereira

Wednesday 21 July 2004 8:55:46 am

Thank you for the CSS code it worked great with margin: -0.1em 0;. Should i report this as a bug for the embed_product.tpl?

Alex Jones

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>

Kevin Myles

Wednesday 21 July 2004 12:06:51 pm

Alex,
Unfortuantely your tweak of the css code didn't work for my recent floating issue (see above, with code), which is the difference in how WinXP IE and the other browsers interperet the ClearFloat tag. Again, as it stands the page looks great in Mac Safari, Firefox, Netscape (okay in IE, has the same menu problem every other ez site has) and looks fine in windows firefox, but bad in Windows IE. In Win IE, each of the toolbar node_list boxes, at the bottom of the box there is some weird lines:

_____________normalboxborder____________________________
|___ ___|
|___ weird stuff ___|

This is driving me nuts since as a mac user It's very hard for me to edit on a wintel machine.
Thanks for help/suggestions.

See you on #eZpublish!
Kevin

Alex Jones

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>

Kevin Myles

Wednesday 21 July 2004 2:39:01 pm

Alex, seriously, you saved my arse. Adjusting the clearfloat worked again...now i just have three compatability issues.

1. join email box text breaks

join uhrp
mailing list

should read

join uhrp mailing list

this is a browser issue

2. size of search box varies

it varies on versions of IE, even.

Check out

http://www.uhrp.org/ez.no.images

two bmps show that one version of IE has the search box bigger relatively bigger than the rest of the right tools, an older version of IE doesn't have this problem.

3. Submenu. If the submenu goes to two lines in wintel IE, the first submenu line assumes the color of the menu line. Not a big deal

Any help with these stupid issues would be appreciated. I'm so close to completion!

Cheers
Kevin.

Alex Jones

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>

Kevin Myles

Thursday 22 July 2004 1:45:54 pm

Alex,
you've saved me again. i got rid of the table and now there's no problem with the left menu.
Now my only problem seems to be the search box.

I tried changing the css style to searchtext2 and messing with the width. nope.
I tried switching the position of the tool. well, now any tool above it is fine, but below it is the same.
So i thought maybe it was some of my formating. nope.
I went back to the orignial template....

<div class="toolbox">
    <div class="toolbox-design">
       <div class="toolbox-content">
           <label>{'Search'|i18n( 'design/standard/toolbar' )}</label>
           <form action={"/content/search/"|ezurl} method="get">
           <input class="searchtext" type="text" size="10" name="SearchText" id="Search" value="" />
           <input type="image" class="searchimage" src={"1x1.gif"|ezimage} />
           </form>
       </div>
    </div>
</div>

Still looks bad in winxp ie (winfirefox, mac safari okay).

So still no go. Tried getting rid of all styles, still formating all weird.
Any suggestions?

Thanks, Kevin.

Alex Jones

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>

Powered by eZ Publish™ CMS Open Source Web Content Management. Copyright © 1999-2014 eZ Systems AS (except where otherwise noted). All rights reserved.