Community Forums › Forums › Archived Forums › General Discussion › Beautiful Pro Theme widget change
- This topic has 11 replies, 3 voices, and was last updated 9 years, 10 months ago by asdweb.
-
AuthorPosts
-
June 19, 2014 at 2:02 pm #110624asdwebMember
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
June 19, 2014 at 2:22 pm #110633efullerMemberThis 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
June 19, 2014 at 2:29 pm #110641asdwebMemberI 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
June 19, 2014 at 2:56 pm #110651efullerMemberQuick 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
June 19, 2014 at 5:02 pm #110669Lauren @ OnceCoupledMemberOK, 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
June 19, 2014 at 5:27 pm #110679efullerMemberJune 19, 2014 at 5:50 pm #110683asdwebMemberCan I just say, "So flipping awesome!!"
So glad it isn't a .php thing...
Thanks to both of you.
Amy Susan Design.com @AmySusanDesign
June 19, 2014 at 5:56 pm #110684asdwebMemberOk - 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
June 19, 2014 at 5:59 pm #110686Lauren @ OnceCoupledMemberRemember where we removed the padding from the
:last-child
? Addborder-bottom: 0;
to that as well. 🙂
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
June 19, 2014 at 6:21 pm #110692asdwebMemberJune 19, 2014 at 7:34 pm #110701Lauren @ OnceCoupledMemberAh, 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
June 20, 2014 at 9:21 am #110787asdwebMemberTah Dah!
I thought I was pretty good with css, but you're awesome.
Thanks again.
Amy Susan Design.com @AmySusanDesign
-
AuthorPosts
- The topic ‘Beautiful Pro Theme widget change’ is closed to new replies.