Really loving Newspaper so far. Everything has worked as well or better than I hoped.
I have a question about aligning four blocks in a grid on a front page. I’m trying to display posts from four separate categories in a 2×2 grid next to a sidebar. It works pretty well so far, but slight variations in title length and excerpts can cause certain blocks to be “longer” than others, causing misalignment of the row below.
Here’s a screen shot to illustrate:

I would prefer to keep the 2×2 grid and sidebar in a single Visual Composer row if possible, since the sidebar’s height matches well with the grid.
I haven’t looked too closely at the CSS yet, but was hoping there might be an elegant solution. Any advice? Thanks in advance for the support.
This CSS code you gave it to me for this bar and configured this way.
If I remove remains the same, to me what I like is that when the bar is stuck up look like when it is not stuck-up.
the web: htps://ocionews.com
-
This reply was modified 10 years by
ukume.
Hello roger,
Unfortunately, our theme does not have such an option for your desire, sorry! Please notice that to achieve as you want it is necessary some additional customizations that involve custom work. As a hint, you can use a background image from Theme panel, like this -> http://screencast.com/t/QDGy2ynj and then you have to transparent your header section using a bit of CSS code.
The code is ->
.td-header-wrap .td-header-top-menu-full {
background-color: transparent;
}
.td-header-menu-wrap-full {
background-color: transparent;
}
.td-banner-wrap-full{
background-color: transparent;
}
The result you should see here -> http://screencast.com/t/HhMq6NHnEx
Also, you can use the Revolution Slider plugin but also, as you can see this is a complex plugin and require more knowledge about it to accomplish as you wish. Also, you can check the documentation here -> https://www.themepunch.com/revslider-doc/slider-revolution-documentation/
If you want to display more levels in our theme and you are not aware of the steps in this regard, please consider hiring a freelancer/developer to help you because we cannot provide customization services at the moment, sorry!
Thank you for the message!
Hi
Technically speaking the sidebar ad is displayed fine on your site on tablet as the theme don’t ad any margins for it. I’ve test this on my side and got the same result on iPas mini: http://screencast.com/t/zzV0ceJaimB5
However you can add a margin for the ad using this css in theme panel > custom code > custom css: http://screencast.com/t/MRUyX9g4y7S
@media (max-width: 1023px) and (min-width: 768px) {
.home .td-a-rec-id-sidebar, .td-a-rec-id-custom_ad_2 {
margin-left: 10px;
margin-right: 10px;
}
}
I’ve targeted only the ads from your homepage but if you want this css to work on other pages and on other ad-spots then you’ll need to adjust the css selectors.
To fix this link try this: http://screencast.com/t/s8se9C86
body{
word-break: break-word
}
Thanks!
Hello,
1) The page templates were changed in newspaper 6. If you want to hide titles on some pages, you need to change the page template to default: http://screencast.com/t/sAM78esd
2) You can use css to do it as there are no settings for it.
.white-popup-block{
max-width: 540px!important;
}
Thank you!
Hello,
There seems to be some css there that gets rewritten. The trending now block element does not get the negative margin anymore so it creates a bit of space above the content. Please try to disable all plugins except visual composer, clear cache and reset cdn files if you use it.
Let us know if the problem is still there afterwards.
Thank you!
Hello,
You can ignore the visual composer update as we can only update the plugin along with our theme as we are the ones providing it, not the plugin author. You can ignore the update message. Please use the version of visual composer that comes with the theme: https://forum.tagdiv.com/how-to-update-visual-composer-plugin/
As for the menu, please remove the css as I see you changed the menu. Every custom css applies to that particular layout. If you change anything like add a menu item or a top-menu, the css will probably not work properly anymore. Please remove the css and provide a link to your website and details about your problem. Also provide a screenshot of the css you have in the custom css box as I suspect it’s the logo that has been changed and it’s affecting the sticky menu.
Thank you!
Hello,
The best way to edit php is by accessing you files via ftp and using a text editor such as notepad++.
1) If you want to edit parts of the header then you need to access one of the header files: http://screencast.com/t/2zAba2Tj
You will need to kn ow a bit of css as well as it is used for the margins you need to alter in order to get your new dimansions to display properly.
2) If you want to add a shortcode for an ad spot at the bottom of the menu, then you need to menu file and use a do_shortcode php function like so:
If you want to place an ad at the bottom of the menu, it’s best to add it inside what is below the menu, not the menu file itself.
In order to do this, you must edit the specific post template or category template or page template you want the add to appear on.
Thank you!
Hi
1. Please provide your site url as I need to inspect this closer in order to provide a solution.
2. Try to deactivate all plugins except Visual Composer, clear all caches and test again. Also if you added any custom css in theme panel > custom code make sure it won’t affect the search icon.
Thanks!
Hi
Try this css in theme panel > custom code > custom css: http://screencast.com/t/VMKGV3mqw3G
.dropcap{
color: red!important;
}
Let me know how it goes and if you still need further assistance please provide a link where I can have a closer look on this and I will get back to you in shortest time.
Thanks!
Hello,
I have tested your site on ipad but I have found no blurry images. If our demo behaves the same way then it means there is a css that enlarges the images although I cannot see it on my ipad. The images do not have 1200px size not even on desktop. I’m not sure where you are getting the 1200px size. You can try to deactivate the post thumbnail in order to force the theme to use the full image instead of the 696 pixels thumbnail but this will impact page speed a bit.
Thank you!
Hello sapito,
If you want to change the font size for your category description you have to target the right class in this regard and increase the value of this attribute. Please try the code below and place it in Theme panel->Custom CSS area.
The code is ->
.td-category-description p {
font-size:20px;
}
The result you should see here -> http://screencast.com/t/QFXpu9eUPB
Thank you for the message!
Hello sapito,
If you want to reduce the spaces between your post title, you have to use a bit of CSS code for adjusting. Please try the code below and place it in Theme panel->Cusomt CSS area.
The code is ->
.td-post-title .entry-title{
line-height:28px!important
}
The result you should see here -> http://screencast.com/t/IbqOYf0jfE
Thank you for the message!
Hi,
It can be removed with css like so:
.td-author-comments-count{
display:none!important
}
Simply add the code in the theme panel ->custom css box.
Thank you!
Hello,
There is no setting for this, so you will have to modify the theme files if you want to get the category tag up there. You need to edit this file like so: http://screencast.com/t/PBMaC2yR1H
And then you can use css to position it:
.td_block_slide .slide-meta-cat{
position:absolute;
top:1px
}
It will need further customization though as it will lose it’s style set by the theme.
Thank you!
Hello,
1) The social icons color can be changed with css (there is no setting for their color):
.td-social-icon-wrap .td-icon-font{
color:red;
}
2) Unfortunately our theme has no option for this so you will have to use a custom link and add an icon to the menu. For this you can use either a custom image or a plugin like font awesome.
Thank you!
Hello
If you want to increase the font size for your title block, you have to use a bit of CSS code. Please try the code below and place it in Theme panel->Custom CSS area.
The code is ->
.block-title {
font-size: 17px;
}
The result -> http://screencast.com/t/3hAo1aLr5
If is not what you mean, please provide more details about your desired changes so I will be able to provide a more accurate response. Also, if you need more assistance in this regard, please provide your website URL so I can further inspect it closer.
Thanks.
Hello,
1) You can hide the post views in on the front-end with css:
.td-post-views{
display:none!important;
}
2)If you use caching, then please activate the ajax post view counter from here: http://screencast.com/t/PUwcIx75
3) I’m not sure what multi-page you are referring to. Please provide an example of such posts.
Thank you!
HI there once again,
i need to customize the block # 14 style. how can i do it in child theme. or in other words i want to rewrite the whole block# 14 with some css, php and javascript(bootstrap animation) customization.that it look and load the posts like the big grid Style #8 and want to add some sort of a like button and ratings.. image is attached for your reference
could you please help me..
Hi there
i modified the td_view_custom_fonts.php like you already wrote somewhere. Just added Font 4,5,6… etc but when i want to put a path inside the textfield and i click on save the letters in the field are just vanishing. When i look into the css of the compiled html domain document i see that the template put the old font OFTEN inside it. Even after i kicked the Font out of the backend it still appears.
I hope you can help me there. Domain: http://www.neulich.org
I also hope that i haven’t got to reinstall the theme, because i already put a lot of work inside it, to get css classes working and stuff.
Honest regards
Manni
Just noticed that the space between the main menu and the content all of a sudden (perhaps with last update) has increased to 48px.
I can of course reduce the top-padding by using:
.td-main-page-wrap {
padding-top: 30px !important;
}
for example.
This makes everything look good on the front page, however on the other pages everything gets moved up too much if i do this.
Is it supposed to be like this now (with the top-padding) or do I have som css-code wrong somewhere?
Site is: enkelteknik.se
How would one enable zooming in/out for people browsing on mobile phones? Im searching through the style css and I dont know where this would be allowed.
Yes, as you’ve learned some plugins inject funky javascript into pages into odd places, and some will need to be updated by plugin author to more gracefully interact with pages. Some also put non-standard class names or rel tags they just “make up” which may not be proper modern HTML5/CSS3.
It’s an adventure 🙂
AMP works with TagDiv themes “right now” — and has passed validation since November during beta.
So, there is no “AMP ready” version of the theme — it’s already AMP-ready. Much like the theme won’t build in its own ecommerce system to replace WooCommerce, etc., it makes no sense to make custom version of theme for AMP, since AMP is designed to load fonts and dependencies off the cloud, and only local content and images from your site. And there is provision for AdSense, and there is provision for CPTs, and there is provision for customizing the template. So, that is available NOW, and no reason to end up with 20 theme updates in the coming year just for AMP, Apple Publisher format, or Facebook Articles — all of this SHOULD be done with actively updated and supported plugins and left agnostic (not part of) the theme.
Many of our sites have been indexed the past month and the only issues are strictly content related, such as bad inline CSS from WordPress like stupidly using the center align tag on a paragraph several places.
I have a thread about this here, which you might find useful. The official AMP plugin is the only way to fly as its theme agnostic, and its being actively developed for WP VIP clients like TIME magazine, etc.
SEE:
https://forum.tagdiv.com/topic/tutorial-getting-started-with-accelerated-mobile-pages-amp/
(( I don’t work here … ))
Hello Mayapur Voice,
Please ignore this warning because it is not relevant. This kind of warning appears when you are using the important tag into your CSS custom box.
Thanks.