- 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
- NewsmagtagDiv Composer Tutorial
- TutorialsFrom WPBakery to tagDiv Composer
- NewspapertagDiv Composer Tutorial
- NewspaperTheme modules and blocks
- TutorialsDefault Block Settings Guide
- NewspaperThe Mobile Theme
- NewspaperCompare theme files – Winmerge tutorial
- NewsmagBlock settings tutorial
- NewsmagLogo & Favicon
- NewsmagFooter templates
Hi Alin,
Thanks for your help! For some reason, I keep getting all kinds of CSS errors which just pop up at random.
If you check these links, you will see that the shop products are not displaying correctly:
http://www.askdrmaxwell.com/shop/page/2/
http://www.askdrmaxwell.com/shop/page/3/
Can you please advise on how to fix these shop pages?
Thank you,
James
@Vincentb75 That looks great! I’m glad you found what you were looking for.
That site really is the ultimate resource for CSS3 (and others), and it’s official so you can trust it.
You can override that with custom CSS in the custom css box of the theme panel.
Try adding some negative margin (e.g., margin-bottom:-40px with an !important tag).
If you don’t know how to write CSS, wait for response from TagDiv support. 🙂
Hi there, my WooCommerce pages look great, but my products are a mess – there’s a huge amount of space below the header (see screenshot below).
I’m using a plugin to import Amazon.com products: I reached out to the plugin support team, and here’s their response:
“Since the white space appears on the front-end of your site, this is a theme issue. I took a look at your website and found out that your header is adding some useless space. You can fix it if you remove the height: 900px property from this CSS line: .single_template_6 .td-header-wrap”
Any thoughts on this?

Hi,
I am having difficulties changing these colors. I have no idea where this .td_uid comes from?
.td_uid_12_55158e6f3cff7_rand .td_module_wrap:hover .entry-title a, .td_uid_12_55158e6f3cff7_rand .td-load-more-wrap a:hover { color: #ffffff; }
.td_uid_11_55158e6f2c6f2_rand .td-next-prev-wrap a:hover i { background-color: #ffffff; color: #ffffff; }
I have tried adding these lines to the custom CSS, but it doesn’t work. They refuse to change even if I add !important;
Thanks
Best Regards
I have searched the forum about this topic but none of the answers seem to do exactly what I want.
Changing the color for the normal blocks (in pages) is easily done. However I can´t seem to be able to target correctly and give the right code for changing just the background color on the blocks in the sidebar.
I want to change to color of the background (behind the text, the rest should keep being white) and the 2px horizontal line. Using block 2 and block 3. Realize all these block will change background-color when the changes is applied.
How do I do it with custom CSS?
Hi,
This could happen if you use speed booster plugin and lots of plugins or your server response time is high. The speed booster plugin moves js/css resource files to the footer so js scripts or css stylesheets will load later therefore creating this unstyled gallery while the style file is loading.
Please try this without any other plugins.
– leave just the VC and the speed booster plugin active
– make sure you empty all caches
– purge files if you use CDN host
If you still have this issues, let us know and also provide your site’s url so we can inspect it.
Thanks
I realise I cannot cache external resources.
What I mean is that before I put the settings in nginx/varnish etc. I have about 30 internal resources (.js, .css etc), however, now, I seem to just be left with these few resources, and for some reason they aren’t displaying browser cache expiry headers.
I have signed up with cloudflare, currently awaiting DNS resolution cache all my static assets.
Still does not explain why only some of the resources are getting cache expiry headers.
Hi,
It’s possible with modifications on code and css, unfortunately it’s not an easy task, ex. : – http://screencast.com/t/MR2Aa3Td
@media (max-width: 767px){
.mobile-logo-wrap img {
right: auto;
left: 5px;
top: 0px;
}
.td-menu-header{
position: relative;
}
#td-top-mobile-toggle {
float: right;
}
#td-top-search {
position: absolute;
top: 2px;
right: 50px;
}
.header-search-wrap .dropdown-menu {
right: -10px;
left: auto;
}
.header-search-wrap .dropdown-menu:before {
left: auto;
right: 27px;
}
}
The menu still opens from the left, if you want to make it open from the right i suggest that you hire a professional developer to make that modification for you, it’s not an easy task.
Thank you, Emil G.
-
This reply was modified 11 years by
Emil G.
Hi,
For external resources you cannot set the browser leverage, ex. google js/css. Do you use a CDN? if you do you have to configure the leverage cache from cdn settings panel (if available).
Thank you, Emil G.
Hi,
Thank you Slug Bite for your help!
@Vincentb75 All the codes that Slug Bite provided to you should work properly, you can adjust the values like you wish. Please paste the css code in Theme Panel > Custom Css: http://screencast.com/t/TUlgB5Yey
Thanks!
Hi,
You can try this css code it should work fin if you don’t use text padding: http://screencast.com/t/48YrTgpL
.td-post-content p:first-child:first-letter {
color: #903;
font-size: 75px !important;
}
If you use text padding you will need another way to target(I’m not sure if it can be targeted): http://screencast.com/t/Bw2UALgT http://screencast.com/t/EUFB3m8D
Hope this helps!
If you run into something you don’t quite understand in the code I’ve given you, go to the W3 Schools CSS Reference and look up the item on left hand menu. That’s a master CSS reference and it’s simple enough for beginners to follow along well.
Put this in your custom CSS and choose your font. You might need to google the proper font name to use below for the desired font.
.td-logo-text {
font-family: "Open Sans", sans-serif !important;
}
.td-tagline-text {
font-family: "Open Sans", sans-serif !important;
}
The !important may not be required, but doesn’t hurt anything to have it there to be sure your custom settings are used, instead of defaults.
Selecting a google font should work since it’s included in the theme, but you might have to make sure you use the chosen font in at least one spot on the Theme Fonts settings panel to get it loaded smoothly by the theme.
I am trying to fix the problem I am having with the Big Grid. In some of the post the pictures get downsized by a grey gradiant. When the gradiant is in place you cant make out the text due to the text being white. I want the Big Grid to appear like in the Demo Version. Things I have done. 1. added Thumbnail Upscale plugin. 2.added same posts to the big slider block. The photoS will enlarge to fit slider, so dont know why a photo would not enlarge to the smaller grids of the Big Grid.
3 Added .td-image-gradient:before{
background: transparent;
}
.td-module-thumb a:last-child:before{
background: transparent !important;
}
into your custom css section on theme panel.
None Have worked
Hi,
Unfortunately yes, you can still use the theme as it is but unfortunately you cannot updated it as you will lose the RTL support or you can update it and make yourself the necessary adjustments needed.
The theme’s grid will be changed on v.5 and with it the whole css, from the code perspective it will practically be a new theme and unfortunately we don’t plan to add RTL support for it, sorry for this. There are a lots of new elements and we had to take this decision because we don’t have too many RTL customers and designing the theme to support RTL layout will cost us lots of resources.
If you can’t use the theme we can offer a full refund, just send an email at contact@tagdiv.com and we will explain the procedure.
Sorry for the inconvenience!
Thanks for the message and for understanding!
Guys, could do with a bit of help.
My Newsmag 1.6 site (I did not upgrade to 1.7 due to the reported increase in load times) runs on a LEMP installation with Nginx + PHP-FPM + APC + Varnish running nicely.
On top of this I use WP-Rocket to cache, minify, concatenate, and lazy load.
In so far that I can tell, everything works more or less.
I want to take it to the next level.
I have already used PUTTY and optimized nginx.conf, nginx’s pool.d, varnish’s default.vcl, php.ini, php-fpm etc.
I have already put in the strings to leverage browser caching both in .htaccess, nginx, varnish etc.
Strangely, some files are still not displaying cache expiry dates.



