X - Layout Blog Page Background

[iTurtle]

hi there,
i use X with renew latest version and try to style the blog page different from other pages.
i searched a lot in the forum and found a two year old post where you mentioned that this will be possible in one of the future updates of X. but not up to now. right?
ok. i managed to replace the general background picture for a while. but now my css stopped working. i got it from various forum posts:

body.blog,
body.single-post {
background: url(https://xxx.de/wp-content/uploads/blog.jpg) !important;
background-size: cover;
}

also i would love to have the categories shown between the header and the content. not in the sidebar or widgeds in footer or header. how would i do that?

last thing: how can i show more posts on the blog page. no setting for this?

i also would switch to pro if that would make things easier…

thanks a lot for your help! best wishes, kai

[tristup]

Hi Kai,

Thanks for reaching out.
Can you please let us know what exactly you mean by categories shown between the header and the content? Categories in sidebar shown in the Single Post page which comes from the Appearance > Widget > Main Sidebar.

To set the number of posts in the Archive or Blog page, please set the value in Blog pages show maximum at Setting > Reading.

Hope it helps.
Thanks

[iTurtle]

hi @tristup,
thanks for your reply.
my most urgend question is how to change the background picture only for the blog and post pages.
the css i posted here does not work. could you help please?
thanks a lot! kai

[iTurtle]

hi @tristup,

i would like to have a drop-down menu for categories on the main blog page itself. please see this screenshot.

how would i import a widget to the content area of the blog page for example. or any other idea???

thanks a lot! kai

[ruenel]

Hello @iTurtle,

You have added this custom CSS:

body.blog,
body.single-post {
   background: url(https://xxx.de/wp-content/uploads/blog.jpg) !important;
   background-size: cover;
}

The body.blog is for the blog index while the body.single-post is for single posts. Even then, your custom CSS will not because the background images were added globally and built-in the theme.

how to change the background picture only for the blog and post pages.
Please remove the background image instead in X > Theme Options > Layout and Design > Background Image so that your custom CSS will work. You may also need to insert a global background image for the other pages with the use of just body in your custom CSS.

i would like to have a drop-down menu for categories on the main blog page itself. please see this screenshot.
This will require custom development which is beyond the scope of our support already.

how would i import a widget to the content area of the blog page for example. or any other idea???
Please go to X > Theme Options > Blog and make sure that the Layout will use the “Global” so that the sidebar will display in your blog index assuming that you have selected "Content/Sidebar" or "Sidebar/Content" in X > Theme Options > Layout and Design > Content Layout.

Hope this helps.

[iTurtle]

dear @ruenel,
thanks a lot for your helpful reply!
so i figured out the background problem
the other problem with the categories is, that i do not want it in the sidebar. i already did this on the post-page-level.
it should be on the blog page itself. so:

1. is there an option to add a simple text field on top of the content of the blog index page? like a shop page has it for example
2. or is the pro theme a solution for any of this? is it more flexible regarding the blog page layout?
3. do you plan to improve the customization of the blog (and shop) page in future updates?
   thanks again! best wishes, kai

[tristup]

Hi Kai,

Please find the answer to your queries below.

1. Yes, you can add Blog Title from the Theme Options > Stack > Blog Options.

2. The Pro, has more options to customize the Blog layout and assigned it to the Blog and archive pages.

3. Currently we don’t have any plan for the X on this. The Pro already has the options to customize the Blog and Shop pages

Thanks

[iTurtle]

hi @tristup,

thanks for reply!

1. i did not mean that. i really mean a text/html area which i can use for a text and some shortcodes.

2+3) ist there a description where i can see the options? will it allow what i want with the text (see 1)

3. maybe you can add this to a wish list? would you have any tips for plugins which allow design customisations of the blog index page? (there are many for changing the design of post pages but i cant find any for the blog index page)

thanks a lot and best wishes, kai

[christian]

Hey Kai,

For 1 to 3. No. There’s no option.

For 4. We already have this in Pro. It’s called the Layout Builder. I’d strongly recommend you upgrade your site to Pro. You can learn about the Layout Builder in here https://www.youtube.com/watch?v=L1719j7J7LE&list=PLWPh_GoP7hYWytkJcdcowJ8Zs6EDEdK18

Hope that helps.

[iTurtle]

hi @christian,
thanks for your reply!
switching to pro is option because the project does not allow any more hours…
hope you can still add it to a wish list for x if you maintain one
last question:
i have the categories, a text widget and search now in the sidebar.
in mobile mode they appear at the bottom of the page.
would you have a tiny css snippet to move them to the top of the page? that would be great!!!
thanks again! kai

[friech]

Hi Kai,

Regretfully we have no plans on adding that Layout Builder to X, it is exclusive to PRO, there are also other exclusive features on PRO like Header builder, Footer builder, and the CSS Grid element.

@iTurtle

switching to pro is option because the project does not allow any more hours…

Did you watch the video sent by Christian above? It actually faster to build a Blog index layout and single layout on PRO than doing it with customizations.

@iTurtle

would you have a tiny css snippet to move them to the top of the page?

This too can be done easily with Layout builder. But for now, the CSS below will do

Add this to Theme Options > CSS

body.blog .x-container.offset,
body.single-post .x-container.offset {
	display: flex;
    flex-direction: column-reverse;
}

Please note that we can not provide customization support further from here. this would be the last customization that we can provide.

Cheers,

[iTurtle]

thanks a lot @friech!

yes i watched the video. but switching to pro might need some extra time to fix layout issues i assume and than the extra time setting up the blog page with the layout builder… for now i cannot do this.

your css actually does exactly what i wanted in the first place. just two problems:

the categories are nicely on top and over the posts excerpts. but only if the sidebar is active - since they reside in the sidebar. this on the other hand makes the page look too small since the content is not filling the full-width of the page. the sidebar is on top of the content but the place where the sidebar was (to the right) is just empty. that looks not good.

so either there is a fix for that (i tried “display: none” but that also hides the widgets on top of the page) or maybe you can restrict the css to be only active on small displays/mobile devices?

thanks again so much! best wishes, kai

[tristup]

Hi Kai,

Glad that we are able to help you. To apply the CSS to the mobile or smaller screen devices, you may need to add the following code in place of the previous code.

@media (max-width: 480px)
{
    body.blog .x-container.offset,
    body.single-post .x-container.offset 
    {
        display: flex;
        flex-direction: column-reverse;
    }
}

Please remember that it only effect while the screen size is below 480px and you may need to adjust the breakpoints as per your need. You can find the details on the custom media query breakpoints: https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a

Thanks

[iTurtle]

dear @tristup,

thanks a million. works fine!

also i want to mention that the layout builder is pretty dope i hope to get a project soon to try it out. this is really fantastic stuff!!!

best wishes, kai

[prakash_s]

You are welcome @iTurtle