Beautiful Pro Theme widget change

[asdweb]

I am using the Beautiful Pro Theme.

Client wants a clear separation between the "Welcome Header" widget area and the blog posts that show up just below this.

Any suggestions on how to make this happen?

Thanks in advance.

---

Amy Susan Design.com @AmySusanDesign

[efuller]

This can be controlled by editing the following CSS style.

.welcome-message {
border-bottom: 1px dotted #ddd;
padding-bottom: 40px;
margin-bottom: 80px;
}

You might remove the border and margin-bottom. If you need to still remove more spacing after that, then remove the padding.

Hope this helps.

- Eric

---

I am a web developer

[asdweb]

I tried that.

The thing is I created a .content background: #fff; so the entire thing is all white - client wants to break the welcome message from the blog post.

Pretty sure it's a php thing.

Just realized I didn't post the link to the site to show what I meant...

http://ganeshdesignstudio.com/cc-draft/

---

Amy Susan Design.com @AmySusanDesign

[efuller]

Quick question.

Do you need the welcome message to remain the same width as the content and keep the sidebar to the right, or do you want the welcome message area to stretch to the right pushing the sidebar down?

I am asking because the latter is much easier to achieve.

---

I am a web developer

[Lauren @ OnceCoupled]

OK, this makes loads more sense with the site to look at, and your additional explanation!

You're correct, since the welcome message and blog posts are within .content, you can't make a section of that .content div transparent.

Instead, you could change the home page's CSS in a few wonky ways:

.home .content {
     background: transparent;
     padding: 0;
}

Then let's add those back to the child elements:

.home .content div,
.home .content article {
     background: #fff;
     padding: 10px 20px;
}

This will make all the blog posts separate. If you want there to only be one separation, and for all of the posts to appear to be on a single white background, more adjustments are needed:

.home .content article {
     margin-bottom: 0;
     padding-bottom: 80px;
     border-bottom: 0;
}

And to adjust for the extra spacing after the last post:

.home .content article:last-child {
     padding-bottom: 0;
}

Oh, and if you wanted that separating line still:

.home .content .entry-content {
     border-bottom: 1px dotted #ddd;
}

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[efuller]

Very nice Lauren!

It looks like those CSS changes should do the trick.

---

I am a web developer

[asdweb]

Can I just say, "So flipping awesome!!"

So glad it isn't a .php thing...

Thanks to both of you.

---

Amy Susan Design.com @AmySusanDesign

[asdweb]

Ok - One more thing - after making these changes, I notice the dotted line from bottom of the last blog post. How can I remove it?

---

Amy Susan Design.com @AmySusanDesign

[Lauren @ OnceCoupled]

Remember where we removed the padding from the :last-child? Add border-bottom: 0; to that as well. 🙂

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[asdweb]

It's not working for me. 🙁

---

Amy Susan Design.com @AmySusanDesign

[Lauren @ OnceCoupled]

Ah, yes, because we moved the borders. So, we need another selector now!

.home .content article:last-child .entry-content

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[asdweb]

Tah Dah!

I thought I was pretty good with css, but you're awesome.

Thanks again.

---

Amy Susan Design.com @AmySusanDesign

[Author]

Posts