Search Results for 'css'

@mehedi… usual way; custom CSS on the element

.block-title {line-height: 28px;background-color:#000000}

Google is a great search tool… as this is a common practice easily researched which has nothing to do with this theme. Learning these kinds of tricks is part of basic web development using Google fonts. 😉

However, the basics are

1) search/replace all font mentions in the style.css to use the Google font you wish to use; in my case ‘Open Sans’

2) go to the Google fonts site, and find the font you want in the weights you want, in my case ‘Open Sans’ and get the code from them to place into your website
https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
in my case, normal, normal italic, bold, bold italic

3) choosing the above gives you code you’d normally place in the head of your web doc, or footer for some setups
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>

The above is essentially what the theme loads except has various hooks and functions to let you select those in the admin panel; however you want to actually instead, take that CSS and put at bottom of your own style.css file and it can be done after minification (if you’re doing that) so you don’t minify this code.

So, basically take that URL and open in a web browser; which should download it to your hard drive;

4) then, open that and it will give you the CSS

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v10/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://fonts.gstatic.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxjqR_3kx9_hJXbbyU8S6IN0.woff) format('woff');
}

PLACE the above, or comparable code for the fonts you’re using, into bottom of your CSS file. If you’re running your site as https, then change URL to https.

5) using the info from my previous post in this thread; remove the section in the functions.php file which loads the Google fonts – so the old “calls” to the Google fonts won’t “print” on your HTML pages.

6) finally, if necessary, make sure you have all the font selections in the theme panel set to “default” as choosing any Google font won’t work, obviously

And obviously you would want to ensure your caching is off, mod_Pagespeed is ‘off’ if using that, and you’d likely need to clear your cache in your web browser and hit refresh couple of times to see the site properly with the change.

Kaboom! Mischief managed.

Sort of fixed #3 with custom CSS

.header-content-rec{padding-bottom:15px; margin-bottom:10px;}

Yes, that’s to be expected, because the default settings are not what you want. Those include minifying CSS and JS, which will not work with this theme. Please read the docs or the dozens of forum posts on the subject… The plugin and the theme are not incompatible, and if you want the speed you’re looking for, you need a caching plugin!

There are other plugins that don’t even have options for minifying, such as WP Super Cache. But they’ll have other kinks to work out…

Yes, you need to load the google fonts css at end of your style.css file and remove calls to google from your functions.php file

Yes, I see that also. The “z-index” for the mega menu appears to be lower than the Google ad when you have the logo + ad below menu setup.

[menu]
[logo][ad]

You likely need to increase the z-index for the mega-menu. I’m not using the mega-menu at this time, so not sure what class would need to be wrapped, and added to the custom CSS panel.

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your page has 6 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:
http://fonts.googleapis.com/…-ext,greek,vietnamese,latin-ext,cyrillic
http://fonts.googleapis.com/…c-ext,greek-ext,greek,latin-ext,cyrillic
http://fonts.googleapis.com/…et=latin,cyrillic-ext,latin-ext,cyrillic
http://fonts.googleapis.com/…swald:400,300,700&subset=latin,latin-ext
http://fonts.googleapis.com/…-ext,greek,vietnamese,latin-ext,cyrillic
http://fonts.googleapis.com/…ily=Vollkorn:400italic,700italic,400,700

How To fix this ?

Sorry, but you should without question use a cache. It will only mess things up for your visitors if you use the wrong settings. W3 Total Cache without minifying javascript or CSS is safe. This issue has been brought up and this solution recommended in Newspaper’s docs and the forum many times. 🙂 It will pretty much do a page cache, expiry headers, and basic (but highly necessary) compression.

W3 Total Cache can also be combined with a service like Cloudflare, which serves your site to visitors from its servers rather than your own. It speeds up delivery of some resources and helps with your server response time. (Pagespeed reports that your server responded in a massive 3.7 seconds.) I use this setup too.

A plugin like EWWW Image Optimizer will help with your optimize images problem. Note that you’ll want to do a one-time bulk optimization of your media library, which will take a long time, but after that it should just optimize on upload.

Feel free to ask for more details on the above steps. Once you try all of them, check your scores again. They will have greatly improved.

These are the steps that require little or no technical knowledge, but uf you still need more, start reading the excellent posts by Christopher Simmons and others in the sticky Pagespeed thread.

Best of luck!

No problem. 🙂

<LOL>
welcome to my world; I did the same thing!

I might switch it back on at some point, but right now I found with good optimizations, mod_pagespeed, and decent speed server, the CDN caused more problems. My fave was the CSS not loading for FontAwesome in IE11/Win7-64 totally randomly. (sigh)

Some people have great success with using a CDN, though. It gets even tricker when going to https, which we’re doing now, where you need SSL cert for CDN, wildcard SSL cert for your domain to use a subdomain like cdn.mysite.xyz with A/C name record, and then sharding and/or domain origin mapping with mod_pagespeed …. ouch!

(for those tuning in …. not responsible for your head exploding reading that last paragraph! 🙂 )

Hi Christopher,

I tried almost everything. But the issue is either theme or mod_pagespeed is scaling images from css and not using thumbnails.

What should i do?

Maddy

Thanks, that fixed the problem! Funny how simple stuff frequently causes the biggest issues. I appreciate your help!

Try adding the !important tag to each rule:

background-color: #fff !important;

etc.

Lucian:

I don’t know what I did wrong. Please check these:

1. I removed the code from
https://www.evernote.com/shard/s250/sh/1e344332-217f-4bad-8654-521d220cbb5c/c4fc56dee9387eac0a7cacaf53a23047

2. I pasted the new code and changed the class from “span9″ to “span8″
https://www.evernote.com/shard/s250/sh/cf1d922b-94f1-49aa-986d-3002a52fcb58/5a9086d96f63d8473f46dd618ab1cda9

3. I Added the css
https://www.evernote.com/shard/s250/sh/a6430983-feef-4141-8dd4-c2b3e49409ab/56e5f0eb455d5e61cde62736d62830cb

4. And now you can see that the search box is not in the top menu or any other place.

https://www.evernote.com/shard/s250/sh/39731376-6a1f-4287-8eeb-429ce4583d4a/62f7eef8c907c8284c96d704bbb3b2ad

You can also see that the last category is being push below.

Any help will be greatly appreciated.

Thanks.

Yes, it was in my theme panel. I moved all the code from theme panel an added it to css file and with iphone it’s ok now..the same with Opera, but i don’t know what else to do, maybe it won’t be a big problem for users i hope.
I’ll try one more thing, to move all this code to main theme..

Btw, when i add or change something in theme panel all this code appears pretty much on the top of my source. So maybe for speed it’s better to add it to css file? What would you suggest about it?