[Contest] Mount Carmel College of Nursing - Replicant
-
-
- Scott B.
- Elite Rocketeer
- Posts: 600
- Thanks: 2
- Web Developer, UI Developer
-
Sam Taylor wrote:
wow, this is one of the best I have seen in a real world application. Great Job!
The small caps in (edit "IS") a nice touch. I only recommend you use it in your graphics headers and such unless it conflicts with the schools branding. The feature itself looks a little funny when you can't control the kerning and such.
Still, I am glad you used it. Great stuff.
The small-caps looks amazing in Safari, but for those using XP without clear type fonts enabled, it can be a bit much. I'm seriously considering moving the main navigation back to normal fonts. - ٩(•̮̮̃•̃)۶
-
-
-
What a great site. It really looks professional.
I am doing a school site also and I am trying for a different look in the side menu. I notice your side menu is a separate style from the main horizontal menu. Can you point me in the direction for making a separate menu style?
Thanks
-
-
-
- Scott B.
- Elite Rocketeer
- Posts: 600
- Thanks: 2
- Web Developer, UI Developer
-
JAMES M RICE wrote:
What a great site. It really looks professional.
I am doing a school site also and I am trying for a different look in the side menu. I notice your side menu is a separate style from the main horizontal menu. Can you point me in the direction for making a separate menu style?
Thanks
Actually, it is the main horizontal menu, I just edited the mod_mainmenu.php file to get the look and feel that I wanted. Essentially, I just added classes in the template_css.css and ie6_css.css file for 'mainlevel' and 'sublevel1', 'sublevel2', and 'sublevel3' to get the look I wanted. I used the Joomla defaults for list styles and used the classes in the CSS for the styling. If you would like more information (i.e. actual code posted) let me know and I'll post it here. - ٩(•̮̮̃•̃)۶
-
-
-
Yes please, the menu code would be a huge help. I was making sure this is not just a admin setting I was missing that made the changes. I understand now some code changes will be necessary. I am slowly picking up some of the css, and would like to experiment more.
Thanks for your help, your site is a high standard to work toward.
-
-
-
- John Klinefelter
- Rocketeer
- Posts: 88
- Thanks: 0
-
Excellent design, truly a stellar site. I think bumping up the opacity on the body text and other areas helps this template a bunch, and the font styles are right on the money. Great job.
What tools do you use to design? Any tips on how you approached the project in general?
Cheers!
-
-
-
- Nathan Misirian
- Jr. Rocketeer
- Posts: 34
- Thanks: 0
-
Thanks for the great report. I'm having trouble rendering the proper vertical spacing in my side navigation at http://www.centralfabricators.org. click for example on About Us in IE 6 and the spacing is extra tall but it is not a problem in IE 7 or Mozilla. I would appreciate your help.
My IE 6 code is here: www.centralfabricators.org/templates/rt_...css/template_ie6.css
-
-
-
- Scott B.
- Elite Rocketeer
- Posts: 600
- Thanks: 2
- Web Developer, UI Developer
-
JAMES M RICE wrote:
Yes please, the menu code would be a huge help. I was making sure this is not just a admin setting I was missing that made the changes. I understand now some code changes will be necessary. I am slowly picking up some of the css, and would like to experiment more.
Thanks for your help, your site is a high standard to work toward.
Ok, first, I simply used the Joomla Defaults for the main menu module. Next, I created my own .png files to replace the indent#.png files found in root/images/M_images/.
Next, I edited the mod_mainmenu.php file in a couple of places in order to achieve the graphical look and presentation.
In the original mod_mainmenu.php file, look for this code (line 102):
// run through SEF convertor $mitem->link = sefRelToAbs( $mitem->link ); $menuclass = 'mainlevel'. $params->get( 'class_sfx' ); if ($level > 0) { $menuclass = 'sublevel'. $params->get( 'class_sfx'); }
And I replaced it with this:
// run through SEF convertor $mitem->link = sefRelToAbs( $mitem->link ); $menuclass = 'mainlevel'. $params->get( 'class_sfx' ); if ($level > 0) { $menuclass = 'sublevel'. $params->get( 'class_sfx'); if ($level > 1) { $menuclass = 'sublevel2' . $params->get( 'class_sfx'); if ($level > 2) { $menuclass = 'sublevel3' . $params->get( 'class_sfx'); } } }
Doing this allowed for me to define my own sub-level navigations.
Next, I wanted to separate the sub-level (0) items from the secondary and tertiary level items with a graphic and bolder font-face. In order to do this, I again needed to edit the mod_mainmenu.php file (the second edit).
In the original file, find this:
$indents = array( // block prefix / item prefix / item suffix / block suffix array( '<table width="100%" border="0" cellpadding="0" cellspacing="0">', '<tr align="left"><td>' , '</td></tr>', '</table>' ), array( '', '<div style="padding-left: 4px">'. $img[1] , '</div>', '' ), array( '', '<div style="padding-left: 8px">'. $img[2] , '</div>', '' ), array( '', '<div style="padding-left: 12px">'. $img[3] , '</div>', '' ), array( '', '<div style="padding-left: 16px">'. $img[4] , '</div>', '' ), array( '', '<div style="padding-left: 20px">'. $img[5] , '</div>', '' ), array( '', '<div style="padding-left: 24px">'. $img[6] , '</div>', '' ), );
And I replaced it with this:
$indents = array( // block prefix / item prefix / item suffix / block suffix array( '<table width="100%" border="0" cellpadding="0" cellspacing="0">', '<tr align="left"><td>' , '</td></tr>', '</table>' ), array( '', '<div class="sublevel" style="background: url(templates/rt_replicant/images/glass/leftmenu_highlight.png) no-repeat; padding-left: 4px;">'. $img[1] , '</div>', '' ), array( '', '<div class="sublevel2" style="padding-left: 8px">'. $img[2] , '</div>', '' ), array( '', '<div class="sublevel3" style="padding-left: 12px">'. $img[3] , '</div>', '' ), array( '', '<div style="padding-left: 16px">'. $img[4] , '</div>', '' ), array( '', '<div style="padding-left: 20px">'. $img[5] , '</div>', '' ), array( '', '<div style="padding-left: 24px">'. $img[6] , '</div>', '' ), );
Notice I did three edits. First I assigned my first array item with a class="sublevel" and in-lined the styled background (because, remember, the class sublevel is used in any main menu module items). Second, I assigned a class of "sublevel2" for the third array item. Finally, for the fourth array item, I added a class of sublevel3.
Now that I had defined my menu class parameters and array classes, I needed to modify the teplate_css.css and template_ie6.css files to make sure that only this menu module received the changes.
In the template_css.css file, I added the following:
/* @Custom Side Navigation */ .mainlevel { font-variant:small-caps; font-size:120%; font-weight:bold; line-height:25px; } .sublevel { font-variant:small-caps; line-height:20px; font-weight:bold; margin-bottom:3px; } .sublevel2 { background:none; font-weight:lighter; } .sublevel3 { font-weight:lighter; } /* @end */
And in the template_ie6.css file, I made the following edits:
/* @Custom Side Navigation */ .sublevel { height: 20px; padding-top: 2px; } .sublevel2 { height: 15px; margin-top: 5px; } .sublevel3 { height: 15px; margin-top: 5px; } /* @end */
I noticed that in IE6, the bullets would at times not render because the ie6 .htc hack relies heavily on height and width attributes. So I had to do some digging to find out where the indent#.png images were being called in the Joomla code. What I found was that I needed to make one more edit to the mod_mainmenu.php file.
I found this code:
// indent icons switch ( $params->get( 'indent_image' ) ) { case '1': // Default images $imgpath = $mosConfig_live_site .'/images/M_images'; for ( $i = 1; $i < 7; $i++ ) { $img[$i] = '<img src="'. $imgpath .'/indent'. $i .'.png" alt="" />'; } break; case '2': // Use Params $imgpath = $mosConfig_live_site .'/images/M_images'; for ( $i = 1; $i < 7; $i++ ) { if ( $params->get( 'indent_image'. $i ) == '-1' ) { $img[$i] = NULL; } else { $img[$i] = '<img src="'. $imgpath .'/'. $params->get( 'indent_image'. $i ) .'" alt="" />'; } } break;
And replaced it with this:
// indent icons switch ( $params->get( 'indent_image' ) ) { case '1': // Default images $imgpath = $mosConfig_live_site .'/images/M_images'; for ( $i = 1; $i < 7; $i++ ) { $img[$i] = '<img src="'. $imgpath .'/indent'. $i .'.png" alt="" height="9" width="9" />'; } break; case '2': // Use Params $imgpath = $mosConfig_live_site .'/images/M_images'; for ( $i = 1; $i < 7; $i++ ) { if ( $params->get( 'indent_image'. $i ) == '-1' ) { $img[$i] = NULL; } else { $img[$i] = '<img src="'. $imgpath .'/'. $params->get( 'indent_image'. $i ) .'" alt="" height="9" width="9" />'; } } break;
The only change was giving height and width attributes to the indent#.png files. This fixed the disappearing act of the bullets.
I had a similar issue with the pathway "arrow.png" file and described a fix for it [url=http://"http://www.rockettheme.com/forum/index.php?t=17515&rb_v=viewtopic"]here[/url]. - ٩(•̮̮̃•̃)۶
-
-
-
- Scott B.
- Elite Rocketeer
- Posts: 600
- Thanks: 2
- Web Developer, UI Developer
-
Nathan Misirian wrote:
Thanks for the great report. I'm having trouble rendering the proper vertical spacing in my side navigation at http://www.centralfabricators.org. click for example on About Us in IE 6 and the spacing is extra tall but it is not a problem in IE 7 or Mozilla. I would appreciate your help.
My IE 6 code is here: www.centralfabricators.org/templates/rt_...css/template_ie6.css
It looks like in your CSS, you are assigning two height attributes of 15px for the first list item and the second list item:
ul.sidenav li li { border-bottom: 0; height:15px; }
Try removing the the height:15px; from the code above to see if that solves your IE6 issues. - ٩(•̮̮̃•̃)۶
-
-
-
- Scott B.
- Elite Rocketeer
- Posts: 600
- Thanks: 2
- Web Developer, UI Developer
-
John Klinefelter wrote:
Excellent design, truly a stellar site. I think bumping up the opacity on the body text and other areas helps this template a bunch, and the font styles are right on the money. Great job.
What tools do you use to design? Any tips on how you approached the project in general?
Cheers!
Thanks! For design work, I use Adobe Fireworks CS3 and Photoshop CS3. When meeting with a client, I try to get an overall feel for what they are looking for by reviewing any advertising or collateral work they have and I usually will ask that they send me links to sites they like. I try to nail down the non-negotiable items (like must have white content background, or must have menu drop-downs, etc.) before moving on to a proof-of-concept. In this particular project, I was truly lucky because they had just gone through a complete brand-identity change and I was able to incorporate much of the look-and-feel things from their recently updated marketing materials. - ٩(•̮̮̃•̃)۶
-
-
-
- Nathan Misirian
- Jr. Rocketeer
- Posts: 34
- Thanks: 0
-
I tried removing the extra height statement and still show the same issue.
www.centralfabricators.org/index.php?opt...k=view&id=1&Itemid=2
I noticed that when I refresh the screen, for a split moment the subpage on the left moves up to the correct location, but reverts to the lower position.
-
Time to create page: 0.055 seconds