Dimox.net http://dimox.net CSS, HTML, jQuery, WordPress Sat, 21 Jan 2017 11:48:12 +0000 en-US hourly 1 Simple To-Do List – Extension for Google Chrome and other Blink-based browsers http://dimox.net/simple-to-do-list-extension-for-opera-15/ http://dimox.net/simple-to-do-list-extension-for-opera-15/#comments Sat, 21 Sep 2013 10:46:23 +0000 http://dimox.net/?p=77 I am very old user of the Opera browser (as far as i remember from 2001, then it was the 7th version) and to this day I continue to use it. Since Opera is my most used program every day, so it is convenient to maintain a list of daily tasks right in my favorite browser.

In previous versions of the Opera (I mean Presto based versions – 12 and below) I have used extension for managing task list from another developer. But when I’ve switched on Opera 15 (based on Blink), I have decided to make my own extension, using HTML, CSS and jQuery technologies, which I like very much.

Updated 2016.10.04: Since I no longer use Opera browser, new versions of extension now available only in Chrome Web Store – Simple To-Do List.

Extension features

  • Minimalistic interface.
  • Clickable links in the text.
  • Drag-and-drop support for tasks. Move your mouse over the task and you will see an area that allows you to drag and drop.
  • You can set a priority for a task. From 1 to 3.
  • You can change CSS styles for a task font and change colors for tasks with priority.
  • Export/Import functionality.
  • Support for data synchronization (does not work in Opera at the moment).
  • Optional hotkeys.

If you find a bug, feel free to report about it below in the comments.

]]>
http://dimox.net/simple-to-do-list-extension-for-opera-15/feed/ 22
Beautiful Tags For a Website Using Only CSS http://dimox.net/beautiful-tags-for-a-website-using-only-css/ http://dimox.net/beautiful-tags-for-a-website-using-only-css/#comments Wed, 16 Jan 2013 11:58:05 +0000 http://dimox.net/?p=32 tag cloud design, which may help to make you website more attractive. Such a tag can be marked up with just one image, however, modern technologies allow to mark it up entirely with CSS, without using this image. And now I will show you how to do it.]]> Great web designer Orman Clark once shared with his readers very beautiful tag cloud design, which may help to make you website more attractive.

Such a tag can be marked up with just one image, however, modern technologies allow to mark it up entirely with CSS, without using this image. And now I will show you how to do it.

It should be noted that the result will look excellent in the following browsers: Google Chrome, Firefox, Safari and Opera. Tag will be without a gradient in Internet Explorer 9, but here it also looks not bad. But in IE8 and below it looks unseemly.

HTML code for a tag is a simple link:

<div class="tags">
	<a href="#">tag1</a>
	<a href="#">tag2</a>
	<a href="#">tag3</a>
</div>

Firstly we declare the link as inline block, remove underline and prevent text from wrapping in a new line.

Now we will begin to “draw” the right side of the rectangle. We specify a gradient background, a border colors, add the effects of external and internal shadow for the block and shadow to text, as well as padding and margin (margin of 10px to the right specified in order to leave space for the adjacent tag triangle):

