WordPress Directory Permissions

Thursday, December 30th, 2010 at 6:54 am

wordpress directory permissions

How to style WordPress 2.5

It soon will be time to redesign my website for "The era of Web 2.0." I've looked seriously two platforms Drupal and Joomla, with which to accomplish this.

Drupal and Joomla offer comprehensive packages that, in the case of Drupal, includes a blog and a forum such as core modules. Theming these platforms can be achieved either through CSS (Cascading Style Sheets) and PHP (Personal Home Page or PHP: Hypertext Preprocessor) code modifications. However, these platforms are complex and learn enough to install, take a look at WordPress as a possible solution to my needs in the future Web. I was surprised to discover The latest version of WordPress is easy to install, easy to use and easy subject.

In this article I will describe how to customize WordPress 2.5.

WORDPRESS STYLE - DESIGN JAKOB

The current design of my personal website, SelectDigitals.com is based on the work and philosophy of Jakob Nielsen, http://www.useit.com/. Nielsen work has been devoted to the development of useful web sites that offer content that is easy to find and easy to read.

The Nielsen site design (and my site, with permission) is simple and elegant and has the objective of delivering content. WordPress also has the main objective of delivering content. Therefore, my first WordPress design will strive to maintain the appearance of our site with the added feature of visitor interactivity. I will refer to this as the design of Jakob.

There are six main components that make up the appearance of the default WordPress blog:

1. Header graphic

2. Blog title

3. Lema,

4. Page,

5. Background and

6. Footer page.

In order to make the blog load faster Jakob, I decided not to use a header or footer graphics, and the design will focus mainly in the WordPress default theme with a new layer, just a little graphic design work to do. In fact, all you need to create a blog graph to generate the page with two effects of the column. The blog page will "float" in a body-centered dark blue background * used to configure the page.

Creating an Image

A look at the image directory for the default theme for WordPress displays images default used to the look of Kubrick. For now, only one file of particular interest: kubrickbgwide.jpg. Jakob By design, the other images of Kubrick are not necessary but will be needed for the "Fancy", a more complex design.

Blog page is created from a "slice" the center of the new design. The division is an image of narrowing the width of the blog page.

I started my design by placing a basic page (760px X 600px) in Adobe Illustrator. I like using Illustrator for illustrations of this type, although other programs could be used, too.

Filled the basic page with the background color of the page (not to be confused with the dark blue background body *). The light background color is going to "show-off" the color text, as the blog title and tagline.

Overlayed the page with two rectangles, or "columns". The left, 510px from wide-column is filled with a yellow cake, right column, 230px wide, is filled with a pastel blue. The two columns to fit into a basic page 10px border bottom of the page around them.

In Illustrator, which is placed a 760px X 40px rectangle on the page and use this to make cuts. A slice is only a representative part of a larger image, in this case, the design blog. I saved the court as kubrickbgwide.jpg. Kubrickbgwide.jpg is used to generate the bottom of blog-page. As new content is added to the blog page, copies of the slice are stacked vertically to "grow" the bottom of two columns. This is the only image that you need a browser to generate the blog home page. The blog, therefore, loads very quickly.

Pretty easy so far, right? The rest of the design is carried through the theme CSS files and / or through the WordPress administrative interface.

CSS Changes

The file CSS is the default wp-content_themes_default directory. The text shows the changes in CSS code style.css. Before making any changes to the default CSS file, always make and keep a copy of the original. The CSS file can be opened and modified with any text editor. Text to be deleted appears in brackets. The new or amended is shown without brackets.

/ * Start the font and colors * /

body {

[Background: # d5d6d7 url ('images / Kubrickbgcolor.jpg ');]

background: # 636f89; / * Set the background color of the blue body * /

}

# Page {

[Background-color: white;]

[Border: 1px solid # 959596;]

border: none;

}

[# Header {

background: # 73a0c5 url ('images / kubrickheader.jpg') no-repeat bottom center;

}

# {Headerimg

margin: 7px 9px 0;

height: 192px;

width: 740px;

}]

# Footer {

[Background: # eee url ('images / Kubrickfooter.jpg ') no-repeat top;]

background: # fffef2 / * * Very light yellow /

}

h1, h1 a, h1 a: hover, h1 a: visited, # headerimg {[description.]

text-decoration: none;

[Color: white]

color: red / * Make the title red * /

padding-bottom: .5 em; / * Put some space between the title and subtitle * /

}

. Description {

text-decoration: none;

color: blue; / * Make the blue theme * /

text-align: center;

}

/ * End Typography and colors * /

/ * Begin Structure * /

# Page {

[Background-color: white;]

background-color: fffef2 / * * Very light yellow /

[Border: 1px solid # 959596;]

border: none;

}

# Header {

[Background-color: # 73a0c5;]

background-color: # Fffef2 / * * Very light yellow /

}

/ * End structure * /

After making and saving changes in the style.css file, the new blog page designed is done.

Style WORDPRESS - COSTUME DESIGN

While I like the simplicity of the design blog of Jacob, will not appeal to everyone. Many people love to "grandstanding". The price of a fancy dress WordPress blog is often a slow load, without increasing the ease of use. However, for those who want to "dress" the appearance of your blog here there are other ways this can be achieved.

