change width of posts in Panino

Hi there,
I am struggling to change the width of the posts in Panino. I've used Firebug to trace the CSS code and had no problem adjusting the container sizes there but I haven't had much luck changing the CSS files. Neither in the Upfront Editor nor trying a few css files directly.
CSS is not my strong suit so I assume I might have some issues with addressing the elements correctly.

Any advice will make me a happy man :slight_smile:

Cheers,
Peter

  • Rupok

    Hi Peter

    Hope you had a wonderful day.

    I haven't had much luck changing the CSS files. Neither in the Upfront Editor nor trying a few css files directly

    You can override default CSS declarations from inside Upfront Editor. Click on "Theme Settings > Custom CSS Rule" inside Upfront editor, then paste your custom CSS Code, save the layout, and then save overall changes. It will work. Please check attached screenshots for reference.

    Please let us know if you have further confusion. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

  • Peter

    Hi Rupok,

    thanks for your quick response :slight_smile:

    I had tried the CSS Editor for the customs css settings already. It's the first time messing around with it and I am not all that good with css to begin with.

    The changes that you sent are for the start page post I think. They didn't have any effect on the post in the blog section, where I am trying to change the width in the 'hello world' post. If they are also meant to change the output in the blog then I might have a cache problem. But for now I tend to think I have simple problem with referencing the correct class.

    From what I gather from Firebug I need to make the changes to the following classes:
    <div class="upfront-output-wrapper upfront-postpart-wrapper c16 clr part-contents ">

    .c20 .c16, .c20 .ml4.c24, .c20 .ml4.c23, .c20 .ml4.c22, .c20 .ml4.c21, .c20 .ml4.c20, .c20 .ml4.c19, .c20 .ml4.c18, .c20 .ml4.c17 {
    width: 80%;
    }

    Where the latter code is setting the width of the outer wrapper according to Firebug.

    Changing the width to 100% solves part of the problem. But it also changes the layout with regard to the other objects. Since that is arranged for in the inner container:

    <div class="upfront-output-module upfront-postpart-module post-part c13 ml3 mt6 part-module-contents">

    Since this css code is with relativ margin-left and width:
    .c16 .ml3 {
    margin-left: 18.75%;
    }
    .c16 .c13, .c16 .ml3.c24, .c16 .ml3.c23, .c16 .ml3.c22, .c16 .ml3.c21, .c16 .ml3.c20, .c16 .ml3.c19, .c16 .ml3.c18, .c16 .ml3.c17, .c16 .ml3.c16, .c16 .ml3.c15, .c16 .ml3.c14 {
    width: 81.25%;
    }

    So I think I am on the right track but I am just having a problem making the changes to the right classes in the css editor.

    Hope you can help :slight_smile:

    Cheers,
    Peter

  • Peter

    Hi again,

    I was able to make changes to the post layout in desktop mode going through wp-content/themes/uf-panino/style.css and adding this code:

    /* change width of outer wrapper */
    .upfront-output-wrapper.upfront-postpart-wrapper.c16.clr.part-contents {
    width: 100% !important;
    }

    /* change width and position of inner wrapper */
    .upfront-output-module.upfront-postpart-module.post-part.c13.ml3.mt6.part-module-contents {
    width: 100%;
    margin-left: 0%;
    }

    The result is not quite perfect but it will work for now. But for the life of it - I still haven't been able to make it work through the custom css form in the upfront editor. Quite frustrating.

    Also the next step applying the changes to tablet size layout haven't been working. Again, I can identify the relevant divs by class/id but this time I can't make any changes even in Firebug. There always seems to be something overriding my code.

    Any ideas?

    Cheers,
    Peter

  • Rupok

    Hi Peter

    Hope you had a wonderful day.

    I do apologize for delay in reply. The code I've given you should work only on single blog posts. Here I've attached a screenshot of my "Hello World" single post page.

    The changes that you sent are for the start page post I think. They didn't have any effect on the post in the blog section

    This is not supposed to happen. Would you mind allowing Support Access so we can have a closer look at this and make this work for you? I'll share full details of codes I'll be using so you can always revert back if you want.

    To enable support access you can follow this guide here:
    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Have a nice day. Cheers!
    Rupok

  • Peter

    Hi again,

    I did have some other strange behaviour on my WP installation, so I did a complete reinstall.
    For whatever reason - now I can make CSS changes upfront editor. So your first code is working and it was a problem with the installation.
    I also managed to use my code from above not only in the styles.css but also as I expected in the upfront editor.
    Oh well. At least it is moving on :slight_smile:

    Cheers again,
    Peter

  • Peter

    Hi Rupok,

    I'm all confused at the moment. I had had to do several re-installs. Upfront was doing unexpected things. Maybe it has to do with starting up with the older version that I had downloaded about two weeks ago and the newer version. But there were a couple of things I had diffiuclties in reproducing and getting Panino to do what I wanted.

    Long story short:
    For some reasons with my current install your code doesn't seem to do anything anymore where I could have sworn it did with the first re-install. But at least my code is working and from that point of view everything is good. No idea why, but I guess, who cares.

    Thanks again for your help.

    Peter

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.