.tags a {
	display: inline-block;
	height: 21px;
	margin: 0 10px 0 0;
	padding: 0 7px 0 14px;
	white-space: nowrap;
	position: relative;

	background: -moz-linear-gradient(top, #fed970 0%, #febc4a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed970), color-stop(100%,#febc4a));
	background: -webkit-linear-gradient(top, #fed970 0%,#febc4a 100%);
	background: -o-linear-gradient(top, #fed970 0%,#febc4a 100%);
	background: linear-gradient(to bottom, #fed970 0%,#febc4a 100%);
	background-color: #FEC95B;

	color: #963;
	font: bold 11px/21px Arial, Tahoma, sans-serif;
	text-decoration: none;
	text-shadow: 0 1px rgba(255,255,255,0.4);

	border-top: 1px solid #EDB14A;
	border-bottom: 1px solid #CE922E;
	border-right: 1px solid #DCA03B;
	border-radius: 1px 3px 3px 1px;
	box-shadow: inset 0 1px #FEE395, 0 1px 2px rgba(0,0,0,0.21);
}

We get the following:

Beautiful Tag

Now we will create the left triangle using the :before pseudo selector. Originally it’s a square (with the same borders, shadows and gradient, but rotated by 45 degrees), which will be transformed into a triangle:

a:before {
	content: '';
	position: absolute;
	top: 5px;
	left: -6px;
	width: 10px;
	height: 10px;

	background: -moz-linear-gradient(45deg, #fed970 0%, #febc4a 100%);
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#fed970), color-stop(100%,#febc4a));
	background: -webkit-linear-gradient(-45deg, #fed970 0%,#febc4a 100%);
	background: -o-linear-gradient(45deg, #fed970 0%,#febc4a 100%);
	background: linear-gradient(135deg, #fed970 0%,#febc4a 100%);
	background-color: #FEC95B;

	border-left: 1px solid #EDB14A;
	border-bottom: 1px solid #CE922E;
	border-radius: 0 0 0 2px;
	box-shadow: inset 1px 0 #FEDB7C, 0 2px 2px -2px rgba(0,0,0,0.33);
}

And it looks like this:

Beautiful Tag

It is worth noting that the webkit draws gradients in the opposite direction, so a negative value is specified for it: -45deg. Also, you may notice that there is not 45 but 135 degrees is specified in the prefix-free gradient property. I do not know why, but it should be such to display properly.

To make a triangle from a square, we use the transform property with the value rotate(45deg). But this is not enough – we also need to make it with an obtuse angle. This is achieved by scaling the Y-axis using the scale value for the transform property:

a:before {
	-webkit-transform: scale(1, 1.5) rotate(45deg);
	-moz-transform: scale(1, 1.5) rotate(45deg);
	-ms-transform: scale(1, 1.5) rotate(45deg);
	transform: scale(1, 1.5) rotate(45deg);
}

We get almost complete design of a tag:

Beautiful Tag

The last remaining thing – make a hole in our tag. The :after pseudo selector will help with this. Simply we create a small square and round off his corners so that it turns into a circle. And add a shadow to make it look three-dimensional:

a:after {
	content: '';
	position: absolute;
	top: 7px;
	left: 1px;
	width: 5px;
	height: 5px;
	background: #FFF;
	border-radius: 4px;
	border: 1px solid #DCA03B;
	box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 1px 1px rgba(0,0,0,0.21);
}

Hooray! In the end, we got identical tag design, as is shown in the first picture to this post:

Beautiful Tag Using Only CSS

Finally, you can add an effect to change the text on mouseover:

.tags a:hover {
	color: #FFF;
	text-shadow: -1px -1px 0 rgba(153,102,51,0.3);
}

Live demo is here.

]]>
http://dimox.net/beautiful-tags-for-a-website-using-only-css/feed/ 1
Share42.com – Free Social Sharing Buttons Script http://dimox.net/share42-com-free-social-sharing-buttons-script/ http://dimox.net/share42-com-free-social-sharing-buttons-script/#comments Thu, 13 Sep 2012 16:49:21 +0000 http://dimox.net/?p=30 Share42.com called Social Sharing Button Script. It provides a free service for generating a script. So, eventually, visitors on your websites or various social networks will be able to post links and additional information to your articles in various types of social media.]]> Nowadays we are involved in different processes connected with the Internet. There are many numerous interesting websites and all of them have a specific purpose.

I present to you my website Share42.com called Social Sharing Button Script. It provides free service for generating a script. So, eventually, visitors of your websites or various social networks will be able to post links and additional information to your articles in various types of social media.

Share42.com - Free Social Sharing Buttons Script

There are many available options on Share42.com.

  • Firstly, you are able to choose a size (32×32, 24×24 or 16×16) and icons from listed on the website. You can notice more then 40 buttons there.
  • You can also choose the desired features of icon panels, website charset.
  • You are able to check how it will look like on this service.
  • If you are satisfied with all the set characteristics, you should install a definite script on your website. This process is very easy, just pay attention to the following steps:

    • After downloading it, you should unpack its archive. Then just upload folder of Share42 to your website via FTP or web hosting control panel.
    • Afterwards, you specify the path to it, select the most appropriate type of website, insert template of a specific code just before the main text goes.
    • If you want to give a style to it, then just add a special code from Share42.com and put it in CSS file.
  • That’s the way it is going to be properly done.

Why choosing Share42.com:

  • Beautiful design of icons, which are made to fit each other.
  • Optimized code of script with a small size.
  • Easy way in installing, so after downloading the script you are able to connect it to your website.
  • No additional extra links are noticed because all links are made via JavaScript and outbound links do not increase in number.
  • You won’t find an extra HTML code, so it is generated with JavaScript.
  • You avoid the situation when another third-party site takes part in installation of the script.
  • The universal character of this service provides its working on any type of those websites that have FTP access.
  • Only one image or sprite can reduce the number of requests to that server that hosts your website.

You can see the live demo of the Share42.com script on the current website.

If you find Share42 useful and required for your website, you have a chance to thank me and donate via PayPal.

You have a great possibility to give your website a unique look and an appropriate style. You choose those icons of social media that will be noticed on your website. All in all, this is an easy way to promote your site and make it more popular with the help of Social Sharing Button Script on Share42.com.

Don’t hesitate and give it a try!

]]>
http://dimox.net/share42-com-free-social-sharing-buttons-script/feed/ 46
WordPress Top Authors List Without a Plugin http://dimox.net/wordpress-top-authors-list-without-a-plugin/ http://dimox.net/wordpress-top-authors-list-without-a-plugin/#comments Mon, 23 Jan 2012 14:50:11 +0000 http://dimox.net/?p=29 list of the top authors without using a plugin.]]> WordPress engine allows to create sites with big number of users of different levels. And authors, which have corresponding right, can fill the site content. On such a multi-user sites will be useful to have a list with top authors.

In this post I will show you one of the ways how to display list of the top authors without using a plugin.

You can use the following small function:

function top_authors($number = 10) {
	$uc = array();
	$blogusers = get_users();
	if ($blogusers) {
		echo '<ul>';
		foreach ($blogusers as $bloguser) {
			$post_count = count_user_posts($bloguser->ID);
			$uc[$bloguser->ID] = $post_count;
		}
		arsort($uc);
		$i = 0;
		foreach ($uc as $key => $value) {
			$i++;
			if ($i <= $number) {
				$user = get_userdata($key);
				$author_posts_url = get_author_posts_url($key);
				$post_count = $value;
				if ($post_count > 0) {
					echo '<li><a href="' . $author_posts_url .'">' . $user->display_name . '</a> (' . $post_count . ')</li>';
				}
			}
		}
		echo '</ul>';
	}
}

Paste this function in the functions.php file of your theme and then put the following code in a place of your theme, where you want to see the top authors list:

<?php if (function_exists('top_authors_list')) top_authors_list(10); ?>

10 here is the number of authors you want to show in the list.

That’s all.

As a result you will see the list of top authors with their names and number of published posts. Author’s name is linked to his archive page where is a list of all his posts.

List of top authors is sorted by number of posts.

]]>
http://dimox.net/wordpress-top-authors-list-without-a-plugin/feed/ 9
WordPress Comments Pagination Without a Plugin http://dimox.net/wordpress-comments-pagination-without-a-plugin/ http://dimox.net/wordpress-comments-pagination-without-a-plugin/#comments Thu, 01 Dec 2011 14:21:50 +0000 http://dimox.net/?p=27 pagination in WordPress comments without using any plugins. WordPress has a built-in function paginate_comments_links() for this, which is appeared in WordPress 2.7. It works on the basis of the function for a pagination on archive pages (as you know, it also may work without a plugin), therefore very similar to it.]]> There is a possibility to create a pagination in WordPress comments without using any plugins. WordPress has a built-in function paginate_comments_links() for this, which is appeared in WordPress 2.7.

It works on the basis of the function for a pagination on archive pages (as you know, it also may work without a plugin), therefore very similar to it.

Code of the function:

function wp_comments_corenavi() {
   $pages = '';
   $max = get_comment_pages_count();
   $page = get_query_var('cpage');
   if (!$page) $page = 1;
   $a['current'] = $page;
   $a['echo'] = false;

   $total = 0; //1 - display the text "Page N of N", 0 - not display
   $a['mid_size'] = 3; //how many links to show on the left and right of the current
   $a['end_size'] = 1; //how many links to show in the beginning and end
   $a['prev_text'] = '&laquo; Previous'; //text of the "Previous page" link
   $a['next_text'] = 'Next &raquo;'; //text of the "Next page" link

   if ($max > 1) echo '<div class="commentNavigation">';
   if ($total == 1 && $max > 1) $pages = '<span class="pages">Page ' . $page . ' of ' . $max . '</span>'."\r\n";
   echo $pages . paginate_comments_links($a);
   if ($max > 1) echo '</div>';
}

You need to paste this code the functions.php file of your theme. As you see the function also contains just five options.

To show the comments pagination on your site, paste the following code in comments.php of your theme near the wp_list_comments() function:

<?php if(function_exists('wp_comments_corenavi')) wp_comments_corenavi(); ?>

HTML code of the function will looks like this:

<div class="commentNavigation">
	<span class="pages">Page 7 of 14</span>
	<a class="prev page-numbers" href="http://site.name/post/comment-page-6/#comments">&laquo; Previous</a>
	<a class='page-numbers' href='http://site.name/post/comment-page-1/#comments'>1</a>
	<span class="page-numbers dots">...</span>
	<a class='page-numbers' href='http://site.name/post/comment-page-4/#comments'>4</a>
	<a class='page-numbers' href='http://site.name/post/comment-page-5/#comments'>5</a>
	<a class='page-numbers' href='http://site.name/post/comment-page-6/#comments'>6</a>
	<span class='page-numbers current'>7</span>
	<a class='page-numbers' href='http://site.name/post/comment-page-8/#comments'>8</a>
	<a class='page-numbers' href='http://site.name/post/comment-page-9/#comments'>9</a>
	<a class='page-numbers' href='http://site.name/post/comment-page-10/#comments'>10</a>
	<span class="page-numbers dots">...</span>
	<a class='page-numbers' href='http://site.name/post/comment-page-14/#comments'>14</a>
	<a class="next page-numbers" href="http://site.name/post/comment-page-8/#comments">Next &raquo;</a>
</div>

And you can use a CSS classes for styling this navigation. That’s it.

One more thing. Don’t forget to activate the option “Break comments into pages” in WordPress admin area.

]]>
http://dimox.net/wordpress-comments-pagination-without-a-plugin/feed/ 8