- NewspaperCreate Custom Code with the browser’s Inspector or the Live CSS Box
- NewspaperScroll Animation
- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- NewspaperHow to setup Twitch for Social Counter
- NewspaperModal Popup
- NewspaperFlex Block Settings Guide
- NewspaperAutoptimize Plugin – install and configuration
- NewspaperAdding Multiple Authors to Your Articles
- NewspaperDesign your Post Pages using the Cloud Library Templates
- NewspaperBig Grid Flex Settings
- NewspapertagDiv Composer Tutorial
- NewspaperTheme modules and blocks
- NewspaperThe Mobile Theme
- NewspaperCompare theme files – Winmerge tutorial
- NewspaperUsing Other Ads
- NewspaperBlock settings tutorial
- Using custom fonts
- Using typekit fonts
- NewspaperChild Theme Support
- NewspaperHow to Make the Site Faster
Hey!
I chose to use Amazon’s CloudFront since I already have Amazon account and they bill my card on file (I think December was $0.98). CloudFront works well, aside from this pesky issue with Font Awesome 4, which I’m getting same issue from boostrapCDN (free) — sometimes the icons won’t load in IE10/11 or Firefox (both on Windows) for no good reason.
Anywayyyyyy….. in my case I’m using S3+CloudFront since my brother’s company (in the educational software business) uses it, a lot of folks have been testing running WP sites virtually entirely in their cloud (!), and I’ve got a nice app called Cloudberry S3 Explorer which works as both bulk FTP, header settings for expirations, ACL/Public settings, and CloudFront invalidations. So, it was just kind of the best choice. Right now only loading CSS, JS, fonts, static images (logos, little things like BBB bug, etc.). Not yet using for WP.
Upshot … I think folks would likely spend the 30-cents vs free to “test” both for speed.
In my case I did test couple of things against CloudFlare and where I’m at there was couple of msec saved, so seemed worth it to just use Amazon since I know they’re not going to disappear, or get bought by Google and squashed or anything else with other cloud stuff might throw out there. I’m also inherently suspicious of anything “free” as that is no business model, and I need reliable here today, here tomorrow setup for our main business site. So, $1 a month to count on it, vs “free” and might be gone without warning. Was easy choice for me.
Haven’t yet done anything with the WP stuff as waiting for Newspaper “3” if it will have classic WP ‘header.php’ file where I can just point a bunch of the CSS/JS stuff at the CDN without hacking something that will then need re-hacking in 2 weeks.
I also did some research on some articles around and since I don’t need SSL off the cloud (after all I have my own damn server!), this was food for thought:
http://robin.userapp.io/post/66094840975/finding-the-right-cdn-for-our-startup-maxcdn
Thanks for the help Marius, it works like a charm.
I also fixed another thing after i did what you said (for the people who want to do the same).
The height was now 483px because of 3 column slider layout instead of 2 column slider layout on category pages. If you just use css to fix this you cut the image.
Here is what i did:
I changed the image the slider will use in includes/app/modules/td_module_slide.php on line 43.
$buffy .= $this->get_image(‘art-slide-big’);
change to:
$buffy .= $this->get_image(‘art-slide-med’);
After this i changed all the heights for the css class .iosSlider-col-3, .iosSlider-col-3 .item.
You can copy the heights from the css class .iosSlider-col-2, .iosSlider-col-2 .item for the correct heights.
Thanks again for the help Marius.
Hello,
What you can do is to use Homepage – with article list, leave the page builder empty, and add the slider directly in file like here: http://screencast.com/t/GQwjEwdEnX
echo do_shortcode('[vc_row][vc_column width="1/1"][td_slide hide_title="hide_title" limit="5"][/vc_column][/vc_row]');
Add a slider in page builder, configure it, then switch to classic editor and take the shortcode and use it live above.
Than you have to add some css to fix the height of the slider like:
@media (min-width: 768px) and (max-width: 1018px) {
.iosSlider-col-3, .iosSlider-col-3 .item {
height: 310px !important;
}
Hope this help!
Thanks!
}
Hello,
Can be changed via CSS, we will add as an option in admin panel in the next update v3 this week.
If you want sooner, we can provide you a custom CSS. Please give me your site URL to inspect it.
Thanks for the message!
Hello,
You can fix with a css. to remove the space add this in style.cs
.page .meta-info {
display:none;
}
can you show me you site to see the issue.
Thanks!
@Octavian
nice!!
I’ve been sidetracked the past week trying to sort out the random issues with Amazon’s CDN where randomly the font awesome CSS won’t load in IE11 or Firefox on Windows, leaving unstyled elements on our business site; and now the background for one sub-head divider won’t load the background image when using either ../assets/img/filename.gif or the full explicit URL in style sheet. Makes no sense. Went back to loading the FA2 fonts from our own server. Sigh. (This applies to our business site, not the magazine sites; the business site doesn’t use WP for main content, so a bit more flexible; pages are static to begin with so full page caching not needed, obviously.)
As to the WordPress stuff… we’re not using a true “page cache” yet, just the mod_pagespeed caching of page “elements” and not yet using a CDN for the CSS/JS. But this page is not bad; testing a typical article page sans a YouTube video or the AdSense elements but with AddThis in place to see how at least one “pagespeed stumbler” impacts ratings.
http://gtmetrix.com/reports/ga-ga.com/IyjAjIea
GPS: 97 (“A”) / YSLOW 90 (“A”)
Page load time: 1.29s
Total page size: 425KB
Total number of requests: 41
So, 1.29 seconds without page cache or CDN is pretty much not bad as starting point for us, which I could live with before the “next level.”
I’m not yet doing anything further until the new version of the theme drops from Radu’s magic labs.
Apparently for our WP sites, we’ll likely end up using “Varnish” on the server, to manage static pages locally, in front of mod_pagespeed, which peeps tell me is “how it’s done.” That is what is going to get the pages loading in the sub-second range. I may retry the caching plugins for WP to save local copies as I think mod_pagespeed can rewrite the pre-cache or post-cache copy, but still unclear on that. Not sure what Varnish will do to our ecom system or other stuff, so having enough fun with one thing before suffering another.
Great job on the speed!!! 🙂 YOWZZA!
It’s easy, you just look for the parent div of the slider and you add the following css:
-webkit-box-shadow: 0 0 35px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 35px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 35px rgba(0, 0, 0, 0.5);
Evidently, you can tweak that for your liking…colors, thickness etc
Hello,
You can make this from CSS. There are 2 logos, one in menu, and one above the menu that is with display:none(hidden)
Hidde the logo from menu and display the logo above the menu(with display:block)
For ad, go to Theme option -> Google adsense and add on phones.
To do the CSS for the logo inspect your site using Firefox or Chrome inspector.
Thanks for the message!
Hello,
1. That font FFFFFF in content brake the layout. Is some HTML tags unclosed.
Please remove that font properties and we will give you a CSS to make the text from footer white.
2. The issue with that title is from template, use Homepage blanks template.
Thanks for the message!
Hello,
You can do this with some custom CSS.
Use inspector from Firefox or Chrome, and change the color from css for each item from menu.
Thanks for the message!
Hello,
our theme customizer uses inline css to change colors on demand. For example when you change the accent color of the theme, the theme will change it’s color. With inline css is the only way to provide user customizable colors. If you leave all the default settings the theme will not generate inline css.
Hope this explains a bit… 🙂
Hi, the “next” pages work on both of my sites running theme with only the core set of plugins (no Jetpack!), plus using AddThis, AdSense ads, and no insert of ads in content (only header + sidebar).
Usually this “error” is from modifying a page, using a child theme with a bad addition to the functions file, or a conflicting CSS element from another plugin.
On one of my old themes, I also had another navigation plugin running from a prior theme and forgot to turn that off, and so it broke it.
Not sure if any of that helps. But it does work properly on both our test magazine site and a live production site (2004 site updated for 2014 with this theme) without any trouble, which implies a local issue vs a theme specific issue.
On another theme I found going to the admin > settings > permalinks and resaving the permalinks actually helped. Which is bizarre, but there you go.
Hello,
Is not possible, we can make changes only in css, sorry for the inconvenience! If you want, you can try from CSS to move the title above the image, but I’m not sure is possible easily.
Thanks for understanding!
Have a nice day!
Hello,
I check and they changed the selector from body. I will fix it for the next update, until that i make a style.css for you, please backup you style.css and replace it with this.
http://tagdiv.com/theme/users/style.zip
Thanks for the message!
Hi! First of all – I think this is a great theme and I am very curious how its gonna be developed 🙂
But a friend of mine took a look at it and talked about “Inline CSS” – he found it in the theme and claimed it to be not good? What is this?
Hello,
The best is to use the Child theme. What you have to do is to activate the Child theme and add you custom css, should work.
Check you css to be correct or use !important if the css not work.
Thanks!
I think in the readme for the tagdiv plugin, he says something about the colors not sticking for customization.
The “flash of unstyled” content is usually a sign something is loading before something else, so you see one version before other fully loads. I run into this with custom fonts, and sometimes with a style color. The tagdiv plugin is basically queing up the elements to load faster, but this can cause oddities based on “order things load.” It’s a trade off at the moment for speed vs compatibility — and with caching, your browser (especially chrome) may keep the one style, before it gets to the next style which has the custom colors.
Not technically a bug. I’m running the plugin and seems to work okay I hacked my colors.
(HINT: actual fix is to edit the default blue in the style.css file or wherever that element thing is so that the “over ride” color is in fact the “default” color.)
“tagDiv speed booster is still in beta! Currently it is affecting the theme customizer and probably some plugins. This plugin is for advanced users only. We are still working on it.”
I was wondering if there was an easy way to remove the Author Info? I saw a previous post on this; however, it did not help me.
I have also tried adding the following to the style.css and this did not help as well.
.author-info {
display: none;
}
Thank you in advance for your help!
Hello,
Try this css, add it in style.css
@media (max-width: 767px) {
.td_mod9 .item-details {
margin-left: 0px !important;
}
.td_mod9 .thumb-wrap .entry-thumb {
max-height: none !important;
max-width: 100% !important;
height: auto;
width: auto;
position: relative;
margin-bottom: 15px;
}
}Thanks for the message!
Thanks!
Its a site I am developing on a sub-domain
http://develop.alltomtrav.info
Whats the best? To do it in original CSS or the Child Theme?
It seems that I can not get the Child Theme to work…
Hello,
Add this in style.css
.td_980_resp .td-full-logo .td-grid-wrap {
padding-top: 0px !important;
}
.td_980_resp .td-full-logo img {
padding-top: 0px !important;
}and make the logo at 996px if you want to be full on width.
For slider add this in style.css
.td-page-wrap .iosSlider-col-2, .iosSlider-col-2 .item {
height: 321px !important;
}Thanks for the message!
Hello,
Can be reduced via CSS. You can inspect it in Firefox, or Chrome with inspector and add your custom css in style.css.
If you don’t manage it, give me you site URL to take a look.
Thanks for the message!
Hello,
That require some custom work, can be changed a little via CSS. If you want you can try to find a freelancer for custom work.
Thanks for understanding!
Hello,
I can’t find how to reduce the space above the header : http://hpics.li/a372059
I use the Full responsive (980px) and when I make the change in the CSS, it reduce the space between the menu and the slider too : http://hpics.li/88f35dc
What should I do ?
Thanks.
Hi, Radu
that would be awesome. I switched from using the child theme so as to not impact my pagespeed adventures, and so the custom CSS I put at bottom of style.css didn’t have an impact in the way the child/style.css did. Being able to tweak a few things here or there with either a custom.css file, or perhaps more appropriately these days a “hook” to drop some code in the head at bottom before the body tag (Woo Themes does this fairly well, btw; they have all these little ‘hook’ locations to drop in code, although it does add a slew of if/then crap; disclosure we’re trying to ramp up your theme to replace Woo Canvas!).
So for us to be semi-done and in full “go mode” my laundry list of stuff needed is simply:
1) Google async alignment in top bar
2) websafe fonts option – which would save me hacking that one
3) custom.css injection hook in head, to over-ride couple of minor things (like making the author box bio text size smaller, when making the post side larger so the author bio isn’t over-large from the base adjustment)
4) not critical; but option to have a local image for author box (add new user meta field for ‘author image’ — we used to do this on our in house theme, not difficult) to not pull gravatar and save some bandwidth from external site — if you wanted to wow the kids, you could add a “grab my image from gravatar” option 😉 Peeps love the “automagical” stuff.
Otherwise, for us — you’re done! I’m hoping the v3 won’t introduce new issues, but right now we’re very happy.
BTW: for ‘web safe’ fonts, Adobe came up with some really quite brilliant ‘stacks’ of the best font mix to use across Mac, Windows, iOS, Android, et al. They can be found in Dreamweaver, and possibly their help system – but if you need those, just let me know. Much nicer than the old skool ‘Helvetica, arial, sans-serif’ stack. 🙂
