|
CSS and PHP Question First of all, here is the header code I'm working with:
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('url'); ?>/wp-includes/js/transmenu/transmenu.cs…
<script language="javascript" src="<?php bloginfo('url'); ?>/wp-includes/js/transmenu/transmenu.js…
<script language="javascript">
function init() {
//=================================…
// if supported, initialize TransMenus
//=================================…
// Check isSupported() so that menus aren't accidentally sent to non-supporting browsers.
// This is better than server-side checking because it will also catch browsers which would
// normally support the menus but have javascript disabled.
//
// If supported, call initialize() and then hook whatever image rollover code you need to do
// to the .onactivate and .ondeactivate events for each menu.
//=================================…
if (TransMenu.isSupported())
{
TransMenu.initialize();
}
}
</script>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=lin… ?> <?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
<body onload="init()" >
<div id="container">
<div id="header">
</div><!--//end #header//-->
<ul>
<?php if (function_exists('pixopoint_menu')) {pixopoint_menu();} ?>
</ul>
</div>
</div><!-- /nav -->
<script language="javascript">
// set up drop downs anywhere in the body of the page. I think the bottom of the page is better..
// but you can experiment with effect on loadtime.
if (TransMenu.isSupported()) {
//===================================…
// create a set of dropdowns
//===================================…
// the first param should always be down, as it is here
//
// The second and third param are the top and left offset positions of the menus from their actuators
// respectively. To make a menu appear a little to the left and bottom of an actuator, you could use
// something like -5, 5
//
// The last parameter can be .topLeft, .bottomLeft, .topRight, or .bottomRight to inidicate the corner
// of the actuator from which to measure the offset positions above. Here we are saying we want the
// menu to appear directly below the bottom left corner of the actuator
//===================================…
var ms = new TransMenuSet(TransMenu.direction.down, 1, 0, TransMenu.reference.bottomLeft);
//===================================…
// create a dropdown menu
//===================================…
// the first parameter should be the HTML element which will act actuator for the menu
//===================================…
<?php
$Pgs = $wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_status='publish' AND post_parent = 0 AND post_type = 'page'");
foreach($Pgs AS $Pg)
{
$ItemsCounter = 0;
?>
var menu<?php echo $Pg->ID; ?> = ms.addMenu(document.getElementById('m<?p… echo $Pg->ID; ?>'));
<?php
$SubPgs = $wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_status='publish' AND post_parent = '".$Pg->ID."' AND post_type = 'page'");
foreach($SubPgs AS $SubPg)
{
?>
menu<?php echo $Pg->ID; ?>.addItem("<?php echo $SubPg->post_title; ?>", "<?php echo $SubPg->guid; ?>");
<?php
$ItemsCounter++;
}
}
/*
print("<PRE>SubPgs<BR>");
print_r($SubPgs);
print("</PRE>");
*/
?>
//===================================…
// write drop downs into page
//===================================…
// this method writes all the HTML for the menus into the page with document.write(). It must be
// called within the body of the HTML page.
//===================================…
TransMenu.renderAll();
}
</script>
<?php /* Menu for subpages of current page (thanks to K2 theme for this code) */
global $notfound;
if (is_page() and ($notfound != '1'))
{
$current_page = $post->ID;
while($current_page) {
$page_query = $wpdb->get_row("SELECT ID, post_title, post_status, post_parent FROM $wpdb->posts WHERE ID = '$current_page'");
$current_page = $page_query->post_parent;
}
$parent_id = $page_query->ID;
$parent_title = $page_query->post_title;
// if ($wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_parent = '$parent_id' AND post_status != 'attachment'")) {
$Pgs = $wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_parent = '$parent_id' AND post_type != 'attachment'");
if ($Pgs)
{
?>
<?php
}
}
?>
<div id="wrapper">
<center><!-- [Link](Mouse over link to see full location) Chat Button Link Code --><div style="text-align:center;width:191px;"><… href="javascript:void(window.open('http:… src="[Link](Mouse over link to see full location)… width="191" height="69" border="0" alt="LiveZilla Live Help"></a><noscript><div><a href="[Link](Mouse over link to see full location)… target="_blank">Start Live Help Chat</a></div></noscript><div style="margin-top:2px;"><!-- [Link](Mouse over link to see full location) Tracking Code --><div id="livezilla_tracking" style="display:none"></div><script type="text/javascript">var script = document.createElement("script");script.… src = "[Link](Mouse over link to see full location)… [Link](Mouse over link to see full location) Tracking Code --></center>
<?php get_sidebar();?>
<div id="content">
Second of all, here is the second code (the style sheet) I'm working with:
body {
margin:0;
padding:0;
background: #d5fdfb;
background: #50c1bb;
color:#1e4975;
text-align:left;
font-family: Arial, sans-serif;
font-size:12px;
}
#container{
background: #d5fdfb;
border:0px red solid;
width:825px;
margin:0 0 0 0;}
#header {
width: 825px;
height: 275px;
margin: 0 0 0 0 solid #030736;
background: url('[Link](Mouse over link to see full location)… no-repeat;
}
#wrapper{
width:825px;
margin:0 0 0 8px;}
#content {
margin: 0 0 0 40px;
width:780px;
float:left;
}
#sidebar{
float:right;
width:220px;
height:100%;
margin: 0 0 0 1030px;
}
.sidebar{
padding:5px;
margin: 0 0 0 1030px;
border:1px solid #03073;
background-color:#d5fdfb;
}
#sidebar ul {
st-style:none;
padding: 6px 3px;
border-bottom:none;
border-bottom: 1px dotted #2c6a7d;}
#sidebar ul{
st-style:none;
padding: 6px 3px;
margin:0;}
#footer {
border:0px red sod;
margin:10px 0;
padding:0px;
width:825px;
clear:both;
}
.footercol{
border:0px sod #2c6a7d;
width:218px;
padding:15px;
margin:0 5px;
float:left;}
.footercol2{
border:1px sod 2c6a7d;
background-color:#2c6a7d;
width:218px;
padding:15px;
margin:0 5px;
float:right;}
#copyright{
padding:20px 50px;
clear:both;
border-top:10px sod #2c6a7d;
background-color:#d5fdfb;}
/*Nav styng*/
#navigation {
background: #2c6a7d;
width:825px;
color: #d5fdfb;
font-weight:bold;
float:left;
}
#navigation ul {
st-style: none;
margin: 0;
padding: 0;
border: none;}
#navigation {
margin: 0;
float: left;}
#navigation a {
display: block;
text-agn: center;
color: #d5fdfb;
padding: 0px 0px;}
html>body #navigation a {
width: auto;
}
#navigation a:
{
background-color: #d5fdfb;
color: #2c6a7d;
}
/* sub menu */
#subnav {
clear:both;
float:left;
background: #47133c;
}
#subnav ul {
margin: 0px;
padding: 3px 0px 18px 5px;
st-style: none;
font: 11px/100% Arial, Helvetica, sans-serif;
}
#subnav {
border-right: 1px sod #0d4775;
border-left: 1px sod #0d4775;
padding: 5px 7px;
margin: 0px;
float: left;
}
#subnav a, #subnav a:visited, #subnav .page_item {
text-decoration: none;
color: #2c6a7d;
}
#subnav .current_page_item a, #subnav .current_page_item a:visited {
color: #30261c;
}
#subnav a:hover {
text-decoration: none;
color: #FFFFFF;
}
h1{
font-weight:ghter;
border-bottom:1px solid #871a44;
color:#030736;
font-size:18px;}
h2{
font-weight:lighter;
color:#030736;
font-size:16px;}
a {
color:#d6156c;
text-decoration:none;
}
a:hover {
color:#009acd;
text-decoration:none;
}
.clear{clear:both;}
.post, .wrapper{
margin:0 0 10px 0;
padding:15px;
border:1px solid #ccc;
background-color:#FFFFFF;}
.alignright {
float: right;
}
.alignleft {
float: left;
}
.alignleft a, .alignright a{
display: block;
background-color:#871a44;
color:#000000;
padding:8px;}
.alignleft a:hover, .alignleft a:hover{
background-color:#871a44;
color:#d6156c;}
.navigation {
display: block;
text-align: center;
margin-top: 10px;
margin-bottom: 60px;
}
#commentform #author, #commentform #email, #commentform #url {
background: #871a44;
padding: .2em;
border: 1px solid #871a44;
}
.commentlist li, #commentform input, #commentform textarea {
font-weight:normal;
}
.commentlist li .avatar {
float: right;
border: 1px solid #871a44;
padding: 2px;
background: #871a44;
}
.commentlist cite{
font-weight: normal;
font-style: normal;
font-size: 1.1em;
}
.commentlist cite a {
color:#ff3399;
font-weight: normal;
font-style: normal;
font-size: 1.1em;
}
.commentlist p {
font-weight: normal;
line-height: 1.5em;
text-transform: none;
}
.commentmetadata {
font-weight: normal;
margin: 0;
display: block;
}
#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;
}
#commentform textarea {
width:95%;
border: 1px solid #871a44;
background: #FFFFFF;
padding: .2em;
}
#commentform #submit {
margin: 0;
float: left;
}
.alt {
background-color: #871a44;
border-top: 1px solid #871a44;
border-bottom: 1px solid #871a44;
margin: 0;
padding: 5px;
}
.commentlist {
padding: 0;
text-align: justify;
}
.commentlist li {
margin: 15px 0 3px;
padding: 5px 10px 3px;
list-style: none;
}
.commentlist p {
margin: 10px 0 10px 0;
}
.nocomments {
text-align: center;
margin: 0;
padding: 0;
}
/*styling for wp-cal*/
#wp-calendar {
empty-cells: show;
font-size: 9px;
margin: 0;
width:100%;
}
#wp-calendar #next a {
padding-right: 9px;
text-align: right;
}
#wp-calendar #prev a {
padding-left: 9px;
text-align: left;
}
#wp-calendar a {
display: block;
text-decoration: none;
}
#wp-calendar a:hover {
color: #d6156c;
}
#wp-calendar caption {
color: #666;
font-size: 9px;
text-align: left;
font-weight: normal;
}
#wp-calendar td {
color: #666;
font: normal 10px verdana, "Trebuchet MS", arial, tahoma, sans-serif;
letter-spacing: normal;
padding: 2px 0;
text-align: center;
}
#wp-calendar td.pad:hover {
background: #ddd;
}
#wp-calendar td:hover, #wp-calendar #today {
background: #eaeaea;
color: #d6156c;
}
#wp-calendar th {
font-style: normal;
text-transform: capitalize;
}
Here is my website: [Link](Mouse over link to see full location)
The problem: I need to figure out how to effectively integrate that live chat button into my template and I need to move my content up higher towards the navigation bar so there is only a few pixels worth of problem; have been trying to solve this problem for the past few hours and I can't come up with any solutions.
Any ideas?
Thanks!
[ ] Want to answer more questions in the Technology category? Maybe give some free advice about: Internet & Web Design?
You omitted vital parts of the chat code, so I can't tell what the button is supposed to look like. However, it would probably work to put it in the sidebar:
<div id="sidebar">
<div class="sidebar"><form role="search" method="get" id="searchform"
action="[Link](Mouse over link to see full location);
<div><label class="screen-reader-text" for="s">Search for:</label>
<input name="s" id="s" type="text">
<input id="searchsubmit" value="Search" type="submit">
</div>
</form>
<!--PUT CODE HERE-->
</div>
</div><!--//end #sidebar//-->
<div id="content">
You'll need to figure out how to modify the sidebar in WordPress. The code you pasted is getting it from somewhere else with get_sidebar(). ]
More Questions: |