Front-end Web Developer | Tampa, FL

Explanations:

1. The Ornage color PC (Windows fonts)

2. The Blue color Mac fonts

In your styles it will look: font-family: Arial,Helvetica,sans-serif;

List of browser safe font:

Note that while the ClearType smoothing is applied always, the basic font smoothing of Windows 98/2000/XP is applied only to certain font sizes. That sizes can be specified by the font designer, but usually they are in the ranges of 0-6 and 14+ points (pt).

If we want to add a bit of user interactivity then we first need to get the users name with a JFactory call and store it in a variable which we place in the php section of the template:

{CODE type:php;}

$username =& JFactory::getUser();

{/CODE}

Then we can use this to show Register, Login links or Logout link, it depends of user logged in or not.

{CODE type:php;}

<div id=”loginArea”>
<?php
 if ($username->guest) {
 echo ‘<a href=”http://www.YourSiteName.com/index.php?option=com_user&view=register” title=”Register”>Refister</a> ‘;
 echo ‘<a href=”http://www.YourSiteName.com/index.php?option=com_user&view=login” title=”Login”>Login</a>’;
   } else {
   $name = $username->get(‘username’);
   echo ‘Hi ‘ . $name . ‘ –  <a href=”http://www.YourSiteNome.com/index.php?option=com_user&view=logout” title=”Logout”>Logout</a>’;
   }
 ?>
</div><!– End Login Area –>

{/CODE}

I hope it will be useful for you 🙂

First image:

Second image:

Note: I created first image with length 609px, you can create with any width, but i don’t think that the button will be more than this.

Now we crate HTML:

{CODE type:php;}
<div class=”button”>
    <a href=”/” title=”Sample Button Text”>Sample Button Text</div>
</div>
<div class=”clr”></div>
{/CODE}

Explanations:

I use DIV with class=”clr” for clearing “button” div with style FLOAT: LEFT;

And now add CSS:

{CODE type:php;}
.button {
background: url(images/stretch-button-bg.png) no-repeat top left;
height: 59px;
float: left;
padding-left: 24px;
line-height: 260%;
}
.button a {
background: url(images/stretch-button-end.png) no-repeat top right;
height: 59px;
padding-right: 24px;
display: block;
text-decoration: none;
color: #4d4d4c;
}
.clr {
clear: both;
height: 0;
overflow: hidden;
margin: -1px 0 0 0;
}
{/CODE}

Explanations:

I use line-height: 260% – this is for centered text by height – you can play with % value.

In next sample i will show how to create stretch box and it will be stretch by X and Y.

Here what we have to get:

ts the same what we did with stretch button background inside background, but here we will use it three times:

1. For the header of Box – two image (fist image stretch-box-bg.png is stretch background with length 1000px, second stretch-box-end.png is the end of our box)
2. For the context background (i use only one image stretch-box-content-bg.png for left and right side, because left and right side the same)
3. For the footer of Box (image stretch-box-btm-bg.png is stretch background with length 1000px, second stretch-box-btm-end.png is the end of our box in footer)

So first is our HTML:

{CODE type:php;}
<div class=”bigBox”>
    <div class=”titleBox”>
        <h1>Stretch box title</h1>
    </div>
    <div class=”contextBackgroundLeft”>
        <div class=”contextBackgroundRight”>
            <div class=”clr”></div>
            <p>Sample text</p>
            <div class=”clr”></div>
        </div>       
    </div>
    <div class=”bottomBox”>
        <div></div>
    </div>
</div>
{/CODE}

and CSS code:

{CODE type:php;}
.bigBox {
width: 100%;
}
.titleBox {
height: 35px;
overflow: hidden;
background: url(images/stretch-box-bg.png) no-repeat top left;
}
.titleBox h1 {
margin: 0;
padding: 0;
height: 35px;
background: url(images/stretch-box-end.png) no-repeat top right;
line-height: 260%;
}
.contextBackgroundLeft {
background: url(images/stretch-box-content-bg.png) repeat-y top left;
}
.contextBackgroundRight {
background: url(images/stretch-box-content-bg.png) repeat-y top right;
padding: 0 10px;
}
.bottomBox {
background: url(images/stretch-box-btm-bg.png) no-repeat top left;
height: 22px;
}
.bottomBox div {
background: url(images/stretch-box-btm-end.png) no-repeat top right;
height: 22px;
}
.clr {
clear: both;
height: 0;
overflow: hidden;
margin: -1px 0 0 0;
}
{/CODE}

Some tricks that i used in this tutorial:

{CODE type:php;}
<div class=”contextBackgroundRight”>
    <div class=”clr”></div>
    <p>Sample text</p>
    <div class=”clr”></div>
