- NewspaperCreate Custom Code with the browser’s Inspector or the Live CSS Box
- NewspaperScroll Animation
- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- NewspaperHow to setup Twitch for Social Counter
- NewspaperModal Popup
- NewspaperFlex Block Settings Guide
- NewspaperAutoptimize Plugin – install and configuration
- NewspaperAdding Multiple Authors to Your Articles
- NewspaperDesign your Post Pages using the Cloud Library Templates
- NewspaperBig Grid Flex Settings
- NewspapertagDiv Composer Tutorial
- NewspaperTheme modules and blocks
- NewspaperThe Mobile Theme
- NewspaperCompare theme files – Winmerge tutorial
- NewspaperUsing Other Ads
- NewspaperBlock settings tutorial
- Using custom fonts
- Using typekit fonts
- NewspaperChild Theme Support
- NewspaperHow to Make the Site Faster
Dear team,
1 more question, may I know which CSS I can use to adjust the height of the image for Big Grid Full 1?
regards,
vic
Hi,
This is my magazine http://www.kabir.org
I want to know if I can change color of these boxes? If, yes where.

Lastly, how can I optimize my site or reduce the load size. The current page size is 3.2 MB

CSS 41.6 % 1.35 MB
Script 24.2 % 804.30 KB
Thanks for the ideas, Chris. The Newspaper theme is already setup with CSS to have the posts be printer-friendly. But the CSS appears to work only on Chrome and appears to be off a bit for Safari / Firefox. Was hoping someone had already encountered and solved this problem. 🙂 But I definitely appreciate you taking the time to respond with some other ideas!
Hi,
This is not an issue, please read more – https://forum.tagdiv.com/newsmag-post-formats-for-tinymce/ – https://www.screencast.com/t/zlx9FXoHfU5
If you want to have it full even if you set a sidebar, you need to remove or comment this code from editor-style.css file – https://www.screencast.com/t/4w2vcg3Mzx
Result – https://www.screencast.com/t/OGJBZsctLhk
Please clear your browser cache after you make any custom modification.
Thanks!
Hi,
I would like to remove the Pin it button under my posts. I already tried to remove it with custom css and the Pinterest P-button dissapeared but there’s still a Pin it button. I would also like to remove the number of facebook likes next to the like button because it’s blocked by the Tweet button. Or maybe I can make the distance between the FB like and Tweet buttons larger? Thanks!
Hi,
You can try this custom css in Theme Panel > Custom Css:
.home .td-module-meta-info {
display: none
}
Thanks!
Hi,
On full grids the image is set as a background. It is not cropped but it is positioned using css – https://www.screencast.com/t/m3o289wVHHu
You can change background position, for example center top if you’d like more – https://www.screencast.com/t/FyLMR3QPeNB It will be applied only on Big Grid Full 1.
.td_block_big_grid_fl_1 .td-thumb-css {
background-position: center top;
}
Hope it helps!
Hi,
You could try this code, thought it is a lot of code, it is needed to make that block header style display the way you want – https://www.screencast.com/t/1KIqFlf7Nuh
The code must be entered in Theme panel->Custom Css
.td_block_template_17 .td-block-title {
background-color: black;
color: white;
}
.td_block_template_17 .td-block-title:before {
display:none;
}
.td_block_template_17 .td-block-title:after {
margin-top: 0;
}
Thanks
In case it is not clear, and I think I have done a bad job of explaining this, this is what I had hoped to be able to do:
http://media.altimac.com.s3.amazonaws.com/images/sample-mob.png
but if that is not do-able, I am fine with having the narrow gradient for the first three, and then some kind of image placeholder for the rest below so there is not just empty white space. Is there any way this can be done just using CSS? As always, thanks for indulging me.
Hi,
What I meant to say was that the mobile theme is using it’s own predefined template for the elements displayed, including the footer section. There will always be the same footer displayed, regardless of what you have on desktop, where you can customize the footer content or have predefined content in some footer templates. This is meant to make the mobile theme as light as possible and with good performance.
Please try this code to hide that text, just enter it in Theme panel->Mobile theme->Custom Css
.td-footer-description .block-title {
display: none;
}
Thanks
Hi. There are over 50 fonts in Theme panel > Theme Fonts. Do you have a tutorial that matches these fonts with the appropriate block?
In particular, I am interested in the following:
1. Blocks > Slide
Need to change the font-family of the title.
2. Blocks > Block 13
Need to change the color of the title
3. Links
Is there a way to change the link colors only?
At the moment, I changed “General theme colors > Theme accent color” but this affects the whole website.
4. Go-to-top arrow (bottom-right corner)
Same issue. I changed “Theme accent color” to blue. This is a good color for the links. But the Go-to-top arrow should be black or gray.
5. Font color
How can I change the color of <p> <h2> <h3> in posts and pages?
p.s. Very impressed with the theme. Even the staging website is fast.
Hello yukiy531,
Sorry but since we have not tested replacing our background ad with another ad system, I cannot provide any solution to this. I suggest hiring a freelancer to help out with this task as plugin implementation is not part of the theme support.
The background ad in our theme for the moment is not working as there is a problem with the code but it can be fixed with a simple css if this is what prompted you top look for an external plugin for a bakcgorund ad:
body {
cursor: pointer;
}
#td-outer-wrap {
pointer-events: none;
}
.td-main-content-wrap, .td-container-wrap {
pointer-events: auto !important;
cursor: default;
}
Thank you for your understanding.
Thank= you, Catalin. I changed all the /no-thumb images to be a dark blue color but they are still not appearing on the mobile version of the site using the mobile theme. See this pic:
http://media.altimac.com.s3.amazonaws.com/images/obits-mobile3.png
I think I am confused because since I am using this CSS:
@media(max-width:767px){
.category-obituaries .entry-thumb{
display:none;
}}
that should hide the thumbs or their placeholders no matter what, correct? I am not understanding why the first three posts are showing with the narrow gradient (which I do want to have there), but the rest of them below that are not the “top three” have no placeholder at all. Logically, wouldn’t each of them have a tiny gradient there also? Is the gradient generated by CSS, so that it it not actually an image? Sorry to be a pain, I am just trying to make this view optimal for obituaries. For the other categories and the featured page, it really doesn’t matter so much, but we can’t show pictures of dead people with their faces cut off ;-(
Hello,
Try to use the code below and place it in Theme panel->Custom CSS area.
.td_social_type .td_social_info{
top:-10px;
}
This problem happens due to your unproperly installation. Try to remove the old plugin and update it. Clear all your caches and check the results.
Thanks for the message!
Hi folks
We had the same issue and we didn’t change anything in the CSS or hack the settings.
Just don’t forget to update your child theme with the new functions code
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 1001);
function theme_enqueue_styles() {
wp_enqueue_style('td-theme', get_template_directory_uri() . '/style.css', '', TD_THEME_VERSION, 'all' );
wp_enqueue_style('td-theme-child', get_stylesheet_directory_uri() . '/style.css', array('td-theme'), TD_THEME_VERSION . 'c', 'all' );
}
We were scratching our heads for ages until we noticed they were different from our original child theme setup.
Hope that helps people,
Hash
Hello Sebastian Escobar,
The theme does not have any such an option that allows you to do this but only with a bit of CSS code. You should hide all the meta information container and then you should display it only for your desired posts. You can start to create your own custom CSS code from our useful guide here -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thanks for your understanding!
Hello Natalia,
Here is talking about About Us section. If you want to remove it, you should use a bit of CSS code.
The code is ->
.td-mobile-footer-wrap .block-title{
display:none;
}
I have inspected your website and I did not saw any problems with your main menu on mobile devices. Provide some useful screenshots so I will be able to provide a more accurate response.
Thanks for the message!
Hello anubhav503,
You should try using a bit of CSS code to do that.
.entry-crumbs, .td-category{
display:none;
}
For post views count and comments section, notice that you can disable them from Theme panel, like this -> https://www.screencast.com/t/so4WfRoHQdWK
Thanks for your understanding!
Hello bformhals,
For example, if you are using the Header Style 7 and if you want that your logo to be permanently aligned to the left, you should use a bit of CSS code to do that. Try the code below and place it in Theme panel->Custom CSS area.
The code is ->
.td-header-style-7 .td-header-sp-logo img {
margin:initial!important;
}
The result is here -> https://www.screencast.com/t/iSiMNtt6FRl
Thanks for your understanding!
Hello bformhals,
If you want to have the same style for your bullets, you should use a bit of CSS code to do that. Try the code below and place it in Theme panel->Custom CSS area.
The code is ->
ul .children{
list-style-type:disc;
}
The result is here -> https://www.screencast.com/t/MxFpesHU1pxW
Thanks for your understanding!
Hi,
i want to use https on my site.
All is fine, but i have still one URL (src. img) in the site code (from the css) which grab ab search background img over a old URL. This URL is only a old development URL and not longer active. But i dont know where or how i can change the link for this img src.
The class is called:
.td-search-background
The URL of the Site is:
https://investmentjunkie.de/
When you look in the code and search for “http://” the first result is my problem. 🙂
I hope anyone can help me.
Thx and with best Regards
Marcel
I put this code into the Custom CSS area of Theme Panel:
a {
color: #1896f4;
}
It’s changing the link color on desktop, but not on mobile. I cleared website data from my iPhone when I checked. Do I need to add custom CSS just for mobile link color, too?
Thanks in advance.
You can easily see that using F12/developer mode in Chrome web browser.
I think it’s 14px for the post content, possibly 15px. Also found in the styles.css file.
Thanks you very much. I will see the css, this is a great help.
I know now the mobile editor is only for pages and can edit widgets or other elements only without visual composer, and copying the code from backend editor. This is not explained.
Thanks you for all!
-
This reply was modified 9 years by
Sebastian Escobar.
Sorry, there is a miscommunication, i don’t want to translate the “vind ik leuk” and “tweet” button. I just want to remove them of the page using CSS if this is possible