Put the category inside the image

Hi,

All modules can display category tags, enable them in the theme panel
– https://forum.tagdiv.com/category-tag-on-modulesblocks/

The tag that will be shown will be the post primary category, more about that here
– https://forum.tagdiv.com/primary-category/

Thanks

The category tag color is predefined at the moment, it cannot be changed by a theme setting. It could be with some CSS if needed. Similar topic here
– https://forum.tagdiv.com/topic/category-label-appearance-on-block-1/

It’s location may be different depending on type of block. What type of block is that? I could try and give you a code to position it in the left corner of the image, if that is what you mean.

Please try and mention the block type you want this for, it may not work for all blocks or cause problems with others.

Then try a code like this for example, make tests with it or modify it if needed
– https://www.screencast.com/t/dBYKmdk9

.td_module_wrap .td-post-category {
position: absolute;
top: 0;
left: 0;
bottom: auto;
}

For what block does that happen? It is necessary that you provide this information. I cannot test all blocks and modules. If you discover that the code does not work for some blocks/modules mention which ones.
Since the category tags are not supposed to display like that, it may require additional codes.
You can inspect the element and try to create CSS codes, check here
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Hello alebasur,

Sorry but please notice that we cannot provide additional customizations, unfortunately! As my colleague Simion said you above, you should check the Inspector browser tool to create your own CSS code.

Thanks for your understanding!

For that you could use grid style 4 – https://demo.tagdiv.com/newspaper/big-grid-2/
That has a top positioned grid meta, maybe consider using that.
It would be easier than modify the grid CSS with code that might or might not work, also it will probably damage the responsive design.

You could remove the color if you don’t want it, use a code like this
– http://prntscr.com/k6w9dq

.td-grid-style-4 .entry-title {
background-color: transparent;
}

That code from above does not work with the big grid, also maybe with some other blocks maybe. Try this one for big grid 2
– http://prntscr.com/kf8dd4

.td_block_big_grid_2.td-grid-style-1.td-hover-1 .td-post-category {
position: absolute;
top: 0;
left: 0;
bottom: auto;
}
.td_block_big_grid_2 .td-meta-info-container {
height: 100%;
}
.td-big-grid-post.td-big-thumb .td-big-grid-meta .entry-title {
position: absolute;
bottom: 50px;
}
.td-grid-style-1 .td-big-thumb .td-module-meta-info {
position: absolute;
bottom: 0;
}
.td-big-grid-post.td-small-thumb .td-big-grid-meta .entry-title {
position: absolute;
bottom: 20px;
}

You can modify it if needed of if there are problems with it.

I remembered something with grid 2, my mistake. For grid 6 it would be like this
– http://prntscr.com/kfbghj

.td_block_big_grid_6.td-grid-style-1.td-hover-1 .td-post-category {
position: absolute;
top: 0;
left: 0;
bottom: auto;
}
.td_block_big_grid_6 .td-meta-info-container {
height: 100%;
}
.td-big-grid-post.td-big-thumb .td-big-grid-meta .entry-title {
position: absolute;
bottom: 50px;
}
.td-grid-style-1 .td-big-thumb .td-module-meta-info {
position: absolute;
bottom: 0;
}
.td-tiny-thumb .td-big-grid-meta .entry-title {
position: absolute;
bottom: 20px;
}

So it looks as you wanted it? From what I see it seems to work for you.