I had done a tutorial somewhere once upon a time which I don’t think is part of my sticky, only because the locale moved several times between themes …
but best way to optimize fonts (broad strokes):
a) disable loading from the main includes/functions file
b) copy the rendered css from Google for the stylesheet
c) put the actual CSS at bottom of the main style.css
this way you’re loading the fonts, but *not* the actual CSS sheet which is just a redirect loading the fonts from Google (so this saves loading the external style sheet, essentially)…
working on an ebook to cover all this stuff in detail but a bit behind ….
Thank Chris,
I’m new here and should have look at the sticky post. Your guide is really a big help for me, I did try most of the tips and the site is a lot faster now.
Also, I dig in a lots in the “render blocking css” issues, tag div speed booster seem not to work for me, I tried to move with many ‘id’ but it didn’t work, but I found another way to use W3 Total Cache to combine the css file together and move it to the footer by this code:
<!– W3TC-include-css –> ( put it before wp_footer(); )
But still, there is fonts.googleapis.com/css ( there is around 3,4 files for the font Open + Sans and Roboto + Condensed ) which I can’t move using this method.
If by any chance, could you have a look and provide better method of removing those css file to footer?
Ken
Hello to everyone.
I just installed child theme like 3 days ago.
i have take it from parent theme only these:
1)style.css
2)functions.php
3)comments.php
4)header-style1.php
My web site is: http://www.storypickers.com
I dont’t have any problem or something like that, but i was wondering do i need to take more files
from the parent theme?
For example if i want to modify any code or something to my web site, they tell my to put a code at header.php
But i don’t have a header.php. So, i need to take the header.php and put it at my child theme, or i need to put the code inside to the parent them to header.php???
Waiting for your reply wish to you king regards
Any theme framework using Visual Composer will have that file – it’s not technically part of theme; so hundreds of themes using VC will have that payload, but it’s the plus and minus to this kind of fancy site.
You can minify the main css file per my suggestions in my sticky post on optimization, which helps quite a bit.
Also, luckily this stuff actually gets zipped/compressed when sent to browser and cached so not being loaded over and over.
There is also code in my optimization sticky on topic of disabling VC loading on post pages where it’s not used (at least in my case).
Sadly, for highly complex and “lots of features” sites, there *is* a big payload, but not so bad — some themes make it seem smaller by loading 10 diff CSS files, where here it’s all combined.
Standard size CSS for most complex themes is actually about 550KB — not 75KB. It’s not apples to apples, it’s apples to watermelons — footprint is quite different.
But you can optimize stuff quite a bit for speed and Google pagespeed rating, which should be the main target for using large complex “feature-packed” themes like this one.
That might not have helped, but some feedback (I’ve been doing webdev 20 years and using WP 10 years, so not totally nuts over here… at least most of the time) 😉
Great answer. I saw your sticky post. It is very detailed.
It will be interesting to see how to remove stuff you don’t need from your CSS. In particular when people don’t use all the features like: bbpress, woocommerce, etc.
Average size for a complex theme is actually about 550KB these days as it combines multiple sizes, shapes, options, layouts, mobile/responsive, etc.
Visual composer is also a bit big.
However the actual footprint is much smaller for web browser via gzip and also with caching in the cloud (e.g., Chrome will cache your data if enough hits come from Chrome users, etc.).
You can also manually “minify” the main CSS file using the tips/tricks from my sticky post on site optimization.
But yes, it’s a bit big for all those features people have asked for (demanded?) — so, there is a lot going on, but it’s better than loading 10 diff. CSS files as it’s actually more efficient for one “packet” …
and some data is actually inlined automatically to help with pagespeed/rating.
There was a post exchange a while back for v4 where I’d asked about what we could “take out” if not using bbpress, woocommerce, multisite, or other things to “trim it” and that would be a good tutorial for Radu or somebody to tackle in a
“what can I take out of the main CSS file”
“what can I take out of the main includes-functions file”
as those are the two big payloads other than visual composer.
Chris
Is the css I did good? Or is there better code to render for devices?
I recently got this theme and deployed to a website.
I noticed that the site was taking too much time to load. Even with Autoptimize inline CSS and the proper optimizations.
When I extracted the CSS into a file I noticed the size is 1.5MB!!!
No wonder this site is so slow. When the average CSS standard size is 75KB.
Please let me know how I can reduce this CSS. I think it has a lot of things that I don’t need and are there who knows for what.
Hello Schuchi,
I have inspected your problem and it seems it is a CSS related one. You have a custom css in your theme panel that overrides the default behavior of the ads on header style 7. http://screencast.com/t/nL1p5Un5.
Remove this code and everything will resume to normal.
Thank you!
Hi
1. That is a sprite image loaded by css, more details about the purpose of those images you can find here: http://www.w3schools.com/css/css_image_sprites.asp and here is en example of their functionality with our theme: http://screencast.com/t/ivB2686o
2. Try this custom css in theme panel > custom css to change the review stars color: http://screencast.com/t/JL129IM0jiH
.td-icon-star-empty:before, .td-icon-star:before, .td-icon-star-half:before {
color: yellow;
}
Thanks!
I need another css code to change the border color under excerpt on block 6 from white to #032357 and make it solid line..thanks
https://jahliveradio.com/
-
This reply was modified 10 years by
Steven.
Hello jethron.
The theme’s tag list does not have CSS classes to target a specific list element. It can be done using this code:
.td-tags li:nth-child(8){
display:none;
But it will always hide your 8th tag, weather it’s yahoo or something else. You can change this number to the tag you want (the first one, the second one, etc.) You cannot target a tag by it’s name. The easiest way is to remove the tag completely from WordPress.
I hope this helps.
Thank you!
Please provide a link to your site so i can see which header style you are using. Different header styles have differently styled top-menus. Css modifications must be made individual for each style.
Thank you!
Hi Hash,
Newspaper 6 is a whole new theme that is released for free for all of our existing customers so an update from 4 to 6 may cause the same issues as switching to another theme (but we did try to maintain compatibility where ever possible).
Always make a full backup of your current installation – https://codex.wordpress.org/WordPress_Backups and then do a clean update, meaning that we recommend that you delete the old version of the theme before uploading the new one – https://forum.tagdiv.com/how-to-update-the-theme-2/ update also the plugins that come with the theme files from the /plugins folder. In the “how to update” guide is specified that you will have to run the script that will import from database your settings, will change the shortcodes… Also you have to update the child theme, please note that old files customization or custom css will not work with the new version and you will have to adjust and re-add them.
Hope this helps!
Hi,
Newsmag CSS is too heavy:
js_composer
801.611 kb
style
589.912 kb
style
116.628 kb
Total CSS:
1560 kb (1551.767 external css / 8.704 internal css)
Standard css theme file should be less than 75K, Is there anyway you can optimize the theme ( inline css, combine ).
I also try to remove the javascripts, and css rendering with speed booster but it didn’t work properly.
Thank
Hi,
Instead of disable it from Theme Panel > Post Settings, you can use custom css to hide it – http://screencast.com/t/jTdQJ0Dt6hgi
.single .td-post-views {
display: none;
}
Thanks!
Hi,
You can try this custom css – http://screencast.com/t/eowG18gpolV
@media (max-width: 767px) {
.td_module_11 .td-module-thumb {
width: 100%;
position: relative !important;
}
.td_module_11 .td-module-thumb .entry-thumb {
width: 100%;
}
.td_module_11 .item-details {
margin-left: 0 !important;
top: 0!important;
padding-left: 0 !important;
min-height: 30px !important;
}
}
Thanks!
-
This reply was modified 10 years by
Alin [tagDiv].
Hi,
You can reduce the space using custom css in Theme Panel > Custom Css, also on mobile device you have some space issues because you hide the Big Grid row. You can try this custom css and see if it helps – http://screencast.com/t/pjr3MS9dlnDV – http://screencast.com/t/A4vtqpPK
.home .td-footer-wrapper {
padding-top: 0;
}
.home .td-main-content-wrap {
padding-bottom: 0;
}
@media(max-width: 767px) {
.home .td-page-content {
padding-bottom: 0 !important;
}
.td-footer-wrapper .td_block_3 {
margin-bottom: 10px !important;
}
}
Thanks!
Hi VAtheist,
Newspaper 6 is practically a new theme, the whole code was rewritten so you have do a clean update and make sure that no old files remain. Please follow the guide suggested by Chris. Make full backup of your current installation – https://codex.wordpress.org/WordPress_Backups and then do a clean update, meaning that we recommend that you delete the old version of the theme before uploading the new one. The recommended method is via FTP. Then update also the theme plugins: Visual Composer (also optional plugins Social Counter, Speed Booster if you use them).
Please note that the old custom modifications to the files or custom css will not work, you will have to adjust and re-add them. Also the shortcodes have been changed.
Thanks!
Hi
You can add a title for sidebar ad in ad box settings: http://screencast.com/t/m5GdDPWjj87 – http://screencast.com/t/se0XnqWY
For ads from post content you need to edit td_module_single_base.php file and add this code like here: http://screencast.com/t/UcWnAZoDJR4 –
'<div class="td-ads-title"> Advertissement </div>' .
Also you will need this custom css in theme panel > custom css: http://screencast.com/t/0W7YTdjJi
.td-ads-title{
margin-left: auto;
margin-right: auto;
display: table;
}
Let me know how it goes.
Thanks!
-
This reply was modified 10 years by
Alin [tagDiv].
Hello,
1. Just change it in the code i gave you. Replace 400 with the number you want.
2. I assume you are talking about the core files of the theme. You can access these from your host.
The custom css code you place in the theme panel (http://screencast.com/t/5nPigFzqcA) will not be affected by the update.
Thank you.
Hi,
Try to use this custom css in Theme Panel > Custom Css – http://screencast.com/t/uOTOuLlHXE
@media(max-width: 767px) {
.td-travel-header .wpb_text_column h1 {
margin-top: 0 !important;
padding-top: 40px;
}
}
Thanks!
Hi
You can use media queries and target the specific css classes for the widget you want to hide.
Ex:
@media (max-width: 768px){
.my-widget{
display: none;
}
}
To get the css classes you need to inspect the element with browser’s developer tool: http://screencast.com/t/qifR4EQfv
Thanks!
Hi,
As you can see our demo site also has more errors when checked with the validator: https://validator.w3.org/nu/?doc=http%3A%2F%2Fdemo.tagdiv.com%2Fnewspaper%2F
Almost all big themes have similar errors on W3C validator and this errors are not related especially to your css for prices. The most common error as style inside div error appear, any custom css added in Theme Panel > Custom Css will create this error, as the coded will be included in the style tag – http://screencast.com/t/9mAXvKefVyCF – http://screencast.com/t/ernoJD6q If you don’t want this error a solution is to not use Custom Css from Theme Panel and add your code directly in the style.css file. You should ignore them, they are not important.
Thanks!
Hi,
You can use do_shortcode function and display 2 custom ads bellow the menu for all pages like this:
*edit header template that you use(I guess it is default) and add the code – http://screencast.com/t/aSDNZlOzk
<div class="td-container">
<?php echo do_shortcode('[td_block_ad_box spot_id="custom_ad_1"]');?>
<?php echo do_shortcode('[td_block_ad_box spot_id="custom_ad_2"]');?>
</div>
*use this custom css in Theme Panel > Custom Css – http://screencast.com/t/dFXToqBr
.td-header-style-1 .td-a-rec-id-custom_ad_1 {
float: left;
margin-right: 20px;
}
.td-header-style-1 .td-a-rec-id-custom_ad_2 {
float: left;
}
Please not that this is an example how this can be achieved. For non-adsense code we suggest to use this div container and add a specific image size for each device – https://forum.tagdiv.com/header-ad/
If you use adsense code you can control the size from Theme Panel for each ad spot – http://screencast.com/t/Nczvl9AbRGHY
If you don’t have basic php/html/css experience I suggest to hire a professional developer to do this for you.
Thanks!
-
This reply was modified 10 years by
Alin [tagDiv].
-
This reply was modified 10 years by
Alin [tagDiv].