• Resolved tbongers

    (@tbongers)


    Hi!

    I’m customizing my WordPress website based on the Sela theme and I was wondering if there was a possibility to change the order/position of the primary, secondary and tertiary content ‘blocks’. Even reversing the order is good enough!

    Thanks in advance!

Viewing 3 replies - 1 through 3 (of 3 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hi, you can use flexbox to reorder the primary, secondary, front page testimonials and tertiary sections The following is the basic code needed for that, and you can edit the order by changing the numbers in the order declarations for each.

    One thing I will note is that although this works in most versions of browsers that would likely be in use, in the case of Internet Explorer, it only works in IE10 and later, and sometimes IE10 is a bit flakey in my experience.

    Also, note that you mentioned primary, which is the section with the home page content and the featured image that is typically at the top of the page, so with the following, that is now at the very bottom of the page. If you wish to keep that section at the top, you will have to set the order of that to 1, and then reorder the others. It is best not to have two sections with the same number as it confuses the browsers and makes them digitally scratch their heads. ??

    .home #content {
    	display: flex;
    	flex-direction: column;
    	box-orient: vertical;
    	display: -webkit-box;
    	-webkit-flex-direction: column;
    	-webkit-box-orient: vertical;
    	display: -webkit-flex;
    	display: -moz-box;
    	-moz-flex-direction: column;
    	-moz-box-orient: vertical;
    	display: -ms-flexbox;
    	-ms-flex-direction: column;	
    	-ms-box-orient: vertical;
    }
    .home #tertiary {
    	-webkit-box-ordinal-group: 1;
    	-moz-box-ordinal-group: 1;
    	-ms-flex-order: 1;
    	-webkit-order: 1;
    	order: 1;
    }
    .home #front-page-testimonials {
    	-webkit-box-ordinal-group: 2;
    	-moz-box-ordinal-group: 2;
    	-ms-flex-order: 2;
    	-webkit-order: 2;
    	order: 2;
    }
    .home #secondary {
    	-webkit-box-ordinal-group: 3;
    	-moz-box-ordinal-group: 3;
    	-ms-flex-order: 3;
    	-webkit-order: 3;
    	order: 3;
    }
    .home #primary {
    	-webkit-box-ordinal-group: 4;
    	-moz-box-ordinal-group: 4;
    	-ms-flex-order: 4;
    	-webkit-order: 4;
    	order: 4;
    }
    Thread Starter tbongers

    (@tbongers)

    @sacredpath Thanks! Works like a charm and this solution is exactly what I was looking for!

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Awesome, and you are welcome!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Let primary, secondary and tertiary Content change position’ is closed to new replies.