SomewhatRounded

It should actually scroll down the the freshly loaded content for them; if a visitor clicks on any of your nav links, it should take them down with the top of the category box now being aligned with the top. (Maybe I’m misunderstanding)

You could make some changes to the slider that would give you some more space and should make the category section visible without scrolling (and get rid of the unused/wasted space in the slider caption area).

.fp-slides, .fp-thumbnail, .fp-slides-items {
    height: 370px;
}

Or, if you still just wanted to move everything up, the id is ‘all’, so you could use:

#all {
    margin-top: -15px;
}

The class for the category/page title is “.page-title”, you could do with it as you wish, I found this seemed to look nice:

.page-title {
    background: none repeat scroll 0 0 #F8F7F6;
    color: #EE8B25;
    margin: 0;
    padding: 1em;
}

To change the area with the date, you could use:

.articles .post-caption p {
    background: #000;
    color: #fff !important;
    padding-left: .5em;
    padding-right: .5em;
}
.articles .post-date {
    color: #fff !important;
}
.articles .post-caption a {
    color: #fff !important;
}

That should do the trick!

Ahh, sorry! I misunderstood, I thought from looking at the site that you didn’t want the text title there. My bad!

The theme actually replaces the text version of the site title when a header image is uploaded.

To get a header image to the right like in their screenshot, you just have to upload your image into the Header Sidebar (in the Widget area) and remove the image you had uploaded as a header. You could then change the #sidebar-header css to get the height you want for your image.

It sure is!

Explanation: If you remove the float from #branding (it’s the container for the header image and the title/tagline, then change the width from 45% to 100% (this is what will let you spread it out) then float #site-title to the right and #site-description to the left

Answer:

#header {
    width: 100%;
}
#site-title {
    float: right;
}
#site-description {
    float: left;
}

That should do the trick!

This has been a tad frustrating! I still can’t get it to do it that way I’d like, but I have found a workaround for you:

For some reason, the custom css option that’s with the theme won’t recognize the import to make PT Sans available; so this leaves two different options (as far as I’ve been able to find)

1. You can use a custom css plugin to use the @import

or

2. You could use a child theme to make your changes that way

I prefer to use child themes, but for the sake of testing I just used a custom css plugin and the following:

@import url(http://fonts.googleapis.com/css?family=PT+Sans);

h1 {
    font-family: 'PT Sans', sans-serif !important;
}

Hope that helps!

Neat name!

To make a nav bar like the one in the example you would just have to create the image that you want to use (in that case it was the banner) and set it as the background using css (using either a child theme or a custom css plugin)

#access {
    background: url('../images/menubg.png') no-repeat;
}
article {
    border: 2px solid pink;
    box-shadow: 2px 2px 2px purple;
}

What you would need would be similar to the example above; if you didn’t want to use an image for your menu background, you could just use border and box-shadow for it as well. (The box-shadow syntax is “box-shadow: horizontal-shadow vertical-shadow blur spread color inset;”

Hope that helps, or at least gets you going in the right direction!

Hey bcohn21,

I installed the theme to check it out, are you getting rid of the ‘#’ before entering the URL? It was there by default and it just has to be removed for your links to work properly.

Let me know if that helps!

It is possible!

You can float it to the left rather than the right.

If you use a child theme, custom css plugin, you can add:

#branding #mainnav {
    float: left;
}