Centring images on a Blog Category Page over full width template

Hello there, I am working on a development site for a client - The Yoga Nook. I would like to develop the blog so that the template is full width with the image centred and the text underneath to the image width. I little like this http://www.centralyoga.com.au/cultivating-faith-in-the-practice/ but without the header at present.

1. I have looked at the blog listing page which is a category page http://testing.yoganook.com.au/category/blog/ and set this to full width, but would like to be able to centre the image and the text underneath.

2. The blog page itself i would like to also have a centred image and text underneath to the image with, but at present I can't seem to activate the full with template. I have changed it in the theme settings but this doesn't seem to work.

Are you able to give me any pointers on this ? Any help would be very much appreciated.

All the best,

Maria

  • Predrag Dubajic

    Hey Maria,

    Hope you're doing well today :slight_smile:

    1. I have looked at the blog listing page which is a category page http://testing.yoganook.com.au/category/blog/ and set this to full width, but would like to be able to centre the image and the text underneath.

    This CSS code should center the images on that page:

    .has-post-thumbnail .entry-content > a {
    	display: block;
    	text-align: center;
    }

    You should be able to apply that on Genesis > Extender Custom panel.

    2. The blog page itself i would like to also have a centred image and text underneath to the image with, but at present I can't seem to activate the full with template. I have changed it in the theme settings but this doesn't seem to work.

    This doesn't work because that page is set as Blog page in settings reading, thus not using the page template that you are seeing when editing page, it uses blog template which is defined in theme files.
    You could change Default Layout in Genesis > Theme Options to full width and that should affect your blog page.

    Hope this helps :slight_smile:

    Best regards,
    Predrag

  • Maria

    Thanks very much Predrag ...

    1. I have added the code in Extender but unfortunately it doesn't seem to center the image
    2. I have changed the blog template overall, this changes everything throughout the site for all page, but I guess I could adapt around that if its not possible to have different templates for the blog and the overall layout
    3. It would be great to be able to set the text to the image width, so a guess margins either side, is it possible to do this also in in the css that centers the image.

    Sorry so many questions, but very much appreciate your help here.

    Maria

  • Predrag Dubajic

    Hi Maria,

    1. I have added the code in Extender but unfortunately it doesn't seem to center the image

    Looks like code didn't format properly and in your CSS field ">" sign wasn't showing, I've changed it and the images centered now.

    2. I have changed the blog template overall, this changes everything throughout the site for all page, but I guess I could adapt around that if its not possible to have different templates for the blog and the overall layout

    It could work differently but you would need to create entire new template for blog page in your theme files, maybe your theme developers could help you with this?

    3. It would be great to be able to set the text to the image width, so a guess margins either side, is it possible to do this also in in the css that centers the image.

    I have added this CSS code below the one for centering image:

    .archive .entry-content > p {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    Can you check if that is what you wanted to do?

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.