OK, here we back again to do some configuration change in Atahualpa 3.4.4 WordPress Theme Blog. The configuration is still about  lay out of this blogging update blog customizing but there is the difference this time. I give some reasoning why i do this change this time. Yeah — i share the reasoning why i do the lay out customizing and after that, I share how i make the change. I hope this blog readers have more understanding about it because already knew the reasoning behind it.

Here other posts of Atahualpa 3.4.4 Configuration Post Series in case you need them:

• Atahualpa 3.4.4 Configuration Part 1
• Atahualpa 3.4.4 Configuration Part 2
• Atahualpa 3.4.4 Configuration Part 3
• Atahualpa 3.4.4 Configuration Part 4

Limit The Flow of Layout Atahualpa

As you should already read in Atahualpa 3.4.4 configuration post series article that I make some customizing in This Blogging Update Blog. I choose Fluid (dynamic) type so this blog will dynamically follow width of readers web browsers (related to PC/Laptop screen resolution). I think this choice already perfect back then but i find some imperfect things about it. It make my blog layout seems have bad look when readers minimize their web browser . You can see the result in below picture:

You can see that the content part seem broken (in red box) and seems un-readebeable. And when i found it, i directly assumed that this situation also happen if readers had pc/laptop screen with low resolution. Therefore, i check it in my laptop by try low screen resolution and i found that the content part too tiny for 800×600 screen resolution. It is almost hard to read the content but yeah – it is still readable.

And i decide to make some limitation so layout do not follow each web browser (screen) width (both zoom in or zoom out). I choose to put 800 as below limit and 1100 as upper limit. I use 800 as below limit because i think it is the last width that the content still readable. I use 1100 as upper limit because my experience tell that upper that 1100 give strange looks (too wide) sense for the blog.

And here I share my way how to put the limitation:

Limit Width of Atahualpa Blog LayOut

• Login to “Site Admin” area

• Click “Appearance”

• Click “Atahualpa Theme Option”

• Click “Style & configure LAYOUT”

• Fill “Layout MIN width” with 800

• Fill “Layout Maz width” with 1100

• Click “Save Changes” button to apply the setting.

Ok, the layout already limited between 800 – 1100 px succesfully. I hope it will make this blog readers have more comfortoble reading experience from now on.

Conclusions

Limiting the layout blog’s width size is surely needed for fluid (dynamic) layout style these days. It is because each web browser can re-size easily and also there are many varian of PC/Laptop screen width and resolution. Both of them can make the blog layout looks so bad if we do not limit it and let it freely follow the width size. I already give an example how bad the look can be in this article. It is surely will give bad reading experience for blog readers.Therefore, i limit the layout this blog width between 800 – 1100 so readers can have better reading experience. I share how i do it in here so it can help who needed it.




That’s all update this time, wait for next update!

Other Great Articles:

1. Atahualpa 3.4.4 Configuration Part 4
2. Atahualpa 3.4.4 Configuration
3. Atahualpa 3.4.4 Configuration Part 2
4. Atahualpa 3.4.4 configuration part 3
5. Atahualpa WordPress Theme Configuration Part 6

Some blog readers said that this blog width too wide. Even I think that the width is good enough but the readers is king, right? So, I try to find how I can optimize the layout blog and make the layout more perfect. After do some trial and error in my blog lab, I find that I can re-size the width and even improve the looks of this blog easily trough Atahualpa Theme Option. Yeah –I find that Atahualpa 3.4.4 WordPress Theme really great in customize the layout. I always find the easy way to fulfill my layout customizing needs.

And do not forget to read others Atahualpa 3.4.4 configuration post series:

• Atahualpa 3.4.4 Configuration Part 1
• Atahualpa 3.4.4 Configuration Part 2
• Atahualpa 3.4.4 Configuration Part 3

Okay, here my way to have the current lay out:

Change Background Color

• Login to “Site Admin” area

• Click “Appearance”

• Click “Atahualpa Theme Option”

• Go to “Overall Style & Config.”

• Click “Body, Text & Links”

• Replace code in “Body Style” code form with code below:

padding-top: 25px; padding-bottom: 25px;
font-family: tahoma, arial, sans-serif;
font-size: 0.8em;
color: #000000;
background: #CCCCCC;

