formed

Posts Tagged 'PHP & CSS "

Ultimately, this is not a full part in the series, but a supplement.
In the 4th Part of it dealt with were Tweet This , in and of itself a cool plugin for Twitter, but also social bookmarking services (Plurk, Buzz, Delicious, Digg, Ping, Reddit, Stumble). Numerous configuration options and a selection of fancy buttons rounded the first positive impression. Unfortunately, the error message

Warning: Invalid argument supplied for foreach () 358 in / home/web160/klem08/ftproot/www.klemmchen.de/wp/wp-content/plugins/tweet-this/tweet-this.php on line

A response to requests failed to materialize, so I've done what others have done: I've disabled the plugin. Now an alternative was needed.

Twit This : Takes care of only ourselves exclusively to's singing. There is a plugin, but manually inserted code:

<!-- Begin TwitThis (http://twitthis.com/) -->
<script type="text/javascript" src="http://s3.chuug.com/chuug.twitthis.scripts/twitthis.js"></script>
<script type="text/javascript">
<!--
document.write('<a href="javascript:;" onclick="TwitThis.pop();"><img src="http://s3.chuug.com/chuug.twitthis.resources/twitthis_grey_72x22.gif" alt="TwitThis" style="border:none;" /></a>');
//-->
</script>
<!-- /End -->

I opted for the code version, because it allows adjustments to the design without having to plug in herumpulen. So I could replace. Gif file with a self-created. Png file, and also in control of where the loop is to appear, the button is given in this way.

Bookmark This del.icio.us : Because I wanted to also have a Delicious button had to her another plugin. Is a bit dated, but even in principle valid XHTML. Hereby

<?php dbt_the_LinkTag("Bookmark on del.icio.us"); ?>

The display can be made of the buttons within the loop, and I could put a button next to on Twitter. I added text links instead of a picture, but I could also have been easier. (We recommend that you read the readme files from time to time. ) There are numerous tips on how you can change display and placement. With this code

<?php dbt_the_LinkTag("<img src='http://www.klemmchen.de/wp/wp-content/themes/environment/images/tt-delicious-micro4.png' alt='add to delicious' />","delicious"); ?>

is inserted under the post an image, which also is again freely selectable. However, should the proposed XHTML lovers in the readme file for at least one code snippet alt="" Add tag, otherwise the validator complains.

Both solutions work well! Nevertheless, I would note: The Tweet This variant would be easier if they would survive because without error.

Hechelbach can not let's - it was a bit screwed in the design. In summary, if you fly over the root address, there are now "only" extracts ( <?php the_excerpt(); ?> ) - as usual, a click brings up the title of the article in single view, but also a link below the excerpt ("read this entry» ') transports the reader there directly. The same view has been selected for the archive.

If you like it, it is offered as a download. We are, however, depends on feedback. How do you like this type of display and navigation?

Here is the short code (currently in archive.php, search.php and index.php):

<div class="entry">
<?php the_excerpt(); ?> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('Permanent Link to %s', 'kubrick'), the_title_attribute('echo=0')); ?>"><?php printf(__('Read the rest of this entry &raquo;', 'kubrick')); ?></a>
</div>

It is you may have noticed here and there: Not only is the blog title is clickable, but also the description. You can also call this area of ​​subtitles. You have a visitor this is no real additional functionality - you just go from there to home than you would click on the blog title. The blogger, at least when he gets logged, but from there directly into the admin area. Maybe this gimmick is interesting for you - to get to the dashboard, you must not then shimmy to the Admin link, as the blog description is indeed the top of the page header and is thus always within easy reach. We were here a long time, until soft, blog title and description of the new design had, for the display of which we have abolished the title and description.

The good thing is that this can be achieved with very little code. The place where this is happening, the header.php. Just search <?php bloginfo('name'); ?> and <?php bloginfo('description');?> . The section that looks mostly like this:

<!-- No.1: USUAL WAY. CLICK ON BLOG TITLE LETS YOU RETURN HOME WHILE THE DESCRIPTION IS JUST A DESCRIPTION NOT A CLICKABLE AREA. -->
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>
<!-- END of No.1 -->

just replace this by:

<!-- No.2: THE FOLLOWING COMMENTED PART IMPLEMENTS DIRECT ACCESS TO ADMININSTRATION BY CLICKING ON THE BLOG DESCRIPTION WHILE ANYONE WHO IS NOT LOGGED IN RETURNS BACK HOME -->
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description">
<a href="<?php
if (current_user_can('level_10'))
echo get_settings('home').'/wp-admin/">';
else
echo get_settings('home').'/">';
bloginfo('description'); ?>
</a>
</div>
</div>
</div>
<!-- END of No.2 -->

