Sopov.com freelancer, html and css tips and tricks

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 (1)

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.

How to add a Search box in WordPress template?

This is very simple article. This code will be helpful for theme developers and for those who like to add search to their WordPress blog template.

1. Open Your Wordpress installed folder and find file searchform.php. You can find it here: wp-content/themes/YourThemeName/. If searchform.php file exist, skip step 2 and go to step 3.

2. If You can't find searchform.php create new with this code:

How to create small image gallery using CSS only?

I created simple image switcher gallery, without any JavaScript. And it works in most browsers: MAC: FF, Safari; PC: FF, GChrome, IE 7/8 (IE6 doesn't support).

Here is an example what we have to get: