- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- TutorialsFrom WPBakery to tagDiv Composer
- TutorialsDefault Block Settings Guide
- TutorialsHow to use custom fonts
@enemyborat
glad all my little rantings are helping somebody 🙂
“fonts and FOUT” Subject is top of mind for me at the moment as I’ve been toying with the difference between loading Open Sans off the Amazon CDN (where was able to compress the stylesheet more than the Google version is, for those who’ve run into that item on GTMetrix for scoring; meaning I basically am loading a minified and optimized version of the Open Sans font stack off the Amazon CDN for better performance/rating), vs just loading from Google directly. I get FOUT on my page right now with the CDN, and sometimes IE won’t load Font Awesome off the CDN at all (even with proper CORS rules) – whole ‘nother topic of pain there. Gave up and am loading Font Awesome 4x off our own server since IE 11 just randomly doesn’t load it and then all my icons are blank spots.
Anyway… “right now” if I go to a test page for site redesign (NOT using WordPress btw), I see moment of “italic” font then regular font. IE will load the italic font first for some reason so I see FOUT from italic to normal font. Stupid stuff (damn IE!!!).
I’m actually hoping to use the Google font CDN, and then the upcoming stable version of mod_pagespeed has a nifty feature where it will inline only the needed CSS for the browser being used.
So, for example this page …
http://www.send2press.com/clients/testimonials_2008-2012.shtml
I see a FOUT in IE11 on Win7/64 with a 32GB RAM machine on a 85mbps FIOS fibre connection. Page loading on dedicated server in Class A datacenter (Softlayer/IBM) with common elements like logo and main CSS coming off the CDN. Blah blah. Meaning, it’s not loading off anything with slow load times.
Starting to just “live with it.” Annoying as hell, though.
(argh)
Browser “should” cache the CSS on second page view. I have my cache in browser set to clear on close so I can re-suffer the view of a first time visitor EVERY time. Hence the annoyance can really annoying. Google “FOUT” to see the couple of years of whining by others, if one cares to. 😉
I think my links to recommended minify resources are in the sticky topic on pagespeed, but I generally use one of these:
for CSS (used this yesterday): http://cssminifier.com/
for JS/CSS (sometimes site is down) – used this on newspaper 2x for one of my two test sites (‘ga-ga’ site methinks):
http://refresh-sf.com/yui/
JavaScript Options = Minify only, no symbol obfuscation.
I’ve also used this once or twice, but one of my web browsers didn’t like it
http://www.csscompressor.com/
Not sure where you get the “1170px is a little bit outdated” … as that is one of the core breakpoints for Bootstrap – the most used framework in the world right now – and the very common 1170 grid.
Bootstrap containers are 750px 970px 1170px
e.g.
http://getbootstrap.com/css/
Extra small devices Phones (<768px)
Small devices Tablets (≥768px)
Medium devices Desktops (≥992px)
Large devices Desktops (≥1200px)
Grid behavior
Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width
None (auto) 750px 970px 1170px
This may not be specific to your issue, but FOUT is a common issue with the trade off between fancy fonts and page load/speed.
This is called “flash of unstyled text” (FOUT) and is a common issue with using Google Fonts (etc.), as they are loaded from someplace other than your own site/server. SO, often the page starts to load, uses browser fonts, then the fonts load from external source (e.g., Google CDN). This is somewhat unavoidable if you’re going for maximum “pagespeed” as not everything can load at same time even when async or using the speed booster beta plugin; many times the loader for such fonts is deferred and moved to bottom of page to allow “above the fold” content to load quickly for a better pagspeed rating — such as with Google PageSpeed Insights).
Often something is slowing page down like a plugin, too large image, or similar, and this “holds up” getting to the font loading.
Solutions typically
1) change order of font loading
2) switch to web-safe fonts only
3) if using CSS over-rides on style sheet embedded in page AFTER main style loads, better to edit style sheet if there is measurable delay between the default style loading and the over-ride (meaning if main style is at 48 and your over-ride is 40; then the 48px still loads first, and then gets over-ride – by not doing over ride and editing core file, it starts at 40px to begin with).
FOUT isn’t too terrible, but it can be annoying.
Some of the above may be only informational to your issue, but I’ve been learning to live with this on some of our sites for better speed.
Hello tagDiv!
I was trying to increase my Pagespeed and got 85 (desktop), 77 (mobile). It is saying that I should “Eliminate Render-Blocking JavaScript and CSS” Will the theme work good, if I minify JS? Please let me know what can I do. BTW I’m using W3TC.
Thanks Mehedi
Hi Radu,
thanks for the reply. What I try to achieve is, that all my h2 headings in older posts get this nice separator line that comes with the newspaper style-1.
Is that somehow possible via custom CSS?
Thanks again in advance,
Norman
Hi,
Delete this: http://screencast.com/t/ijfBSudF
Add this CSS in Theme panel -> Custom CSS section
.iosSlider-col-3, .iosSlider-col-3 .item {
height: 289px !important;
}
.td-slide-item-main {
height: 289px;
}
/* responsive monitor */
@media (min-width: 1200px) {
.iosSlider-col-3, .iosSlider-col-3 .item {
height: 321px !important;
}
.td-slide-item-main {
height: 321px;
}
}
/* responsive portrait tablet */
@media (min-width: 768px) and (max-width: 1018px) {
.iosSlider-col-3, .iosSlider-col-3 .item {
height: 212px !important;
}
.td-slide-item-main {
height: 212px;
}
.td_block_slide_big .iosSlider-col-3 {
height: 212px;
}
}
/* responsive portrait tablet */
@media (min-width: 521px) and (max-width: 767px) {
.iosSlider-col-3, .iosSlider-col-3 .item {
height: 212px !important;
}
.td-slide-item-main {
height: 212px;
}
}
/* responsive phone */
@media (max-width: 520px) {
.iosSlider-col-3, .iosSlider-col-3 .item {
height: 125px !important;
}
.td-slide-item-main {
height: 125px;
}
}Don’t forgot to rebuild the thumbnails following this steps https://forum.tagdiv.com/using-the-theme-with-existing-content/
Hope this help.
Thanks!
I got the pinterest button to disappear by placing display:none in the css, but this is not the way I want to go. Setting to display:none does not stop the php from running, it is still taking up resources no matter how minute it may be.
Hello #nowsathkwt
be sure you do this
1) https://forum.tagdiv.com/how-to-make-the-site-faster/
page cache, speed booster plugin beta
2) add the elements to htaccess file for expires headers, caching, etc.
3) make sure your server had gzip/deflate compression
4) install image optimize plugin, or change default compression in functions.php, re-render your images for compression
5) run speed test at GTmetrix (etc.); fix suggestions
Your site
http://gtmetrix.com/reports/connectkuwait.com/j8vmwWPR
note issues
* you don’t have expires headers on your site content; you need to add those to your htaccess file per my recommendations in this topic thread
* need to optimize images further
* you won’t be able to fix the stuff you’re loading off other sites like the .me.uk domain which is responsible for many of your “rating errors” — you’re loading images, CSS, JS and such from many other sites, and these all slow down your site and don’t meet the current optimization standards.
Yes if possible i would the results to be only pages. Thanks for CSS for the fix for the date!
Did you try only adding the custom CSS that I had posted here?
https://forum.tagdiv.com/topic/taller-mobile-slider/#post-6304
That fixed it for me!
Hi,
add this in the theme panel -> css
.comment-form-input-wrap #comment {
border:1px solid black;
}
Hi,
To hide the date on the search use this CSS, add it in Theme panel -> Custom CSS
.td-aj-search-results .entry-date {
display: none;
}
.td-aj-search-results .entry-comments-views .td-sp-ico-comments {
margin-left: 0px !important;
}About the search page please give me more details, do you want the results to be only pages? Please can give me more details, or explain better, or show me a screenshot with a diagram explain.
Thanks for the message!
Hi,
Please show me a link to see the issue, and i will give you the CSS fix.
Thanks!
Hi,
It seems that the theme is off by 2 pixels on the left when in 980 full responsive mode, with a background picture. You can see the top menu and bottom foot menu are off a bit. It is fine when in 1170 modes.
I did try your css fix you mentioned in my last post and it centers it up, but there is still white space of 1 px on each site of the top menu and footer menu.
Any ideas?
Gotcha – makes sense to me 🙂
Probably explains why the custom functions didn’t work for me one our two test sites.
I switched one from using child theme to only use parent (since Google doesn’t like the CSS redirect, for their own peculiar reasons) and simply edited the parent functions.php to put my custom functions at end (like changing compression rate for images, removing excess css publication, etc.).
Hopefully this will be addressed soon for those using child theme for mods.
Disabled the Quick Cache plugin, deleted all of its files and pasted the code you posted in custom CSS. Still nothing changes:/
Hi,
Strange 🙂
Use this CSS in theme panel -> Custom CSS to align it
#outer-wrap {
left: -1px;
}For transparent header use this CSS, but htis is for header style 3, depend on which header you use
.header-style-3 .td-full-logo {
background-color: transparent !important;
}Thanks!
Also
Paste this CSS in theme panel -> Custom CSS
.widget_text ul {
list-style: none !important;
}to remove those list style from tabs http://screencast.com/t/Jr3JC9g4
Thanks!
Hi,
You want to remove this white color from header? http://screencast.com/t/xKiTT0evqAM
Add this CSS in Theme panel -> Custom CSS
.header-style-3 .td-full-logo {
background-color: transparent !important;
}Thanks!
Hey guys,
I just ran the most recent upgrade and I lost the transparency behind my logo in my header and I can’t figure out how to get it back.
I went to Theme Panel/Theme Colors and set Header Color to blank but that didn’t do it.
I tried changing the Header Color to yellow though, and it didn’t change anything either.
I also made sure Background Color was blank and also tried setting Menu Background color to blank but I can’t make any changes.
You can see my site here:
http://thegaminggals.com/
You should be able to see the pink silhouettes behind the black logo in the top. It used to be that everything between the top menu and the main menu was transparent – I just can’t figure out how to get it to no longer be white. I’m guessing there something over riding it somewhere but I can’t find it. I have not used any custom CSS.
Salut,
Adauga acest code ca si aici: http://screencast.com/t/vR8Dc0dxDrd
<div style="display: inline-block"><?php echo do_shortcode( '[vc_button title="New topic" target="_self" color="default2" size="default2" href="#new-post"]' ) ?></div>
<div style="display: inline-block"><?php echo do_shortcode( '[vc_button title="Post reply" target="_self" color="default2" size="default2" href="#new-post"]' ) ?></div>Copiaza acest CSS in Theme panel -> Custom CSS
.bbp-search-form {
display: inline-block;
}
.bbp-search-wrap {
margin-bottom: 11px;
}
hi,
please give me a link to your site,
probably this can be done from css
Thanks for you message.
Radu A.
hi,
give me a link to your site, I think we can do it from css
Thanks for you message.
Radu A.
hi,
there is no h2 tag on post page,
for the category: are you referring to this: http://screencast.com/t/IDhgpPeOq3f
if is this (CATEGORY TAG COLOR ON POST PAGE),
we can do it from css I think, but it will be a static color for all category.
if you want to change the color for each category individually you have to change the code of the category.
Thanks for you message.
Radu A.
