Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #23870

    I’m trying to change the layout of the blog so that the main area to the left (which contains the post entry/entries) is wider and the sidebar to the right of it is much narrower. I also wanted to do away with the way the date is displayed to the left of the entry. I’ve tried to jury-rig it here (http://bit.ly/11qafAu), but this makeshift layout really falls apart when viewed on mobile devices.

    I noticed the content areas are assigned unit classes (e.g. “eight units”, “four units”) in the code, and I was hoping to build a new page template with the layout that I’m seeking to achieve (more like “ten units” + “two units”) but I can’t figure out how to do this based on the template_blog.php file, as it calls in templates and frameworks, which I’m not used to working with. I am a designer and front-end web developer who only knows HTML and CSS, and very limited knowledge of PHP, so I was hoping I could get some assistance in figuring out how to change the layout in a way that the page will still display seamlessly on mobile devices as well as on the browser.

    Thank you!

    #121432

    You can change the layout classes in functions.php – open up the file and search for

    $avia_config['layout']['fullsize'] 		= array('content' => 'twelve alpha', 'sidebar' => 'hidden', 	'meta' => 'one alpha', 'entry' => 'eleven');
    $avia_config['layout']['sidebar_left'] = array('content' => 'eight', 'sidebar' => 'four alpha' ,'meta' => 'one alpha', 'entry' => 'seven');
    $avia_config['layout']['sidebar_right'] = array('content' => 'eight alpha', 'sidebar' => 'four', 'meta' => 'one alpha', 'entry' => 'seven');

    i.e. change it to:

    $avia_config['layout']['fullsize'] 		= array('content' => 'twelve alpha', 'sidebar' => 'hidden', 	'meta' => 'one alpha', 'entry' => 'eleven');
    $avia_config['layout']['sidebar_left'] = array('content' => 'ten', 'sidebar' => 'two alpha' ,'meta' => 'one alpha', 'entry' => 'seven');
    $avia_config['layout']['sidebar_right'] = array('content' => 'ten alpha', 'sidebar' => 'two', 'meta' => 'one alpha', 'entry' => 'seven');

    if you want to ten units/two units layout.

    #121433

    Thank you so much! This has been an enormous help.

    #121434

    One more question! How would I adjust the entry content area (where the blog post text and pictures show up) to span further across the page, to fill more of the left space area of ten units, so that there’s not a huge margin of space next to it?

    #121435

    Hi,

    This will probably fix it. Add this on your custom.css or Quick CSS

    .seven.units.entry-content.standard-content {
    width: 850px !important;
    }

    Adjust the width.

    Regards,

    Ismael

    #121436

    Thanks so much! That worked.

    #121437

    Hey,

    Glad it worked. :)

    Cheers,

    Ismael

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Changing Blog Layout (Widening the Post Entry area)’ is closed to new replies.