What is your opinion on that? And which fonts do you prefer? (Georgia)

What is your opinion on that? And which fonts do you prefer? (Times)

What is your opinion on that? And which fonts do you prefer? (Bookman)

What is your opinion on that? And which fonts do you prefer? (Helvetica)

What is your opinion on that? And which fonts do you prefer? (Verdana)

What is your opinion on that? And which fonts do you prefer? (Arial)

What is your opinion on that? And which fonts do you prefer? (Monospce)

What is your opinion on that? And which fonts do you prefer? (Comic Sans)

What is your opinion on that? And which fonts do you prefer? (Courier)

What is your opinion on that? And which fonts do you prefer? (Impact)

As you can see, this is not only a question of personal liking but also  of technical concern regarding font sizes. And there’s one more thing important to me when styling texts: the line height, adjustable with the CSS property line-height. I usually use a value of 2.0. This is the double default value! I think that makes text much more comfortable to be read. And it also looks better since it gives free space to the appearance of a page.

jQ ideas:

• removing of the green template
• a smooth shadow for the outline
• new toggle arrows
• more…?

Future versions of the jQ theme might as well include these features:

• a jQuery supported content slider
• an option to adjust the font size from the back-end
• the possibility to include a custom header image
• multiple sidebars

All that is to come at the earliest in version 3.1.

the website is back after after a long period of  displaying nothing but empty screen. Though the content is available again I’m not sure about my future activity on this blog and on developing WordPress themes in general. However, this will figure out soon and the support for the already existing themes will be continued anyway.

For me there are two possibilities: either I invent a whole new concept for a third theme which I will in that case start up all from the bottom – or I reduce my work concerning web design on the mere support of my existing work in the near future.

Replace the code inside the file with the following:

$(document).ready(function(){

//Superfish menu
$("ul.sf-menu").supersubs().superfish(
{
delay:       1000,                            // one second delay on mouseout
animation:   {opacity:'show'},  // fade-in and slide-down animation
speed:       'normal',                          // faster animation speed
autoArrows:  false,                           // disable generation of arrow mark-up
dropShadows: false                            // disable drop shadows
}
);

//Toggle functions
$(".excerpt").hide();
$(".hide-excerpt").click(function (event) {
event.preventDefault();
$(this).parents(".excerpt").hide("normal");
});

$(".view-excerpt").toggle(
function(){
$(this).parents(".headline").next(".excerpt").show("normal");
}, function() {
$(this).parents(".headline").next(".excerpt").hide("normal");
});

$("#toggle-all").toggle(
function(){
$(".excerpt").show('slow');
$("#toggle").attr("class","show-all");
}, function() {
$(".excerpt").hide('slow');
$("#toggle").attr("class","hide-all");
});
});

This hides all post content by default. It also switches the controls, so that you can show the post content properly by clicking, instead of hiding it when it is hidden anyway.

Now, there’s just one thing left to do. Go to your sidebar.php file. In line 2 you will find the following:

<p id="toggle-all"><a href="#" id="toggle" class="hide-all">Toggle posts</a></p>

Replace line 2 with this:

<p id="toggle-all"><a href="#" id="toggle" class="show-all">Toggle posts</a></p>

The new line will effect the image of the “toggle-all” link on top of the sidebar. Now you see “+” instead of “-” when loading the page. That’s it, the appearence of the theme should have changed. One further note: I consider it reasonable to offer the user at least some content of a web page directly. To show the content of the first post of your index (while of course keeping the others hidden), add this

$(".excerpt:first").show();

to your theme.js, right after:

$(".excerpt").hide();

Anything else to mention?

• Collecting bug information and updating jQ for version 2.0 which will be released soon.
• PressThis, my newest theme with some cool new functions.

I hope you will enjoy all that’s coming in the future. Please note that I’m glad for every comment which helps me to improve my work!

The plug-in offers three links to change the font size of your blog. They can be inserted anywhere on your website by including a simple PHP-function (-> Installation). These links change the font size value of the most outward html element of the page: the body element. All values of the elements inside the html body must therefore have relative font size values. Only text that you want not to change its font size at all must have an absolute value.

Here is an example for better understanding: The default font size value of the body element must be set to “10px” (-> Installation). By clicking the “A+”-link this value will be set to “11px”. All elements with relative font size values like

p {font-size: 100%;}

