Create white box for the body text
-
I would like the body text of my website to be on a white box instead of it laying on the custom colored website background. Similar to the format of my blog page (http://electrofitting.com/educational-blog/) where the text does not lay on the background but on a white colored box.
The blog I need help with is: (visible only to logged in users)
-
Hi there, the following would put a white background behind the content and sidebar.
.row { background-color: #FFFFFF; padding-left: 30px; }If the above is not what you were looking for, let me know and I can work on putting it only behind the content. Due to the way the HTML/CSS is structured it may be a little tricky.
` -
Hello,
that is not exactly what I want. I want a white box around the body text. This box will not blend with the sidebar box, there will be noticeable gap between the body text box and the sidebar box. I do not want to hide completely my custom colored background I just want the box effect similar to how the blog page is setup.
-
Ok, add the following CSS to add a white background to only the content area. I’ve limited this change to pages only so that it doesn’t possibly interfere with posts.
.page .postarea { background: #FFF; margin-top: 50px; padding-left: 20px; padding-right: 20px; }The second thing you will need to do so that the video will be within the confines of the new white background would be to set the Content Width (box below CSS text area) to 599px. This change is due to the left and right padding so the text is not flush up against the left and right edges of the background.
-
Hello!
It worked but the blog page was affected :/ I do not see the right sidebar anymore.
The content width change fixed the border gap issue!Talking about gaps, is there a way the new white content area box can leave a gap between the footer and the content? This would be exactly to the gap it currently leaves between the header and the content. Also if you notice closely the widget content area box in the homepage has round corners and a shadow effect on the right hand and lower corner. Can these two effects be replicated on the new white content area box?
Thanks!
-
Hi, if you remove the code I gave you and visit your blog page, you will not see a sidebar on that page. You currently have your Educational Blog page set to the Social Page Template. Open that page in the page editor and from the pulldown in the Page Attributes module, select “Default Template” and save and the sidebar will show on your blog page.
-
Hello,
I changed it to Default Template and the sidebar still doesn’t show.
Also, do you think it is possible to do the footer gap, round and shadow effect to the content box?Thanks!
-
Hi, on the sidebar, I should have checked, but you have the widget visibility set on all of them to only show on the Smart Systems page. If you want them to show on the blog pages, you need to add and additional filter and say “Page is Posts page. Edit all your widgets and add the additional filter to each and save.
To replicate the rounded corners and shadow on the sidebar background, and add a gap at the between the content box and footer, add these three additional declarations to the rule I gave you above.
border-radius: 3px; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.06); margin-bottom: 30px; -
We are so close!! ;)
The rules worked perfectly. But I still can not fix the right sidebar issue on Educational Blog page. I verified the 3 widgets that I had there previously and they all had the following conditions “Show if Page is Educational Blog”
-
Ah, once you set a page as the “posts” page at Settings > Reading it sort of loses its classification as a normal page. I set the three widgets you had set to be on the Educational Blog Page to be on the Posts Page and they are now showing up for me. Take a look.
This is a little confusing and I’m going to chat with the people that take care of the widgets about possibly rewording things and I’ll also look at our documentation and get a clarification in there as well.
-
Great Stuff!! Everything is fixed now.
That would be a good idea, maybe there is a bug somewhere. ;)
-
Let me know of any changes (if any) that I need to be aware of in my template.
And again, thank you!!
-
Hello again,
I pasted the CSS code to my Spanish website, but now I have the same issue with the Educational blog page. Please work your magic again, this time, on my Spanish page:
-
Hi, it is done. All I did was to go to Appearance > Widgets and for the blog educativo page set the visibility on the widgets to “Posts Page” and saved.
-
-
-
Hello again,
I just found something. When you click on any of the blog posts found on http://electrofitting.com/educational-blog/ (Spanish Version = http://es.electrofitting.com/blog-educativo/)
I do not see the white content box around them.
Can we fix this?Thank you
-
In the above code for the white background I had mentioned that I had limited the change to pages only. To have the same change on posts as well, remove
.page ,
from the selector so it looks like this
.postarea -
-
- The topic ‘Create white box for the body text’ is closed to new replies.
WordPress.com Forums 