I want to create a compact listing of news-related content, with no space for image.
The blocks available in visual composer only have “templates” where space is set for image and lot’s of space.
How could I create something more compact and simple?
News title 1
Content..
Content..
News title 2
Content..
Content..
Etc.
Shortcodes?
You can do that with this plugin that I use:
List category posts plugin.
Hi,
You can try to alter one of the blocks if you do not want to use plugin. I ran a few tests on a block 11 that comes close to what you want:
.td_block_11 .td-module-thumb{
display:none!important;
}
.td_block_11 .td_module_10 .item-details {
margin-left: 0!important;
min-height: 0!important;
}
.td_block_11 .td_module_10{
padding-bottom:10px!important
}
result: http://screencast.com/t/bGjg5w88U
Thank you!
Thanks Bogdan, but how would I put that code into the page?
I’m using Visual Composer to arrange the blocks and don’t want to mess it up.
Thanks for the tip newsblaze. I tried with the plugin and it’s a good option!
K
Hi,
The css code can simply be added in the theme pane->custom css box like so:
http://screencast.com/t/aQ8AqKMzT and this will be the result:
http://screencast.com/t/8WxVgTnYfTb
Thank you!
Thank you Bodgdan, this is starting to look really good 🙂
Just one last adjustment (I hope).
As you can see from this image. When I run this in the right column it all looks wrong. The title ends up on the right side and there is a lot of emtpy space. How to get the title aligned right and how to loose that empty line between title and content?
Thanks again, great support!
Hi,
Yes, the code only works for the 2 column block. If you want to adjust it on the 1 column as well, please use this code:
.td_block_11 .td-module-thumb{
display:none!important;
}
.td_block_11 .td_module_10 .item-details {
margin-left: 0!important;
min-height: 0!important;
}
.td_block_11 .td_module_10{
padding-bottom:10px!important
}
.td_block_11 .td_module_10 .entry-title{
padding-left:0!important;
min-height: 20px!important;
}
(replace the old code)
Thanks.
Thanks again Bogdan. I’ve updated it, very nice 🙂 Only thing left is to get rid of this linebreak as you see here:
🙂
(Yeah I know I need to read up on CSS)
PS – I should also have the publish date of the post listed at the start of the content
So it would list:
Title goes here
[Post date] Content content content content content content content content content content content content content content content content content content content.
Thanks again.
Hi,
The post date can be activated from the theme panel: http://screencast.com/t/VkTckPfDR9h2
Now replace the code with this one:
.td_block_11 .td-module-thumb{
display:none!important;
}
.td_block_11 .td_module_10 .item-details {
margin-left: 0!important;
min-height: 0!important;
}
.td_block_11 .td_module_10{
padding-bottom:0px!important
}
.td_block_11 .td_module_10 .entry-title{
padding-left:0!important;
min-height: 20px!important;
}
.td_block_11 .td_module_10 .td-module-meta-info{
display:none!important;
}
.td_module_10 .td-excerpt{
margin-top:0!important;
}
.td_module_10 .entry-title{
margin-bottom:0!important
}
And one final modification. This will have to be done in the theme files. Open the module 10 file and move the get_date code in the excerpt container like so: http://screencast.com/t/Yq26zJE0Kikx
This is the result: http://screencast.com/t/iSbFifueys6
Thanks.
Thanks..
– After the last modification the linebreak was also removed below the post. I only wanted to remove it between the title and the post. If you look at the last jpg I posted you see what I mean. Can we modify the above script?
– Applying what you write about dates I would get dates on all posts for the site, correct? Could showing date only apply for one category? (News)
🙂
Hi,
You can remove the padding from the code I provided. Simply delete the part of the code to the padding that needs to remain.
Try removing either ones of these entries to see which one you want removed:
.td_module_10 .td-excerpt{
margin-top:0!important;
}
.td_module_10 .entry-title{
margin-bottom:0!important
}
If you want to apply the date only to the news category you can add an extra condition to the same file you modified earlier and replace the echo $this->get_date code with this one:
<?php if (!in_category('News')){
echo $this->get_date();
}?>
Thanks.
Great 🙂 This is very nice.
I just need to translate the name of the months to the correct language. I have set the site language in translations and it works for most things. But the names of the months appear in english in this box.
Thanks again.. this is great support.
Hi,
The date can be changed from the WP settings here: http://screencast.com/t/ID9QgwnxCnal
Thank you!