Above code will add padding (margin) in both top and bottom layout with 25 px. You always can change the value with your needs. Above code also change background color be gray (#CCCCCC).

• Click “Save Changes” button to apply the setting.

Change Layout Width and Container Style

• Still in “Overall Style & Config.”

• Click “Style & configure LAYOUT”

• Change value of “Layout WIDTH and type (FLUID or FIXED)” be 95% to create margin in both right and left layout.

• Replace code in “Layout Container Style” with code below:

border: solid 2px #cccccc;
background: #ffffff;
-moz-border-radius:10px;
-khtml-border-radius: 10px;
-webkit-border-radius:10px;
border-radius: 10px;

Above code will create round up affect in blog layout except bottom (footer) area. We need to do some configuration in footer area so round up take affect in all blog area layout. And above code also change background color of container (blog area) as white (#ffffff).

• Click “Save Changes” button to apply the setting.

• Go to “Footer”

• Click “Style & edit FOOTER”

• Replace code in “Footer Style” with below code:

text-align: center;
color: #777777;
font-size: 95%;

Above code make footer area follow container (blog area) layout style which is round up style.

• Click “Save Changes” button to apply the setting.

Conclusion

It is so easy to change width of blog in Atahualpa 3.4.4 WordPress Theme. It is only needed some easy fill, click, and save work and we already have some good difference in blog width. I share here how easy I do blog width resizing in this blogging update blog. And you always can customize it base on your needs as long as you understand the idea. I hope this article can enrich your Atahualpa 3.4.4 blog.




That’s all update this time, wait for next update!

Other Great Articles:

1. Atahualpa 3.4.4 Configuration
2. Atahualpa 3.4.4 configuration part 3
3. Atahualpa 3.4.4 Configuration Part 5
4. Atahualpa 3.4.4 Configuration Part 2
5. Atahualpa WordPress Theme Configuration Part 7

It is already quite a long time that I do not update post in Atahualpa 3.4.4 configuration post series. It is because I am kindly busy in my working and also that other things seems more interesting than do some Atahualpa 3.4.4 configuration change. Now, Atahualpa configuration change seems become  interesting. I find that I should optimize this blog appearance for better first impression of new coming readers. So, here I am to share Atahualpa 3.4.4 configuration change that produces the current appearance of this blog. I hope it can help Atahualpa 3.4.4 users to have better blog look.

You can check other Atahualpa 3.4.4 Configuration post series articles before learn how to have killer appearance when use Atahualpa 3.4.4 as your WordPress Theme. Yeah – you will find that in this part 3 article.

• Atahualpa 3.4.4 Configuration Part 1
• Atahualpa 3.4.4 Configuration Part 2

Ok, here we go.

Customize Appearance of Atahualpa 3.4.4.

Bloggers surely need to customize the default WordPress theme which use in our blog. It is to have better blog looks which is really important to give great first impression for blog new readers. And thanks God that I use Atahualpa 3.4.4 as this Online Knowledge blog theme. Atahualpa 3.4.4 allow me to do appearance customization easily trough “Atahualpa Theme Option” facility. Please find step by step how I build the current appearance of this blog in below.

Atahualpa Theme Option

• Login to “Site Admin” area
• Click “Appearance”
• Click “Atahualpa Theme Option”

Add Blue Bar in Bottom of Header Area

• Go to “Header Area”

• Click “Style & edit HEADER AREA”

• Replace code in “Configure Header Area” part with code below:

%logo %pages %image %cats %bar1

• Replace codes in “Horizontal Bar 1: Styling” part with codes below:

height : 10px;
background: #3333FF;

• Click “Save Changes” button to apply the setting. The blue bar already added in bottom of Header area.

Add Black Border on Post Area

• Go to “Center Column”

• Click “Style & edit CENTER COLOUMN”

• Replace the codes in “Center column style” part with codes below:

border: solid 2px #000000;
padding: 10px 15px;

Click “Save Changes” button to apply the settings. Post area already have black border on it.

Add Black Border and Color on SideBars Area

• Go to “Sidebars & Widgets”

• Click “Style & configure SIDEBARS”

• Replace codes in “RIGHT sidebar style” part with codes below:

border: solid 2px #000000;
padding: 7px 7px 7px 7px;
background: #CCFFCC;

• Replace codes in “RIGHT INNER sidebar style” part with codes below:

border-top: solid 2px #000000;
border-bottom: solid 2px #000000;
padding: 7px 7px 7px 7px;
background: #FFFFCC;

Click “Save Changes” button to apply the settings. The Sidebar area already have black border and color on it. Each sidebars have different color.

Add Style on Widgets Area

• Go to “Sidebars & Widgets”

• Click “Style WIDGETS”

• Replace codes in “Widget Container” part with code below:

border: solid 1px #000000;
margin: 0px 0px 15px 0px;
background: #FF9933;
-moz-border-radius: 5px;
-moz-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
-khtml-border-radius: 5px;
-khtml-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
-webkit-border-radius: 5px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
border-radius: 5px;
box-shadow: 2px 2px 6px rgba(0,0,0,0.6);

• Insert the codes below in “Widget Title Box”:

border-bottom: solid 1px #000000;
background : #CC0033;

• Replace codes in “Widget Title” part with codes below:

margin: 2px;
color: #FFFFFF;
font-size: 1.6em;
font-weight: bold;

• Settings all of three “Widget List Items” part like below:

Click “Save Changes” button to apply the settings. Great style already added on widgets area.

Changes The Size of Sidebars

• Go to “Sidebars & Widgets”

• Click “Style & configure SIDEBARS”

• Insert 280 as value in “RIGHT sidebar WIDTH” part

• Insert 180 as value in “RIGHT INNER sidebar WIDTH” part

• Click “Save Changes” button to apply settings. The sidebars already optimize for better size.

That’s all update this time, wait for next update!




P.S: How do you think new look of this blog? Share your thoughts in comment form.

Other Great Articles:

1. Atahualpa 3.4.4 Configuration
2. Atahualpa 3.4.4 Configuration Part 4
3. Atahualpa 3.4.4 Configuration Part 2
4. Atahualpa WordPress Theme Configuration Part 7
5. Atahualpa 3.4.4 Configuration Part 5

This post is part of Atahualpa 3.4.4 configuration series where I share Atahualpa 3.4.4 configuration knowledge base on my own experience in this Online Knowledge blog. If you are regular in this blog, you should already read my first post in Atahualpa 3.4.4 optimizing series. Of course, you can always check Atahualpa 3.4.4 minor configuration change article as first post of Atahualpa 3.4.4 configuration series if you do not read it yet. You can find how I do minor Atahualpa 3.4.4 optimizing in it. And in this article, I will share how I do Header Area Optimizing and Post Text optimizing. Let’s Rock the Atahualpa 3.4.4!

Atahualpa 3.4.4 Header Area Optimizing

Header area is surely very important part of blog appearance. Great header appearance surely makes our blog will looks great too. Base on my own experience, the first place that blog visitors look when visit a blog is header area. If blog visitors find that our blog header is great, they surely tend to know more of our blog content. In contrary, if blog visitors found our blog header is bad, they tend to leave immediately. That’s why I try to optimize this Online Knowledge blog to have better looks in header area.

Header Area

Style & edit Header Area

• Fill the form in “Configure Header Area” with “%logo %pages %image %cats %bar2 “. The Header appearance becomes:

• Set “Show search box” be No to hide search box. The Header appearance becomes:

Page Menu Bar

• Set “solid 1px #0D1623″ in “Border around all menu items” form and set “0D1623″ in “Background color” form. The Header appearance becomes:

• Set “C0F0C5″ in “Background color: Hover” form. The Header appearance becomes:

• Set “12px Arial, Verdana, sans-serif” in” Font Size & Face” form and set “FFFFFF” in “Link Color” form. The Header appearance becomes:

Category Menu Bar

• Set “12px Arial, Verdana, sans-serif” in “Border around all menu items” form and set “0D1623″ in “Background color” form. The Header appearance becomes:

• Set “Transform text in Category Menu Bar” be “capitalize”. The Header appearance becomes:

Atahualpa 3.4.4 Post Text Optimizing

The font size of post text surely impact reading experience of blog visitors. It is surely hard to read the blog post if the font is tiny. Base on my own experience, blog visitors directly leave the blog if post content hard to read. This situation also makes our writing undelivered for sure. That’s why I change the text size of this blog Atahualpa 3.4.4 theme. Default size of Atahualpa 3.4.4 post text is quite tiny which is surely uncomfortable to read. Therefore, I insert CSS code trough “Atahualpa Theme Options” to resize the post text.

Various Content Items

Add HTML/CSS Inserts

• Fill “CSS Inserts” form with below code to change font size be 16:

.post-bodycopy {
font-size: 16px;
{

Conclusion

Both or Header Area and Post Text are important to make our blog in better state. Header area appearance very important to make great looks for whole appearance of blog. The great appearance surely makes blog visitors tend to know more of blog content. Font size is really important for reading comfortable. Tiny font make hard to read our blog content. Great optimizing of Header Area and Post Text surely lead our blog become success. Atahualpa 3.4.4 WordPress theme is really helpful for easy optimizing of Header Area and Post Text trough “Atahualpa Theme Options”.
 
 
That’s all update this time, wait for next update!

PS: How do you think about this new headear layout and font post size?

Other Great Articles:

1. Atahualpa 3.4.4 configuration part 3
2. Atahualpa 3.4.4 Configuration
3. Atahualpa 3.4.4 Configuration Part 4
4. Atahualpa WordPress Theme Configuration Part 7
5. Atahualpa 3.4.4 Configuration Part 5

As I already mention in my previous article that I already change this Online Knowledge blog theme become Atahualpa 3.4.4. I change this blog theme because I want to have customizable theme which allows me to customize the layout without CSS or PHP coding. And you should also already aware that I only do minor configuration change from default layout of Atahualpa 3.4.4 theme. I mention that in my previous article.

And in this article, I want to share more detail what I do in that minor configuration change.

Overall Style & Config

• Change link default color be” CC0000″
• Change Link Default Decoration be “underline”
• Add favicon by upload my favicon.ico to “/wp-content/themes /atahualpa3/images/favicon/“

Header Area

Configure Header Area

• Make blank the “show logo image”, so the logo will not showing in header area
• Set “show blog title” be NO, so title will not showing in header area
• Change “blog title color” be 501AE2
• Set show blog tagline to no, so blog taglines will not showing in header are

Header Images

• Upload image headers to “/wp-content/themes/atahualpa/images/header/” and delete all other image file on that directory.
• Set “Opacity LEFT: Value” be 0
• Set “Opacity RIGHT: Value” be 0
• Set “Overlay Blog TITLE over Header Image(s)” be yes, so the Blog title will be showing in header image
• Set “Overlay Blog TAGLINE over Header Image(s)” be yes, so the Blog Tagline will be showing in header image
• Use style in “Blog Title” and “Blog Tagline” by use code below:

margin-top: 10px;
margin-left: 10px;
padding: 7px;
background: #ffffff;
border: solid 2px #000000;
filter: alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;

RSS settings

• Set “Show Feedburner Email icon” be yes to show Email Subscription icon in header area.
• Fill “Feedburner ID for this site” with letupdatedotcom which is FeedBurner ID of this online knowledge blog.

Sidebars & Widgets

• Unchecked all in “LEFT sidebar: Display on” checking box to disable left sidebar
• Checked all in “RIGHT INNER sidebar: Display on” cheking box to enable right inner sidebar

That’s all change that I do until now. Others configuration which I do not mention above mean that I use default Atahualpa 3.4.4 configuration settings on it.

Conclusion

It is really easy to customize blog layout when using Atahualpa 3.4.4 WordPress plugin. Atahualpa 3.4.4 configuration page really user friendly. It is really helpful for blogger who do not have deep knowledge in CSS and PHP. The minor change already enough to make good blog theme but it is needed more advance (major) change for better blogger theme.

Other Great Articles:

1. Atahualpa 3.4.4 configuration part 3
2. Atahualpa 3.4.4 Configuration Part 2
3. Atahualpa 3.4.4 Configuration Part 4
4. Welcome My New Theme: Atahualpa 3.4.4
5. Atahualpa WordPress Theme Configuration Part 7