Any ideas on why certain .css and .js files aren’t caching?
Thanks for all the help.
(I will give the tagdiv dev’s my URL if they wish for it)
Hi,
I’ve tested this and also get the same behavior. You can use this css to clear block 14 and fix this: http://screencast.com/t/Kh8adzwH
.td_block_14 {
clear: left;
}
Thanks
Hi,
@zaone
We know about this and we have it on our todo list and we will try to make it work in a future update. Unfortunately is not an easy task and because of this I can’t offer you a quick solution, we have to analyze all js to see where the problem comes from.
The theme doesn’t have an option to add line separators as you would want it but this could be done via custom css and add a border to the top or bottom of the containers, should be something like this: http://screencast.com/t/i7vMq6gUd
Adjust the css from below how you like it:
.home .td_module_10 {
border-top: 2px solid #000;
padding-top: 20px;
}
Use the css snippets to detect just the tables and desktop screens to apply your css:
@media (min-width: 768px) { add your css code here }
Like you’ve detected the tablet and desktop screens you can also use css just for mobile screens and style the images as you would want them, use the css snippet from below:
@media (max-width: 768px)
{
add your css code here
}
If you don’t have css knowledge I suggest you get a freelancer and let him now how you would want those changes as unfortunately we cannot provide custom work at this time.
Sorry for the inconvenience!
Thanks for the message!
You have to add the css code in Theme Panel > Custom Css: http://screencast.com/t/8gRXgqCDX
Thanks!
Hi,
You can add a link to the menu and add an image as a label <img src="your image">: http://screencast.com/t/SYhNOPdMH then you have to use some additional css to set an height for you new menu item, for this you can use the unique class that each menu item has to target just the menu item you’ve created and set an height to it, like this: http://screencast.com/t/j90WJ9DtTC
Hope this helps!
-
This reply was modified 11 years by
Alin [tagDiv].
-
This reply was modified 11 years by
Alin [tagDiv].
Hi Alin,
Thanks for the solution. I got step one, but don’t know how to do step two. i can see the screenshot LiveCSSEditor, is it a plugin?
Hi,
Yes you can add also custom ad 2 like this: http://screencast.com/t/nF9g5FTZGq and use css code like this: http://screencast.com/t/18SAuwJo
You use adsense and you have to use this class td-g-rec-id-custom_ad_1:
.category .td-g-rec-id-custom_ad_1{
float:left !important;
}
And use even number of articles: http://screencast.com/t/Qje2DVwX
Thanks!
-
This reply was modified 11 years by
Alin [tagDiv].
Hi,
Unfortunately this is not an easy task, I have tried with css but it cannot help because break the row: http://screencast.com/t/S7nl6Msw5q
I have managed to find a solution but your ad will be added to the bottom: http://screencast.com/t/ZTuap2iuFzjU
You have to add your custom ad like this in the loop.php file:
*add $adcounter = 0; like this: http://screencast.com/t/agBFQMJ8XjE
*also this code bellow end loop: http://screencast.com/t/WnNkAd4mGMit
$adcounter++;
if (is_category() && ($adcounter == 1)) {
echo do_shortcode('[td_ad_box spot_id="custom_ad_1"]');
}
Hope this helps!