Search Results for 'css'

Just to share some experiences improving site speed for the many who post here to discuss…

What I’ve also done (My site is an independent ‘hyperlocal’ news site – slightly bigger than hyperlocal really) which I think is good practice given FB Instant Articles and AMP (Already on Apple News for almost a year now) is almost ‘forget the desktop’ exists.

Due to 75%+ mobile visitors it seems good practice (if a ‘live’ news site with say 100+ articles per week) to get the site as fast and safe as possible – this may help others

– I’ve removed all home page blocks except ‘ticker’ – a lightweight grid with no slider- and a sidebar
– Removed all plugins or deactivated ones no required all the time
– Implemented Chris S .htaccess and functions.php tips exactly as described – inc image resizing
– Paid Cloudflare with page rules to remove wp-admin etc- following TagDiv recommendation settings except RocketLoader ON – Mirage in ON
– Removed my subscriber pop-up and won’t use one – promote subscriptions via another route – FB ads – Twitter ads perhaps
– Removed SumoMe and anything that fetches CSS externally
– I do run UberMenu on main site and ShiftNav on mobile (for a better user experience) – But run NO mega menu or dropdowns
– Currently RocketLoader (Cloudflare) runs and doesn’t break anything
– Only added Google Analytics via YoastSEO not on Theme Panel box – it’s there and working
– ADDED a user text box to point people to how to navigate the site – believe it or not saying ‘Press load more or click coloured category labels or main menu’ actually gets visitors to do that!

Results –

Before – GTMetrix – PageSpeed B YSlow C Page size (Homepage) 3.2MB Requests – 187 – Load time – about 7-10 secs
Pingdom 5-7 seconds

After – Page Speed A (96%) YSlow B (82%) Page size (Homepage) 1.2MB Requests 96 – Load time – 2 secs
Pingdom 700ms-1.3 secs

The theme still looks great on desktop but it’s not worth getting caught up in the aesthetics if the visitors aren’t looking at the pretty views – it looks brilliant on mobile and that’s what matters.

westbridgfordwire.com

Hi

The Facebook button can’t be targeted with css from “outside” as it’s generated within an iframe and its style is set by facebuk plugin: http://screencast.com/t/A8fsMQIo7kZH unfortunatel I can’t provide a solution now as the theme can’t control this button’s layout, sorry.

Thanks!

I finally found another post similar to what I wanted to do. You can use custom CSS to do this as follows:

Go to Newspaper -> Custom Code -> Custom CSS and insert something similar to this:

.td-header-style-9 .td-logo-wrap-full
{
background: url(“<your full path>/header-image.jpg”) no-repeat center;
background-size: 1075px 150px;
}

It scales well on all devices too. Hopefully this will help someone else.

Hm. Prefer to do this as a function, by de-enqueuing the hook, and I think I “might” have that sorted. And of course we don’t want anything minified by a plugin as we do that properly for static files for both js and css ahead of time …

Good thought, though, THANKS — appreciate the feedback! 🙂

We will be using WP Super Cache for this particular in house project.

I think I might have it sorted by doing a de-enqueue function, de-register, in functions.php — so just need to test that.

Have 99% on GTMetrix and down to 1.1 sec with photo and https but no caching plugin! — but only 92 desktop and 78 mobile on Google’s PageSpeed Insights test directly, due to the pesky render blocking crap. If I can get that damn last css file to footer, I’ll be in the home stretch.

Trying really hard to get WordPress to be as fast as our static main part of site where we have 100/100 out of all 3 tests with Google PSI. I’ll get there!! 🙂

If you are using “W3 total cache” or whiling to start you can do it with it.
Go to Performane – Minify (don’t worry no need to minify them), insert the url of the css and choose embed to footer from the dropdown.
That’s it.
You can do it for any css or js in the page.

Well it works for me too. Just go to Theme Panel > Custom Code > Custom CSS, and the code mentioned above.

HI,

1.
I forgot to mention – that im – NOT – using the VC Plugin!!!

2. Firebug says, there is a error:

ReferenceError: jQuery is not defined
var html_jquery_obj = jQuery('html');

3. Part of my sourcecode where you can see the scripts in the footer area just above the script with the error:

<script type='text/javascript' defer="defer" src='http://justatestsiteforyouname.com/wp-includes/js/admin-bar.min.js'></script>
<script type='text/javascript' defer="defer" src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script type='text/javascript' defer="defer" src='https://cdn.jsdelivr.net/jquery.migrate/1.2.1/jquery-migrate.min.js'></script>
<script type='text/javascript' defer="defer" src='http:/justatestsiteforyouname.com/wp-content/themes/justatest/js/tagdiv_theme.js'></script>

<!-- JS generated by theme -->

<script>

		(function(){
			var html_jquery_obj = jQuery('html');

			if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) {

				var path = 'http://justatestsiteforyouname.com/wp-content/themes/justatest-child/style.css';

				jQuery.get(path, function(data) {

					var str_split_separator = '#td_css_split_separator';
					var arr_splits = data.split(str_split_separator);
					var arr_length = arr_splits.length;

					if (arr_length > 1) {

						var dir_path = 'http://justatestsiteforyouname.com/wp-content/themes/justatest';
						var splited_css = '';

						for (var i = 0; i < arr_length; i++) {
							if (i > 0) {
								arr_splits[i] = str_split_separator + ' ' + arr_splits[i];
							}
							//jQuery('head').append('<style>' + arr_splits[i] + '</style>');

							var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) {
								return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm,'');
							});

							splited_css += "<style>" + formated_str + "</style>";
						}

						var td_theme_css = jQuery('link#td-theme-css');

						if (td_theme_css.length) {
							td_theme_css.after(splited_css);
						}
					}
				});
			}
		})();

	
	
</script>

4. When i exclude the defer loading of the jquery.min.js file – the error gone!

5. I think this can help http://stackoverflow.com/a/33205519 – please also look at the other answers.
But i dont know how to fix it.

6. If you can help me out, it would be awesome!

Thank you so much

• This reply was modified 10 years by newtag.
• This reply was modified 10 years by newtag.
• This reply was modified 10 years by newtag.

I’m not quite sure you are understanding my comment.
I have a site. I’m using the newspaper theme. I use custom fonts as explained in your tutorials. For the user it works fine, but source code is a mess. You can look at the sourcecode of http://sozialmarketing.de/ lines 215 to 806 are filled with CSS @font-face instructions.

Since in the Theme setting there are only three custom font files it is not neccessary to include nearly one hundred of them.

So my question is either if I have done something wrong and there is a way that all this can be merged in a css file? Or if it’s a bug or a problem with other plugins? Or if it’s bad coding?

Hello Andrei,

Thanks for the above.

Yes, the email that was last sent was the one I am referring to. Please let me know if there has been a reply as there is usually a lag with my emails.

Looking forward to the next update.
In the meantime, could you point me to where I can find the CSS for the Mobile Menu? I would like to make changes to the style.

Thanks.