Box view for Posts only

Support
#1

Hi.

site: fantasy-books.live
wordpress: latest
x Pro: latest

Problem:

Is there a way to implement box view for only posts?

J.

#2

Hello J,

Thanks for asking. :slight_smile:

I don’t see any issues with the single post page layout. However, on Novel sub page I can definitely see issues with the layout.

Please try adding following CSS under Pro > Theme Options > CSS:

.single-novel .post_box {
    width: 80%;
    margin: 0 auto;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#3

Hi. I’m referring to the box vs fullwidth view of a website. I just wish to set it to box view of posts only. I was not referring to .post_box class.

#4

Hi @JfantasyBooks,

Does that mean it includes the header and footer in the box? Or just the content? You can simply do that by adding this CSS,

.x-root {
    max-width: 980px;
    margin: 0 auto;
}

Thanks!

#5

Hi!

I want it to show the background…

I tried using class .single, but it would not center like the one with .x-root or .x-site does.

#6

Hello There,

Please have the code updated and use this:

.single .x-root .site, 
.single .x-root .x-site {
    max-width: 980px;
    margin: 0 auto;
    box-shadow: 0 0 4px rgba(150,150,150,0.45);
}

We would loved to know if this has work for you. Thank you.

#7

Thanks

Only, now I would like to change the background color. Using the Theme Options does not work unless I set the hole site as Boxed View.

Do you have any suggestions/

#8

Hi there,

The entire site is full-width and each section and content has background color. So it’s only normal to only see the background color set through theme options when the layout is boxed.

Would you mind providing a mockup design where the background color should be seen? Maybe it’s the area of the header or content that has its own background color.

Thanks!

#9

Thanks for replying.

After using:

.single .x-root .site,
.single .x-root .x-site {
max-width: 980px;
margin: 0 auto;
box-shadow: 0 0 4px rgba(150,150,150,0.45);
}

I just want the color outside the box view different.

Think Boxed view just for posts. Where I can add the color or image.

That’s what I’m trying to go for. For me, color is more important.

#10

Hi there,

Sure, but I still don’t get it. Your single pages are still displaying in full-width on my end. Would you mind providing a screenshot? Or the exact URL, maybe it’s cache on my end.

Thanks!

#11

The image below is an example where the background color is different than the section with text. That is what I wish to achieve.

#12

Hi There,

Please try with this custom CSS:

.single .x-root .site, 
.single .x-root .x-site {
    max-width: 980px;
    margin: 0 auto;
    box-shadow: 0 0 4px rgba(150,150,150,0.45);
    background-color: #fff;
}
body.single  {
    background-color: #e6dede
}

Hope it helps :slight_smile:

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.