WpFunc » style.css http://wpfunc.com Awesome, Quick, Simple WordPress Functions! Thu, 01 Dec 2011 01:17:01 +0000 en hourly 1 http://wordpress.org/?v= How to Add Numbers Into Comments http://wpfunc.com/wordpress/how-to-add-numbers-into-comments.html http://wpfunc.com/wordpress/how-to-add-numbers-into-comments.html#comments Fri, 02 Apr 2010 19:14:53 +0000 http://www.wpfunc.com/?p=412 Hello! I know i’m late. But im working hard. I had a tow weeks of a travel for works. I was away from computer. Than i’m here now :) This trick is a comments.php hack :) Let’s begin…

Here is the code;

We will edit your WordPress’ theme. You should make a backup of comments.php. If you make a backup, continue…

We will edit comments.php and we add some code into this file. First, look at the code;

<ol id="commentlist">

<?php $i = 1; ?>
<?php foreach ($comments as $comment) : ?>
<li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
<?php echo get_avatar( $comment, 32 ); ?>
<?php comment_text() ?>

<p><cite><?php comment_type(_c('Comment|noun'), __('Trackback'), __('Pingback')); ?> <?php _e('by'); ?> <?php comment_author_link() ?> &#8212; <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite> <?php edit_comment_link(__("Edit This"), ' |'); ?></p>
<div class="commentnumber">#<?php echo $i; ?></div>
</li>
<?php $i++; ?>

<?php endforeach; ?>

Do you see the added code? If you don’t i will write them here. Add this codes into your comments.php like me;

<?php $i = 1; ?>
<div class="commentnumber">#<?php echo $i; ?></div>
<?php $i++; ?>

If you want to add link to reply. Just change  #<?php echo $i; ?> with this code;

<a href="#comment-<?php comment_ID() ?>" title="">#<?php echo $i; ?></a>

Finally, The CSS. Add this css into your style.css;

/* Comment Numbers */
.commentnumber {
position: absolute;
right: 5px;
top: 5px;
font-size: 18px;
color: #454545;
}
.commentlist li {
position: relative;
}
/* Comment Numbers */

That’s All. This is the screenshot :)

]]> http://wpfunc.com/wordpress/how-to-add-numbers-into-comments.html/feed 1 Build a Top Sliding Login Panel http://wpfunc.com/wordpress/build-a-top-sliding-login-panel.html http://wpfunc.com/wordpress/build-a-top-sliding-login-panel.html#comments Sat, 21 Nov 2009 16:51:48 +0000 http://www.wpfunc.com/?p=303 This trick comes from Blog-Oh-Blog. You can create a login panel with simple jQuery and Html. We will edit header.php and style.css. Let’s begin…

Firstly, make a backup of header.php and style.css. After that you can add this codes.

In header.php;

Before </head> tag;

Add this javascript code to your header.php before </head> tag.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#slide-panel").slideToggle("slow");
});
});
</script>

After <body> tag;

Add this HTML code after <body> tag where you want.

<div id="slide-panel"><!--SLIDE PANEL STARTS-->
<?php if ( ! is_user_logged_in() ){ ?>
<h2>Login</h2>
<div class="loginform">
<div class="formdetails">
<form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
<label for="log">Username : </label><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" />&nbsp;&nbsp;&nbsp;&nbsp;
<label for="pwd">Password : </label><input type="password" name="pwd" id="pwd" size="20" />
<input type="submit" name="submit" value="Login" class="button" />
<label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label><input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
</form>
</div>
<div class="loginregister">
<a href="<?php echo get_option('home'); ?>/wp-register.php">Register</a> |
<a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Recover password</a>
</div>
</div><!--loginform ends-->
<?php } else { ?>
<div class="loginform">
<h2>Control Panel</h2><ul>
<li><a href="<?php echo get_option('home'); ?>/wp-admin/">Dashboard</a></li> |
<li><a href="<?php echo get_option('home'); ?>/wp-admin/post-new.php">Write new Post</a></li> |
<li><a href="<?php echo get_option('home'); ?>/wp-admin/page-new.php">Write new Page</a></li> |
<li><a href="<?php echo wp_logout_url( get_bloginfo('url') ); ?>" title="Logout">Logout</a></li></ul>
</div><!--loginform ends-->
<?php }?>
</div><!--SLIDE PANEL ENDS-->
<div class="slide"><a href="#" class="btn-slide"><?php if ( ! is_user_logged_in() ){ ?>Login<?php } else { ?>Logout<?php }?></a></div><!--LOGIN BUTTON TEXT-->

Save and send your header.php to your server.

And Style…

Open your style.css and add this lines to end of file.

