Sapor

rebmcweb · Member · Jun 16, 2016 at 9:36 pm
Copy link

Add topic to favorites
As much as I like the Sapor theme, I’m vaguely unhappy with it. I’ve made adjustments that makes it a little more pleasing to my eye, but I have one issue left:

How do I make it cover the whole screen? I don’t like the white space to the left of the light-grey, left sidebar.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jun 17, 2016 at 1:56 am
Copy link
Hi there,

How do I make it cover the whole screen?

We can do that, but one thing to consider is that in general it is best to keep text-based content between 500 and 750px in width. Wider than that and it becomes more difficult for people to read and move their eyes from one line to the next. Right now as it is, the post content has a maximum width of 768px.

Here is the code to take it full width.
```
body.onesidebar .site {
    max-width: 100%;
    width: 100%;
}
```
rebmcweb · Member · Jun 17, 2016 at 2:41 am
Copy link
Hi, and thanks! :)
Yes, I totally agree about the width. The only thing I really wanted to achieve with this was to make the background colour of the left (and only) sidebar, to cover all the way … i.e. no white space to the left of the sidebar. I’m beginning to think it’s not doable at all in this case. The full-width didn’t help.
rebmcweb · Member · Jun 17, 2016 at 3:19 am
Copy link
I think I sussed it out, without changing the width …
thesacredpath · Member · Jun 17, 2016 at 6:15 am
Copy link
Super, let me know if you have addition questions or need more help with this.
rebmcweb · Member · Jun 17, 2016 at 10:37 am
Copy link
😽 thanks
rebmcweb · Member · Jun 17, 2016 at 11:51 am
Copy link
I’m almost there now … but I still have problems with the width of stuff.

Would like the sidebar to be somewhat wider, but when I type in something like 28,5% is vanishes into thin air.

I think I’ve set the main content to be 68%, but all this about margins and padding confuses me to no end.

A little wider sidebar would look more pleasing, and there’s also the issue with the length of lines in the posts …
thesacredpath · Member · Jun 17, 2016 at 5:17 pm
Copy link
Generally how I approach changing widths of the primary and secondary are to add the same amount to the one I want to widen as I take away from the one I am narrowing. That will typically keep the spacing and such good and keep one of the elements from sliding down below the other.

Your sidebar was originally 25% wide, so to change it to 32% (7% increase) I would take 7% away from the width of the primary. You can then, if you wish, adjust the one that you want wider 1% at a time and find the point where it disappears down below the other and then back off 1 or 2. You can also, as you have, decrease padding and margins.

With padding, that is typically inside of the element where as margin is on the outside of the element.
rebmcweb · Member · Jun 17, 2016 at 7:20 pm
Copy link
Yes! :) Now I’ve got them in place, and feel pretty happy about the looks of it.

Thank you ever so much for taking time out with this. It feels kind of rewarding now, after my little struggle 🙂.
thesacredpath · Member · Jun 17, 2016 at 8:08 pm
Copy link
Awesome, and you are welcome!
rebmcweb · Member · Jun 17, 2016 at 10:47 pm
Copy link
Just one more thing *blushing with sheepishness now*:

The light grey sidebar stops when there aren’t anymore widgets there.

Would it be possible to make the grey go on and on as one scrolls infinitely?
thesacredpath · Member · Jun 18, 2016 at 2:00 am
Copy link
Hi, what we have to do is to remove the background from the sidebar and then add it to the .site-content div and then set a background color of white for the content area. Add this and see what you think.
```
body.onesidebar .content-area {
    background-color: #fff;
    border-left: 1px solid #b4b4b4;
}
body.onesidebar .site-content {
    background-color: #ededed;
}
body.onesidebar .sidebar {
    border-right: none;
    background-color: rgba(0, 0, 0, 0);
}
```
rebmcweb · Member · Jun 18, 2016 at 5:41 pm
Copy link
Yes! It worked beautifully … exactly what I had in mind. I doubt I’d ever come up with that way 🙂.

Anyway, this concludes this whole thing … now I have my “Dream Theme”.

I want to, once again, thank you so much for your time and patience. CSS is a lot of fun!
thesacredpath · Member · Jun 18, 2016 at 6:52 pm
Copy link
Awesome, and you are welcome!

CSS is indeed fun. CSS sometimes requires you to get really creative. Sometimes on things like this, the HTML and CSS structure aren’t such that we can do this, but we lucked out. :)

No items found.