How To Fully Code The Atahualpa Theme [Guide]

ALERT: WE HAVE MOVED TO http://codingmassacre.com/!!

I’ve recently been asked how to code the BytesForAll theme “Atahualpa”. Without further ado, here’s how I coded mine in 3.6.1. With Atahualpa you can easily change many variables around to make it look the way you want. It does help you know some basic CSS & HTML. Mine looks like this:

Table of Contents:

SEO

First off is the “Configure SEO” tab when viewing the Atahualpa theme options. If you have a SEO plugin already installed ignore this section and make sure the “Use Bytes For All SEO options?” box says no.

Body

Now for the main part of the theme – the body of it. It’s located in the “Overall Style & Config” box.

Go to “Body, Text & Links”. Here I configure the fonts and my website’s background.

There isn’t really much to do with here except add a background with CSS. The background-color: #008bc0 is my background color that appears after the image, and the rest is telling it to not repeat, where it’s placed, and what image to use. You can easily change the variables to top, bottom, right, repeat, etc. You can also change the HTML color you use for your background very easily.

Much of this section is very clearly labeled. For the Link Hover Color, it asks you to choose a color you want the text of a link to turn when the mouse is rolled over it. I made it so all links are the #004BB8 shade of blue, and when the mouse is put over them they turn a little bit darker, to #002A83.  The Link Decorations on this page can let you make all links be automatically underlined, be bolded, etc.

Now for the layout. Under Overall Style & Config click “Style & Configure LAYOUT”. This will help you set the width of your blog’s content. The main important thing here is the first box, titled “Layout WIDTH and type (FLUID or FIXED)”.

There are two ways you can do it – in pixels or a percentage. It’s totally up to you.

  • If you do it with pixels, you’d put however many pixels wide you want it to be, followed by px. You don’t want it to be a small number such as 100px – generally 800 or more is better. However, you don’t want a tremendously huge number such as 3000px as it’d greatly stretch the page for many website visitors. If you made your website only a mere 100 pixels wide, you’d have quite a small blog – it’d be this small:
  • The other option is a percentage, as I mentioned above. The default in Atahualpa is 99%. It means that across all web pages, it’ll stretch to fix 99% of the screen. 100% would take up the whole screen exactly, and 75% would take up 3/4 of the computer screen. Just remember to add the percentage sign!

There’s the Favicon section, but it’s not too important – it’s easier to just install a plugin for it. I recommend AmberPanther.

Header

Now you should see your theme starting to take shape. In the Header tap in Atahualpa, click “Style & edit Header Area”. In the Configure Header Area box, it’ll give you some options. Read them over carefully. I myself put %pages and then my header image in the box.

I left the “Show Logo Image” box empty and most of the other things at the default it came with. I did change the “Show Blog Title?” box to No, and deleted the Search Box code. Again, it’s completely up to you. If you’re trying to remove the grey dashes from the theme, simply remove any coding that says “border-bottom: dashed 1px #cccccc;” wherever you find them, such as in the Horizontal Bar boxes.

I left the Header Image alone because I embedded one directly from the Style & Header tab. It’s totally up to you where you did it.

I left the RSS settings alone. It’s not too important in my opinion – you can easily just embed an RSS icon in your sidebar if you choose to have one and link to it there.

Now for the Menu 1 & Menu 2 areas. Earlier I had done %pages – that’s for my navbar/menu, which looks like this on my website:

In the “Menu 1 (Page Menu)” section, you can configure the pages menu. You can change the text color, background of the navbar, etc.

If you put categories in your header, you’ll want to take a look at the Menu 2 options. Because I didn’t, I left everything the way it was.

Center Column

Now for the center column. This is where all your posts will be located. It’s the main content. The “Style & Edit Center Column” is mostly PHP, and for my theme it didn’t really need any tweaking. However, you can easily edit the stuff – just make sure you don’t mess up all the coding! One thing I did minorly change in this section is the “center column style” box.

You can also configure the Next & Previous navigation. That’s the stuff at the bottom of the page that lets you jump to another page.

This section is very easy to figure out and self explanatory in the directions, so I don’t think I need to go over it that much. Just be sure to pay attention to the different codes it gives you.