* {margin:0; padding:0; outline:0;}
#slide-panel{ background-color:#000;border-bottom-style:solid;border-bottom-width:2px;display:none;height:100px;margin:auto;}
.slide {width:950px; margin:auto;}
.btn-slide:link, .btn-slide:visited{color:#fff; float:right; display:block;font-size:14px; text-transform:uppercase; font-weight:bold;height:26px; padding:3px 0 3px 0;line-height:22px;text-align:center;text-decoration:none;width:100px; background-color:#000; font-family:Arial;}
.loginform {width:950px; margin:auto; color:#999; font-family:Arial, Helvetica, sans-serif;}
.formdetails {color:#FFF; font-size:12px;padding:5px;}
.formdetails input{border:none; padding:2px 5px 2px 5px; background-color:#EFEFEF;}
.loginregister {color:#999; padding:5px;}
.loginregister a:link, .loginregister a:visited {color:#FFF; font-size:11px; text-decoration:underline;}
.loginform h2 {padding:10px 10px 10px 0; font-size:18px; font-weight:normal; text-transform:uppercase;}
.loginform ul li {display:inline;}
.loginform ul li a:link, .loginform ul li a:visited {color:#FFF; font-size:12px; text-decoration:underline;}

That’s All. Look at DEMO! and the original post!

Have a nice day!

]]> http://wpfunc.com/wordpress/build-a-top-sliding-login-panel.html/feed 3 Highlight the Author Comments! http://wpfunc.com/wordpress/highlight-the-author-comments.html http://wpfunc.com/wordpress/highlight-the-author-comments.html#comments Thu, 01 Oct 2009 18:34:55 +0000 http://www.wpfunc.com/wordpress/highlight-the-author-comments.html You can seperate the author comment from the reader comments. That’s needed some change in your css file and comments.php file. After that author comments shown in a different background color. Let’s begin…

Here is the code;

First one in comments.php file. Find this code;

<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">

And change with this one;

<li class="<?php if ($comment->user_id == 1) $oddcomment = "authorstyle"; echo $oddcomment; ?>"

After that open your style.css file and add this lines in to it;

.authorstyle {
background-color: #B3FFCC !important;
}

That’s All. Have a nice day!

]]> http://wpfunc.com/wordpress/highlight-the-author-comments.html/feed 0 How to make a magazin style wordpress dropdown menu? http://wpfunc.com/wordpress/how-to-make-a-magazin-style-wordpress-dropdown-menu.html http://wpfunc.com/wordpress/how-to-make-a-magazin-style-wordpress-dropdown-menu.html#comments Fri, 25 Sep 2009 09:02:49 +0000 http://www.wpfunc.com/?p=220 This think and coding coming from Jean-Baptiste Jung. When i read his Ubuntu Theme Colletction  article for choose my new Ubuntu theme i saw an article title Magazin Style Dropdown menu and i clicked that link. I think you can make this easily. Smells good!

1st. Step: Changing Header.php;

Just add this code to your theme’s header.php. You can show your categories/sub-categories or pages/sub-pages.

<ul id="nav2" class="clearfloat">
<li><a href="<?php echo get_option('home'); ?>/" class="on">Home</a></li>
 	<?php wp_list_categories('orderby=name&exlude=181&title_li=');
 	$this_category = get_category($cat);
 	if (get_category_children($this_category->cat_ID) != "") {
 		echo "<ul>";
wp_list_categories('orderby=id&show_count=0&title_li=&use_desc_for_title=1&child_of='.$this_category->cat_ID);
 		echo "</ul>";
 	}
?>
</ul>

2nd. Step: The CSS;

You will change your theme’s style.css file for this menu’s style. Just copy this codes below.

#nav2{
        background-color: #202020;
        display: block;
        font-size:1.1em;
        height:50px;
        width:100%;
}

#nav2, #nav2 ul {
line-height: 1;
list-style: none;
}

#nav2 a ,#nav2 a:hover{
border:none;
display: block;
text-decoration: none;
}

#nav2 li {
float: left;
list-style:none;
}

#nav2 a,#nav2 a:visited {
color:#109dd0;
display:block;
font-weight:bold;
padding:6px 12px;
}

#nav2 a:hover, #nav2 a:active {
color:#fff;
text-decoration:none
}

#nav2 li ul {
border-bottom: 1px solid #a9a9a9;
height: auto;
left: -999em;
position: absolute;
width: 900px;
z-index:999;
}

#nav2 li li {
width: auto;
}

#nav2 li li a,#nav2 li li a:visited {
        color:#109dd0;
font-weight:normal;
font-size:0.9em;
}

#nav2 li li a:hover,#nav2 li li a:active {
color:#fff;
}

#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul {
left: 30px;
}

If you ensure about IE6 add this java code below;

<!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav2").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]>

That’s All. The Original post is WordPress: “Magazine style” Horizontal dropdown menu.

]]> http://wpfunc.com/wordpress/how-to-make-a-magazin-style-wordpress-dropdown-menu.html/feed 3