Alert Box

[richard]

I have been looking for sometime for an alert box as described in the tutorial.

However, after following the directions the box appeared on top of the header and menu bar even though I set the setting in thesis to be above the posts.

How do I fix this?

This is the code I used:

function custom_alert() { ?>
<h2>Your alert title goes here</h2>
<p>Some text that describes your alert.</p>
<a href="#" id="close" title="Click to close">Close</a>
<? }

function load_jquery() {
?>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>

<script type="text/javascript">
$(document).ready(function(){
$('a#close').click(function(){
$('#feature_box').hide();
})
});
</script>
<?php
}

add_action('thesis_hook_feature_box', 'custom_alert');
add_action('wp_head', 'load_jquery');

.custom #feature_box {
border: 4px;
border-color: #663700;
background: #F4F6E8;
padding: 1em;
width: 800px;
margin: 1em auto;
text-align: center;
position: absolute;
top: 25%;
left: 50%;
margin-left: -400px;
z-index: 100;
}
.custom #feature_box #close {
display: block;
background: url('images/x.png') no-repeat 10px;
height: 29px; width: 25px;
text-indent: -9999px;
position: absolute;
top: -22px;
right: -20px;
padding: 1em 0 1em 2em;
}

.custom #feature_box h2 {
font-weight: 900;
font-size: 2em;
margin: 0 0 .5em 0;
border-bottom: 1px solid red;
}

.custom #feature_box p {
line-height: 1.6em;
font-size: 1.5em;
}

[adambarber]

Can you send me your link so I can see what you have so far? I want to make sure we're on the same page. It should just float above everything on the page.

.custom #feature_box {
border: 4px;
border-color: #663700;
background: #F4F6E8;
padding: 1em;
width: 800px;
margin: 1em auto;
text-align: center;
position: absolute;
top: 25%;
left: 50%;
margin-left: -400px;
z-index: 100;
}

controls the position of it. Just change the top and left attributes to the position that you want.

[richard]

This is the link:

Monarch Housing Associates ? Our Vision: Every person will have quality affordable, permanent housing that fosters freedom, independence and community integration.

I thought as a feature box its location was controlled by the thesis controls on the dashboard. I have it set as above posts and sidebars.

Let me know when you look at it as I have text to add but do not want to leave it up until it works correctly.

[adambarber]

Not in this case since the tutorial's desired effect was to float it over content. I just took a look at your site, and with the exception of the missing close button, it is working exactly like it should, according to the tutorial.

Essentially, since it is on it's own layer, above the rest of the content, the hook placement doesn't matter.

[richard]

Being a novice i guess I did not understand that it floated.

Is there any way to covert this so it functions like a stationary feature box?

If not how do I fix the close button?

[adambarber]

Try deleting all of

position: absolute;
top: 25%;
left: 50%;
margin-left: -400px;
z-index: 100;

from the css. That's my suggestion without testing anything, so it may or may not get your desired outcome.

If you just want an alert box, with no jQuery close ability, just use

function custom_alert() { ?>
<h2>Your alert title goes here</h2>
<p>Some text that describes your alert.</p>
<a href="#" id="close" title="Click to close">Close</a>
<? }

add_action('thesis_hook_feature_box', 'custom_alert');

To fix the close button, just download the one inlcuded in the first part of that tutorial and throw it in the /custom/images folder.

[richard]

I made the changes and it worked.

I lost the border around it but it appears AOK.

Does it look OK to you?

If I wanted to add a link to a page would I do as follows:

<p>For more information <strong><a href="http://monarchhousing.org/2010/03/19/20th-anniversary-celebration/">click here</a></strong>.</p>

Thanks so very much for your help!

[adambarber]

Everything looks good - glad you got it all worked out.

[richard]

It works but in Safari and FF the border does not appear.

Any thoughts?

[adambarber]

I'd imagine it's because you don't have any code for a border in the css. You can learn about it at CSS Border