Sopov.com freelancer, html and css tips and tricks

Standard fonts for all browsers and platforms PC and MAC

Often our clients give us (html to psd coders) web-design with non standard fonts. And every time i need to explain, why i don't use their fonts, but use common crossbrowsers/platforms fonts. And now i decide to create List  of common (standard) fonts for all versions of Windows and their Mac substitutes. This will help both designers and html coders.  I hope you will find it useful.

How to create button tags links in WordPress

The first thing is how to find "the_tags" in your WordPress files?

How to create link to login, logout, register page in Joomla?

It often happens that customers do not need a registration page, but after a while, there are additional opportunities at the site requires registration page, as well as the landing page. So, how to add these links to our Joomla template?

Here is URLs for our:

Login page: http://www.YourSiteName.com/index.php?option=com_user&view=login

Logout page: http://www.YourSiteNome.com/index.php?option=com_user&view=logout

Register page: http://www.YourSiteName.com/index.php?option=com_user&view=register

PSD to HTML. How to design my own website and add it to HTML? Lesson 2

In previous lesson We learned how to create simple design in Photoshop. Now i show you how to slice and PSD file and add it to our HTML page.

Download PSD

Download HTML/CSS

View Demo

Step 1. Slicing PSD file:

1. Select Slice Tool in Photoshop (or just press "K" button on keyboard)
2. Select backgrounds that we will use in our site (in my PSD file this is: Body and Header background)
   
   
   
   
Read more... Comments (3)

How to create stretch buttons, menus, boxes with rounded corners from PSD file to HTML code?

In this lesson i'll show you how to create rounded corners boxes, that can stretch down and right.

The fist sample is very easy to create. Buttons and menus usually stretch by "X" (from the left to the right).

We have PSD mockup (or image like gif, png, jpg) with button and now we have to add it to HTML:

First of all we have to create 2 background images  (i use Photoshop for it). Fist image will be our stretch background, and the second will be end of the button:

Download HTML/CSS

View Demo

PSD to HTML. How to design my own website and add it to HTML?

In this tutorial i'll show how to create simple PSD design in Photoshop cs3 and code into HTML. This is simple design for beginners.

Download PSD

Download HTML/CSS

View Demo

Introduction:

Difficulty type: Easy

In this lesson we will make simple blog template with:

1. Flexible centered layout;
2. With site width: 950px (this means people with 15" monitors don't have to scroll sidewards);
3. And right sidebar;

How to place footer at bottom?

How to open GIF animation in Adobe Photoshop CS3 on MAC or PC?

Great news, Photoshop CS3 can make animated GIF’s, BUT We can no longer open them. Very strange, isn't it?

So, i created video tutorial for MAC and PC, how to open GIF animation with all frames

Category Blog Layout Parameters (Basic) Explanations

Category and section blog layouts are essentially the same thing. For a given section, or for a given section/category, all content items will show up on the page in "blog" format.

How to add styles in dropdown JCE text editor in Joomla?

If You want add Your own css style to JCE editor, this article is for You.