What is the code? While clickable in Option 1, the standard header, blog title and description are displayed in the header, but only the title and the user back to home brings ( <a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a>) , is in version 2, which also shows both polled by clicking on the description of the user's permission. current_user_can('level_10') is the highest authority, namely the administrators. That sits just in front of the computer is logged in, look to your own blog and would like to urgently go to the dashboard, so all he needs (or her, of course) clicking on the description for this blog. Users who are not registered and therefore does not have appropriate permissions, instead simply beamed to home.

Theoretically (and practically) the authorization request for other functions makes sense that only the administrator should be available. The range of privileges ranging from 0 (the registered user) through 1 (the employees), 2 (the blog author) and 7 (the publisher) to give 10 (the administrator). Of course, the permission bits are backward compatible: An admin can do everything (levels 10 to 0), because the publisher is already impaired (Level 7-0), etc.

Often, but not always, personal items, a success in view of the facts and responses is granted. One may hold some items especially, but not all visitors have the time or inclination to sift through everything, just to discover this article. But the solution is simple: It will delete all posts except those that should be read according to their own understanding of the users. Thank you for your attention! Until next time!

Well, you're right that can not be the solution! It will be different. And, yes, there is a possibility. Inspiration for that I'm self-taught somewhere on the net. (I'll post it as soon as I find them again.)

If you write an article, click below "special field". There you add something to your taste, we have "favarticle" is selected, you can also Che Guevara or Mickey Mouse or a phrase of your choice to add. The important thing is that you are either a word or an underscore ( _ ) Select a connection between multiple words. Then you assign another value, in this case we have a number 1 or 2 is used - the 1-listed candidates will be before the 2-candidates. It extends also to award only a number.

Now you need to add some code. First off is to be executed for the base code functions.php an appropriate place. Of course you can also insert it directly into the php file where you need it. Also recommended is a swap, because this preserves the clarity, and you are determined several points in your theme where you can insert a list of your favorites. Here's the code that we have pushed into the functions.php:

<?php function getFavArticles($count){ global $wpdb; $count = intval($count); $favarticles = $wpdb->get_results("SELECT post_id FROM $wpdb->postmeta WHERE meta_key ='favarticle' ORDER BY meta_value ASC LIMIT 0, $count"); if ($favarticles){ foreach ($favarticles as $favarticle){ $title = wptexturize(get_the_title($favarticle->post_id)); $link = get_permalink($favarticle->post_id); echo '<li><a href="'.$link.'" title="'.$title.'">'.$title.'</a></li>'; } }else{ echo '<li>...</li>'; } } ?>

What is the code? He calls a function getFavArticles on that you can refer to later somewhere in your theme. He is looking for a meta_key ='favarticle' , so the key. You have to define, and sorted according to the selected item to the value assigned according to ascending order. Below are the article titles as clickable links.

So, now you have prepared articles, the PHP function - you still need a place to run the function and the list of your treasures will be displayed. We have placed the Favorites list in the default sidebar, which is, however, the use of widgets set up content from scratch. So we screwed them (the list, do not you, the readers) also in single.php. The single view is formed at even without the sidebar, but with a representation that uses the available space better . We have an extra one color from the rest of the site clearly slipped box with the main navigation points installed, there is currently also the favorites list. Get the code for the sidebar (which is slightly different than the structured product view):

<?php }?> <?php if (function_exists('getFavArticles')): ?> <li><h3><?php _e('Top posts', 'kubrick'); ?></h3> <ul> <?php getFavArticles(10); ?> </ul> <?php endif; ?> </li>

and adapted for the code box:

<?php if (function_exists('getFavArticles')): ?>
<h2><?php _e('Top posts', 'kubrick'); ?></h2>
<ul><li>
<?php getFavArticles(10); ?>
</li></ul>
<?php endif; ?>

Due to the converted list instructions ( <ul> as an introduction of a list (ul = unordered list = unordered list), <li> as a new list item within that list (li = list item = list) by the terminating tags </li> and </ul> ) and the different headings ( <h3> or <h2> ) is the representation of the favorites list, something different, but adapted to the particular situation and the same content.

Determined you can think of other applications! Finally, you can make your article on stamps, on the clothes purchases or your wife - oh, what do I know! - With these kind of lists that you define special fields, specifically somewhere peddling.

Good light and good nuck!

You probably know the "WordPress Default" Theme, also known as "Kubrick". This theme is generally based on our "environment" theme, although it was modified so that it is not immediately noticeable. Many consider "Kubrick" to be outdated, because you've seen it too often. In principle, this may be true, if it sends into the race completely unedited. But we have decided because of the strengths of the themes for the use, set up the theme again and now use it for this blog.

The sidebar, so the side bar with links, keywords and categories, for many users a familiar sight, and often it comes with additional plug-ins jazzed, we use, for example, including the Flickr Badge widget for presenting your own photos at Flickr. "Kubrick" shows in their original state but not in all situations, a sidebar. Many feel this is a problem. How to change the stands here . Initially, we had also changed for all sorts of views, but at least a single view of products 0hne sidebar holds untapped potential. One could in fact increase over a few small changes in the style sheet (style.css) is simply the display area of the single article view and use as the space of the missing sidebar useful.