Sidebars

Sidebars are what appear on the left and/or right of your website’s content. They are convenient for things such as hit counters and advertisements. For my website, I only wanted a right sidebar. Lets say you didn’t want a Left Sidebar anywhere on your website, but you wanted a right sidebar. For the left Sidebar options, simply uncheck every box:

You can pick what pages you want a sidebar to appear on. I myself wanted it to appear on every single page, but for the right sidebar.

A little bit further down the page you can choose the width of your sidebar(s). The default is 200. I wanted it to be a little wider and went with 295 pixels.

You can also change the background color, padding, and border color of the sidebars.

You can change “solid” to “dashed” and the “3px” to any number you want – the higher it is, the thicker the lines around the sidebar will be. 2 or 3px is usually a good number, but it’s up to you. The background is for the background color of the sidebar – a very light grey is usually good. You can also style the left sidebar. It’s recommended you make both the right and the left ones about the same.

In turn, this is what my sidebar came out to look like.

You can add widgets (things in the sidebar) by going to Appearance > Widgets.

The “Style Widgets” section can let you change how they look. I personally didn’t customize them too much, however you can configure it to look something like this:

Posts & Pages

The first section under Posts & Pages is “Edit Post/Page Info Items”. In this section it’ll tell you all the codes you can use to make it, you just want to put it in the correct spot. For things such as “BYLINE: Homepage” I put “&nbsp By %author% on %date(‘F jS, Y’)%” so it would look like this:

The code I put makes it say By (post’s author) on (date). For the footer under posts & pages, I put “%date(‘F jS, Y’)% | %tags-linked(‘Tags: ‘, ‘, ‘, ‘ | ‘)% Category: %categories-linked(‘, ‘)% | %comments(‘Leave a comment’, ‘One comment’, ‘% comments’, ‘Comments are closed’)% %edit(‘ | ‘, ‘Edit this post’, ”)%”. So it’ll look like this:

For the next “Style posts & pages” section, I left much of it at default. However, I did change the “Post Container: Sticky” section. If you don’t like what it displays when  you sticky a post, simply change it. I deleted what was in the box and replaced it with “padding: 10px;”.

For the Headline Box: Text I changed it to the following:

“padding: 6px;margin-right: -3px;color: #1277ae;”

It’s saying to use 6px (pixels of padding) on the right, and the color of #1277ae. This section is for when you’re viewing an individual post that is not clickable.

The Headline Box: Links is for when you’re on the main page of your blog, and you can click the title for the individual post.

Mine is “text-decoration: none;color: #1277ae;”, and looks like this:

I put the same code as listed above for Headline Box: Links: Hover. It’s basically for the title of the post on the main page. When rolled over (mouse put on the link) you can have it change color.

The only other thing I changed in this section was the Body Box. I put 25px as padding. (padding: 25px;) In the body of my posts between the text on the left and right, it’s indented 25 pixels. I made it this way so the text doesn’t run up right against my borders.

I left the configure excerpts, post thumbnails, and “read more” tag sections alone. I recommend you look over them, however I found them unimportant in my theme.

Comments

Now for comments. I didn’t change it around a whole lot, but this is what mine look like – much of it is the default settings. Whenever I or another author on my website is logged in and replies to someone’s comment, it’ll be pink, or #FFECEC to be exact. The background for other users is plain old white. For the alternating comment I changed it from #eeeeee to #ffffff. I also removed the dotted 1px #cccccc border between comments.

That’s about it for comments!

Footer

Now your Atahualpa theme is nearly finished! The header is for the top of your website, and the footer is for the bottom. The way bottom, to be exact.

Here you can change the border around your footer and the content. The footer style box is the most important. I made mine this:

background-color: #ffffff;
border-top: solid 3px #2495ff;
border-left: solid 3px #2495ff;
border-right: solid 3px #2495ff;
border-bottom: solid 3px #2495ff;
padding: 10px;
text-align: center;
color: #777777;
font-size: 95%;

