P2 theme how to split main area columns
-
Hello guys can I ask something extreme for my theme P2 at http://www.oikotimes.com? as you see there is a main column where all my posts going through, right? is there any chance to help me split this column in to two columns of news? (obviously each post size will be auto resized to the main width given)
no need for appearance to be balanced
it only needs the top to have the latest postsThe blog I need help with is: (visible only to logged in users)
-
I’m not sure if this is possible. You can create multiple columns in a post, but to divide your main front page in 2 columns, not really sure about this. I recommend you check some themes that support multiple sidebars like:
https://wordpress.com/themes/publication/
https://wordpress.com/themes/colinear/
In these themes you could set one of your sidebars to show your latest posts, posts shown by category, etc. -
Hi there, there is some advanced CSS3 that promises to make this quite easy to do (well, it takes a lot of lines of code), but the problem is that I’ve not been able to get it to work in Safari at all, and Internet Explorer/Edge only supports it in version 10 and later.
-
@thesacredpath – thanks so much for your insight! I was wondering if there was a way to do this. At least I know now, that it’s possible to some extent :)
-
@carladoria, you are welcome, and we must have posted at nearly the same time. I’m hoping to get it worked out so that it works in Safari. Sadly Internet Explorer/Edge support for CSS3 is a little slow. :(
-
@carladoria: there is a specific reason why we need this layout, basic reason is the auto update
@thesacredpath: do let me know if and how it would be possible
-
@fotiskonstantopoulos, I can give you code, but here is the catch. People on Safari and any version of IE earlier than 10 will end up seeing a single column of posts, half the width of the content area, which is going to defeat your purpose for those on these browsers. We also have to limit the change to windows/screens 800px and wider since below that the columns become so narrow that it is difficult to read, and if you end up with nested comment two or three deep, there may be only a single word or two per line.
You will notice with this code that the comments push the posts below way down the page meaning people have to scroll a long way to see the next post. I would suggest setting things so that the comments on the main page are hidden by default and people have to click on the link in order to expand the comments.
@media screen and (min-width: 800px) { .blog .o2-posts { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -moz-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-align: start; -moz-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .blog .o2-posts .hentry { width: 48%; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-box-flex: 0; -moz-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; } } -
thank u
in P2 hiding the comments on main page is not available option they told me and they didn’t know how to do it via css -
and yes indeed the code works only in preview, when saved safari, firefox and IE are messed up… do u know how it can be resolved? or we just have to wait for some updates?
-
Flex is pretty bleeding edge CSS3 and there are bugs in the implementations in all browsers. In my test site just now, for some reason, Firefox is ignoring the display: flex; line and if I view the custom CSS source code, it isn’t listed in Firefox at all.
You can try this cut-down version of the code, but it’s much more limited on browser version coverage.
@media screen and (min-width: 800px) { .blog .o2-posts { display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: flex-end; justify-content:flex-end; } .blog .o2-posts .hentry { -webkit-flex: 0 1 48%; flex: 0 1 48%; } } -
in P2 hiding the comments on main page is not available option they told me and they didn’t know how to do it via css
-
-
Take a look at my test site, which has the code I gave above. Check it in FF, Chrome and IE, if you can.
-
it is not working properly too
do u by any chance have a script to hide the comments on main page only?
-
This hides the comments on the “blog” page (your front page) and also hides the comments hide/show toggle.
.o2-post-comments, .o2-display-comments-toggle { display: none !important; } -
-
Oops, my bad. Replace the above with this.
.blog .o2-post-comments, .blog .o2-display-comments-toggle { display: none !important; }The above will limit this to only the blog (posts) page, categories, tags and archive pages.
-
Dear friend
I asked another staff member but I think u are more expert on this and if there is a solution YOU can find itI am using P2 theme at http://www.oikotimes.com WP blog I wanted to ask: is there a possibility when I am posting a new post, the main page to show the FEATURED IMAGE instead of retrieving the post content?
You may ask why don’t I change theme. Well, for my branding image it would be big fault to change so soon theme again and also this is the only theme available with LIVE BLOGGING feature (a vital feature for my “work”)
-
I am using P2 theme at http://www.oikotimes.com WP blog I wanted to ask: is there a possibility when I am posting a new post, the main page to show the FEATURED IMAGE instead of retrieving the post content?
p2 does not have the code necessary to show a featured image on the main page. You can add images to the post content either from the front page editor, or from the backend editor. In other themes, you could also include the More Tag below the image and then clicking on that would take the reader to the full single post page, but p2 doesn’t support that tag.
P2 is a very focused theme to meet very specific needs, so a lot of the more advanced normal blogging features simply aren’t supported.
- The topic ‘P2 theme how to split main area columns’ is closed to new replies.
WordPress.com Forums 