- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- TutorialsFrom WPBakery to tagDiv Composer
- TutorialsOffset Feature
- TutorialsWhat is Ajax preloading?
- TutorialstagDiv Social Counter Tutorial
Hi,
Predefined big grids (1->12) can only be placed in a full row, they are always horizontally aligned. Also they cannot be limited in terms of post number.
However you could experiment with a flex grid, like flex grid 1. For example if you place 2 grids one below the other
– http://prntscr.com/m2ydtr
The bottom grid can be moved closer to the top one by setting a negative margin
– http://prntscr.com/m2yebf
You could also check out some of the block designs made by our team, based on flex blocks
– https://affiliate.tagdiv.com/#/load/Blocks
These can be imported through the cloud library plugin and the tagDiv composer
– https://forum.tagdiv.com/tagdiv-cloud-library-plugin/
Let us know if you have more questions.
Thanks
Hi,
1. That will be possible with a flex grid. For example flex grid 4 is similar to big grid 12. But it has many more settings including the alignment of the post meta in the modules
– http://prntscr.com/m2vrbi
In the layout tab of the flex grid there are more options if needed for further positioning of the meta.
Big grid 12 can display the meta centered by a couple of predefined styles
– https://demo.tagdiv.com/newspaper/big-grid-12/
– http://prntscr.com/m2vrvb – http://prntscr.com/m2vs3b
2. This is possible again with the flex grid mentioned above. Each module can have it’s own custom color overlay, or gradient
– http://prntscr.com/m2vsy3
For the predefined big grid 12 this would only be possible with some CSS for each module, to override the default colors. If needed I could give you the code. Let me know.
Thanks
Hi,
I thick you can use some flex blocks and set the image radius -> https://www.screencast.com/t/3MQfvfvs this is the easiest way ( using tagDiv Composer ), or you can make some custom css for the image you want to make round.
Create custom code with the browser’s Inspector or the Live CSS Box -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thank you.
The theme container width is 1068px by default, the rows used in the tagDiv composer can be stretched as shown above. Within these stretched rows it would be best to use flex blocks instead of the predefined blocks (1 to 25).
If you force the theme container to a different width with CSS, there will be problems overall. It is not recommended to do so as it may break the theme design. Please try and use the available composer settings to build the pages/cloud templates instead of using CSS.
I have on the mobile browser difrent blocks showing than in the Desktop version. Under the Big grid flex 4 are now smaler blocks showing.
Under the big Grid im useing block 4.
See http://www.eemskrant.nl on desktop and mobile
Hi,
So you want to have wider content in the page? That will be possible by stretching the rows in the page
– https://www.screencast.com/t/SXwvOo5Y5il
There are also full width grids (10 types)
– https://demo.tagdiv.com/newspaper/full-big-grid-1/
For better results you could consider using flex blocks and flex grids, here you can see some designs made by us based on flex blocks
– https://affiliate.tagdiv.com/#/load/Blocks
Thanks
Hi,
Only some of the flex grids have an option to disable the hover effect, for example
– https://www.screencast.com/t/JbHdVMzPOyy
Fro those grids I could give you a code that can be entered in the theme panel Custom CSS section, it should remove the hover effect for those two grid types
.td_block_big_grid_fl_1.td-grid-style-1.td-hover-1 .td-big-grid-post:hover .td-module-thumb .entry-thumb,
.td_block_big_grid_5.td-grid-style-5.td-hover-1 .td-big-grid-post:hover .td-module-thumb .entry-thumb {
transform: none;
}
Thanks
Hi,
Please note that only the full elements were designed for stretched row (like Full Big Grid elements) – https://demo.tagdiv.com/newspaper/full-big-grid-1/
Also you can create your own layout using Flex Blocks, but for this you will need to use tagdiv composer pagebuilder – https://forum.tagdiv.com/visual-composer-tagdiv-composer-transition/ – https://forum.tagdiv.com/tagdiv-composer-tutorial/
If you use an old theme version, I suggest to update to the latest version 9.2.2 – https://forum.tagdiv.com/how-to-update-the-theme-2/ in near future.
Don’t forget to make a full backup before.
Thanks!
Is there a way to disable rollover zoom in Big grid full 1 and Big Grid 5? It seems like these grids should have a “layout” menu similar to the bog grid flex elements.
+
Hello,
You can try to use a full width grid if you want full width images. Check the big grid full elements of the tagdiv composer or the new flex grids (available since newspaper 9.1) You can stretch any row from the row settings like so: https://www.screencast.com/t/i8SQ5eS4
Thank you!
Hi,
For the module size please try the excerpt length https://www.screencast.com/t/1vF6aPS9wU
For border radius you’ll need to set some custom css, if you want to do this ( img ) you can use this custom css
.td_module_flex_1 .td-module-container {
border-radius: 0 0 5px 5px;
}
Thank you.
I am using Flex block1 one of my category, the problem is module heigt are not fixed see the image https://www.screencast.com/t/kKkFyZgB
I want fixed height module
Hi,
I have tested the website on both Android and iOS, looks fine at the moment
Android – https://www.screencast.com/t/PD8AMGqHX
iOS – https://www.screencast.com/t/xdCuDQ5HAAX
Maybe on devices using older or very old Safari versions there could be some design issues regarding the flex blocks, they may not support certain CSS elements used by the flex blocks.
Thanks
Hi,
Please try this custom css
.td-md-is-safari .td_flex_block_1 .td_module_flex_1 .td-module-container,
.td-md-is-safari .td_flex_block_2 .td_module_flex_2 .td-module-container,
.td-md-is-safari .td_flex_block_3 .td_module_flex_3 .td-module-container,
.td-md-is-safari .td_flex_block_4 .td_module_flex_4 .td-module-container,
.td-md-is-safari .td_flex_block_5 .td_module_flex_4 .td-module-container {
display: -webkit-box;
}
.td-md-is-safari .td_module_flex_1 .td-module-meta-info,
.td-md-is-safari .td_module_flex_2 .td-module-meta-info,
.td-md-is-safari .td_module_flex_3 .td-module-meta-info,
.td-md-is-safari .td_module_flex_4 .td-module-meta-info,
.td-md-is-safari .td_module_flex_5 .td-module-meta-info {
width: 65%;
}
Hope this will help you better.
Thank you.
Hello. I’m trying to display a logo in a post grid. I’ve tried doing this with custom fields but can’t get it to work.
So, an alternative is to get the posts to display all of the content (images included) rather than just a text excerpt.
How can I do this?
I’m guessing it’s to change something in the code from ‘excerpt’ to ‘content’ but I’m not sure where or what to edit?
I’m using td_module_flex_1.php and this is the only module I need to do this with.
Any help gratefully received.
Thanks.
Are you able to test acf with this theme at all? I’m sure my code is OK. It’s just not registering the field.
Maybe try to get an image added in an acf field in a post to display in td_module_flex_1.php like I’m trying to do?
It would really help if you can confirm it works or not. Or add any field and let me know how you did it.
Alternatively, it is possible to add my own custom fields to the theme and include them in flex_1? Like you have ‘source’ or ‘via’ ?
Thanks again in advance.
Hi,
Please add this custom css in Newspaper>Theme panel>Custom code>Custom css
.td_flex_block_1 .td_module_flex_1 .td-module-container,
.td_flex_block_2 .td_module_flex_2 .td-module-container,
.td_flex_block_3 .td_module_flex_3 .td-module-container,
.td_flex_block_4 .td_module_flex_4 .td-module-container,
.td_flex_block_5 .td_module_flex_4 .td-module-container {
display: -webkit-box;
}
Let me know how is working.
Thank you.
Hi,
If you are using mobile theme, then you can not change the layout of the mobile.
You can find this settings on Big Grid Flex to,
https://www.screencast.com/t/YV9wGgrH
But this function is not allow you to set on which device you want to set those color, will be apply to all device.
Thank you.
Hi again. I’m having trouble getting this to work. Are you able to help at all?
I’ve created a custom filed in ACF for adding an image.
I’ve then opened the module I’m using – td_module_flex_1.php
Then added the field code like this:
<?php
class td_module_flex_1 extends td_module {
function __construct($post, $module_atts = array()) {
//run the parrent constructor
parent::__construct($post, $module_atts);
}
function render() {
ob_start();
$hide_image = $this->get_shortcode_att('hide_image');
$image_size = $this->get_shortcode_att('image_size');
$category_position = $this->get_shortcode_att('modules_category');
$btn_title = $this->get_shortcode_att('btn_title');
$title_length = $this->get_shortcode_att('mc1_tl');
$author_photo = $this->get_shortcode_att('author_photo');
$excerpt_length = $this->get_shortcode_att('mc1_el');
$excerpt_position = $this->get_shortcode_att('excerpt_middle');
if (empty($image_size)) {
$image_size = 'td_696x0';
}
if (empty($btn_title)) {
$btn_title = 'Read more';
}
$excerpt = '<div class="td-excerpt">';
$excerpt .= $this->get_excerpt($excerpt_length);
$excerpt .= '</div>';
?>
<div class="<?php echo $this->get_module_classes();?>">
<div class="td-module-container td-category-pos-<?php echo $category_position; ?>">
<?php if( $hide_image == '' ) { ?>
<div class="td-image-container">
<?php if ($category_position == 'image') { echo $this->get_category(); }?>
<?php echo $this->get_image($image_size, true);?>
</div>
<?php } ?>
<div class="td-module-meta-info">
<?php if ($category_position == 'above') { echo $this->get_category(); }?>
<?php echo $this->get_title($title_length);?>
<?php if ($excerpt_position == 'yes') { echo $excerpt; } ?>
<div class="td-editor-date">
<?php if ($category_position == '') { echo $this->get_category(); }?>
<span class="td-author-date">
<?php if( $author_photo != '' ) { echo $this->get_author_photo(); } ?>
<?php echo $this->get_author();?>
<?php echo $this->get_date();?>
<?php echo $this->get_comments();?>
</span>
</div>
<?php if ($excerpt_position == '') { echo $excerpt; } ?>
<div class="td-read-more">
href;?>"><?php echo __td($btn_title, TD_THEME_NAME);?>
</div>
cat<div class="uni-logo"><?php $uni_logo = get_field( 'uni_logo' ); ?>
<?php if ( $uni_logo ) { ?>
" alt="<?php echo $uni_logo['alt']; ?>" />
<?php } ?></div>dog
</div>
</div>
</div>
<?php return ob_get_clean();
}
}
I’ve added the text ‘cat / dog’ before and after my code so i could see where it is supposed to appear.
You can see the result here:
http://whystudyhere-com.sites.stackstaging.com/block-14-full-2/
Any help gratefully appreciated.
Hi,
Thank you very much for your appreciation. If you mean the color design of that menu, that would be possible. There are a considerable amount of color options for the menu, mega-menu etc in the theme panel
– http://prntscr.com/lxbjdi
I used these settings to achieve that result – https://prnt.sc/lxbjue
I should note that we are working on a header builder, this will provide more flexibility in creating and using header styles. Please let us know if you have more questions.
Thanks
Dear …..
We want to thank you because your NEWSPAPER is really very nice and flexible.
We need to ask you for advice.
According to you it is possible (working on the code and through the theme panel) to cover the headers / menus and submenus as the screens we have drawn.
There are 2 different submenus based on the buttons
Example: http://bit.ly/2rKkUaF
Our concern is having to face a situation and having problems with the possible updates you will make.
You can help us?
Thank you
I, it’s possible disable horizontal slide on my mobile flex 10?
I need vertical flex on mobile, thanks.
My website is: https://www.pcusb.it
Thank you a lot, Flex blocks solved the problem perfectly
Hi,
Stretched rows containing default blocks can produce these results. The predefined blocks use the same thumbnail size at all times.
For full width results use flex blocks, these have options to load a bigger thumbnail
– http://prntscr.com/lwifiy
Here are block designs created by us based on flex blocks (each can be previewed and edited)
– https://affiliate.tagdiv.com/#/load/Blocks
We will add designs for the flex grids as well in the future.
There are also full width grids (10 types) – https://demo.tagdiv.com/newspaper/full-big-grid-1/
These elements would be more suited for wider or full width results.
Thanks