The background color of my footer is specified, as well as how thick and what color I want the border around it to be, how much padding, the alignment of the text, the color, and the font size. Feel free to experiment with it. I kept a constant same color and width border on my website.

The other important box in this section is Footer: Content. Above you can see the text & few small widgets. In this box I put my whos.amung.us widget, top.org widgets, and Copyright © %current-year% %home% – All Rights Reserved. That code changed  to my website’s  name, year, and links it to the homepage. It’ll give you other codes you can use there.

Various Content Items

The Various Content Items is just small odds and ends you can configure, such as tables. You know, these things:

Atahualpa Rocks
Coding Massacre

I left the tables and forms sections alone, since I don’t use them on my website. If you plan to use them often, I recommend you play around with it. While I do use the <blockquote></blockquote> tag periodically on my website, I thought it was fine. I didn’t configure it in any way. See how it looks as the default below:

I did edit the Style Images section a bit. Atahualpa puts borders and all this other stuff I thought was icky with images by default. I just wanted images to be images – nothing extra.

I removed everything in the “Images in Posts” and “Images in Posts: Caption Style” boxes. I left the Caption Text: Style box alone.

The Add HTML/CSS inserts section is highly useful. Here I placed my Google Webmasters code in the HTML Inserts: Header box, Google Analytics in the HTML Inserts: Body Bottom box, and a border under each of my posts in the CSS Inserts box. In the CSS Inserts box I also added a snippet of code to remove the arrows from my pages.

If you would like to remove it, add in this code to the CSS Inserts:

div#menu1 ul.rMenu-hor li.rMenu-expand a {
background: none;
}

div#menu1 ul.rMenu-hor li.rMenu-expand a, .rMenu-expand a {
background: none !important;
}

If you would like a border between each post, add this code – change the HTML colors if you don’t want it to be blue though.

div.post-footer {
clear:both;
display: block;
background: #ffffff;
border-top: solid 2px #2495ff;
border-bottom: solid 2px #2495ff;
}

It’ll then look like this:

Archives

I totally left the Archives section alone. I found it fine how it was.

CSS & Javascript

The only thing I changed in the CSS & Javascript section is the “CSS: External file or inline?” box. I changed it from Inline to External.

That’s about it! If you have any questions either comment on here or visit the BytesForAll Forum. Google will help in most cases, too. 😉

Advertisements

33 thoughts on “How To Fully Code The Atahualpa Theme [Guide]

  1. Hey! Great tutorial/guide! I was wondering could you tell me how to configure the “Style Widgets” to look like yours? Please? Its AMAZING!

    • The only thing I changed was the Widget Title, which I changed to the following:

      font-size: 1.3em;
      color: #3068af;

      Other than that, I don’t really know what to tell you as the rest is the defaults that came with the theme when I first installed it.

  2. I don’t think you understood my question. I meant this thing that you said with he picture underneath it. How did you do that?

    “The “Style Widgets” section can let you change how they look. I personally didn’t customize them too much, however you can configure it to look something like this:”

    You then put in a picture with PST Clock. How did you do that? Thanks!

    • OH. I’m not quite positive…I think you would embed an image in the “Widget Container” or “Widget Title Box” section. Just play around with it or try Googling it or ask a blogger who does have that feature. 🙂

    • Under “Overall Style & Config” go to “Body, text, links” and look for the “Link Hover Decoration” option. Change the box to underline if it’s not that already.

  3. How did you put the round buttons on the navbar on your site? I mean I want to make my own and I already made it, but I don’t know what kind of code or where do I put it.

    • I didn’t understand. I have %image %pages so do i need to put %image on the Configure Header Area? And what about when you hover on it?

  4. Can you say how to change the color of the WRAPPER? Not the color of the body part of this theme. “background-color: ” is not it – that’s the center column. But you have changed it in your theme (it’s grey) – I just can’t figure out how.

    Thanks!

  5. This is so partial I would like to know how to move modules such as the Menu above or below certain sections, like Menu 1 of the Pages list below sections of other areas. Or heck even to the very bottom. Where is positioning for this accessed at?

    DWebDev-

  6. Pingback: Sivuston teeman vaihdos: Atahualpa käyttöön « Leiman Family

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s