Vladimir’s WordPress Forum

	Current User: Guest

Vladimir's WordPress Forum Themes Amazing Grace: Mods and drop down menu

Amazing Grace: Mods and drop down menu

Print this Post

Page: 1	Add a New Topic Reply to Post

User

Post

13:55
9 May, 2010

Troy

Guest

Quote and Reply

Print this Post

Post edited 14:20 – 9 May, 2010 by Troy

I'm a big fan of the Amazing Grace Theme but I prefer 2 column layouts to the 3 column layout used in Amazing Grace. Here's what I did to make it my own.
3 column to two column.
In the style sheet, under containers, take out the sidebar – left section.
———————————————————

#sidebar-left
{
background:#FCFCFC;
border:1px #ccc dashed;
font-size:1em;
float:left;
margin-left:20px;
width:198px;
padding:.5em .2em 2em 1em;
}

—————————————————-
Still in the style.css, Increase the body width from 590 to 788px (this is taking up the space left by the elimination of the left sidebar).
————————————————————-

#content
{
font-size:1.1em;
float:left;
width:788px;
padding:0 0 0 1em;
}

——————————————————-
Update the file and choose the sidebar file.
In sidebar.php: take out the sidebar left section. If you don't do this, your layout will be all jacked up.
—————————————————

<div id="sidebar-left">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?>
<h4><?php _e('Categories'); ?></h4>
<ul>
<?php wp_list_cats('sort_column=name'); ?>
</ul>
<h4><?php _e('Archive'); ?></h4>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
<h4><?php _e('Blogroll'); ?></h4>
<ul>
<?php wp_list_bookmarks('categorize=0&title_li=0&title_after=&title_before='); ?>
</ul>
<h4><?php _e('Meta'); ?></h4>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<?php wp_meta(); ?>
</ul>
<?php endif; ?>
</div>

——————————————
Update the file again.
———————————————————–
Next, since I'm using this as a CMS, I don't want the category menu in the header. It's a personal preference thing.
Go to the header file
Cut out the cat menu
—————————————————-

——————————————————–
and update the file.
=========================================================
The Drop Down Menu for Amazing Grace
Now lets put in a pixopoint suckerfish drop down menu.
I tried a lot of ways to do this. Here's what worked for me.
Install the Pixopoint Menu Plugin.

We need to add a bit of code to the stylesheet and the header.php file.

Put this where you want the menu in your header.php file.

Put this in the style sheet in the +Containers section. Mine went in after the #headers code in that section.
———————————————–

#h-menu {
padding: 0 10px 0 40px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
}

—————————————————
Now go to the pixopoint suckerfish css menu generator and get your code for your dropdown. Modify if you need to. I modified the code from the original.

This is the CSS code for the menu I created. You might want to try pasting it into the plugin first just to make sure all of the above are working right.
————————————————-

#suckerfishnav {
background:#000000 repeat-x;
font-size:14px;
font-family:helvetica,sans-serif;
font-weight:bold;
width:100%;
}
#suckerfishnav, #suckerfishnav ul {
float:left;
list-style:none;
line-height:30px;
padding:0;
border:1px solid #aaa;
margin:0;
width:100%;
}
#suckerfishnav a {
display:block;
color:#ffffff;
text-decoration:none;
padding:0px 10px;
}
#suckerfishnav li {
float:left;
padding:0;
}
#suckerfishnav ul {
position:absolute;
left:-999em;
height:auto;
width:125px;
font-weight:normal;
margin:0;
line-height:1;
border:0;
border-top:1px solid #666666;
}
#suckerfishnav li li {
width:125px;
border-bottom:1px solid #666666;
border-left:1px solid #666666;
border-right:1px solid #666666;
font-weight:bold;
font-family:helvetica,sans-serif;
}
#suckerfishnav li li a {
padding:4px 4px;
width:115px;
font-size:12px;
color:#444444;
}
#suckerfishnav li ul ul {
margin:-19px 0 0 125px;
}
#suckerfishnav li li:hover {
background:#999966;
}
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
color:#ffffff;
}
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
color:#444444;
}
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
color:#444444;
}
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
left:-999em;
}
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
left:auto;
background:#fffeff;
}
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
background:#ffffff;
}

This yielded a black menu that I think looks pretty good.

12:13
23 June, 2010

Vladimir