WebsiteBaker Community Forum

General Community => WebsiteBaker Website Showcase => Topic started by: andy on December 21, 2005, 10:49:04 PM

Title: Another non-profit layout.
Post by: andy on December 21, 2005, 10:49:04 PM
http://www.alaskaeconomicdevelopment.org

As you can see, this design is very similar, being that they are both organizations in the same umbrella group.  This site has more functionality and some customized module styling as well.  The roundtable meeting minutes page uses a modified version of the news module to allow for total CSS styling.  I have added a few lorem ipsum posts so you can see all of the styled elements.  All interface widgets have a "title" attribute set so they are accessible through a screen-reader (I hope! ;)).

All of the necessary code (header, footer, etc) is commented in the screen.css file so it can be used as it looks here once the template is finished and released.  Also, I will release the modified news module along with it, though you can find this in the code snippets section of the site.

I have also integrated the transparent .png fix for IE into the template dynamically.  This means that the support is portable with the template and does not have to be installed on the server.
Title: Re: Another non-profit layout.
Post by: pcwacht on December 21, 2005, 11:01:56 PM
I like the layout, good to my eyes

I like the menu/submenu stuff you did with active pages, very good to see where you are in the navigation

I dislike your link color, kinda purple?
I would have choosen the bron background color for it

But that's my personal opinion ;)

Could you elaborate on the menu css?

John

Title: Re: Another non-profit layout.
Post by: andy on December 21, 2005, 11:24:06 PM
Yeah, the link color needs to go.  I haven't determined a good color for it yet, but the purple is DEFINITELY not it.



More info on the CSS?  Alrighty.  First, here are the settings I used in the news module settings window.

HEADER:
<div>
<div class="news" style="display:[DISPLAY_PREVIOUS_NEXT_LINKS];">
<a class="next_link" title="Go to next page of minutes" style="display:[DISPLAY_NEXT_PG];" href="[NEXT_PAGE_LINK]"></a>
<div class="page_display">Entries [OUT_OF]</div>
<a class="prev_link" title="Go to previous page of minutes" style="display:[DISPLAY_PREVIOUS_PG];" href="[PREVIOUS_PAGE_LINK]"></a>
<br />
</div>

POST LOOP:
<div class="news">
<div class="news_title">[TITLE]</div>
<a class="news_link" title="View complete minutes" href="[LINK]"></a>
<br /><hr />
<div style="text-align: justify;">[SHORT]</div></div>

POST HEADER:
<div class="news">
<div class="news_title">Minutes for [TITLE]</div>
<a class="back_link" title="Return to list" href="[BACK]"></a>
<br /><hr />
<div style="text-align: justify;">

POST FOOTER:
</div>
<a class="back_link" title="Return to list" href="[BACK]"></a>
</div>

FOOTER:
</div>



The module has been altered so that [PREVIOUS_PAGE_LINK] and [NEXT_PAGE_LINK] are replaced with the URL of the previous and next page, respectively, rather than with a complete, hard-coded link, like they were before.  This allows me to wrap them in whatever sort of div/link that I want and control how they are displayed.  In this case the .x_link class.  These behaviors are defined by the following CSS:

.news_link,
.back_link,
.next_link,
.prev_link {
display: block;
float:right;
height: 16px;
width: 16px;
background:url(images/readmore.png) no-repeat;
}

.back_link {
background:url(images/back.png) no-repeat;
}

.next_link {
background:url(images/page_next.png) no-repeat;
margin-left: 10px;
}

.prev_link {
background:url(images/page_prev.png) no-repeat;
}

Also notice [DISPLAY_NEXT_PG] and [DISPLAY_PREVIOUS_PG].  Those are additional macros I have added to the module. To allow me to selectively display the previous/next page buttons on an individual basis when they are needed.

UPDATE: Killed the purple.  Used the datebar color (#BA7800)
Title: Re: Another non-profit layout.
Post by: mysticcowboy on December 22, 2005, 02:09:45 AM
Much better without the purple!