- 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
I implemented both of those in the custom CSS portion of the Theme Panel and nothing changed. Did I do something wrong?
https://www.dropbox.com/s/ittliuuqhtlcwy9/Screenshot%202016-08-02%2010.37.20.png?dl=0
Hey guys,
I’m trying to achieve the following effect, via CSS:
1. Making the sidebar on an article page narrower.
2. If possible, making the main container wider (i.e. eliminating the gutters / padding from the left and right edges of the screens).
Here’s an example:
A. http://www.themarker.com/ (almost no gutters)
B. http://www.haaretz.co.il/labels/pegasus/1.2554019 (Narrower gutters)
What’s the best way to achieve these in terms of which div ID’s/Classes to play with in the CSS?
Thanks 🙂
Hello,
I’m not aware of any straightforward solution to what you’ve asked but there are some recommendations that you can consider. On my website I have added following code to .htaccess file:
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 2592000 seconds"
So it’s kind of workarround but it optimize loading because those lines utilize browser caching so user’s browsers will not fetch images (I’m guessing your ads are some kind of images) that often (as it would if there’s no mentioned code in .htaccess).
As you can see I’ve done same ‘optimization’, in terms of loading those resources, for the css and js.
Hello,
The only problem with this is that even with the Custom CSS, the ads still carry with the page, and at certain times it is possible to see the page of relocating to hide the ads.
There is a way to block the loading?
Hello
If you want to achieve this -> http://screencast.com/t/tfjSe2rMN , you will have to use a bit of CSS code to do that.
The code is ->
.td_module_trending_now .td-module-title a {
color:red!important;
background-color:blue!important
}
Thanks.
Hi
You can try to modify html structure of block title element and to achieve that you need to edit the function which generate it: http://screencast.com/t/t5ax8sKyX
You can try something like this, it may help:
$buffy .= '
';
If that does not work try using pseudo element before: http://www.w3schools.com/css/css_pseudo_elements.asp – http://www.w3schools.com/css/tryit.asp?filename=trycss_before
Hope this helps.
Thanks!
HI
You can try this css in theme panel > custom code > custom css:
.page-id-123 .td_block_2 .td-excerpt{
display: none!important;
}
Just add the page id in css class and it should work fine: http://screencast.com/t/tEB8AEJo
Let me know how it goes.
Thanks!
Hello christinarroot,
If you want to change the hover color for post category, please try to use the code below and place it in Theme panel->Custom CSS area.
The code is ->
.td-hover-1 .td-big-grid-post:hover .td-post-category {
background-color:red!important;
}
The result you should see here -> http://screencast.com/t/hnFlu9yTvGZ
Thanks for your understanding!
HI
Try this css in theme panel > custom code > custom css: http://screencast.com/t/jndZLrh1GgUn
.td-footer-template-14 .block-title{
display: none;
}
IF this is not what you mean please provide your site url so I can have a closer look and get back to you with a more accurate answer.
Thanks!
Hi
That happens because some fonts do not support Greek characters. The css works fine and the font is applied over each element, but when the title contains Greek characters is not rendered: http://screencast.com/t/OBqRZncirYXZ Try to download a font which support Greeks characters and use it as a custom font for the site: https://forum.tagdiv.com/newsmag-using-custom-fonts/
Thanks!
Hi
Speed Booster plugin only moves css/js resources to page’f footer and should not affect the seo. We did not received such reports so far but if you consider that it affect the site you can deactivate the plugin.
Thanks!
Hi
Unfortunately mobile theme does not have options which allows you to change the fonts yet but probably in future we will add such options. For the moment to load different fonts for mobile you have to edit theme’s code. The css code for mobile theme is located here: http://screencast.com/t/XFivsX0A1 but to change the font for all elements you have to go trough all code and locate the lines which refers to font-family. This is a quite difficult task considering the code’s size. The easiest way to keep the desktop fonts on mobile is to deactivate mobile theme plugin.
Yes we’re aware about that issue and will be fixed in next theme’s update but meanwhile you ca use this css in theme panel > mobile theme > custom code to fix it.
.td-post-author-name div { display:inline; }
Thanks!
HI
This task cannot be achieve just by coping and pasting some code in a file. This may probably worked in a previous theme but we use a custom structure for files and it’s a bit more complicated.
You have to edit the file which correspond with thew post template used and paste the code in post’s meta-info container: http://screencast.com/t/ueEY2sfq You will also need some css customizations for button’s style otherwise the layout may affected a bit.
To achieve this task you need some basic codding skill as there are required changes in theme’s code. Unfortunately we can’t offer customization services at the moment so if you still need guidance on this or you’re not aware of the steps you need to take in this regard please consider hiring a developer or a freelancer to do this for you. Also consider using theme sharing buttons which include twitter, as an alternative: http://screencast.com/t/CSlSFryt
Thanks!
Hello Jay,
Unfortunately, our theme does not have such a simple option that offers you a way to add different menus for different pages, sorry! Is needed to make some additional customizations through code in order to achieve best results and if you do not have any experience in PHP/HTML/CSS you will not bring good results and place consider hiring a freelancer/developer to help you because we cannot provide customization services at the moment, sorry!
As a hint, you will have to declare a new ID for your custom menu in function hook_init() from td_menu.php like this -> http://screencast.com/t/y6czZKpC2 and then depending on what header you use, you will have to add the condition, like this -> http://screencast.com/t/rbMRlAi875E9
Please notice that is not a simple task and require to have some experience in this regard to accomplish this task.
Thanks for your understanding!
Hi
You have to edit page-pagebuilder-title.php file and add the code in the case which corresponds with sidebar’s position for that page: http://screencast.com/t/onVhyUOK61 Note that you will also need some css customizations in order to achieve the deserted result. This task involve some codding skills and if you’re not aware of the steps that must be taken in this regard my advice is to look for someone who can help you with implementation as we can’t offer custom work.
Thanks!
Hello Catalin,
thanks for your effort. I’ve tried to sort it out using css in custom code and it seems to be working as I wanted.
CSS code that I’ve uesd is:
article:not(.category1):not(.category2) .td-a-rec-id-content_inlineleft {display:none;}
where .category1 and .category2 are selectors of articles with specific class attributes.
-
This reply was modified 10 years by
mabaz.
Hello Praveen,
If you want to hide the Google Adsense for your particular post, please notice that you will have to use a bit of CSS code to hide the td-g-rec class and also, you will have to get the post ID for your particular post where you want to hide the Ads.
Below, I gave you an example for a post which I have hidden the Google Adsense, like this ->
.postid-462 .td-g-rec {
display:none;
}
-> http://screencast.com/t/lPJ1wGeUtUOL
You will have to do something similar for your side, take the post ID and apply the code provided above.
Thanks for your understanding!
Hi
You have to use the code like here: http://screencast.com/t/XHuVjj3my0
<?php echo get_post_meta($this->post->ID, 'custom-field-name', true); ?>
In above example I’ve added post_views_count field in trending now block. Note that you will need this css to make the custom filed content visible: http://screencast.com/t/ynfAnosf
.td-trending-now-display-area .entry-title {
display: inline-block!important;
}
Thanks!
Hi Catalin,
Thanks for this. I have added this code and it appears to have resolved the desktop/laptop browser issue. But when I look at an article on my Android phone, it is still rendering broken and disjointed as before.
I added the code as follows:
.td-post-author-name div {
display:inline!important;
}
I am not using the mobile theme by choice. I just want my site to use the regular responsive feature.
Is there any additional CSS coding I could use to force it to fix it in android?
I have emptied the cache after the change and emptied the cache in all browsers, but still no luck on the android side of things.
Thank you very much for your help.
Kind regards
-
This reply was modified 10 years by
MESOTU.
Hello again! 🙂
I cannot see a way to customise the fonts or appearance of the mobile theme. I have read that this hasn’t been implemented yet. What CSS I would need to add to change the post title and post body fonts?
Most notably, I use a custom font called font2-webfont.woff as General Font for all post titles, which renders well on mobile but disappears when I use the mobile theme. I’d like to add this into the custom CSS so it uses it on the theme. What code do I need to add to do this?
Also, are you aware of the bug with the author and date disappearing at the top on the mobile theme? I’m using a Galaxy S6 Edge Plus with the Chrome browser.
Hello,
I have just bought the theme and may have a number of questions!
I would like to add an additional element to the line where the author and date is on posts. I know I will have to do this in the CSS files, but I do not know where to look.
I’m specifically looking to add a clickable Twitter follow button inline after the author. I already know this can be done as I did this manually on my previous theme using code as follows:
<?php if( $twitter_url = get_the_author_meta(‘twitter’) ) : ?>
” class=”twitter-follow-button” data-show-count=”false” data-show-screen-name=”false”>Follow @<?php echo basename($twitter_url); ?>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);</script>
<?php endif; ?>
Hello Winock,
Please try the code below and place it in Theme panel->Custom CSS area.
The code is ->
.td-post-content p {
text-align: justify;
}
Thanks.
Hi
Sorry for misunderstanding.
This happens because you’re using homepage post element which extends by default above main menu. Try this css in theme panel > custom code > custom css to make the background black: http://screencast.com/t/yQMoNEoaV
.home .td-header-style-8 .td-header-sp-logo {
background-color: black;
}
Thanks!
Hello johnmiao,
If you want to decrease the padding-bottom and margin-bottom for your Block 17, please try the code below and place it in Theme panel->Custom CSS area.
.td_block_17 .td_module_8 {
padding-bottom: 5px;
margin-bottom: 5px
}
Thanks.
Hello,
It seems your images are getting a margin from something called blogchatter: http://screencast.com/t/vnNJdxsK If I remove this margin then images position OK. You can either remove blogchatter or use this css as a quickfix:
.td-post-template-default .td-post-featured-image img{
margin:0!important;
}
Thank you!