will then be automatically adjusted to the new top-level font size. In this case the font size of a “p”-element will switch from 10px (100% of 10px = 10px) to 11px (100% of 11px = 11px). Font size values of other elements will change likewise (a value of 120% will result in a new font size of 13.2px).
Important: Relative font size values are calculated from the direct parent element. This means: An element B which has a 100% font size and which lays inside an element A that has a 120% font size will have the font size values of the element A (12px/13.2px), not the values calculated in proportion to the body element (10px/11px).

Installation

1. Upload the plug-in to the “/wp-content/plugins/” directory.

2. Activate the plug-in through the “Plug-ins” menu in WordPress.

3. Place “<?php resize_links(); ?>” in one of your templates to provide the scaling links on your website.

4. Go to your style.css file and assign a font size of 10px to the body element of your website: “body {font-size: 10px;}”.

5. This is the most important step: All other font size values in your style sheets must be relative values. Only elements with text that you want not to change its font size at all must have an absolute value.

The plug-in extracts the first image uploaded to a WordPress post by using a simple database query. Please note that the database order of the images is not influenced by the way you order your images in a post. The first image uploaded will remain the thumbnail, even if you place it at the end of your article. If you delete the first image, the second one will take its position. If no image at all is added to a post, the plug-in delivers a default image (a white WordPress logo with light grey background).

The title of the thumbnail is generated out of the post title. You can insert the image anywhere in your theme inside the wp-loop by adding a template tag to the source code. Please be aware that the plug-in does not scale or crop the images. It simply delivers the html tag. The styling is intended to be solved via CSS (-> Installation).

Installation

1. Upload “post_thumb” to the /wp-content/plugins/ directory

2. Activate the plugin through the “Plugins” menu in WordPress

3. Place <?php post_thumb(); ?> inside the wp-loop of your template, where ever you want the thumbnail to appear.

4. A nice way to use this plugin is to link the images to the post by wrapping the plugin template tag into the post URL:

<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php post_thumb(); ?></a>

5. Adjust display and image size using CSS. The plugin renounces on resizing the thumbnail because this can be done easily inside your style.css. You can use it at any place of your theme by giving it a max-width value. The height will automatically be adjusted and, in the case that the image is more narrow than the max-width, it will keep its original dimensions.

Download

Automatic Post Thumb plug-in

<?php
$tag = get_the_tags();
if (! $tag)
{
echo "No tags";
}
else
{
the_tags('Tags: ', ', ', '');
}
?>

This prints “No tags” where ever you want it.

$(document).ready(function(){

$("#small").click(function(event){
event.preventDefault();
$("#page").css("font-size","8px");
$.cookie("fontSize","8px");
});

$("#default").click(function(event){
event.preventDefault();
$("#page").css("font-size","10px");
$.cookie("fontSize","10px");
});

$("#large").click(function(event){
event.preventDefault();
$("#page").css("font-size","12px");
$.cookie("fontSize","12px");
});

// Cookie
var fontSize = $.cookie("fontSize");

// Calling Cookie
if(fontSize == "8px") {
$("#page").css("font-size","8px");
};

if(fontSize == "10px") {
$("#page").css("font-size","10px");
};

if(fontSize == "12px") {
$("#page").css("font-size","12px");
};

});

In addition, the font scaling affects two other files of your website. You must insert three links into your html document, just as it is done here:

<html>
<head>
<title>Font Scaling</title>
<link rel="stylesheet" href="fontResizer.css" type="text/css" />
<script type="text/javascript" src="jquery-1-3-2.js"></script>
<script type="text/javascript" src="cookies.js"></script>
<script type="text/javascript" src="fontResizer.js"></script>
</head>
<body>
<div id="page">
<p>
<a id="small" href="http://jquery.com/">small</a>
<a id="default" href="http://jquery.com/">default</a>
<a id="large" href="http://jquery.com/">large</a>
</p>

<div id="content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<p id="test">Duis autem vel eum iriure dolor in hendrerit</p> in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</body>
</html>

Finally, it is essential that only the outward element of your document owns an absolute CSS font size. All elements inside it must obtain relative font sizes. These will be in relation to the value set in the outward container. Have a look at the following CSS:

div#page
{font: normal 10px Verdana;}

a
{font-size: 110%;}

div#content
{font-size: 120%;}

This will result in an 11px font size for all a-element and a 12px font size for divs. That’s it. I hope you will enjoy it.

Note: If you should use this code on your homepage I’d be very graceful for creating also a link to my website.