Hi tagDIV,
Please help me custom css for resize width between columns as:
On main page (/) (see link: http://www.screencast.com/t/x16E56hlce)
On single post: (see link: http://www.screencast.com/t/4XC7iE1xZ4)
P/S: I used block1, block2, block4, block9.
Thank you.
Best regards,
The idea is to hightlight the authors comments by using this custom css
.commentlist .bypostauthor {background: #e7f8fb;}
.commentlist li ul.children li.bypostauthor {background: #e7f8fb;}But it’s not working, which code do i have to use to do this?
Thanks!
Hi,
I am trying to spread out the items on the main menu more and have the items be justified to the left. I have the following code in my CSS.
.sf-menu > li > a {
padding: 0 50px 0 5px; }
The ‘right’ padding value (50) padding seems to have no effect. I can change the ‘left’ value (5) just fine, but cannot change the ‘right’ one. site is napeatrepeat.com
Thanks,
James
“web safe fonts” refers to fonts built in to all web browsers (Google “web safe fonts”). So if you change your default fonts in your style.css file to not use ANY Google fonts, then you don’t need to load any fonts from Google (I’m using the gill sans “stack” myself). Then comment out the call to the google fonts in your functions.php file (line 48 I think, if memory serves).
This is a nice info page I usually refer people to:
http://cssfontstack.com/
To load Google fonts via your own CSS, this means that if you look at the line in your functions.php which would be loading the default google fonts for the theme (like pt sans and roboto or whatever), simply open the CSS from that link, and copy the CSS which is being loaded from Google …. then put that CSS at bottom of your style.css file … this way you’re loading the fonts directly from your CSS; not loading a CSS file externally which then loads the Google fonts … you’re cutting out a step, and removing one external file load over which you have no control. I do this on our main business site to load Open Sans from Google directly. This is a common fix for using Google fonts which has been around a few years now. 🙂
Hope that made sense.
I really need to write an ebook on this stuff with examples! 😉
Some of the things I noticed on his site was not using the gravatar, which is a major slowdown, and also he’s limiting the number of thumbs on page, such as not having four big “related stories” images at bottom of post, and as I suggested he’s using only the share buttons vs the number shares buttons.
I just checked one of my pages, which does not have js/css minified, and has gravatar, and has an ajax slider top right AND four images for related posts. This page has a “90” on PageSpeed Insights with both AdSense, and Disqus running. And one of those things is loading Google Analytics even though I am not. I’m not using a caching plugin either. So, in my case I need to consider changing the related posts, figure out how to cache or save the author image locally vs from gravatar, and possibly remove the big image slider top right of each page … which would reduce payload of page by a lot. And I need to minify my main js and style.css files, and retest. I haven’t looked at this since before I got sick, and have been working on something else which pays the bills vs the fun stuff, but need to get back to that obviously 🙂 And even worse, I don’t think I’ve updated the theme to 4.x on the test page (still 3.9.2). Doh. I suppose I should catch up on following my own advice! My non WP site has 97/100 for desktop, and 93/100 mobile.
What blows my mind, as it were, is the 99/100 user experience rating for mobile that Shashank has. May I say “wow” 🙂
@Christopher, what do you mean by “load fonts from your own CSS not from Google CSS; or use web safe fonts ONLY”? Please explain.
Well, several things you can do
1) use only text ads from adsense, so images are not loaded (one big issue right there)
2) very aggressive caching and/or proper CDN
3) fast server (less than 300msec response time)
4) avoid stuff like photon or other stuff loading off wordpress
5) optimize your social media stuff; use share buttons not the numerical crap that needs to go “fetch” numbers for EACH button
6) load fonts from your own CSS not from Google CSS; or use web safe fonts ONLY
7) limit use of plugins which slow down your php
8) optimize your config.php file to include paths to your resources
9) do not use child theme which uses css redirect which google does *not* like
etc.
I’m sure Shashank could likely provide a single “round up” of all the stuff he’s done in the particular case of his own site. I just tested one of his pages, which as a desktop score of 93, mobile 86; which is pretty damn impressive with adsense and disqus running!
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.styzic.com%2Fgadgets%2Fiphone%2Fbigger-iphone-6l%2F491%2F&tab=desktop
Hi, Mehidi
I just posted a comment about this on another post which I’ll repeat here as my empirical wisdom on the topic of suffering Google issues the past 20 years. 🙂
————-
Christopher Simmons
August 27, 2014 at 8:50 pm #19552
As you may know from my own prior posts in the pagespeed topic, you may find it more helpful to test for speed with stuff like adsense, external things like addthis/sharethis or shareaholic, disqus, turned OFF, as there is not much you can do about those elements for speed beyond async loading. This gives you what I call your “raw score” which is better to see what your work on optimization actually does.
The “theory” in the webdev industry is that if you get your raw score taken care of, then when you switch back on the googleverse stuff which invariably shows problems with their own systems vis a vis pagespeed, you can presume Google “subtracts” their own content from the “functional score” … in using speed as a “signal” for ranking, beyond user experience.
Just for those pulling their hair out on this topic (been there!) 🙂
My other advice: don’t eat toast around your keyboard, unless you want to keep a key puller, alcohol, swabs, and a can of compressed air handy!!
———————
For Google fonts; use my trick mentioned elsewhere …
1) grab the CSS from google which is being loaded from your functions.php for the fonts you’re using;
2) paste the css into bottom of your style.css file, so you’re loading the CSS in your own file and not loading externally — does 2 things, removes the css loading from their server with the funky expiration, versioning, etc., and reduces external load by one file!
Hi guys,
I currently have 90 for my desktop site and 75 for mobile (http://bit.ly/1tKOeYu). I have minified all of the theme files and did everything to speed up the site. But, as I use AdSense and Google Analytic, the speed is a bit slow. For example, as you can see on the screenshot bellow, Google is asking me to Leverage Browser Caching for this URL: http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js and other URLs.
But as I don’t have access to the files, I can’t do anything to them. 🙁 So, how am I meant to modify them to make the site faster? The same thing is happening on the Eliminate render-blocking JavaScript and CSS in above-the-fold content section where Google asks me to Optimize CSS Delivery for one of their Google Fonts. And Minify JS for their Google AdSense script.
Please help.
Thanks!
Yay! Thanks for feedback RADU O!
I think the main takeaway from the announcement is to ensure the hit-and-run theme authors stick around to actually provide support. This should help curtail some of the copycat developers who (seem to) steal the CSS from one company then do their own version of it (seriously, there are like 20 versions of the same menu layout, footer layout, etc. on there for some theme “types”).
Now, maybe Envato should stop pushing their updater on folks until it works correctly 😉 (do they even still do that?).
Hi Lucian,
Okay, regarding the Header Ad, I get it now…I added the code per your example and it looks pretty good when the window is re-sized. It looks like I now need to figure out a way to shrink the tab sidebar.
I added the custom css for the Revolution slider but it is still in the forefront and overlaps the drop-down from the Header Menu. Any other suggestions?
thanks,
Bill
@Shashank I minified the CSS and JS and uploaded them back to the server. But my score is now 85 (which is low). As you can see most of the problems is with Google’s Analytics and other sources. Here: https://developers.google.com/speed/pagespeed/insights/?url=gdgtarena.com
Any idea?
Hello, I would like to remove the author metadata frome my whole site, since when I use Facebook Ads, it shows the author right to my site name and I dont want that. Can I do this through CSS or should I change something in the PHP code?
Thanks in advance
Hi,
This is how an image ad banner should look in the html structure: http://screencast.com/t/JymHSJwdqx
I have inspected your site and seems like you have an ad only for desktop, that is why the image it’s not displayed for other screen widths: http://screencast.com/t/rHBJUjnjWY
Please make sure you add your ad like this: http://screencast.com/t/m6wguhFmI
For the rev slider overlapping the drop-down menu use this custom css:
.td_revolution_slider {
z-index: 0;
}Thanks
Hi Christopher,
Thanks for sharing, glad you figured it out!
May I add that you could also modify the top and bottom padding to achieve this, also the line-height for the block titles could also be modified from theme panel then you could use the custom css to adjust the block title container if the theme panel setting doesn’t do it.
.td_block_wrap .block-title a, .td_block_wrap .block-title span, .td_block_wrap .block-title label {
padding: 5px 10px 5px 10px;
line-height: 24px;
}Thanks
Hi,
@byron_shady/ @TheMediumUTM
It’s enough just to set the rev slider’s z-index to 0, will do the job:
.td_revolution_slider {
z-index: 0;
}
@byron_shady
If you are referring to this: http://screencast.com/t/5PvSRIJleo just use this custom css in theme panel > custom css:
.header-search-wrap .dropdown-menu .btn {
border: 2px solid black;
}If this is not it please let me know or follow @TheMediumUTM instructions and find the right class for that button.
Hope this helps!
Thanks @TheMediumUTM for your help!
Screenshot? Here’s every thing!
and I use ithemes security to tweak some of wordpress.
1. use google for js, defer load js, async css and minify
2. The plugin is very big, I’ve configured every part of it with time. I need to know your settings to say what lacks in there. 🙂
3. Before you upload images to wordpress, open that image in photoshop. Press alt+F There is an option “save for web”. Adjust your settings there.
then in the speed booster pack plugin there in default wordpress image compression level, set it to a lower value like 60 and regenerate images.
4. I can see yout html is minified but there are no minified css and js. I minify these files myself and upload them back to server. I don’t use total cache for it.
1. Do you have any “special” settings for the speed booster pack plugin? If so, what are they?
2. again, any special settings?
3. I use paint.net and my image files are 60-70kb..what do you mean by “before uploading and then make wordpress default from 90 to 60”
4. HTML: http://screencast.com/t/Z2Xn911vnL |JS: http://screencast.com/t/OZgTpxJCSono | css: http://screencast.com/t/eEsTU29YJ
Here are my answers:
1. I use the default newspaper speed booster + speed booster pack plugin.
2. same
3. I use photoshop to “save images for web” before uploading and then make wordpress default from 90 to 60
4. How do you minify, compress and combine html, css and js?
1. eliminating render blocking js and css — tried everything but didn’t helped.
2. caching – w3 total cache
3. image optimization – wpsmush.it
4. What do you mean by “how do you compress?”
thanks for the help!
Yeah sure mehedi, I’ll be happy to help and once I disable adsense ads the score becomes 99!
Please answer these questions. 🙂
How are you eliminating render blocking js and css?
How are you caching?
Are you optimizing images?
How do you compress?
Hi,
You can try to change them via css, use this custom css in theme panel > custom css:
Also please make sure you have changed all fonts from theme panel also.
.woocommerce, .td-footer-wrap {
font-family: 'Roboto', sans-serif !important;
}Try this and let me know if works.
Thanks
My appologies. That header image issue was solved using Single Image like you advised. Also removed th broken css. Things seem to be working fine now! Thanks!
I’m gonna revive this post. Thank you for your help. I’ll keep testing. I’ll remove the CSS and see if this works.
On our pages the title is supposed to be hidden. It’s in the posts that the title not showing up is an issue.
Regarding the image issue: For some reason our main fill width images seems to pop into some sort of frame where it’s really small on our pages in the standing iPad format (and only that format. I’ve tried removing all custom CSS to test, and the issue is still there. Do you now why this is?
Screen: http://i.imgur.com/c3SR6Hu.jpg
Okay.. this one was confusing me, and I’m going to blame lack of sleep this week. Using theme panel I changed the font size for the sidebar headers (e.g., Categories) as I wanted them a little smaller (14px) and ALL CAPS. No problem. However, once the size is changed, the underline creates a space between the box background and the line rule (border).
Was trying to sort out which element to over-ride but how to over-ride with custom CSS to remove the white space. Changing the line-height has no effect (and speed booster is off).
Since some items have an h4 class, like <h4 class="block-title"><span>The Guru</span></h4> and some have simply <div class="block-title"> kinda confusing.
default seems to be
.block-title {
position: relative;
font-family:Montserrat,Helvetica,Arial,sans-serif;
border-bottom: 2px solid #4db2ec;
font-size: 20px;
margin: 0px 0px 26px 0px;
line-height: 32px;
font-weight: normal;
}changing the margin only changed the spacing after the section, not within the section. So, it looks like the theme panel line height doesn’t over-ride the style sheet?
( I changed default font in style.css, obviously )
So, changing the line height to line-height: 28px; from the custom CSS panel over-rode the spacing so the lines would touch.
This originally started as question while I was figuring it out; decided to post in case anybody else was having an issue on this one 🙂
