Penscratch 2 Theme: making column wider/add border

jfn2nd · Member · May 30, 2017 at 1:19 am
Copy link

Add topic to favorites
Hello,

My blog is http://johnfrancisnooney.com

It’s a single column blog. I’m wondering if there’s a way to make the column wider (without impacting the way it would display on a phone or tablet).

Also is there a way to add a thin line around the column ( a border) to add some definition to the column?

Thanks

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 31, 2017 at 3:09 am
Copy link
Hi, add the following to your custom CSS, which widens your site by 300px, thus widening the content area. It’s best not to get too wide as that would decrease readability.
```
@media screen and (min-width: 75em) {
	#page {
		max-width: 1353px;
	}
}
```
For a border, add this and see what you think. To me it looks a little out of place.
```
.site-main {
	border: 1px solid gray;
	padding: 20px;
}
```
As an alternative, you many want to try this, which puts a border just on the right side of the content.
```
@media screen and (min-width: 800px) {
  .site-main {
	  border-right: 1px solid gray;
	  padding-right: 30px;
  }
}
```
jfn2nd · Member · May 31, 2017 at 8:11 am
Copy link
Thank you for the help!

You are correct – the border all around looks odd. The right-sided border doesn’t look too bad. I was thinking about a border that went all around the outside of the content area, to define the white area from the background image … but, I like your suggestion. Can the right-hand line be added to each individual post as well?

If I can ask another question in this thread, how can I change the color of the lines around the menu at the top of the page? (The area under my site name, and above the header image.)
thesacredpath · Member · May 31, 2017 at 10:19 pm
Copy link
Hi, if you wanted to try a border around the white container area, add this and edit the thickness and color as desired.
```
.site {
	border: 3px solid #000;
}
```
I see you have the border added to the single post pages.

On the header area, the following will allow you to change the color of the borders.
```
.site-header, .main-navigation {
	border-color: #cc0000;
}
```
They are kind of thick when you set a stronger color, so you may also wish to change the thickness, so instead of the above, do this. (I used the red set on your site title.) You can of course change it to anything you wish.
```
.site-header {
	border-bottom: 1px solid #b34f4f;
}
.main-navigation {
	border-top: 1px solid #b34f4f
}
```
jfn2nd · Member · Jun 1, 2017 at 9:34 pm
Copy link
Hi!

Thanks for all the help. I really appreciate it! I went with a thin, 1px border around the white container area. Just enough to set it off from the background.

And, I liked your choice of red color, so I went with that.

Thanks again for your help.
thesacredpath · Member · Jun 2, 2017 at 12:04 am
Copy link
Awesome, and you are welcome!

No items found.