Wordpress/Asteroid theme

Advertisement


Question
QUESTION: Hi Chris,

I have a question about the Asteroid theme in wordpress. I am new to web development so this doesn't come easy to me. I have been trying to figure out how to change the gray bar area where the pages are listed, such as 'Home'. It is underneath the white box with the heading. The gray bar is also at the bottom of the content box as well. I finally figured out how to change the top gray bar with the pages by going to the editor and I went to 'The Main Menu" and found background and I changed the hex to a different color and it did change the top bar to the color I wanted. Now I don't know how to change the bottom one. Also, I would like to manipulate the black border as well to either small or nonexistent.

How can I do these things? Thanks

ANSWER: Hello Quentin,

Everything that you just described can be changed by editing the CSS of the theme. The CSS is what controls all the design options for a website. To access your CSS in WP-Admin, navigate to Appearance > Editor. It should open to the CSS by default (The title should say: Stylesheet (style.css) or something similar.)

To change the top navigation from CSS, you would edit this element:

#nav {
   background-color: #333333;
   border-bottom: 1px solid #000000;
   border-top: 1px solid #000000;
   float: left;
   width: 100%;
   z-index: 20;
}

Just change the background-color number from #333333 to the Hex# you want. I use color schemer to figure out the Hex numbers for my colors.

To change the bottom part of the page, you would need to edit the following element on your theme:

body.custom-background {
   background-attachment: scroll;
   background-image: url("http://wp-themes.com/wp-content/themes/asteroid/images/bg-grey.png");
   background-position: left top;
   background-repeat: repeat;
}

In this case, they're using an image on the background, so first you would change it to the following:

body.custom-background {
   background-attachment: scroll;
  background-image: none;
   background-color: #YOUR HEX HERE;

   background-position: left top;
   background-repeat: repeat;
}

In this example, I'm turning off the use of the image, then setting a color.

CSS is a great thing to learn if you want to better control the designs of your website. I would recommend that you learn more about CSS at http://www.w3schools.com/css/

Also, there's an excellent plugin for Firefox called Firebug. This plugin will allow you to highlight sections of your website to see what the current CSS for an element is. You can edit it from there and it will show you a preview of what the website will look like with the new design. I use it almost every day!

You can use these skills to customize backgrounds, borders, or anything you want with your design.



---------- FOLLOW-UP ----------

QUESTION: Thanks for the help.

I was able to find those in the editor. For the body.custom one, it was called Footer in the editor.

I don't think I would be good with learning CSS because it seems like math to me and I suck at math. I just have been good with editing what is already there than making something else up completely.

Also, can you explain how to change the borders as well, you forgot to mention that. I appreciate all of your help

Answer
On the element that you want to change, you will see a section that says border: 1px solid #COLOR;

Just change the 1px to 0px, and you will no longer have a border.

It looks like the Asteroid theme also has a 3px shadow setup around each of blog posts. If you're looking to remove both the shadow and border around the posts, you would change it to the following:

.blog-view {
   background: none repeat scroll 0 0 #DDDDDD;
   border: 0px solid #666666;
   box-shadow: 0 0 0px #333333;
   margin-bottom: 18px;
   margin-top: 16px;
   padding: 8px;
}

I changed the border and box-shadow to 0px.

I also wanted to point out that CSS isn't related to math at all. It's more trial and error than anything. If you use that firebug program to mess around with your theme, you'll probably learn how it works pretty quick.

Wordpress

All Answers


Ask Experts

Volunteer


Chris Gagner

Expertise

Almost anything about Wordpress. -Getting Started -Finding the right themes & plugins -Search Engine Optimization -Editing CSS, HTML,& PHP -Security & Backups -Finding a good web host Note: I currently only answer questions about single user Wordpress. I don't answer questions about Multi-User.

Experience

I've built several personal and business websites with Wordpress, as well as a few others for colleges. In my opinion, it's one of the most powerful ways to make any website (not just blogs)! I've downloaded and used over 400 plugins, and read about many others. I always download free themes for my websites, then heavily customize the CSS and PHP until it looks unique. Over the years I've become an expert in Wordpress because that is all I've ever used to create my websites.

Education/Credentials
Personal experience using Wordpress since 2007.

©2016 About.com. All rights reserved.