- 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
Hi,
I installed the update from v1.2 to v1.7.2 and the theme is completely broken now. I only had one (search box) bug before installing the update. Now the whole theme seems to be broken after installing the new version.
It looks to be an HTML/CSS problem but I’m no coder so I don’t know what the problem is or how to fix it nor what even to look for.
Can a nice support person please help me out?
Thanks,
Hi there – I have discovered that error occurred because of a duplicate css style – I hadn’t changed the style but it was present in my child theme style sheet. Once I removed it the icons show up.
However – is there a way to change the colour of the icons to white? Or will I need to replace the images to do that?
Hello,
Each post have a unique ID http://screencast.com/t/qaIFAFkXak48, use it to make the CSS only for that post.
You can chose to make it full width(no sidebar) from post edit. Hide the author box from CSS using the unique ID like:
.postid-2745 .author-box-wrap {
display: none;
}Thanks for the message!
Hello,
Yes, you can add it in style.css and replace the font where you want.
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
Thanks for the message!
Hello,
Add this in style.css
.entry-date {
padding-right: 10px;
}Change like here: http://screencast.com/t/tfmVQGlWV4j
Thanks
Hello,
Here is the style for your title like it is now on you site. This should replace the default widgets style like yours. Add it in style.css
.widget .block-title {
border-bottom: 2px solid #3E423E !important;
}
.widget .block-title span {
background-color: transparent !important;
color: #BF1313 !important;
font-family: 'Oswald' !important;
font-size: 21px !important;
padding-bottom: 3px !important;
padding-left: 0 !important;
padding-top: 0 !important;
}Hope this help. Thanks
Just for a point of reference on our test site under development, with 1.7.2, and no caching or tagdiv/optimizer plugin enabled. This is neither a complaint, nor solution, just an indicator of another look at “speed” on a “typical” review article page online, based in U.S.
Test article page
http://ga-ga.com/785/discwatcher-watching-films-at-home-spring-2013-a-good-day-to-die-hard/
Google Page Speed = 96 / YSlow 73* (desktop; not showing mobile results)
Page load time: 6.46s
Total page size: 2.19MB
Total number of requests: 106
*NOTE: huge number of “errors” due to GOOGLE ads/cookies/etc. with embedded YouTube video and two AdSense ads (top/right) and social media crap. Unrelated to theme.
PAGE HAS: 3 large images in article; two content blocks right side with 3 thumbnails each (6 images) and the 2 related content items below story. Total 11 images plus gravatar, and 2 logos.
14 images, 2 ads, youtube video; Google Page Speed “96” — not too shabby!
Main issues have to do with Google elements, and social media stuff. One javascript file could be compressed; YSlow hates the @style load of CSS via child theme (sigh). Images could be slightly more compressed (option to set compression level via functions file?).
For those looking at Google Page Speed vs “load time” or “payload” … ALWAYS test your “page speed” with AdSense stuff removed or you will always get upset with any WP site ranking/rating/testing. In our case, the above “96” with Google Page Speed is pretty amazing, frankly. 6 second load time, not so much (anything over 4 sec would be considered “bad” these days), but caching plugin and CDN may help with that immensely. Yslow pretty much “demands” a CDN for top speed ranking.
Our goal is 3 sec. max time for a page like that (avg 2.6 sec would be acceptable based on how some of our other sites work) and if/when I get to that, I’ll share our method of optimization, if anybody will want to know.
— PLUGINS:
* all jetpack OFF
* WP-Optimize (speed up your DB by optimizing it!)
* Akismet with site license
* Limit Login Attempts (a must!)
* Regenerate thumbnails
* WordPress SEO by Yoast
* bare minimum tagdiv provided plugins (e.g., animated GIF resize)
OK I beleive I have found the error. All set now. Thank you.
I have now lost all the edits i have done to the CSS.
Not sure what has happened but i use to have an edit CSS option under my apprearance setings for the them and now its missing?
Hi TagDiv guys-
Other than editing the CSS, is the a way to add a font library from fonts.com to the theme? We’ve licensed a set of fonts that we want to use with the Newspaper theme.
Thank you!
Jack
Hello,
Just edit td_module_x.php and de-comment this line http://screencast.com/t/1U3XLv4id
To change the color of the date just add this in style.css and change to color you want
.entry-date {
color: #777777;
}Thanks for the message!
Ah, I think I can realize this with the “no sidebar” option, css and caption. 🙂
Offminded, where did you put that .widget ? In the child theme css?
Hello,
I see you have added on post, to align with other social inline add this in style.css
.td-social-sharing ul li {
display: inline-block !important;
}
.td-social-vkontakte #vk_like {
width: 120px !important;
}Thanks
Hey, is there a way to setup a link on mobile to drop the responsive css file, so users can choose if they want the responsive design or not?
Thanks
Jake
Hello,
Menu color can be changed easily via CSS like
.sf-menu li a {
color: white !important;
}but you have to change the color for images to is in \images\sprite\eements.png
If you use style 3 the link for the logo is here: http://screencast.com/t/hp1LEjwD
Hello,
Please can you give me you liste url to see about what background do you ask. You can try with display:none from CSS to hide it on mobile using the style in this:
/* responsive phone */
@media (max-width: 767px) {
}Thanks
Hello,
Thiss css will be applied only on that resolution from 768px to 1018
/* responsive portrait tablet */
@media (min-width: 768px) and (max-width: 1018px) {
you css here
}here are all the rules that we use:
/* responsive portrait tablet */
@media (min-width: 768px) and (max-width: 1018px) {
}
/* responsive monitor */
@media (min-width: 1200px) {
}
/* responsive phone */
@media (max-width: 767px) {
}Just heads up to folks worrying about page speed, one great resource you may already be aware of is my friends at GT in Canada who built a neat testing tool years back, here: http://gtmetrix.com/
Paste in any page URL from your site, such as a post page, and it will tell your speed scores with Google PageSpeed and Yahoo Yslow – but also give you suggestions on various things you can fix; particularly useful is looking at number of calls for some plugins that “dial out” for avatars, social media, etc.
Keeping in mind that most WP themes may have too many calls to CSS files, and some plugins add more, which they shouldn’t (I’ve got one called ‘external links’ right now, and not using any of the CSS in the plugin, but he still loads another style sheet, not needed – having to bug him to remove that …) …
Anyway… it’s a good reference to some of the issues folks run into prior to optimization. YOu can create free account, then run a scan, and then when you tweak, you can come back and rerun test, and see improvements over time.
It’s more useful than running Google Page Speed insights, as it actually provides tips and exmaples on how to actually address each issue, along with explanations – which Google does in a roundabout or confusing way or not at all (meaning Google penalizes your page speed for their own AdSense content … which is hilarious … “you should fix this” – and it’s their content that needs fix!).
I’ve spent 3 months optimizing our main business site (not using WordPress) which has been an adventure; now starting on the WordPress stuff.
I can tell you from experience that Radu and co are doing an amazing job with optimization within the confines of the WordPress setup which inherently has numerous flaws for SEO, like the method for CSS redirect used in the child themes (WP core devs keep using a method not recommended by the rest of the universe … for example).
So, there is a *lot* going on with WP, which *no* theme maker can fully address, only tweak and you need to research common problems and workarounds for *ALL* WP based installs when concerned with Page Speed.
For instance, I do *NOT* use JetPack myself as it “phones home” all over the place and slows things down. SO, every little spinning widget and flashing light and cannon blasting all slow down the page. If you want the most speed with WP, you need to have the simplest layout possible, ala Newspaper, for this kind of site, and then optimize the heck out of all your images, minimize anything that calls out to other sites (like FB comments box), certain JetPack things, and anything that doesn’t run in async with javascript, and avoid plugins which add more CSS style sheets and can’t inherent code, or properly write custom CSS into the head INLINE, not as yet another external style sheet!
Just some suggestions, somebody may find useful as a WP user since 2005, and webdev since 1994.
Hi,
Thank you exactly what I was looking for.
Can you give me some more info on this responsive css.
@media (min-width: 768px) and (max-width: 1018px)
Can I change the width value ie 768px? or are these fixed values
are there other things like @media to know about.
I have very little experience with this new kind of css @ thing
Thank you
Thnx. I just add it to the style.css at the end? Do I need to add that everytime I insert a widdet to the side bar?
Hello,
Add this in style.css
.header-style-3 .td-grid-wrap,
.header-style-3 .container-fluid {
padding: 0px;
}Thanks
Hello,
Add this to style.css to fix the Welcome widget space
.widget_sp_image {
margin-bottom: 43px;
}Go to Theme customizer -> Post settings and there you have this option http://screencast.com/t/qRr37ej4Sk
Thanks
Perfect, thanks for all your help.
