- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- TutorialsFrom WPBakery to tagDiv Composer
- TutorialsDefault Block Settings Guide
- TutorialsHow to use custom fonts
Hello,
You can use a bit of css to do it, but it’s a bit tricky on this header style as you have to adjust the logo as well:
.td-header-style-12 .td-header-menu-wrap-full{
height: 40px!important;
}
.td-header-style-12.td-header-style-12 .td-main-menu-logo img{
max-height: 45px!important;
}
.td-header-style-12.td-header-style-12 .td-main-menu-logo a{
line-height: 45px;
}
.td-header-style-12.td-header-style-12 .td-header-menu-wrap .sf-menu > li > a{
line-height: 40px!important;
}
.td-header-style-12 #td-top-search{
top: 25%!important;
}
.td-header-style-12 .header-search-wrap .td-drop-down-search{
top: 65%!important;
}
Thank you!
Hello sarawakv,
1)If you want to increase the size of your load button, you have to use a bit of CSS code to do that. Please try the code below and place it in Theme panel->Custom CSS box.
The code is ->
.td-load-more-wrap a:hover {
background-color: red;
border-color: red;
color: black;
}
.td_ajax_load_more {
font-size:20px;
background-color:red;
}
2)If you want to change the Load more button to another desired text, you have to do that from Theme panel, like this -> http://screencast.com/t/0DmijpusL0
3) Please try the following code and place it in Theme panel.
The code is ->
.td-next-prev-wrap a {
width: 35px;
height: 35px;
line-height: 35px;
border: 1px solid red;
text-align: center;
vertical-align: middle;
font-size:10px;
color: black;
background-color:red
}
.td-next-prev-wrap a:hover {
background-color: green;
border-color: green;
color: white;
}
Hope this helps!
Thanks.
Hi
in loop-single-2.php I added the code
<? Php echo do_shortcode (‘[td_block_ad_box spot_id = "custom_ad_2"]‘); ?>
after
<? Php echo $ td_mod_single-> get_social_sharing_top ();?>
to insert an adsense banner after the title
in this way however seem to stop working the instructions in td-spped-booster.php to move down the css in particular with regard to fonts google
$ 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 (‘google-fonts-style’);
and speedsite is compromised…
Do You have any suggestions to solve this problem?
Thanks
Hello ErikaGherardi,
If you want to remove that white spaces, you have to reduce the width for the outer-wrap container. Please try the code below and place it in Theme panel->Custom CSS area.
The code is ->
.td-boxed-layout #td-outer-wrap {
width: 1075px;
}
The result you should see here -> http://screencast.com/t/3HfPULSxm
Thank you for the message!
Hello,
This can be done with css. Firt you will need the page id for the page where you want the menu hidden:
http://screencast.com/t/m8DLYj7u and then use this css:
.page-id-147 .td-header-menu-wrap-full{
display:none!important;
}Change the id number in the code to your page id number and add the code in the theme panel -> custom css box
Thank you!
Hi,
If you want to have vertical lines, the first thing that comes to mind is a table. Our theme does not have any vertical lines you can add, but you can create a html table inside your post and style it with css:
http://www.tutorialspoint.com/html/html_tables.htm
Make sure you add the code in the text mode of your post. (not visual)
Hope this helps.
Thank you!
Hi
When the background image it’s added from theme panel > background the theme switch in boxed mode and backstretch class it’s added on the page: http://screencast.com/t/lRo8Rbg8H From what I can see in your page source the backstretch is missing and the background image it’s added with css: http://screencast.com/t/vdhcuYm7WLK
Make sure you added the background according with our documentation: https://forum.tagdiv.com/newsmag-background-introduction/ deactivate all plugins, clear all caches, purge cdn files and test again.
Thanks!
Then used this in the custom css to add the sub nav menu items to show only on the mobile menu but the sub nav menu to be hidden on mobile.
@media screen and (max-width: 767px) {
.nav_sub {
display:none !important;
}
}
@media screen and (min-width: 768px) {
.menu-item-104301 {
display: none;
}
}
@media screen and (min-width: 768px) {
.menu-item-104302 {
display: none;
}
}
@media screen and (min-width: 768px) {
.menu-item-104303 {
display: none;
}
}
@media screen and (min-width: 768px) {
.menu-item-104304 {
display: none;
}
}
@media screen and (min-width: 768px) {
.menu-item-104305 {
display: none;
}
}
For those who want to ‘speed tune’ for fastest page load time, separate from any pagespeed insights score, removing Google Fonts is a must ….
————-
I love OpenSans …
however for our new project (not using this theme), we actually chose NOT to use any Google fonts for page speed, not “rating” but actual page load time.
I’ve been tuning one project down from 1.9 sec with default theme, to 1.1 seconds (so far), with image, with https, with mod_pagespeed, but not yet using caching plugin …
for this project I’m using a web safe font stack like so in place of (sigh) Open Sans:
font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
for the “alt” font, using this stack
'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
I’m “getting used to it …” 🙂
For those interested, nice roundup of web safe “font stacks” here:
http://www.cssfontstack.com/
I love OpenSans …
however for our new project (not using this theme), we actually chose NOT to use any Google fonts for page speed, not “rating” but actual page load time.
I’ve been tuning one project down from 1.9 sec with default theme, to 1.1 seconds (so far), with image, with https, with mod_pagespeed, but not yet using caching plugin …
for this project I’m using a web safe font stack like so in place of (sigh) Open Sans:
font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
for the “alt” font, using this stack
'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
I’m “getting used to it …” 🙂
For those interested, nice roundup of web safe “font stacks” here:
http://www.cssfontstack.com/
You can load the fonts CSS directly in your style.css file which will speed them up a bit, and then unhook the loading from the main theme/includes/function file — this is a bit advanced. Lots of tutorials online how to do this. (Basically you capture the actually CSS off Google’s server, then put that in your style sheet which loads the actual fonts off Google CDN; which cuts out a step in the chain — still loads the font files themselves off the CDN.)
Check Google’s terms of use, to see if you can download and use the fonts directly on your server. TagDiv doesn’t own the fonts, Google does. You would then need to do the same thing as above, unhook the loading from the main theme functions, then add the font calls into your style.css.
If none of that makes sense, you would likely need to hire somebody. This is very common practice for speed tuning.
For fastest speed, don’t use ANY Google fonts and use “web safe font stacks” which are entirely loaded from browser and modern OS.
Hi,
css usually should be inserted in the theme panel. If you have the child theme active, then it should also work from there. Please make sure you have the latest version of the child theme though (the one that comes with the theme package)
Thanks.
Done, and it worked. Any reason why it doesn’t work when added to the child style.css?
Hi,
You need to add the code in the theme panel – custom css box and make sure your previous tag is closed if you have any other code in there.
The code works as seen here: http://screencast.com/t/MajmvFXWGR
You might try to clear your cache as well after you add the code.
Thanks.
Hello carmene,
If you want to change the color of the excerpts and the date from your homepage, you have to use a bit of CSS code to do that. Please use the code below and add it in Theme panel->Custom CSS area.
The code is ->
.td-excerpt, .td-post-date {
color:black;
}
The result -> http://screencast.com/t/CzWfEUaSagg
Thanks.
Hello Mayapur Voice,
Unfortunately, our theme does not have such an option to change the color only to that line only if you use a bit of CSS code. Please try the code below and place it in Theme panel->Custom CSS area.
The code is ->
.td-post-content .td_quote_box {
border-left: 2px solid red;
}
The result you should see here -> http://screencast.com/t/IiSlQcDHKht
Hope this helps!
Thank you for the message!
Hello sarak
You can use the code below and hide the author box wrap with a bit of CSS coding. You have to place it in Theme panel->Custom CSS area.
.author-box-wrap {
display:none;
}
Thank you for the message!
Hi Andrei,
thank you very much anyway for your availability and kindness.
Now you can see that the CSS works fine because I’ve fixed the top margin in the CSS in a different way. 🙂
Hereafter the code I’ve placed in my style.css (see the lines labelled with /*fix*/ string) and I’ve also removed the suggested custom CSS from theme panel:
/* ----------------------------------------------------------------------------
container
*/
.td-container {
width: 1021px;
margin-right: auto;
margin-left: auto;
margin-top:95px;/*fix*/
border-bottom: 1px solid #e6e6e6;
background-color: white;
position: relative;
clear: both;
z-index: 1;
}
/*
and also here
/* responsive portrait phone */
@media (max-width: 767px) {
/* container */
.td-container {
width: 100%;
margin-top:0px;/*fix*/
}
.td-pb-row {
width: 100% !important;
}
Thank you very much again and hope this can help also someone else.
Giuseppe
Hello,
Unfortunately you cannot limit the pagination. It will show all posts from the specific filter you add to your block. You can however limit the posts displayed on the page itself (not the number of slides but the number of posts shown):http://screencast.com/t/Nk1Adq3ZTTN
If you want to make the pagination on blocks more visible, you can use a bit of css to do it like for example:
.td-next-prev-wrap a{
border: 2px solid #000000!important;
color: #000000!important;
font-size: 14px!important;
}
Thank you!
hello,
There is no setting for it unfortunately but it can be removed with css like so:
.td-category-pulldown-filter{
display:none!important;
}
Add the code in the theme panel – custom css box
Thank you!
Hello mynorknx,
If you want to get rid these paddings, you have to use a bit of CSS code to hide it. Please try the code below and place it in Theme panel->Custom CSS area.
The code is ->
.td-pb-row [class*="td-pb-span"] {
padding-right: 0;
padding-left: 0;
}
.td-main-page-wrap {
padding-top: 10px;
}
If you need more assistance in this regard, please provide your website URL so I can inspect it closer and so I will be able to provide a more accurate code.
Thanks.
Hi
Theme’s css works fine on your site even if is re-size the browser window, you just need to refresh the page: http://screencast.com/t/tHj9TtUCe – http://screencast.com/t/BYvfe2wsdFm4 – http://screencast.com/t/5jLNuazkcjYy
I gave you that css to change the header container display in order to have the top part clickable. The css works fine and does not affect the ad’s display.
Keep in mind that all this customizations require lots of tests in order to work fine in all situations. We can’t offer custom work at the moment so if you need custom services and you’rte not aware of the steps you need to take in this regard my advice is a developer or a freelancer to do customize your site for you.
We can offer support for anything related with theme’s functionality, how its features works and if is necessary also we offer fixes for any bug related with the theme. Any other customizations fall beyond the support can offer you.
Thanks for your message and for your understanding!
Hi,
You can use this css to hide the author only for the “player” post type:
.single-player .td-post-author-name{
display:none!important;
}
If you also want to remove the date as well, you can add this code instead:
.single-player .td-module-meta-info{
display:none!important;
}
Thank you!
Welll…..
a) if you use the speed booster framework, you would put the code into the Speed Booster plugin settings per the docs for that and the example from Lucien; *and* likely any custom css into your style.css and not in theme panel; and ideally NOT use child theme, to mimize any flash of unstyled text
b) if you’re doing custom hacking of your site, you would put any functions for de/enqueue into the functions.php where all such WordPress “actions” go; then you’d manually put your style.css link in footer. The WordPress codex has good tutorial on how “enqueuing” (adding to queue) works in WP.
c) You would then use the critical CSS generator found in my thread, to put the above the fold CSS “inline” in the header.php file. This loads only the needed CSS for above the fold to load with page — no render blocking of CSS — and then the rest loads with remainder of page. — Trial and error on this stuff.
These efforts are toward solving the pesky lower score on Google PageSpeed Insights for mobile “above the fold render blocking…”
This is a bit “advanced” stuff most folks won’t tackle. But if you’ve got everything ELSE as optimized as possible, this is kind of the LAST thing to do.
And frankly, if you’re using the AMP system for mobile, for a lot of folks, this will be a non issue as Google products will be loading the AMP version vs the responsive mobile version anyway.
So, one could argue if you have a desktop score of 92 or higher, and you’re running “AMP” on your site for posts, you likely don’t need to stress as much as before on the mobile score on Google’s direct testing speed tool. 🙂
( rant over . . . ) 🙂
Hi Chris,
The code in that thread, where is it inputted? Also, would it cause a delay in the css loading. I haven’t used the speed booster but of this delay. The jerky load of the page is annoying and not a good look I like out there.
