- 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
Hello
Two questions about the mobile theme please:
1. Can we control the design of the “related articles” at the bottom underneath the article?
2. It seems like the custom CSS code we enter in the theme panel under “WRITE YOUR OWN CSS HERE” in the mobile section, does not work.
Where would be the best place to hard-code in-line styles and Javascript codes for the mobile view of the theme?
The theme is working excellent!
In the live preview demos of the theme with the “news ticker” Visual Composer feature, the ticker is equidistant from the blocks and the menu. No matter how I change the spacings within the Visual Composer I can’t get this to happen. Is there some custom CSS I need to add in the Theme Pannel to make this possible for the homepage only? Specifically just editing the pixels from menu on the top of the homepage? (Spacing good on all other pages) Thanks!
Hi Guys,
Currently I have both the Author name and date displayed at the top of the post. The format for how they are displayed is as follows:
“By Author Name – Date”
Is there any CSS code I can use to change the format to the following:
“By Author Name | Date”
It’s a small thing, but I’d prefer to use the vertical line rather than the dash.
Thanks so much!
Dave
Whenever you insert a Youtube code ( such as ….https://youtu.be/lGjYcU0Y_0Y…)into the relevant box in the post, it plays perfectly well. The problem is at the end of this video, Youtube adds up other related videos on your screen. They do say on. This does not sound professional.
Searching online for a solution to this problem, I was provided with relevant instructions. I was told to
1. go back to Youtube
2. click share—-and then embed
3. The result is this code …..<iframe width=”560″ height=”315″ src=”https://www.youtube-nocookie.com/embed/lGjYcU0Y_0Y” frameborder=”0″ allowfullscreen></iframe> ( This code has been designed for the kind of post where there is not a <iframe…to host the video. In the case of your post, the most appropriate code is ….https://youtu.be/lGjYcU0Y_0Y…) Therefore, using the new code would be problematic as we shall see.
4. After that I am told to click ‘SHOW MORE’
5. By clicking on, I have a series of options
I was basically told that this particular problem arises from the fact that this first statement that reads….Show suggested videos when the video finishes.. has been clicked. If you remove the click, Youtube modifies its code.
6. The new code reads…<iframe width=”560″ height=”315″ src=”https://www.youtube-nocookie.com/embed/lGjYcU0Y_0Y?rel=0″ frameborder=”0″ allowfullscreen></if…
Two major additional elements are introduced in the make up of the first code:
– rel=0 is the culprit cookie. It has been added up to connect the video back to other unrelated videos in Youtube. That is not all.
– the new code has also this bit…nocookie.com/embed/…that is inserted in the final code. As a result, having included the two additional elements, the new code …<iframe width=”560″ height=”315″ src=”https://www.youtube-nocookie.com/embed/lGjYcU0Y_0Y?rel=0″ frameborder=”0″ allowfullscreen></if…could be copied and pasted into the post or the box where the Youtube should be placed.
Unfortunately, your post accept the code formatted in this way…https://youtu.be/lGjYcU0Y_0Y
Therefore, my impression was if I correct the new code, it will be something like this…https://www.youtube-nocookie.com/embed/lGjYcU0Y_0Y?rel=0… Yet, it was rejected by the post. Another option was to remove or replace nocookie.com/embed/ and see what will happen. I have run into the same problem of the video not playing.
WHAT ARE APPROPRIATE SOLUTIONS?
1. I am not good at playing around with your in-built CSS file and other related files. So, I don’t want to make a mess of the whole website.
Can you help me out?
Thanks
Boke
Hi,
Style.css is in the main theme folder, but any css modification is easier to make in the theme panel-> custom css box.
Try to add this code in the custom css box in the theme panel:
.td-grid-style-4 .entry-title{
background-color: rgba(0, 102, 153, 0.7)!important;
}
Thank you!
Thank you very much. I have done what you told me and it’s right. I have modified two files: td_social_icons.php and style.css.
Now I need to know where I have to create the new icon. How can I do it?
Another thing. In the next updates, how can I maintain the modified files?. I have installed and activated Newspaper-child. Can this solve it?
Best
Thanks lot Aron,
Please guide me where can I find “style.css”
Hello Gadgetsay,
Please try the code below and place it in Theme panel->Custom CSS area.
.td-a-rec-id-content_top{
text-align:initial;
}
The result -> http://screencast.com/t/3Ooa3wFWBy
Thanks.
Hi
You can use category’s name as a css class to set a specific background for one category, the code will look like in this example:
.category-"cat-name" .td-category-header .td-container {
background-image: url("image-url");
}
Thanks!
Hello wordnow,
In this case, please try to use the Text with Title + Video Player element from Visual Composer if you want that your title to be underlined and that it have the same style as in this example -> http://screencast.com/t/dQjOuRLc -> http://screencast.com/t/FJZHOBKpsilm For better results, then you should use a bit of CSS to remove some padding bottom and the result you should see here -> http://screencast.com/t/kZKdL9dv8
The code is ->
.td_block_text_with_title {
padding-bottom: 0;
}
Hope this helps!
Thanks for your understanding!
Hi, sorry if my reply sounded mean 🙂
Critical CSS is the “needed CSS” to render the above the fold content. Which might only be 20% of the CSS loaded for entire page, but when loaded inline with every page the page itself is a little bigger, but the browser doesn’t need to wait for ANY of the css and js files. This is the only way I’ve found to fully eliminate the “render blocking” message from Pagespeed Insights.
While the SpeedBooster plugin does pretty good job of moving stuff to footer (and I presume you know how to look at your page source to see if that actually happened, and WHAT is being loaded in the header), as I stated in many cases with WP, you cannot just move everything to the footer as then nothing actually loads until you get there.
TagDiv are doing a “sort of” version of this by front loading some of the CSS, and then moving the stuff to footer; but if you still get the message then it means this “scheme” didn’t quite work, and not really their fault — it will NOT work for everyone; even if they can do it with some (ahem, not all) of their demos.
Go test their demo post for example, see what happens 😉
So, the trick is to use a custom css “critical css generator” that scans your post and then figure out WHAT needs to load first “critical” in the sense it’s needed to load the page BEFORE all the css/js crap in the footer.
For this example “critical” would be defined as :
critical
· adj.
having a decisive importance in the success or failure of something.
So … TagDiv might want to — and will — weigh in as part of their lovely support effort, but you should concentrate on ALL OTHER pagespeed elements, and leave that one thing for last. Or it will drive you insane until you just learn how to get the “critical CSS’ added to the header.php file right above the body tag. Seriously. Been there. 🙂
I’m just trying to follow their guidelines per the link I put above…I haven’t made it to your post yet, this isn’t my speciality but it is near impossible to hire anyone b/c they never realize that when they fix one thing, they screw up something else, and then I have to clean up after them. So now I’m trying to learn and understand…I wouldn’t know what “critical” css is.
I don’t work here; take it or leave it.
I thought I did answer it. To remove the ‘render blocking,’ you have to embed all the ‘critical’ css in your header.php file manually.
Perhaps TagDiv will have better answer when back in the office. Sorry that didn’t help. 🙂
Hello,
Recently i purchased the theme but to start the project performed some tests in the mobile version and came across a display issue in the author’s name.
Problem image: http://imgur.com/a/ibMlt
I follow another topic which mentions add this snippet: .td post-author-name div {display: inline; } In the custom theme css, but it did not work with me, still display the error.
Any other suggestions to solve?
Fact is, in WordPress you need to move all CSS and JS to footer, and then have the critical CSS loaded from the header file to fully eliminate that error message.
There is no ‘one click’ way to do it.
Check your page source and see what css and js are there.
but, the ‘gotcha’ is that most WP posts cannot render anything at all without certain code, and so putting it at bottom can help it load, but without the initial “critical” CSS actually loaded inline at top, the page still needs to get to the code to load anything at all (often giving a flash of unstyled text – aka FOUT).
I think I cover this somewhere in my epic poem on TagDiv theme optimization in the tutorials > best of forum.
🙂
Following here:
https://forum.tagdiv.com/how-to-make-the-site-faster/
Have moved lots of CSS to footer in td-speed-booster.php
Examples:
/**
* here we move the css
*/
function css_mover() {
if ($this->td_theme_name == 'Newspaper') {
// wp 011 - Newspaper 6
$this->move_style_to_footer_queue('google_font_open_sans');
$this->move_style_to_footer_queue('google_font_roboto');
$this->move_style_to_footer_queue('bbp-default-bbpress'); //bbpress old
$this->move_style_to_footer_queue('bbp-default'); // bbpress
$this->move_style_to_footer_queue('contact-form-7'); // end of initial list, rest custom
$this->move_style_to_footer_queue('gd-captcha-style');
$this->move_style_to_footer_queue('geodir-core-scss');
$this->move_style_to_footer_queue('font-awesome');
$this->move_style_to_footer_queue('geodir-event-frontend-style');
$this->move_style_to_footer_queue('location_manager_css');
$this->move_style_to_footer_queue('social-widget');
$this->move_style_to_footer_queue('woocommerce-layout');
$this->move_style_to_footer_queue('woocommerce-general');
$this->move_style_to_footer_queue('td-theme');
But Google is still listing all these resources under the Page Speed error (Eliminate render-blocking JavaScript and CSS in above-the-fold content).
I’ve cleared the cache and checked several times. Nothing. What am I doing wrong?
Hi Catalin,
I managed to update the path in the CSS that was causing that error. Now, however I’m still left with a broken padlock. Something inside the theme is breaking the padlock as illustrated by the section “Secure Calls made to other websites”:
demo.tagdiv.com returns some sort of error) when visitors go to my webpage. My SSL is installed correctly and HTTPS is configured so I know it has nothing to do with either of those two. Do you know why I would see the padlock on the admin dashboard (i.e. logged in) but not when i’m browsing as a visitor (not logged in)?
I would really like to resolve this. I have a store on the site and consumer confidence is important to me.
http://www.screencast.com/t/nHndwZ2pTjqW
http://www.screencast.com/t/pu5lbsr1uP2P
http://www.screencast.com/t/nHndwZ2pTjqW
Thanks in advance.
Keisha
Bogdan,
I managed to fix my css issues, by removing functions.php and using
@import (../Newspaper/style.css)
.. in my child theme’s style.css. I then reloaded the theme and now my custom css is working. I still don’t know what the problem was.
Thank you for the tip, I will definitely try using live css to test from here on out.
In looking for a to allow the other non-code-savvy writers on the site the ability to omit the upper author meta info and the lower author bio box on any given post, I’ve come up with the following solution:
Installed the WP Add Custom CSS plugin, which puts adds an entry entry box into the Add New Post page.
Instructed authors that if they wish to omit author information, they should paste the following code into that Custom CSS box.
.td-post-author-name {
display: none;
}
.author-box-wrap {
display: none;
}There may be a more elegant way to accomplish this, but it works for our writers…
Open any article from this site http://www.gadgetsay.com on your phone you will see the top article ad as subscription there is a wrong css which the line moves to right hand side! See the image you will understand,
Hope you will understood! The problem will of course come on phone because in desktop its floating the css the line to the right side but in mobile its crossing the border of the casual or normal look which is not good for the site visual on phone.
Thanks
Gadgetsay
Hi,
This being a long topic it’s very hard to keep track anymore:) Sorry. The default page template does not show the sidebar but you can create a sidebar in visual composer directly on a split row like so: http://screencast.com/t/lL6eEFYpe
The row is split in a 2/3 + 1/3 layout.
As an alternative you can use the page builder + page title template that will show the sidebar and hide the title if you do not want it with a bit of css like so:
.td-page-title{
display:none!important
}
Thanks.
Hello,
Well as the guide specifies there are 3 parts of code. The first is the embed code itself You add that on the posts/pages themselves as it contains the video you want to embed with the video ID
The second code is a javascript code you can add in the theme panel custom js box: http://screencast.com/t/SYzBoxBIBZA (do not include the script open and closing tags)
The third is a css code you can add to the theme panel -> custom css box: http://screencast.com/t/nuvrxZCe again without the style tags opening and closing .
Here is an example how it worked on my end:
first code on a post in text mode: http://screencast.com/t/mo1wvTtyk
second and third codes in the theme panel spots: http://screencast.com/t/ltfk3LkGD
Thank you!
Hello,
Yes I meant a single semicolon. Sorry. if a css code that you add in the custom css area dos not apply, then you need to check the code above for any open tags. Please make sure every tag in the code above the one you want to insert is closed properly. Also test without the child theme. Activate the main theme as if the child theme was not updated properly it could create issues. When we create css code we use the browser inspector and a chrome extension called live css editor. When you create a css and add it to the live css editor and it works, it should also work from the theme panel->custom css box: http://screencast.com/t/XutAAsbZ6H8
I hope this helps.
Thanks.
Hello,
1) You can change the bubble color and font size with a bit of css. Try this code:
.td-module-comments a{
background-color:Red;
}
.td-module-comments a:after{
border-color: red transparent transparent transparent;
}
.td-module-comments{
font-size: 12px;
}
2) Unfortunately our theme does not have any such detect options to show the count only if it’s >1 it will have to be custom made. This is the wordpress function used to grab the comments count: https://developer.wordpress.org/reference/functions/get_comments_number/ in this file here: http://screencast.com/t/OZ5JGVxvWw7 You will have to change the function or add conditions to it if you know your way around coding.
Thank you!
Hello stavrosgian,
Please try the code below and place it in Theme panel->Custom CSS area.
.td-classic-facebook iframe {
min-width: 150px;
}
Thanks.