First, note that the bottom of the page by default WordPress uses the header (kubrickheader.jpg) and Footer (Kubrickfooter.jpg) graphics. These charts are not filled with a solid color, as in the design of Jakob, but pending. It also seems a shade too small on the page.

Due to the complexity of the default page, additional graphics are necessary and therefore more sectors are needed. Also, when a more complex organism background is desired in the "floating" page, a "seed" for this image can also be necessary (this is what the image is kubrickbgcolor.jpg).

As before, I created a drawing of the blog page in Illustrator. The site, with rounded corners, floating in the WordPress default background has a gradient yellow and has a small shadow.

The first time you create a 760px X 600px rectangle on the table Illustrator work. Fill this rectangle with the background color (C: 8 M: 6 Y: 6 K: 0).

Then, using the Rectangle tool round, I made a 736px X 584px rectangle and filled it with yellow gradient. Basically, I made the page as large as possible in the background, leaving enough space for the shade.

Finally, I gave a small shadow rounded rectangle.

In order to ensure that the cuts are fused perfection in the body * background, I created a 60px X 60px square the same color (C: 8 M: 6 Y: 6 K: 0) and saved it as kubrickbgcolor.jpg. The small image used to "paint" the bottom of the body. This is an important step that the background used for the body and the background used for the page must perfectly match the design of luxury.

Creating slices

With the Rectangle tool, put an X 760px fill.

Me saved the court as kubrickheader.jpg.

I created the slices footer and the page in a similar way and renamed kubrickfooter.jpg and kubrickbgwide.jpg, Respectively. 760px X 63px Kubrickfooter.jpg and is 760px X 40px kubrickbgwide is.

There are two images of Kubrick others in the images directory: kubrickbg-ltr.jpg and kubrickbg rtl.jpg-(From left to right and from right to left). These images are the same as kubrickbgwide.jpg. Therefore, I made two copies of kubrickbgwide.jpg and changed its name accordingly.

CSS changes

The default CSS file is located in the wp-content_themes_default. The CSS text shows changes in the code of style.css. Brackets show the code to delete and the new code is shown without parentheses. Before the change, I copied and saved the original file. For the design luxury, the changes are minimal CSS.

/ * Start the font and colors * /

body {

[Background: # d5d6d7 url ('images / Kubrickbgcolor.jpg ');]

background: # e7e7e7 url ('images / kubrickbgcolor.jpg');

}

# Page {

[Background-color: white;]

[Border: 1px solid # 959596;]

}

# Header {

[Background: # 73a0c5 url ('images / kubrickheader.jpg') no-repeat bottom center;]

background: # e7e7e7 url ('images / kubrickheader.jpg') no-repeat bottom center;

}

# Footer {

[Background: # eee url ('images / kubrickfooter.jpg') no-repeat top;]

background: # e7e7e7 url ('images / kubrickfooter.jpg') no-repeat top;

}

h1, h1 a, h1 a: hover, h1 a: visited, # headerimg [description] {

[Color: white]

color: red; / * Make the blog title red * /

padding-bottom: .5 Em; / * Put some space between the title and subtitle * /

}

. Description {

text-decoration: none;

color: blue; / * Make the blog theme Blue * /

text-align: center;

}

/ * End of fonts and colors * /

/ * Begin Structure * /

# Page {

[Background-color: white;]

background-color: # e7e7e7;

[Border: 1px solid # 959596;]

border: none;}

# Header {

[Background-color: # 73a0c5;]

background-color: # e7e7e7;

}

/ * End structure * /

After the design work and CSS, WordPress shows that new clothes for the whole Internet.

WORDPRESS STYLE - NON-GRAPHIC DESIGN

Nothing every goes wrong when a browser loads a web page, right? Even if this were, of Indeed, the case is still wise to consider how a page is displayed in the case of the graphics can not be found.

In the case of design Jakob, if kubrickbgwide.jpg not downloaded for any reason, the page does not display acceptably. Due to the backlight used for the header and footer, which show normally in the dark blue background assigned to the body. However, the content of the page becomes difficult to read, almost lost in the dark blue background. A lighter background for the body could have been a much wiser option.

The creator of the Kubrick design solved this problem by assigning alternating background colors to be used if the graphics were not available. The tasks are performed in the style.css file:

body {background: # d5d6d7 url ('images / Kubrickbgcolor.jpg ');}

# Header {background: # 73a0c5 url ('images / kubrickheader.jpg') no-repeat bottom center;}

# Footer {background: # eee url ('images / kubrickfooter.jpg') no-repeat top;}

If the images are not available, the alternate value RGB color is used.

If graphics are not available, the default WordPress blog remains presentable and usable. For a redesign of the page initial, starting with the basic design of Kubrick, no graphics, can be a good place to start. This can be achieved by simplifying the declarations previous:

body {background: # d5d6d7;}

# Header {background: # 73a0c5;}

# Footer {background: # eee;}

immediately.

Yours for a better blog

Royce Tivel

About the Author

For an extended version of this article, complete with numerious images showing, step-by-step, the procedures described in the article, please visit
http://www.selectdigitals.com
.

[Eng] Dream Team Episode 40 -- feat. Super Junior Eunhyuk(1/5)