</div>       
{/CODE}

As you can see i used DIV with class=”clr”. If you remove it, you will see white spaces in top and bottom. This happen because we use tag < p > (or h1, h2, h3, ul….) all tags that have margin or padding will broke the box without DIV from top and bottom.

That is it. If you have any questions, feel free to ask me. I hope it will be helpfull

Step 1. How it looks:

So our example web page is going to be based on a simple blog theme, with a WordPress blog-like structure similar to that of the default WP themes. It’s going to look something like this:

The idea here is not for you to reproduce my example, but for you to be able to follow along and apply the techniques to your own designs, hopefully learning a thing or two about the underlying concepts.

Step 2. Photoshop

We’re going to keep the Photoshop use here to a bare minimum, Usually I mockup an entire design in Photoshop before coding, but here I’m just going to generate a basic layout, and worry about the content later. This is an example of a different workflow, it will make more sense as we go along.

Page Layout

As I wrote above, i decide to make website 950px wide, with right sidebar’s 250px wide and main content 700px wide. I think its optimal size for our web blog.

So, create new PSD document with Width: 1100px and Height: 1000px, with background color: # 556666

Create body background with gradient color from # 8aa295 to # 556666;

Create Header with width: 950px – gradient color from # ff8d00 to # d80e00;

Main Menu with width: 950px – background color # 000000;

Side bar – background color # edeeee

Bottom Menu with width: 950px – background color # b8fafd;

Copyright with width: 950px – background color # 000000;

Font Character

• Login/Logout
  • Welcome text:
    • Font: Verdana
    • Font Size: 12pt
    • Color: # FFFFFF (White)
    • Link color: # 333333
    • Text decoration: underline
• Header
  • My Blog Name:
    • Font: Verdana
    • Font Size: 30pt
    • Color: # FFFFFF (White)
  • My Blog description:
    • Font: Verdana
    • Font Size: 14pt
    • Color: # 000000 (Black)
• Main Menu
  • Menu Links
    • Font: Verdana
    • Font Size: 18pt
    • Color: # cccccc
    • Link color: # cccccc
    • Text decoration: underline-none

• Content
  • Article Title
    • Font: Verdana
    • Font Size: 24pt
    • Color: # 000000 (Black)
  • Autor
    • Font: Verdana
    • Font Size: 11pt
    • Color: # 666666
    • Link color: # ff3300
    • Text decoration: underline-none
  • Publish Date
    • Font: Verdana
    • Font Size: 11pt
    • Color: # 666666
  • Content
    • Font: Verdana
    • Font Size: 14pt
    • Color: # 333333
    • Link color: # ff3300
    • Text decoration: underline-none
  • Blockquote
    • Font: Verdana
    • Font Size: 14pt
    • Color: # 333333
    • Font style: italic
  • Tags
    • Font: Verdana
    • Font Size: 12pt
    • Color: # 666666
    • Link color: # cccccc
    • Text decoration: underline
• Sidebar
  • Sidebar Titles
    • Font: Verdana
    • Font Size: 14pt
    • Color: # 666666
  • Sidebar Text/Links
    • Font: Verdana
    • Font Size: 12pt
    • Color: # ff3300
    • Link color: # ff3300
    • Text decoration: underline-none

• Bottom Menu
  • Bottom Titles
    • Font: Verdana
    • Font Size: 14pt
    • Color: # 333333
  • Bottom Text/Links
    • Font: Verdana
    • Font Size: 12pt
    • Color: # 339999
    • Link color: # 339999
    • Text decoration: underline-none
• Copyright
  • Copyright text
    • Font: Verdana
    • Font Size: 11pt
    • Color: # cccccc

Conclusion:

In this tutorial we made simple design for our new blog site, next lesson we well add PSD design to HTML code.

This means that the footer area will always be placed on the bottom of the page, even if there is little content. I checked this code in MAC: FF, Safari; PC: IE 6/7/8, FF, GChrome

CSS Code:

{CODE type:php;}
* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

#wrap {
position: relative;
min-height: 100%;
}

* html #wrap {
height: 100%;
}

#wrapContent {
padding-bottom: 100px;
}

#footer {
position: relative;
height: 80px;
margin-top: -80px;
background: #000;
}
{/CODE}

HTML Code:

{CODE type:php;}
<div id=”wrap”>
    <div id=”wrapContent”>
        Content text
    </div>
</div>

<div id=”footer”>
    Footer text
</div>
{/CODE}

I hope it will help 🙂

Video tutorial for MAC:

1. Open YourGifFile.gif in the Preview.
2. Drag all images (tiffs usualy) into a new folder.
3. Then open them in Photoshop.
4. Merge them in one file
5. In top panel click on Window -> Animation

