How to create borders around the posts in a module?

Posted in: Newspaper
Post count: 6

Hi everyone,

I want to create borders around every posts in a block (say block 4 and 16). Also, if possible I want to have a grey background, and the post title (and excerpts) would be in a white background.

Additionally, each posts should have the same width, meaning the borders would be the same size. Some posts may fill the whole block, some may not.

Please let me know if this is possible with the Newspaper 9.0.

Post count: 6

Let me provide an example of what I want. The Block 56 (in fast news demo) is very close to my expectation:
https://cloud.tagdiv.com/block-56-fast-news/

However, I cannot set the title fonts here. More importantly, after saving it as an element, I could not replicate the exact same thing, the output I got had the titles flashed with the left border unlike the demo.

Additionally, even though I can control how many posts I want to show, I could not control the filter as there was no option. Can I turn it on somehow?

This block has a lot of extra control (image size, width, padding for each elements etc). Is there a way to get these controls for other blocks as well?

Post count: 20688

Hi,

Flex blocks have options to set a background for each module, also a shadow around them
http://prntscr.com/ln58zl
You could experiment with flex block 1 which is similar to the ones you are mentioning. Colors can be set for the post title and post meta in flex blocks.

Block 56 you mention is made with flex block 1 and the settings I mentioned above. You can simply import it in your page and use it
http://prntscr.com/ln5bl7
The fonts for the block title can be customized – http://prntscr.com/ln5cv8
The style can be copied from one block to another (same type of block)
http://prntscr.com/ln5dg1
Saving the shortcode will allow you to re-use it as many times as you want. What exactly is the problem when you are saving it?

All blocks have a post limit option and filter settings. What is the problem you are facing here?

Only flex blocks have this many customization settings, the predefined blocks (1->25) do not. These predefined blocks will always look the same as they were designed. With the flex blocks you can recreate all the other predefined blocks.

For example all the blocks in the cloud library are flex blocks
https://affiliate.tagdiv.com/#/load/Blocks

Thanks

Post count: 6

Thank you very much for your reply. I think I did not import it in the correct method. For some reason when I am trying to import it while using tagdiv composer, it says “installing” and then nothing happens even after waiting a long period of time.
Screenshot: Issue with load template

Hence, I imported the section directly from the dashboard, “Cloud Templates”, and then saved it as an element. For some reason, the “Filter” option was not showing while using it.

In any case, Flex Block 1 is serving me well so far. I still have two questions. I want the “modules” in the block to be the same height. However, it depends on the length of the title (and excerpts). I know I can limit the length, but I don’t want to put dots in the title of the post. To explain my point please see the following screenshot. Here, I want all the category title, dates to be in the same position (as marked with the black line and 1a and 1b). Similarly, the heights of the top row and bottom row should be equal (figure marked 2a and 2b). This is low priority though, more important is to have all the category tags to be in the same position.

Screenshot: Issue with post height

Finally, I do not want to show images when reading from a phone. I can change many other things that are different in desktop and phone mode, for example in the following screenshots, the square shaped boxes are different for desktop and phone mode. However, the choice of image (marked with oval shaped box) is not changing.

Screenshot for desktop

Screenshot for phone:

Is there a way to show the post image in desktop and tablet mode, and skip it in the phone mode?

Thanks in advance!

Post count: 6

I have found the answer for the 2nd problem – hiding image for mobile. There is an option for hide image and I can turn it on individually for mobile, and turn it off for desktop.

However, the Title is flashed with the left margin – I am trying to create some space on the left.

Link to the current position

I want the title to keep some space on the left as shown here:
https://cloud.tagdiv.com/block-56-fast-news/

Post count: 20688

Hi,

The height will not be the same unless the titles have equal height. The length of the title will affect all the other post meta position.

You could set a min height for the title – http://prntscr.com/lnlzfb
That could be a solution, code used in example here

.td_flex_block_1 .td_module_wrap .entry-title {
min-height: 100px;
}

That is how the modules in this demo are made for example
https://demo.tagdiv.com/newspaper_architecture/

The option to hide images will work per device (option is called image position), you mention you found it.

For the title space use the padding option – https://www.screencast.com/t/e38p4FdUr9
The cloud 56 block is made like this – https://www.screencast.com/t/UPTkn2QZX5I

Viewing 6 posts - 1 through 6 (of 6 total)
The forum ‘Newspaper’ is closed to new topics and replies.