Origin Theme Width

benconners · Member · Jan 8, 2014 at 5:07 pm
Copy link

Add topic to favorites
Hello,

I can’t figure out for the life of me if, after purchasing the custom CSS upgrade, I would would be able to widen my entire blog (i.e. make the gray bars on either side of the content area smaller, the blog and it’s contents larger). If I can do so I’d like to purchase the upgrade, if not, I’m not interested. Any info would be much appreciated.

Thank you!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 9, 2014 at 2:18 am
Copy link
Hi, I see a bunch of CSS in the custom CSS window. Did you perhaps copy/paste the original stylesheet? If so, the best way to go at WordPress.com is to put into the CSS window, only the specific rules and declarations you are adding or changing. Your CSS will override the original.

Origin has an original maximum width of 940px. The following widens the the overall theme by 200px, narrows the percentage width of the sidebar and increases the content area by the same amount. Delete everything you have now in the CSS edit window and paste in the following to see the result. Also, if you keep the below and buy the Custom Design upgrade, in the Content Width field on the CSS edit page, put 820 so full-sized images will come in at the maximum width for the widened theme.
```
.wrap {
    max-width: 1140px;
}
#sidebar-primary {
    width: 23.6596%;
}
#content {
    width: 72.0851%;
}
```
benconners · Member · Jan 9, 2014 at 4:17 pm
Copy link
Thanks a lot for taking the time to respond! That worked and makes the site a lot wider and more aesthetic. Do you know if the header images would also stretch all the way across if I were to make this change permanent?

Thanks again!
justpi · Member · Jan 9, 2014 at 4:29 pm
Copy link
No: header and featured images don’t stretch. If you make the blog wider, you’ll have to upload new versions of the images via Media > Add New, and insert each one using CSS editing.
justpi · Member · Jan 9, 2014 at 4:37 pm
Copy link
Or, to be more precise, they can’t stretch without losing quality. If you wish to preview this, add thesacredpath’s code plus this:
```
img#header-image {
width: 1140px;
}
```
benconners · Member · Jan 9, 2014 at 4:37 pm
Copy link
Gotcha, that’s easy enough to do. Thanks guys!
justpi · Member · Jan 9, 2014 at 4:45 pm
Copy link
You’re welcome.
My second reply is the easy way, if you don’t mind that the header images will be a bit blurry. If you do mind, we can show you the painstaking way.
benconners · Member · Jan 9, 2014 at 4:45 pm
Copy link
I would be OK with simply re-uploading all of my header shots. Will that work or would it be more complicated than that?
justpi · Member · Jan 9, 2014 at 4:49 pm
Copy link
More complicated: after you re-upload them, you’ll need to add a separate piece of CSS code for each page.
benconners · Member · Jan 9, 2014 at 4:49 pm
Copy link
Oh ok, well if you guys wouldn’t mind showing me, it’d be much appreciated!
justpi · Member · Jan 9, 2014 at 5:13 pm
Copy link
You’d need this:
```
img#header-image {
visibility: hidden;
}
```
Plus something like this for each and every page:
```
.wrap {
background: url("IMAGE URL HERE") no-repeat scroll 0 0 / 100% auto rgba(0, 0, 0, 0);
}
```
Perhaps thesacredpath can come up with a better solution, but whatever the solution you can’t avoid adding separate pieces of code for each and every page, if you want crisp images. Personally I wouldn’t do it: I would settle for slightly blurry, using the easy solution I showed above.
benconners · Member · Jan 10, 2014 at 7:26 pm
Copy link
Thanks again. It looks like the quality of the header image also depends on the resolution of the photo. I noticed that some definitely look clearer/better than others, so maybe I’ll just upload some higher res pics and call it good.

No items found.