It is hard work, especially if the GIF contains many frames.

{youtube}9kU-5WvfPQ4{/youtube}

Video tutorial for PC:

1. In Photoshop CS3 top panel click on File -> Import -> Video Frames to Layers…
2. You will get a dialog that shows MOV, AVI, MPG, and MPEG files. So what use is this to you? Well, it is posted on the Adobe forums that this is an oversight by them. If you type in *.* in the File name: field  this will show you all files. You can now open animated GIF’s and they will display in the animation window and layers pallet.

{youtube}-s6SDkvXM3s{/youtube}

Thanks for PC video tutorial freescreencast.com

Obviously, the blog format can be used for… well, blogging. But think bigger than that when applying this to your website. Blog, in this case, is a functionality, not a technology. We routinely use the blog format for press releases, for example. The format works for anything where a client needs to post items regularly, in some pre-defined order. It’s also handy if the client is making new pages, because the client doesn’t need to make a menu link to the item. It will simply publish on the page.

To make category/section blog layouts, go to the Menu manger and find the menu on which you want this link to live. Click New, then Articles, then select either section or category blog layout.

You can then configure the blog format using the options below.

Parameters (Basic)

Under Parameters (Basic), you select the given section/category or section for the blog.

You can also choose to have a description show. This is the section description (section blog) or category description (category blog). These descriptions can be created/edited by going to the Section or Category Manager, selecting the section or category, and scrolling to the bottom of the screen, where there is an editor for a description. The description is extremely handy if you need to have some fixed text at the top of your blog page.

Likewise, the description image is the image associated with the section or category, which can be configured in the Section or Category manager.

Then we come to # Leading, # Intro, Columns, # Links

• # Leading is the number of “leading” blog entries. A leading entry is the first entry on the pile, which, by default, spans across the 2 default columns. If you have a single column on the page, leading doesn’t do a lot for you. So I usually set this to zero. The default is 1.
• # intro are the number of blog entries that display with title, intro text, and a read more link, in their default setting. By default this is 4.
• Columns are straightforward. Do you want your blog entries to appear in 2 columns (the default) or some other layout? I almost always set this to 1 column.
• # Links are the number of blog entries at the bottom of the page, in bulleted list format, with titles only that link to the full blog entry.

So – when I set up a blog layout, I typically set columns to 1, leading to 0, # intro to 10, and # links to 0. This gives me up to 10 intros on a page.

Parameters (Advanced)

I am not sure what makes these parameters so advanced, but anyway…

You will find some ordering options, which are slightly different if you’re in the section or category blog setting. But generally, you’ll have a choice for category order and one for primary order.

Category order refers to the categories within the section and what order those categories should appear. By default, that’s “order by primary order only”, meaning display them in the order they appear in the Category Manager. Re-order them in the category manager if you want them to appear in a different order.

Title (alphabetical) and title (reverse-alphabetical) are straightforward: display the categories in order of A-Z or Z-A.

Order means you’ve put the categories in a specific order in the category manager and that order should be maintained in the blog.

Primary order is the order of the blog entries themselves. The options are fairly straightforward. You can order by title, author, number of hits, time published (oldest or most recent first), or “ordering”, which again is the order that the articles appear in the Article Manager.

If you have a multi-column layout (see Parameters-basic), should the display of blog entries go down the column or across the column in whatever order they’re in?

Pagination refers to the links on the bottom of the page. Auto means the pagination will be generated automatically as needed. In this case, this refers to the 1, 2, 3, etc links at the bottom of the page. The Pagination Results item refers to showing “Page 1 of 4”. Show a feed link will determine whether an RSS feed should show.

Parameters (Component)

These are the same settings as those in Article Manager parameters. Use the article manager parameters as your default settings. You can then override settings for the entire blog here. Use the individual article settings (where, again, these same items appear) to override settings on an article by article basis.

Parameters (System)

These are the same types of parameters you’ve seen on other menu items. But a helpful hint: if you type something into the “page title” blank, then set “show page title” to NO, the text will still appear in the HTML title tag, even if it does not appear in the body of the web page itself.

So that wraps up category and section blog layouts. More on some of the other article possibilities in the coming days!

Special thanks for the article joomla4web.com

Log in to the Joomla admin panel: http://YourSite.com/administrator/

Click on Components -> JCE Administration -> Configuration

Scroll down to Formatting and set Use template CSS to NO

Put the path of your template CSS file into the Use Custom CSS field ie templates/YourTemplateName/css/style.css

The thing is now you’ve got a big long list of styles you’ll probly never use, so cut and paste the ones you want into a new css file (style-jce.css) and point the custom CSS field to it: templates/YourTemplateName/css/simple.css