How can I customize this wp theme? WordPress

• SOLVED

I am using the Mimbo Pro theme to build a new site.
http://demo.prothemedesign.com/wordpress/mimbo-pro/
I would like to replace the "Recent Stories" feature on the top right of the home page with some graphic buttons and a sign up form - see image > http://www.gibsonforcongress.com/congress/Chris_new2.jpg. I have the graphics prepped, but I am unable to code the php & css in order to make it work. Here is the code for the recent stories feature >
<div id="recent">

<h3><?php _e('Recent','mimbopro'); ?> <span><?php _e('Stories','mimbopro'); ?></span></h3>
<ul>
<?php
// --------------------
// list of recent posts
// --------------------
query_posts('showposts=5');
if(have_posts()) {
while (have_posts()) {
the_post();
bm_ignorePost($post->ID);
?>
<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
<?php
}
}
?>
</ul>
</div>

And the CSS ~

#recent {
width:260px;
background: url(../images/bg_recent.jpg) no-repeat top right;
float:right;
padding:13px 15px 8px 15px;
}

#recent ul {
margin-top:-5px;
}

#recent li {
border-bottom:1px solid #62b1d8;
list-style:none;
padding:7px 0 7px 15px;
background:url(../images/icon_page_home.gif) no-repeat 0 9px;
}

#recent a, #recent a:visited {
color:#ecf7ff;
font-weight:bold;
font-size:1em;
}

Please let me know, if any other information is needed, to accomplish this task.
Many thanks in advance!

Answers (4)

2010-02-24

Buzu B answers:

Hi, you'll have to chop your code so it looks like this:


<div id="recent">
</div>


Then you start adding the elements, first the images:


<div id="recent">
<img src="path/to/contribute.jpg" />
<img src="path/to/getInvolved.jpg" />
<img src="path/to/stayUpdated.jpg" />
</div>

The, you add the form:


<img src="path/to/contribute.jpg" />
<img src="path/to/getInvolved.jpg" />
<img src="path/to/stayUpdated.jpg" />
<form action="actionPage" method="method">
<p>Name* <input type="text" name="name" /></p>
<p>Email* <input type="text" name="email" /></p>
<p><input type="submit" name="submit" value="Submit" /></p>
</form>


No time for the CSS, please extend it....

2010-02-22

Tony Geer answers:

Well the first thing is the placement of the code that you want added. You'd need your first set of sample code to be chopped down to look like this:

<div id="recent">


</div>

Anything you put in there now will be in the exact position that you want it to.

Now, for the content itself, how are you managing that subscriber list? Are you using a service like CampaignMonitor or Mailchimp? They would provide you with a form's code that you can just copy and paste to allow visitors of the site to sign up.

---

Mark Garretson comments:

The Mimbo Pro has a contact javascript form that we might use for this form -
or we might use a service ... This project is a work in progress. I was looking for someone to code this up quickly - since when I tried it, my images did not display.

2010-02-22

Rebecca M answers:

Hi Mark,

Is the path to the image correct?

background:url(../images/icon_page_home.gif) no-repeat 0 9px;

Could it be:
background: url(images/icon_page_home.gif)

without the dots and slash?

Hard to see the problem without seeing the testing site.

2010-02-22

B L answers:

Are you looking for someone to actually code you up a contact form with images to insert into the page?
If not and you already have the contact form you want, simply paste it's code into the section that Tony specified.

I'm assuming the css you gave us is the original mimbo css? So, as Rebecca mentioned, might be helpful if you point us to your test site and link us up with your images that you've prepped and uploaded to your test site. Then someone could code up the php/html to insert the images in place.