- 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,
Try to use !important as: .sf-menu > li > a:hover {border-bottom: 4px solid #4db2ec !important;} or a more specific selector to overwrite it like: .menu-td-header-container > .sf-menu > li > a:hover {border-bottom: 4px solid #4db2ec;} as using the same selector will not overwrite it. You can also use the main theme custom css filed from theme panel to add your custom css as updating the theme will not affect it and the changes you’ve made via custom css will remain after an update.
Thanks
Hi,
Please use this custom css in Theme Panel: http://screencast.com/t/bSuCID85xdt
.td-subcategory-header .td-wrapper-pulldown-filter {
display: none;
}
Thanks!
This is a common problem with CSS and custom over-rides from control panels.
It’s also called the flash of unstyled text with fonts, where the same issue happens.
Basically, what happens is that the original CSS loads for a moment, then the “over ride” color you’ve specified is loaded, and in some cases for a split second, depending on speed of server and other factors, you may or may not see that.
This is not unique to any specific theme, but simply how the web works when you’re not actually editing the MAIN style sheet which is loaded first.
This is basic CSS/HTML knowledge.
But basically, the way to fully remove that issue, is to edit the style.css file and change the class for that element to the color you wish. Fairly simple. Just do a search in text editor or programmer editor and locate the style class and change the color code. Then you don’t need to put into the CSS box in the theme panel. Downside is you have to do this each theme update, but ideally this would also be the point in time where you minify the CSS anyway. And if you’re optimizing your site for Google fonts, you’d actually put the calls to the fonts at bottom of your style.css and remove them from the theme functions files. But that is a bit advanced.
Hope that helps 🙂
Check your site with GTMetrix.com and then follow all the suggests, in particular gzip/deflate, expiration headers, image optimization, remove versioning, minify your style.css, don’t use child theme, use fast server/hosting, remove all themes and plugins you’re not using except the latest twenty-fifteen theme, optimize your wp-config.php file to include absolute paths to your domain name, optimize font loading, limit loading external elements (e.g., social counters slow down page vs simple share buttons), limit number of ad networks (I’ve seen some people with six ad networks each loading java, css, and tracking code…. it’s ‘bloat’), use a local image for gravatars, etc.
I cover a number of these issues in detail in the sticky pagespeed thread. Look for my posts, and probably easier to go backwards from the end of the topic, vs from the start a year ago! 🙂
Hi. First i want to say thanks for this greate theme and please sorry for my bad english…
I habe a problem with my site page speed, i have reed all the posts that i have find (this and your documentation) but i can’t to make my website faster…
URL of my site: http://vidzo.ru/
Can you please say me step to step how to make pagespeed higher?
here is the code frome wp console
registered scripts
common | /wp-admin/js/common.min.js
admin-bar | /wp-includes/js/admin-bar.min.js
dashboard | /wp-admin/js/dashboard.min.js
customize-loader | /wp-includes/js/customize-loader.min.js
plugin-install | /wp-admin/js/plugin-install.min.js
media-upload | /wp-admin/js/media-upload.min.js
thickbox | /wp-includes/js/thickbox/thickbox.js
utils | /wp-includes/js/utils.min.js
svg-painter | /wp-admin/js/svg-painter.js
wp-auth-check | /wp-includes/js/wp-auth-check.min.js
wp_social_popup_js | http://vidzo.ru/wp-content/plugins/wp-social-popup-and-get-traffic/assets/js/plugin.js
ilentheme-script-admin | http://vidzo.ru/wp-content/plugins/wp-social-popup-and-get-traffic/assets/ilenframework/core.js
media-editor | /wp-includes/js/media-editor.min.js
media-audiovideo | /wp-includes/js/media-audiovideo.min.js
mce-view | /wp-includes/js/mce-view.min.js
image-edit | /wp-admin/js/image-edit.min.js
wpseo-admin-global-script | http://vidzo.ru/wp-content/plugins/wordpress-seo/js/wp-seo-admin-global.min.js
td-wp-admin-general | http://vidzo.ru/wp-content/themes/Newspaper/wp-admin/js/general.js
td-wp-admin-panel-js | http://vidzo.ru/wp-content/themes/Newspaper/wp-admin/js/wp-admin-panel.js
registered styles
admin-bar | /wp-includes/css/admin-bar.min.css
thickbox | /wp-includes/js/thickbox/thickbox.css
colors | 1
ie | /wp-admin/css/ie.min.css
wp-auth-check | /wp-includes/css/wp-auth-check.min.css
wp_social_popup_css_admin | http://vidzo.ru/wp-content/plugins/wp-social-popup-and-get-traffic/assets/css/admin.css
ilentheme-styles-admin | http://vidzo.ru/wp-content/plugins/wp-social-popup-and-get-traffic/assets/ilenframework/core.css
media-views | /wp-includes/css/media-views.min.css
imgareaselect | /wp-includes/js/imgareaselect/imgareaselect.css
wp-color-picker | /wp-admin/css/color-picker.min.css
google-font-ubuntu | http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic&subset=latin,cyrillic-ext,greek-ext,greek,latin-ext,cyrillic
td-wp-admin-td-panel-2 | http://vidzo.ru/wp-content/themes/Newspaper/wp-admin/css/wp-admin.css
wpalchemy-metabox | http://vidzo.ru/wp-content/themes/Newspaper/wp-admin/content-metaboxes/meta.css
And this is code from my htaccess
# 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
Options +FollowSymLinks
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.vidzo.ru\.ru$
RewriteRule (.*) http://vidzo.ru/$1 [R=301,L]
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index\.php\ HTTP/
RewriteRule ^index\.php$ http://vidzo.ru [R=301,L]
RewriteRule ^page/([0-9]+)(/?)$ index.php?cstart=$1 [L]
I am using dedicated server / VPS
Thank you
please guide me regarding this
i have converted a font.i did this
— uploaded the folder containing .woff , CSS etc files and gave its path
http://akhbarworld.com/public_html/Flaticon_Converted_Font/
— i gave the same name as it was written in css file ‘Flaticon’ in the ‘CUSTOM FONT FAMILY 1’ text.
and saved it.
but the font is not working on the siye
http://akhbarworld.com/urdu
please guide
Hi Lucian,
It looks like we were able to get the CDN to work! However, Newspaper is still taking a long time to load. It wasn’t an issue on the old site, but it’s causing huge load times in the new theme. What do you recommend for retroactively re-sizing all the old images to work with Newspaper? There’s still a couple hiccups with CSS and javascript causing minor issues, but our major hurdle is getting our images to load fast on Newspaper. From here on out, all uploads will be re-sized by staff with uploading to web in mind, but we need to keep the old content in the new theme. As it stands, the site will take receive a much lower search engine ranking if we launch with the pages loading so slow.
The hover effect on images in the big grid (looks like an opacity change) isn’t working right.
Have tried disabling plugins and checking that no custom CSS was screwing with it. This affects the homepage and category pages. Even tried a different host.
Most of the time it doesn’t work at all; the effect never starts. Sometimes, though, it’ll darken the image. When it does, on occasion, darken the image on hover, it does not lighten the image on hover out. Not sure what to make of it.
Yes, I do 🙂
What I often do, is open two windows on my PC
one folder is the new theme update, one window is old theme update;
I do “sort by date” which pushes the modified files to top.
Then I open the old one, and then the new one and make changes to match.
I also make backup for my custom CSS each time, do a full FTP backup, and do tools > export, each time, out of general paranoia.
I think you set the font sizes and what not for the menu as per usual via the theme panel. Smaller font = smaller height. Larger font = larger height, etc. And of course with custom CSS you can change any of the divs to a height you want.
Lucian, the css work perfect for chrome,safari and not with firefox.
Hello.
I tried to turn off all the categories sliders.
My site has multiple subcategories and the theme panel allows me to edit only the until fourth subcategory.
Is there a way to disable all sliders through css or by a single command?
Thank You
Sir i am using Multi-site technique for my two language site
akhbarworld.com
akhbarworld.com/urdu
problem is i have only one CSS and if i change orientation from left to right align , it changes in both of my sites.
i want my urdu site to right align its main menu.
also how to change alignment of custom box title shown on home page?
Sir i am using Multisite technice for my two language site
akhbarworld.com
akhbarworld.com/urdu
problem is i have only one CSS and if i change orientation from left to right align , it changes in both of my sites.
i want my urdu site to right align its main menue.
also how to change alignment of custom box title shown on home page?
I have removed sub-categories from category pages and displaying trending now there but latest drop-down is still displayed, how to remove it. http://www.screencast.com/t/6iBI4XWtXVS . I already used this custom css:
.td-subcategory-header .td-category-header {
display: none;
}
Thank you so much, that indeed got me pointed in the right direction. Here’s what I did in case anyone else would like buy now buttons in their posts.
I visited http://www.bestcssbuttongenerator.com/#/n8Rgg1tdWz and created my button.
I named my button BenjiButton. Obviously anyone can name it whatever they like.
I generated the following code using the generator. And then inserted it under Theme Panel/YOUR CUSTOM CSS/
.BenjiButton {
-moz-box-shadow:inset 0px 1px 0px 0px #fff6af;
-webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;
box-shadow:inset 0px 1px 0px 0px #fff6af;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
background-color:#ffec64;
-moz-border-radius:42px;
-webkit-border-radius:42px;
border-radius:42px;
border:1px solid #ffaa22;
display:inline-block;
cursor:pointer;
color:#333333;
font-family:arial;
font-size:25px;
font-weight:bold;
padding:10px 37px;
text-decoration:none;
text-shadow:0px 1px 0px #ffee66;
}
.BenjiButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
background-color:#ffab23;
}
.BenjiButton:active {
position:relative;
top:1px;
}In all my posts at the bottom, I inserted the code:
<p style="text-align: center;"><a title="BUY NOW for $85.99" href="http://www.mywebsitedomain.c0m" rel="nofollow"><span class="BenjiButton">BUY NOW for $85.99</span></a></p>
The result is a great button. Thanks for your help.
Might be one of your plugins conflicting with it.
Child theme if often the main culprit for Ajax gremlins, which is why I refuse to use them anymore; also a CSS redirect which Google suggests NOT doing.
Hello Lucian
You are correct, however the css fix the issue.
Thank you very much
Hi,
Those VC features haven’t been tested. You can use the advanced css filed from theme panel to add css that applies just the a specific device screen width.
Ex: This will hide the post title from post template 8 on mobile only: http://screencast.com/t/rmzEKl71H
You can use them and built css for the parts sections you don’t want to show on mobiles/tablets/dektop screens and add your css like in the example.
You can also use this VC general setting: http://screencast.com/t/R6d2ES9hWz and set a custom class which you can use to target and hide the sections you don’t want.
Please open anew topic and post you questions in the main forum.
Thanks
Hi,
I have inspected your site and seems that you are right, the post excerpt which is not added causes the post images to come one after another because they are set via css to float to left.
Please also try this without plugins to make sure that this is not due to any of them and also empty cache, purge files then try again.
Also please try to ad the same post content in the visual editor then save your post and try if this still happens.
You can also use this css to fix this:
.td_module_11 .td-module-thumb {
clear: both;
}
.td_module_11 {
min-height: 220px;
}
Please let me know!
Thanks
Hi,
Having it enabled from theme panel should show it on post pages: http://screencast.com/t/Hhvcz45upixb so please make sure that you have it enabled then empty cache, purge files if you use any CDN host services then try again and also disable all plugins, js/css/html minification.
Also try to remove this condition from post template: http://screencast.com/t/3TPPs6Q7N TYhis is for the default post template for other post template you need to edit other files: http://screencast.com/t/9jTzrTbXiS
Please let me know afterwards!
Thanks
Hi,
1. Please use this custom css to hide date only on that block: http://screencast.com/t/KfFlqlvv
.td_block_5 #td_uid_1_54c2328494e94 .td-post-date{
display: none ;
}
2. Use this css to customize the border: http://screencast.com/t/lgamHdYZEv
.td-related-title .td-related-left{
border-radius: 3px;
}
3. And this code for title: http://screencast.com/t/CK8IVSbp
.page-id-4571 h1{
background:black;
color:white !important;
width:7em;
padding-left:10px;
border-radius: 5px;
}
Also if you like it more you can use “pagebuiler with title” template and text blocks for your video sources list: http://screencast.com/t/w9XdEAMooqB
Result: http://screencast.com/t/6b64BmVja
Hope this helps!
Thanks!
Hi,
I have also tested this and seems that it’s happening because of image’s max-width attribute which is set to 100%. I have made some tests and seems that setting this value to none fixes this so please use the custom css I’ve pasted below in theme panel > custom css filed and let me know if you still have this issue afterwards and also provide your site’s URL so I can check.
.td-post-featured-image img {
max-width: none;
}
Thanks
Hi,
Thanks Chris!
@press15
Regarding your first menu questions please note that is the way the mega menu works and was designed and to change as you’ve noted and need, you will need additional customization which are not easy to be done and you would need custom work for that.
You could try to do this by creating a new category and assign the posts you want to it then add it to the menu, assign it to use mega menu the add your custom url which directs it to the page you want in the label filed, like this: http://screencast.com/t/yy4WjpW1U
Into the menu you will also have generated the default anchor tag will the category url but you can remove it via css just for that specific menu item and have it look like this: http://screencast.com/t/I0UTFKTA
It’d not an ideal solution but could help you do this.
Regarding your other menu question, the menu items can be added to the menu then use the unique css class that was added to each menu item you create and hide it via custom css and display it just on pages you want it to appear.
Ex: http://screencast.com/t/tQfsY85DULLi
You can use your browser inspect toll to get the menu item unique class: http://screencast.com/t/GXbtsLKu4OC
Fore the images, Chris is right, the theme uses WordPress cropping so I suggest you try it’s solution.
You can also find more info about the image size fucntion here: http://codex.wordpress.org/Function_Reference/add_image_size
Thanks
Question 1: On the homepage, I want to remove the dates from underneath the three headlines starting with Kenya…, Iraq…, and Raw:… which are utilizing Block 5.
But, I want to keep the dates underneath the articles on the other pages and on the posts, so I can’t just disable the “Show Date” option in the Theme Panel under the Post Settings, because, whilst that removes the dates from the homepage, it also removes the dates from here and here, which, I don’t want. How do I remove, or hide with CSS, the dates from underneath the three World News Headlines on the homepage?
Question 2: With your previous help (thanks), I’ve customized the “RELATED VIDEOS” heading viewable at the bottom of this post.How do I make the corners on the right hand side of the “RELATED VIDEOS” rounded like the corners on the left hand side?
Question 3: I’ve created a Video Sources page. I want to make the page heading have a black box with white writing like the World News heading on this page. Inserting a “Text with title” makes the heading I want appear but there is too much of a gap/space underneath then. Is there a specific html/css tag that I can enter to make the desired heading appear?
