- 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
- NewsmagtagDiv Composer Tutorial
- TutorialsFrom WPBakery to tagDiv Composer
- NewspapertagDiv Composer Tutorial
- NewspaperTheme modules and blocks
- TutorialsDefault Block Settings Guide
- NewspaperThe Mobile Theme
- NewspaperCompare theme files – Winmerge tutorial
- NewsmagBlock settings tutorial
- NewsmagLogo & Favicon
- NewsmagFooter templates
Hello RaulCalin,
Please try the code below and place it in Theme panel->Custom CSS area.
.td-md-is-firefox .td-main-page-wrap {
padding-top:0;
}
Hope this helps!
Thanks.
Hi
Try this css in theme panel > custom code > custom css: http://screencast.com/t/BEs4parq
.td-post-category {
display: none!important;
}
If this is not what you mean please provide more details about what you’re trying to do, also provide your site url, so I can inspect it closer and get back to you with a more accurate answer.
Thanks!
Hi
Are you referring at more article box pop-up? If so try this css in theme panel > custom code > custom css: http://screencast.com/t/PZ9zpwytJp
.td-more-articles-box{
top: 48px;
height: 300px;
}
If this is not what you mean please provide more specific details about the desired result. also provide your site url, so I can inspect it closer and get back to you with a more accurate answer.
Thanks!
Regarding 1) – I made some progress. Can you help me assigning the proper CSS class to the menu items so they are being centerized? -> http://prntscr.com/c8qcv9
At this time, they are being listed on the left, with no style at all. I want to use Headers’ 10 style for this menu.
FIY (and for everyone that is trying to achieve this), what I did so far is to add this code in functions.php:
function print_menu_shortcode($atts, $content = null) {
extract(shortcode_atts(array( 'name' => null, ), $atts));
return wp_nav_menu( array( 'menu' => $name, 'echo' => false ) );
}
add_shortcode('menu', 'print_menu_shortcode');
Then I added this line on header-style-10.php (the one I use):
http://prntscr.com/c8qdl3
I created a menu, called ‘middlemenu’ and it worked. However Im not sure what CSS classes should I enter there.
Please advise.
Hello again;
I searched the Internet for the problems posed to you, and they told me that I have to change these values in the file style.css:
float
margin
padding
From left to right.
When you do that you encounter a problem in the pictures they stayed in the left and did not turn to the right.
Indicative correct solution, please.
Is what you’ve done in your opinion enough to change the direction of the “NewsPeaper” from left to right? What I lack?
Waiting for a positive response this best greetings
HI everybody,
I have problem with FB Instant Articles – Transformer Rules. Sorry, my english isn’t good! 🙁
I use “Instant Articles for WP” Plugin. I encountered some errors later.
No rules defined for <style> in the context of InstantArticle
No rules defined for <div class=”td-slide-on-2-columns”> in the context of InstantArticle
Can you help me convert <style> and <div class=”td-slide-on-2-columns”> to FB Instant Articles ?
<style type="text/css">
<p> #td_uid_1_57b9594c30794 .td-doubleSlider-2 .td-item1 {
background: url(https://cellphones.com.vn/sforum/wp-content/uploads/2016/08/183854rxj7pmpzmn00b0hm-80x60.png) 0 0 no-repeat;
}
#td_uid_1_57b9594c30794 .td-doubleSlider-2 .td-item2 {
background: url(https://cellphones.com.vn/sforum/wp-content/uploads/2016/08/183852k6ldl12hz12gm922-80x60.png) 0 0 no-repeat;
}
#td_uid_1_57b9594c30794 .td-doubleSlider-2 .td-item3 {
background: url(https://cellphones.com.vn/sforum/wp-content/uploads/2016/08/183840um6iqz6dmffxtqfy-80x60.png) 0 0 no-repeat;
}
#td_uid_1_57b9594c30794 .td-doubleSlider-2 .td-item4 {
background: url(https://cellphones.com.vn/sforum/wp-content/uploads/2016/08/183832z0fu0i17z1124x87-80x60.png) 0 0 no-repeat;
}
#td_uid_1_57b9594c30794 .td-doubleSlider-2 .td-item5 {
background: url(https://cellphones.com.vn/sforum/wp-content/uploads/2016/08/183821z4ne7hdd7thcla80-80x60.png) 0 0 no-repeat;
}
</style>
<div id="td_uid_1_57b9594c30794" class="td-slide-on-2-columns">
<div class="post_td_gallery">
<div class="td-gallery-slide-top">
<div class="td-gallery-title">Elephone S7</div>
<div class="td-gallery-controls-wrapper">
<div class="td-gallery-slide-count"><span class="td-gallery-slide-item-focus">1</span> trong 5</div>
<div class="td-gallery-slide-prev-next-but">
<i class = "td-icon-left doubleSliderPrevButton"></i><br />
<i class = "td-icon-right doubleSliderNextButton"></i>
</div>
</p></div>
</p></div>
<div class = "td-doubleSlider-1 ">
<div class = "td-slider">
<div class = "td-slide-item td-item1">
<figure class="td-slide-galery-figure td-slide-popup-gallery">
<br />
<br />
</p>
</figure></div>
<div class = "td-slide-item td-item2">
<figure class="td-slide-galery-figure td-slide-popup-gallery">
<br />
<br />
</p>
</figure></div>
<div class = "td-slide-item td-item3">
<figure class="td-slide-galery-figure td-slide-popup-gallery">
<br />
<br />
</p>
</figure></div>
<div class = "td-slide-item td-item4">
<figure class="td-slide-galery-figure td-slide-popup-gallery">
<br />
<br />
</p>
</figure></div>
<div class = "td-slide-item td-item5">
<figure class="td-slide-galery-figure td-slide-popup-gallery">
<br />
<br />
</p>
</figure></div>
</p></div>
</p></div>
<div class = "td-doubleSlider-2">
<div class = "td-slider">
<div class = "td-button td-item1">
<div class = "td-border"></div>
</p></div>
<div class = "td-button td-item2">
<div class = "td-border"></div>
</p></div>
<div class = "td-button td-item3">
<div class = "td-border"></div>
</p></div>
<div class = "td-button td-item4">
<div class = "td-border"></div>
</p></div>
<div class = "td-button td-item5">
<div class = "td-border"></div>
</p></div>
</p></div>
</p></div>
</p></div>
</p></div>
I am not sure what you mean.
I implemented the CSS that Catalin provided me above and it worked great!
This topic was solved.
-
This reply was modified 10 years by
aberniz.
a) note the tagdiv business hours, top right of forum.
b) Might just be your home page layout,
this page shows as mobile friendly
http://top10reviewz.in/prize-money-gifts-p-v-sindhu/
However you need to pay attention to the errors presented:
* This page uses 2 resources which are blocked by robots.txt.
* A temporary error occurred. 2 resources on this page could not be loaded. The results and screenshot may be incorrect. You may want to try again later.
https://static.xx.fbcdn.net/…mMhp4i.css
https://static.xx.fbcdn.net/…dQgHfSn.js
c) generally to make your site ‘mobile friendly’ you need to ALSO optimized your server for speed and proper server setup, compression, time to live, etc., optimize images, etc.
For example, I tested your page here:
https://gtmetrix.com/reports/top10reviewz.in/2UlrZtmY
Page Load Time
15.9s
Total Page Size
4.05MB
Requests
212
————-
For optimum page, you should serve less than 50 requests, page size should be under 1MB, 2MB for a photo site perhaps with a lot of uncompressed images, and page load should be as close to 1 second as possible, and not more than 4 seconds.
You have a lot of work to do to optimize your website.
Good luck!
How do I clear the css code that made me send?
Hi Bogdan!
Thanks for the CSS and your speedy reply.
That did the job.
I wasn’t aware that the comment “pointer” is a pseudo-element that uses border color. You can ignore my note about a folder…I thought perhaps the pointer was made using a small triangular image. 😉
I have another question regarding the category background color. Is it okay to ask here? I’ll ask it here now…if I don’t get an answer, I’ll move it to new post. 😉
.td-post-category{
background-color:Red;
}
I have noticed that the above CSS works on the category background color for the home page blocks and sidebar blocks, but the CSS doesn’t work for the category background color of a single entry/post template.
BTW: I am using the post template (Style 9) for my posts. The category background color is black. I’d like to change it to red.
I looked up the single entry/post template category CSS name in Firebug Inspector. I believe it is called, “entry-category”. I edited this CSS element exactly like the style above, but The category background color is still coming up black after the edit.
Could you please tell me how to change the category background color the entry/post templates?
Thanks!
Dobar Dan and Cheers!
Oh, and as you may or may not know, with the over-rides if you put them in the theme panel CSS box, you often need to put !important at the end to get it to do it.
vaporwavezone
good idea to learn to use Chrome web browser and the F12 inspector. You can highlight any CSS element on page to find it, then add custom CSS over-ride to your panel CSS box, or often at bottom of your style.css file.
SO, for example on your page:
.block-title > span, .block-title > a, .block-title > label, .widgettitle, .widgettitle:after, .td-trending-now-title, .td-trending-now-wrapper:hover .td-trending-now-title, .wpb_tabs li.ui-tabs-active a, .wpb_tabs li:hover a, .td-related-title .td-cur-simple-item, .woocommerce .product .products h2, .td-subcat-filter .td-subcat-dropdown:hover .td-subcat-more {
background-color: #4db2ec;
}
so, just an example you might “try” something like this:
.widgettitle, span {background-color: #990000}
or
.widget, .widgettitle, span {background-color: #990000}
or something like that.
Remember TagDiv support only open M-F during their local business hours, closed weekends. Might be the weekend “now” in their timezone.
But experiment with the above. You can also simply edit the style.css file at line 11045.
Note that the widget is a default widget from WordPress, and *not* the theme, hence no admin panel settings on that element.
Sorry if that isn’t exact CSS to use; just pointing you in right direction. 🙂
(I don’t work here.)
-
This reply was modified 10 years by
simchris.
Ok Thanks.
About The Sign In in the top bar.. how can i make it more attractive and visable.. like perhaps a button style concept or what ever you suggest that would be visually appealing and stand out..
you supplied with the following CSS which only changes the colur of txt.. what else can you do to make it more appealing with Custom CSS
.td-header-top-menu .td_ul_login a {
color: #ff0000;
}
Hi
Manuel compression is quite difficult to do because our css is big and it takes a lot of time. Best way is to use an automatic tool.
Google is very restrictive when it comes about mobile page-speed. Even if the resources are in page’s footer sometimes they appear as render blocking in page-speed report. This is the case on your site. On a closer look you can see that all render blocking resources are loaded in footer. Google have it’s own algorithm when generate the reports and the theme can’t change that.
Thanks!
Hello,
Unfortunately our theme has no such options from it’s settings so only a custom “creative” approach will do it in this case. Please provide a link to your site so we can inspect the banners and provide a css solution if one is found.
Thank you!
Just to clarify Yes just noticed the CSS change worked tho if you can help out with how to improve visual and would be great!!
How do i choose what is displayed on mobile version? Currently it displays 3 posts like slider layout .. one after another.. tho how can i display a Slider that is currently on my desktop version but cant see on mobile version?
Hi,
I could not access your site as it;s in maintenance mode, but I assume you are referring to the image overlay on the grids. Please follow this topic for a css trick to remove it:
https://forum.tagdiv.com/topic/home-page-blocks-3/
I hope this helps.
Thank you!
Hello,
The author will need a bit of a css fix as the css got changed a bit in the new update but the author name was not updated for it. So until the next theme version please use this CSS code in the mobile theme’s custom code box:
.td-post-author-name div { display:inline; }
Sorry for the inconvenience.
For your second request, we only recommend these settings with wp super cache: https://forum.tagdiv.com/cache-plugin-install-and-configure/
I hope this helps.
Thank you!
Hi
Try this css in theme panel > custom code > custom css: http://screencast.com/t/dXq54C9tp2zX
.td-top-bar-container {
margin-top: 15px;
margin-bottom: 15px;
}
Thanks!
Thats Unfortunate that we cant add sign in as shortcode or widget..
Ok so i tried the Custom Css .. cant see the change..
What i like to do is not just change the colour but make it more attractive and visable.. like perhaps a button style concept or what ever you suggest that would be visually appealing and stand out..
If I do manual CSS Compression and upload..it will help full for me…?
Hi,
So what you would like to do? Do you want to change its color?
You can try this custom css in Theme Panel > Custom Css – http://screencast.com/t/YCO05sxaW
.td-header-top-menu .td_ul_login a {
color: #ff0000;
}
Unfortunately there is no login widget available, it was implemented only for top menu and mobile menu.
Thanks!
HI
Please make sure that Speed Booster plugin is active in System Status: http://screencast.com/t/cR5vCirTsM For more details in this regard please check this topic: https://forum.tagdiv.com/topic/can-you-suggest-a-recommended-popup-plugin-for-newspaper-theme/
To minify the css you could use an online tool like – http://csscompressor.com/
When Speed Booster plugin is used the theme load a minified version of js and google notifies you about some scripts which are not related with Newspaper theme: http://screencast.com/t/NLvMO8OGNSu You can try a cdn service to minify the js, it may help.
Thanks!
Hello,
If none of the styles work out for you, you can try this css:
.td_social_type .td-social-box{
background-color:grey!important;
}
I have added a grey color as requested.
You can add the code in the theme panel-custom css box
I hope this helps.
Thank you!
Hello,
For the header if you want to increase the main menu beyond 90px you will need css to do it. Please use this code (I also added a bottom border for the header – the ‘shadow’):
.td-header-menu-wrap-full{
height:120px!important;
border-bottom: 1px solid black;
}
ul.sf-menu > .td-menu-item > a{
line-height: 120px!important;;
}
@media(min-width:768px){
.td-header-style-5 .td-main-menu-logo{
height: 120px!important;
}
.td-header-style-5 .td-main-menu-logo a{
line-height: 120px!important;
}}
As for the featured images, unfortunately you altered the theme width and thus the width of the container for the thumbnails. The theme will not adjust the thumb size. If you alter the theme width you need to adapt every element to the new width as our theme was built with a fixed width and all thumbs have a fixed width as well.
Our theme elements were not meant to be displayed in a stretched row so please do not stretch row and content. Only use the stretch row option.
Thank you!