We are looking for the following entry in the style.css

.widecolumn { padding: 10px 0 20px 0; margin: 5px 0 0 150px; width: 450px; }

and change it as follows:

.widecolumn { padding: 10px 0 20px 0; margin: 5px 0 0 70px; width: 600px; }

By the margin value of 150px to 70px was lowered, moves the left edge of the article to the left, there is the free boundary in the original unused now used for the display of the contribution. The Width -value was now from 450px to 600px increased, thus the item will appear wider and therefore uses the space otherwise occupied sidebar. Especially for long articles may be advantageous because the user is scrolling not so often in order to reach the end of the article.

A disadvantage of this method is that the user has to scroll up again to return to the home page and therefore the sidebar again at our disposal. The drawback, we have a box fixed on the end product, in the - visually aware of other display raised - find the main navigation links. This box is also used for other purposes, but more in a later article.

Let's say you want to allow your visitors to a page layout customized experience comment. Standard, these colorless boxes with black lettering in your visitors' name (required) "," E-mail (will not be published) (required) "and" Web Site "and enter the comment text. Since you now want to add a little color or even a picture? No problem, this is accomplished in a few moments.

First, you just need an idea of ​​how that should look like. Would you like a color or a picture? Then you open the dashboard of Wordpress style.css and look for phrases like these:

#commentform input or #commentform textarea . (The special in your case may also contribute slightly different names, but if you see the same code, but you have a clue as to what should be found in the appropriate place.

#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;
background: url('images/kubrickbgcolor.jpg');
color: #ffffcc;
}

"Width" determines the length of the input field, "padding" the padding of the content to the edge and "margin" a transparent distance to the next item. Filled while "padding" with the color or the image of your choice is, is the "margin" is actually transparent, and looks just like your page, where you present your content. (The CSS references can be found here and here ).

In the case of our hand, we wanted to have the background like in the input fields. Accordingly, we have added the path to this same image file: background: url('images/kubrickbgcolor.jpg');

Since this is quite dark, we have with color: #ffffcc; the text color matched a bright interior. After all, your visitors can read what they write.

Would you prefer a color instead of a picture? Do not replace issue, just the background: url -section with this: background: #000000; . The example is coded black, but you can also enter any other color.

Similarly, complement the range #commentform textarea in the same way.

Our results you can see below this article for example, if you read it in single view.

Good light and good nuck!

You all know the usual pattern of a blog: In the top of the page appear the blog name <?php bloginfo('name') ?> and the description <?php bloginfo('description'); ?>. Click on the blog name brings the users back into the main directory. But if you want - artifice like - just specify which font to which appear in the header image, it is difficult, alone simply because font just created, are not just installed on any computer - and can be used only to them. In Arial or Times's new novel is certainly not a problem, but you know, for example, or even small clamps Haettenschweiler? See - the design requirement are subject to tight restrictions. With a few code snippets but that's no problem.

<h1><a xhref="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1> <div class="description"><?php bloginfo('description'); ?></div>


Find this Passage in the header.php. Delete them or comment them out. Commenting out? Everything between <!-- and --> is involved, is passed over, and is therefore non-existent for the software that translates the scribbling in a visible line side. We always comment quite a lot, at least if not renewed use of the codes used now is not impossible - for subsequent changes to the code, you have so less typing. In any case, the above passage is now out of the race. Wordpress Germany now offers two ways . Both work perfectly, but are each associated with certain limitations. Where the head is coded, insert a

<div id="header" onclick="location.href='<?php bloginfo('url') ?>';" style="cursor: pointer;">...</div>

a. The disadvantage is that search engines have trouble reading such a passage written - you may see your blog, loaded on most loving way, with wonderful articles and photos, are not found. (And that would be nasty.) Must also inclined reader in your browser to enable JavaScript, the onclick passage indicates. Many turn JavaScript but for security reasons (in short: JS), because JS can also be provided with a defective code. If your head Cascading Style Sheets Image via: have included (abbreviated CSS), then you better take this code.

<div id="header"> <a href="<?php bloginfo('url') ?>/" style="display:block; width:100%; height:100%;"> <span style="visibility:hidden"><?php bloginfo('name') ?></span> </a> </div>

The works reliably, and your site conforms to XHTML validation continues. This is not a platform for cross-presentation of your blog unimportant. (Not that this blog is the Validieruung fulfilled, by the way the Flickr plug-in.) How can you recognize whether your header image with CSS is involved? Well, you scurry into your Stylesheet.css times and look for a passage that resembles this one:

#header { background: #352726 url('images/kubrickheader.jpg') no-repeat bottom center; } #headerimg { margin: 7px 9px 0; height: 192px; width: 740px; }

Here is the background color that is displayed when no image appears, specify the path to the image file (usually but not always in the \ images) and the overall dimensions (the dimensions) of the image. So, now you know that

Good light and good nuck!

Hechelfeld