- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- TutorialsFrom WPBakery to tagDiv Composer
- TutorialsDefault Block Settings Guide
- TutorialsHow to use custom fonts
Hello,
I made a child theme for Newspaper and I want to customize it for a bit. However, I can’t seem to find the css class for changing the height of the main menu bar. I spent the better part of today’s trying to modify this menu style and the height is simply not something I can modify at this point.
ps. I’m not looking for a theme option, I’m doing all the edits in the css/php side of my child’s theme.
Thanks in advance!
Hi Simion,
I confirm that our website is perfect in Firefox 59.0.3
No, I did nothing to fix it and this is the strange part. I just woke up in the morning, opened the website and everything was fine.
My Firefox version is still 59.0.3
However, I have video cast which shows the problem we faced yesterday.
I don’t know what to say… Bad karma, maybe?
In any case, as a developer, I have to update the theme to the latest version.
I have made many customizations in WordPress “Add Custom CSS”.
However, when I updated the theme and pasted my CSS, the layout seems to recognize my CSS on same parts and ignores it to other.
I investigated further the case and I saw that you have change or added CSS classes.
So, my Custom CSS, even if it is pasted as it was, doesn’t work and I have to make the changes again.
This is a little bit frustrating since every time I will update the theme I would have to make many modifications to my CSS. And we are talking about 5000 lines of custom CSS… So, do you have any idea what should I do with this issue?
Thanks in advance.
Hi i’m working through the speed optimisations and have put the following code in my ht access but i still get this error on gtmetrix
Enable compression for the following resources to reduce their transfer size by 1008.4KiB (89% reduction).
Compressing https://seekpretty.com/wp-content/themes/Newspaper/style.css?ver=8.7.4 could save 1008.4KiB (89% reduction).
please let me know what I need to do, On my last site I made a lot of changes and i cant remmeber what exactly i did. thanks
# BEGIN LSCACHE
# END LSCACHE
# BEGIN NON_LSCACHE
# END NON_LSCACHE
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
# BEGIN WP Rocket v2.6.11
# Use UTF-8 encoding for anything served text/plain or text/html
AddDefaultCharset UTF-8
# Force UTF-8 for a number of file formats
<IfModule mod_mime.c>
AddCharset UTF-8 .atom .css .js .json .rss .vtt .xml
</IfModule>
# FileETag None is not enough for every server.
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
# Since we’re sending far-future expires, we don’t need ETags for static content.
# developer.yahoo.com/performance/rules.html#etags
FileETag None
<IfModule mod_alias.c>
<FilesMatch “\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml)$”>
<IfModule mod_headers.c>
Header set X-Powered-By “WP Rocket/2.6.11”
Header unset Pragma
Header append Cache-Control “public”
Header unset Last-Modified
</IfModule>
</FilesMatch>
<FilesMatch “\.(css|htc|js|asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$”>
<IfModule mod_headers.c>
Header unset Pragma
Header append Cache-Control “public”
</IfModule>
</FilesMatch>
</IfModule>
# Expires headers (for better cache control)
<IfModule mod_expires.c>
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault “access plus 1 month”
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest “access plus 0 seconds”
# Your document html
ExpiresByType text/html “access plus 0 seconds”
# Data
ExpiresByType text/xml “access plus 0 seconds”
ExpiresByType application/xml “access plus 0 seconds”
ExpiresByType application/json “access plus 0 seconds”
# Feed
ExpiresByType application/rss+xml “access plus 1 hour”
ExpiresByType application/atom+xml “access plus 1 hour”
# Favicon (cannot be renamed)
ExpiresByType image/x-icon “access plus 1 week”
# Media: images, video, audio
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType video/ogg “access plus 1 month”
ExpiresByType audio/ogg “access plus 1 month”
ExpiresByType video/mp4 “access plus 1 month”
ExpiresByType video/webm “access plus 1 month”
# HTC files (css3pie)
ExpiresByType text/x-component “access plus 1 month”
# Webfonts
ExpiresByType application/x-font-ttf “access plus 1 month”
ExpiresByType font/opentype “access plus 1 month”
ExpiresByType application/x-font-woff “access plus 1 month”
ExpiresByType application/x-font-woff2 “access plus 1 month”
ExpiresByType image/svg+xml “access plus 1 month”
ExpiresByType application/vnd.ms-fontobject “access plus 1 month”
# CSS and JavaScript
ExpiresByType text/css “access plus 1 year”
ExpiresByType application/javascript “access plus 1 year”
</IfModule>
# Gzip compression
<IfModule mod_deflate.c>
# Active compression
SetOutputFilter DEFLATE
# Force deflate for mangled headers
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding “gzip,deflate” env=HAVE_Accept-Encoding
# Don’t compress images and other uncompressible content
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png|rar|zip|exe|flv|mov|wma|mp3|avi|swf|mp?g)$ no-gzip dont-vary
</IfModule>
</IfModule>
# Compress all output labeled with one of the following MIME-types
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/plain \
text/x-component \
text/xml
</IfModule>
<IfModule mod_headers.c>
Header append Vary: Accept-Encoding
</IfModule>
</IfModule>
<IfModule mod_mime.c>
AddType text/html .html_gzip
AddEncoding gzip .html_gzip
</IfModule>
<IfModule mod_setenvif.c>
SetEnvIfNoCase Request_URI \.html_gzip$ no-gzip
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTPS} on
RewriteRule .* – [E=WPR_SSL:-https]
RewriteCond %{SERVER_PORT} ^443$
RewriteRule .* – [E=WPR_SSL:-https]
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteRule .* – [E=WPR_ENC:_gzip]
RewriteCond %{REQUEST_METHOD} GET
RewriteCond %{QUERY_STRING} =””
RewriteCond %{HTTP:Cookie} !(wordpress_logged_in_|wp-postpass_|wptouch_switch_toggle|comment_author_|comment_author_email_) [NC]
RewriteCond %{REQUEST_URI} !^(.*/feed/?)$ [NC]
RewriteCond %{HTTP_USER_AGENT} !^(facebookexternalhit).* [NC]
RewriteCond “%{DOCUMENT_ROOT}/wp/wp-content/cache/wp-rocket/%{HTTP_HOST}%{REQUEST_URI}/index%{ENV:WPR_SSL}.html%{ENV:WPR_ENC}” -f
RewriteRule .* “/wp/wp-content/cache/wp-rocket/%{HTTP_HOST}%{REQUEST_URI}/index%{ENV:WPR_SSL}.html%{ENV:WPR_ENC}” [L]
</IfModule>
# END WP Rocket
# BEGIN Expire headers
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 5 seconds”
ExpiresByType image/x-icon “access plus 604800 seconds”
ExpiresByType image/jpeg “access plus 604800 seconds”
ExpiresByType image/png “access plus 604800 seconds”
ExpiresByType image/gif “access plus 604800 seconds”
ExpiresByType application/x-shockwave-flash “access plus 604800 seconds”
ExpiresByType text/css “access plus 604800 seconds”
ExpiresByType text/javascript “access plus 604800 seconds”
ExpiresByType application/javascript “access plus 604800 seconds”
ExpiresByType application/x-javascript “access plus 604800 seconds”
ExpiresByType font/truetype “access plus 604800 seconds”
ExpiresByType font/opentype “access plus 604800 seconds”
ExpiresByType application/x-font-woff “access plus 604800 seconds”
ExpiresByType image/svg+xml “access plus 604800 seconds”
ExpiresByType application/vnd.ms-fontobject “access plus 604800 seconds”
ExpiresByType text/html “access plus 600 seconds”
ExpiresByType application/xhtml+xml “access plus 600 seconds”
</ifModule>
# END Expire headers
<IfModule mod_deflate.c>
<filesMatch “\.(js|css|woff|html|php)$”>
SetOutputFilter DEFLATE
</filesMatch>
</IfModule>
Hi,
If that is a page and theme block, note that the font settings available in the tagDiv composer can be different by device. So you can set a font size for desktop
– https://www.screencast.com/t/BNzGapj9
And one for mobile – https://www.screencast.com/t/x1xjUvvAcxr
These settings are not available in WPBakery page builder.
If you use WPBakery you could use CSS to set differ font sizes by width, with media queries. An example topic
– https://forum.tagdiv.com/topic/how-to-manage-the-fontsize-for-better-responsive-text/
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thanks
Hi,
So you would like to hide the featured image in the post page, when using the mobile theme plugin. That could be done by modifying the mobile post page template. Comment or remove this code from the mobile theme post template file
– https://www.screencast.com/t/DckFD79Z
Or enter this code in Theme panel->Mobile theme->Custom CSS
.single .td-post-featured-image {
display: none;
}
Thanks
Hi,
1. That is the page padding, similar to desktop but smaller
– https://www.screencast.com/t/rgkmUFKzzT
It could be removed by entering this code in the theme panel advanced CSS section, in the phones and tablet fields
– https://www.screencast.com/t/cca9VqHp7pPZ
.home .td-main-page-wrap {
padding-top: 0;
}
2. There is a setting for the mobile menu background color
– https://www.screencast.com/t/mjju2gutkK
Thanks
Hello dallas,
You can hide category labels if you are using such a custom CSS code. Try to use the inspector browser to create your own code -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thanks for your understanding!
Hi,
You will have to modify the post template files in order to do something like that. These are the post template files (they are located in the main theme folder)
– https://www.screencast.com/t/8sl8viSg3B
In this example I will modify post template default as you mentioned. This is the section of code that displays the post author and other meta
– https://www.screencast.com/t/X9xwW99oj
Move it above the tags if that is where you want the meta to appear
– https://www.screencast.com/t/i3KKekvvQOlV
The result will be like this
– https://www.screencast.com/t/D0FUa5LvUxsm
The design does not apply anymore since the code is now not part of the post header. Creating a new header around the moved code would be a solution
– https://www.screencast.com/t/kMycoYEjKPh
Or style them with CSS
– https://www.screencast.com/t/niqaihO7
This is the code that must be entered in the theme panel custom CSS section
– https://pastebin.com/phxadSE2
Thanks
Hello kaisan,
Try to use the following custom CSS code.
The code is ->
.amp-wp-article-featured-image{
text-align: -webkit-center;
}
You should use a bit of CSS code if you want to change the AMP style page. Edit here -> https://www.screencast.com/t/vIUHFAbD6uRH There’s no option for custom CSS code for AMP version, sorry! You need to follow the above advice if you want to customize your AMP version.
Hope this helps!
Thanks for your understanding!
I want to customize some css you have in Newspaper theme the “style-woocommerce.css”
I have created the child theme and inside it tried both edit the code in style.css and copy paste the style-woocommerce.css in child theme ande dit it there.
The css iwant to customize has !important, which by the way is not a very good way of building css.
How can i edit it, concretely the css is:
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info {
font-size: 12px; (make it 15px;)
line-height: 21px;
border: 1px solid #ededed !important;(make it #982234)
background-color: #fcfcfc !important;(make it #f5cdcd)
box-shadow: none !important;
border-radius: 0 !important;
margin: 10px 0 20px 0 !important;
padding: 16px 120px 16px 60px !important;
}
Hi,
i need help implementing CSS from an demo. I have an “Big Grid 1” with the default style(Grid Style 1). When you go to https://demo.tagdiv.com/newspaper_magazine/ then there is, for example the category(PHOTOGRAPHY), on the first Big Grid (women with camera), in an black box with withe font, also there is the author with the Date(David Lee – September 24, 2015). This is becaus of the CSS class td_module_mx5 and others. I tried to copy out this classes from Newspaper\includes\demos\magazine\demo_style.css and insert it into into live css, but nothing changed.
I don’t want to install a demo, i only want the CSS code to change the “Big Grid 1 / Grid Style 1” in the way its done at the News Magazine Demo.
Thanks a lot
Marcel
Hi,
I am trying to optimize my website to the best but I am stuck with few things. Could you tell me if there is any way to improve on the below things. The below lines are from gtmetrix results. I have read your optimization guide but that didn’t help much.
1) :path /wp-content/themes/Newspaper/images/icons/newspaper.woff?15 – This is taking 277 ms to load.
2) /css?family=Roboto%3A300%2C400%2C400italic%2C500%2C500italic%2C700%2C900%7COpen+Sans%3A300italic%2C400
%2C400italic%2C600%2C600italic%2C700 – This is taking 170 ms to load
3) https://fonts.googleapis.com/css?family=Roboto%3A300%2C400%2C400italic%2C500%2C500italic%2C700%2C900
%7COpen+Sans%3A300italic%2C400%2C400italic%2C600%2C600italic%2C700 – This is taking altogether 50 ms to load. They are multiple files with roboto and other google fonts which I am not using at all. I am using the default font provided by you guys.
Link – https://gtmetrix.com/reports/prajwaldesai.com/Pl3NPY1q
Hi guys,
We’re looking to reduce the padding below the header adverts. Currently there’s too much white space but we’re struggling to find how to reduce this using custom CSS.
Any help would be much appreciated!
For example see –
https://girllyf.com/taste/drink/you-can-now-get-alcoholic-tango-ice-blast-cocktails/
https://girllyf.com/taste/
Site is not showing I get this error, please help!
Warning: require_once(css-live/css-live.php): failed to open stream: No such file or directory in /home/betahs/public_html/wp-content/plugins/td-composer/td-composer.php on line 38
Fatal error: require_once(): Failed opening required ‘css-live/css-live.php’ (include_path=’.:/usr/local/lib/php’) in /home/betahs/public_html/wp-content/plugins/td-composer/td-composer.php on line 38
Hi, Today I add some CSS on my site https://forum.tagdiv.com/topic/widgets-5/ then Show line in the header: https://prnt.sc/jd7l6l
How to remove the line in the header.
Hi,
Please provide a link to such a post with errors so we can test it with the validator, could be something entered in the post content or plugin content. Seems to mention the HTML tag “col”, maybe you have that in the post content.
Also our AMP plugin does not provide CSS errors anymore, all the known issues have been fixed.
Thanks
Hi,
I remember testing that a while back and it worked, after making the update of the plugin today, it seems that the font color is not applying for some reason. Maybe this will be fixed by the plugin author.
You could use a code like this to chnage the text color to your desired one
.coin-container {
color: yellow;
}
Change the color to what you want and enter it in Theme panel->Custom CSS.
Thanks
Hi Simon, thank you for a very well explained feedback!
I did change the style.css in two location to set the color “correct” to avoid this shift from blue to red. But I still get it. I cleared cache etc.
Can you take a second look please.
K
Hi,
I’m using the Cryto Widget news ticker plugin with the Cryto Newspaper Theme.
http://blockchaintrailblazers.com/
I’m able to easily change the background color of the ticker in the ticker dashboard. But the text color will not change using the same tool.
Do I need some kind of CSS to override the news ticker?
Thank you!
I have my main home page setup to show “Latest Articles” and on the far right hand side of each abbreviated post it displays the Comments icons with the number in the middle of it. Would like to remove this and replace it with the Post Views (one with eyeball) icon and number right next to it.
I’m assuming there’s some CSS code that could change this? Thanks.
Great! But cannot find the category ID using webdev, is it the same as the one in the database?
Also what is the CSS for the category tag?
Thank you
Hi,
That could be done with CSS maybe. For font awesome icons it is easy since all that has to be done is to insert the class and have the plugin active.
Maybe something like this
– https://www.screencast.com/t/4PYfzC0k
This is the code I used in the example if you should consider it (change the menu item ID with your own)
.menu-item-1963:before {
content:'';
background: url("");
background-size: 15px 15px; background-repeat: no-repeat;
position: absolute;
width: 15px;
height: 15px;
top: 15px;
}
It may need further modifications to work in other situations. Or maybe you can find another method.
Thanks
Hi,
Unfortunately at the moment that is not possible by a theme setting, once the option is disabled in the theme panel it will apply for all the posts. Maybe such an option will be implemented in the future.
There will be changes to how the post templates are created in a coming major update.
So at the moment you could only do that with code modifications maybe, or CSS code.
Thanks
Hi,
1. You can try to regenerate the thumbnails, this process will recreate all the necessary thumbnails
– https://forum.tagdiv.com/search/regenerate/
2. Depending on the page builder used, both have options to hide elements for specific device. A related topic here
– https://forum.tagdiv.com/topic/change-moduleblock-12/
These are tested and work as expected. As a note, if you use WPBakery page builder to create pages, deactivate the tagDiv composer. The tagDiv composer may prevent the option to hide elements of WPBakery from functioning.
3. With WPBakery page builder that will not be possible. There are no options to color the block title fonts or background. The tagDiv composer has such options.
You could use CSS to color them by block type for example
– https://www.screencast.com/t/hJiffmUYp
This is the code used in the example
.td_block_1 .td-block-title span{
background-color: red;
}
.td_block_7 .td-block-title span{
background-color: blue;
}
.td_block_4 .td-block-title span{
background-color: yellow;
}
More about using CSS code here
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thanks
Hi Marcel,
You should try using the following custom CSS code if you like that style! -> https://pastebin.com/ScVxBm7n -> https://www.screencast.com/t/69pAl1nG5p
Thanks for your understanding!
