Quattro Header Customization

[LauraMiriam]

I am attempting to adjust the header image on my site. I've read through the forums, the beginner guide, and the setup information (I think). I've manipulated the functions.php and the style.css of the Quattro theme in an attempt to make my header image 900x300 and centered. Unfortunately, it still is only 120 in height and is not centered. Could you help? Thank you!
>
> URL
> http://findcatharsis.com

[SoZo]

You need to edit the height of .header-image #title-area, .header-image #title, .header-image #title a or set a height for the #header rule to set the height and to center it you either need to adjust the width of #header or add "
background-position: center !important;" to that rule

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[LauraMiriam]

Hmmm.  I thought I had done that, but I will start fresh and see if it works.  Thanks.

[LauraMiriam]

Yeah, I went back in and did this and still it is not working.  Any other ideas?

[SoZo]

.header-image #title-area, .header-image #title, .header-image #title a is still at 120px

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[LauraMiriam]

Here's the code for the header section in style.css:

/* Header
------------------------------------------------------------ */

#header {
border-bottom: double #ccc;
margin: 0 auto;
min-height: 325px;
overflow: hidden;
width: 100%;

}

#title-area {
float: left;
overflow: hidden;
padding: 0;
width: 580px;
}

#title {
font-family: 'Quattrocento Sans', sans-serif;
font-size: 60px;
font-weight: bold;
line-height: 1.25;
margin: 0;
text-shadow: 1px 2px 1px #fff;
}

#title a,
#title a:hover {
color: #555;
text-decoration: none;
}

#description {
color: #444;
font-size: 16px;
}

#header .widget-area {
float: right;
padding: 20px 0 0 0;
width: 0px;
}

/* Image Header - Partial Width
------------------------------------------------------------ */

.header-image #title-area,
.header-image #title,
.header-image #title a {
display: block;
float: left;
height: 325px;
overflow: hidden;
padding: 100;
text-indent: -9999px;
width: 900px;
}

.header-image #description {
display: block;
overflow: hidden;
}

/* Image Header - Full Width
------------------------------------------------------------ */

.header-full-width #title-area,
.header-full-width #title,
.header-full-width #title a {
text-align: center;
width: 100%;
}

[SoZo]

There is a different theme active currently

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[LauraMiriam]

Quattro is now active

[SoZo]

YOu have a caching plugin activated. Not much of a reason to activate that until after you are done setting everything up.

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[LauraMiriam]

Ok. Deactivated. Let's see.

[LauraMiriam]

Yay! Seems to be working.  Once I set things up, may I reactivate the plugin, or will that mess things up again?

[SoZo]

Certainly. Caching plugins are very useful in speeding up the delivery of your site.

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[LauraMiriam]

Awesome. Thank you so much for your help!

[SoZo]

You're welcome 🙂

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[Author]

Posts