- 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,
First check the code double quote signs, it should be like this:
<script type="text/javascript" src="https://tribyoot.org/Tribyoot/wp-content/plugins/oiopub-direct/js.php#type=banner&align=center&zone=5"></script>
Try to add the following css in Theme Panel -> Custom CSS:
.span4 .td-a-rec-id-custom_ad_1 > div,.span4 .td-a-rec-id-custom_ad_2 > div, .span4 .td-a-rec-id-custom_ad_3 > div {
min-width: 350px;
height: auto;
}
Thank you, Emil G.
-
This reply was modified 11 years by
Emil G.
Hi,
1. Try this css in Theme Panel: http://screencast.com/t/m2vvb4fKCUU
.td_mod_mega_menu{
margin-left:auto;
margin-right:2.3%;
}
2. For homepage try this custom css: http://screencast.com/t/exSUo2E65qZ
.home .span8.column_container .span6:first-child {
float: right;
margin-left: 4%;
}
.home .span8.column_container .span6{
margin-left: 0;
}
3. Also for search try this custom css: http://screencast.com/t/fcKOVfE4Vp
.header-search-wrap .dropdown-menu .btn{
right: auto;
}
.header-search-wrap .dropdown-menu #td-header-search{
width: 82%;
}
Thanks!
Hi,
Unfortunately theme doesn’t have an option for this, but you can try with custom css and add background image to display your button.
Thanks!
Hi,
1. You can try this custom css for tablet screen: http://screencast.com/t/Pi6foUzb7KE
@media (min-width:768px) and (max-width:1200px){
.td-menu-wrap{
height: 100px;
}
}
2. Or you can try to use this custom css if you don’t want two rows on tablet view: http://screencast.com/t/Ty7E2fAWkuk
@media (min-width:768px) and (max-width: 1020px){
.sf-menu > li > a {
padding: 0px 11px 0px 0px;
}
.sf-menu > .td-menu-item > a{
font-size: 14px !important;
}
}
Also please use 20px font size for the main menu items so you will not have menu on two rows for width over 1020px – from Theme Panel > Custom Typography: http://screencast.com/t/1LVf1qk4hzpp
Thanks!
The last problem has been solved by putting the code in Advanced CSS
ok I fix it
just to add css
img.td-retina-data.td-logo.td-retina-version {
width: 300px;
}
thank you
Hi,
Try this css to change the color: http://screencast.com/t/6pcjyUsoXT
.blog-stack .td-menu-center .sf-menu > .current-menu-ancestor > a{
color: #999999 !important;
}
Thanks!
Hi,
Please take a look at your css because you forgot to close some } for your media queries. For example code for search it is apply only for screen size under 479px because the accolade is not closed. When an @media finish you should have two closing }. Please take @media one by one and I hope that your css code it will apply correctly.
Take a look on this screenshot and you will understand how it looks: http://screencast.com/t/0e64DFrb
Thanks!
Hi,
You can change the background using this css code: http://screencast.com/t/Nx9yc3F5c
.blog-stack .sf-menu .current-menu-ancestor > a, .blog-stack .sf-menu .current-menu-parent .current-menu-item a{
background-color: black !important;
}
Also like you see on image from above menu item link is blue, so if you want to change it you can do that from Theme Panel > Theme Colors: http://screencast.com/t/4B0hoDVyCh
Result: http://screencast.com/t/6pqFUdL4
Thanks!
Ok, thanks.
I think the problem is not the plugin itself, but the big css in the header.
Hi!
And thank you for your help!
The first one worked great for me, thanks for that, but when i flip the ipad from portrait mode to landscape the play icon leaves to the side from the sidebar like this : http://www.screencast.com/t/UYEF9Wbi5s
This is the full mobile css that i have added now:
@media (max-width: 767px) {
.wpb_widgetised_column {
display: none;
}
@media (max-width: 767px) {
.td-main-sidebar {
display: none !important;
}
@media (max-width: 767px) {
.container .span12 .row-fluid .span4 {
display: none;
}
.td_mod8 .item-details {
margin-left: 0 !important;
margin-bottom: 10px;
}
.td_mod8 .thumb-wrap img {
position: relative !important;
width: 100% !important;
max-width: none !important;
max-height: none !important;
margin-bottom: 10px;
}
}
@media(max-width:479px){
.home .td_block_big_grid{
display: none;
}
.home .td-grid-wrap {
padding: 0px !important;
}
@media (max-width: 767px) {
.container .span12 .row-fluid .span4 {
display: none;
}
}
@media (max-width: 767px) {
.td_mod8 .meta-info,
.td_mod8 .td-post-text-content {
display: none;
}
.td_mod8 .item-details {
margin-left: 0 !important;
margin-bottom: 10px;
}
.td_mod8 .thumb-wrap img {
position: relative !important;
width: 100% !important;
max-width: none !important;
max-height: none !important;
margin-bottom: 10px;
}
@media (max-width: 767px) { #td-top-search { position: absolute!important; right: 13px!important; top: 0px!important;
}
.header-search-wrap .dropdown-menu:before { left: auto!important; right: 31px!important;
}
.header-search-wrap .dropdown-menu { right: -14px!important; left: auto!important; top: 49px!important; width: 320px!important;
}
.mobile-logo-wrap img { width: 170px; position: absolute; left: 0; top: -3px; margin-left: auto; margin-right: auto;
}
}
@media (min-device-width : 375px)(max-device-width : 667px)(orientation : landscape){
position: relative !important;
width: 100% !important;
max-width: none !important;
max-height: none !important;
margin-bottom: 10px;}
@media (min-width : 375px) and (max-width : 667px) and (orientation : landscape){ .single img{ max-width: 50%; } .td-post-featured-image{ text-align: center; } }
Hi,
Using the latest version of the speed booster plugin which is 3.2 theme style will not be moved to the footer and will remain at the top of the page.
Usually by default in old speed booster versions, theme’s style css file was also moved to the footer but we have changed this in the latest version because this is the reason of loading the unstyled theme for a moment.
Using the default speed booster configurations and not moving the theme style to the footer and making the changes/customization to the theme’s style.css file without overwriting the initial design should solve this for now. But you could do this your way.
We’re also looking for a solution for this and we will implement it in next version of the plugin if we manage to find a better implementation.
Thanks
Hi,
We made a certain style in the beginning and some elements were disabled, in version 5 we will remove this style and we will add only css styling for Bbpress.
Thank you, Emil G.
Hi,
1) Try the following css:
@media (min-width: 767px) and (max-width: 1018px){
.td_block9 .td_mod8 .thumb-wrap img {
position: relative;
}
.td_block9 .td_mod8 .item-details {
margin-left: 0px;
margin-top: 10px;
}
}
2) It comes from a css which changes the stile for that section, try this one:
@media (min-width: 768px) and (max-width: 1199px){
.span8 > .td_mod8 .item-details {
margin-left: 366px !important;
}
.span8 > .td_mod8 .thumb-wrap img{
max-width: 326px !important;
max-height: 235px !important;
}
}
3) The image cannot be made taller without increasing it’s width (to maintain aspect ratio), by doing this you have to compress the text on the right side.
4)You could try to set a different size for mobiles using media queries:
ex:
@media (max-width: 767px) {
...
}
I don’t know what you’re using there so i cannot provide a precise css.
5) What css did you used? please paste it here so i can take a look.
@space above big slider on mobile – try this css:
@media (max-width: 767px) {
.td-page-wrap .td-grid-wrap {
padding-top: 0px;
}
}
Thank you, Emil G.
-
This reply was modified 11 years by
Emil G.
Why this css appear in template when view source, how to hide or remove it:
My site: http://www.baihocmoi.com/
<script type="text/javascript">/*<![CDATA[*/jQuery(document).ready(function(){var ajaxRevslider=function(obj){var content="<h2>THIS IS SOME TITLE</h2><br/>";content+="Type:"+obj.type+"</br>";content+="ID:"+obj.id+"</br>";content+="Aspect Ratio:"+obj.aspectratio+"</br>";data={};data.action='revslider_ajax_call_front';data.client_action='get_slider_html';data.token='1a59f464b3';data.type=obj.type;data.id=obj.id;data.aspectratio=obj.aspectratio;jQuery.ajax({type:"post",url:"http://www.baihocmoi.com/wp-admin/admin-ajax.php",dataType:'json',data:data,async:false,success:function(ret,textStatus,XMLHttpRequest){if(ret.success==true)
content=ret.data;},error:function(e){console.log(e);}});return content;};var ajaxRemoveRevslider=function(obj){return jQuery(obj.selector+" .rev_slider").revkill();}
var extendessential=setInterval(function(){if(jQuery.fn.tpessential!=undefined){clearInterval(extendessential);if(typeof(jQuery.fn.tpessential.defaults)!=='undefined')
jQuery.fn.tpessential.defaults.ajaxTypes.push({type:"revslider",func:ajaxRevslider,killfunc:ajaxRemoveRevslider,openAnimationSpeed:0.3});}},30);});/*]]>*/</script><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><meta name="generator" content="Powered by Visual Composer - drag and drop page builder for WordPress."/> <!--[if IE 8]><link rel="stylesheet" type="text/css" href="http://www.baihocmoi.com/wp-content/plugins/js_composer/assets/css/vc-ie8.css" media="screen"><![endif]--><style type="text/css">img.latex{vertical-align:middle;border:none}</style><style>.block-title a,
.block-title span,
.td-tags a:hover,
.td-scroll-up-visible,
.td-scroll-up,
.sf-menu ul .current-menu-item > a,
.sf-menu ul a:hover,
.sf-menu ul .sfHover > a,
.sf-menu ul .td-menu-item > a:hover,
.td-rating-bar-wrap div,
.iosSlider .slide-meta-cat,
.sf-menu ul .current-menu-ancestor > a,
.sf-menu ul .current-category-ancestor > a,
.td-404-sub-sub-title a,
.widget_tag_cloud .tagcloud a:hover,
.td-mobile-close a,
ul.td-category a,
.td_social .td_social_type .td_social_button a,
.dropcap,
.td-forum-category-title .td-forum-category-name,
.td_display_err,
.td_block_mega_menu .td-ajax-next-page:hover,
.td_block_mega_menu .td_ajax-prev-page:hover,
.post-via span,
.td_wrapper_video_playlist
.td_video_controls_playlist_wrapper{background-color:#d93}.block-title,
.sf-menu li a:hover,
.sf-menu .sfHover a,
.sf-menu .current-menu-ancestor a,
.sf-menu .current-category-ancestor a,
.header-search-wrap
.dropdown-menu,
.sf-menu > .current-menu-item > a,
.ui-tabs-nav,
.woocommerce .product .woocommerce-tabs ul.tabs,.td-forum-list-head,.td-login-panel-title{border-color:#d93}.widget_price_filter .ui-slider-handle,
.td_wrapper_video_playlist .td_video_currently_playing:after{border-color:#d93 !important}.author-box-wrap .td-author-name a,
blockquote p,
.page-nav a:hover,
.widget_pages .current_page_item a,
.widget_calendar td a,
.widget_categories .current-cat > a,
.widget_pages .current_page_parent > a,
.td_pull_quote p,
.page-nav-post a:hover span,
.td-forum-last-comment-content .td-forum-last-author,
.td-topics-title-details a,
.td-posted-in
a{color:#d93}.woocommerce .button,
.woocommerce .form-submit #submit,
.widget_price_filter .ui-slider-handle,
.jetpack_subscription_widget input[type="submit"],
.pp_woocommerce .pp_close,
.pp_woocommerce .pp_expand,
.pp_woocommerce .pp_contract,
.pp_woocommerce .pp_arrow_previous,
.pp_woocommerce .pp_arrow_next,
.pp_woocommerce
.pp_next:before,
.pp_woocommerce .pp_previous:before,
#bbpress-forums
.button{background:#d93 !important}.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,.bbp-template-notice,.td-reply-list-header{border-color:#d93 !important}.woocommerce .woocommerce-message:before,
.woocommerce .woocommerce-info:before,.td-login-button{background-color:#d93 !important}.buddypress #buddypress div.dir-search input[type="submit"],
.buddypress #buddypress .message-search input[type="submit"],
.buddypress #buddypress .item-list-tabs ul li.selected a,
.buddypress #buddypress .generic-button a,
.buddypress #buddypress .submit input[type="submit"],
.buddypress #buddypress .ac-reply-content input[type="submit"],
.buddypress #buddypress .standard-form input[type="submit"],
.buddypress #buddypress .standard-form .button-nav .current a,
.buddypress #buddypress .standard-form .button,
.buddypress #buddypress input[type="submit"],
.buddypress #buddypress a.accept,
.buddypress #buddypress #activate-page .standard-form input[type="submit"],
.buddypress #buddypress .standard-form #group-create-body input[type="button"],
.post-password-required input[type="submit"]{background:#d93 !important}.buddypress #buddypress .groups .item-meta,
.bbp-forum-title:hover,
.td_login_tab_focus,
.block-mega-child-cats a.cur-sub-cat{color:#d93 !important}.page-nav .current,
.page-nav-post
span{background-color:#d93;border-color:#d93}.wpb_btn-inverse,
.ui-tabs-nav .ui-tabs-active a,
.post .wpb_btn-danger,
.form-submit input,
.wpcf7-submit,
.wpb_default,
.woocommerce .product .woocommerce-tabs ul.tabs li.active,
.woocommerce.widget_product_search input[type="submit"],.more-link-wrap,.td_read_more{background-color:#d93 !important}.header-search-wrap .dropdown-menu:before{border-color:transparent transparent #d93}.td-mobile-content .current-menu-item > a,
.td-mobile-content a:hover{color:#d93 !important}.category .entry-content,
.tag .entry-content,.td_quote_box{border-color:#d93}.td-timeline-block-title{background-color:#d93 !important}.td-timeline-wrapper-links{border-color:#d93 !important}.td-timline-h1-link
span{background-color:#d93 !important}.td-page-title .td-search-query{color:#d93}.td-sbig-title-wrap .td-sbig-title,
.td-slide-item-sec .td-sbig-title-wrap,
.td-big-grid-title .td-sbig-title-wrap{background-color:rgba(221,153,51,0.7)}::-moz-selection{background:#ffcb65;color:#fff}::selection{background:#ffcb65;color:#fff}.post header h1, .post header h1
a{font-family:Tahoma,Verdana,Geneva}.td_mod_mega_menu .item-details
a{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px}</style><script>var td_blocks=[];function td_block(){this.id='';this.block_type=1;this.atts='';this.td_cur_cat='';this.td_column_number='';this.td_current_page=1;this.post_count=0;this.found_posts=0;this.max_num_pages=0;this.is_ajax_running=false;this.header_color='';this.ajax_pagination_infinite_stop='';}
var td_ad_background_click_link="";var td_ad_background_click_target="";var td_ajax_url="http://www.baihocmoi.com/wp-admin/admin-ajax.php";var td_get_template_directory_uri="http://www.baihocmoi.com/wp-content/themes/Newspaper";var tds_snap_menu="";var tds_header_style="";var tds_mobile_swipe="swipe";var td_search_url="http://www.baihocmoi.com/search";var td_please_wait="Please wait...";var td_email_user_pass_incorrect="User or password incorrect!";var td_email_user_incorrect="Email or username incorrect!";var td_email_incorrect="Email incorrect!";var tds_more_articles_on_post_enable="";var tds_more_articles_on_post_time_to_wait="";var tds_more_articles_on_post_pages_distance_from_top="0";var tds_theme_color_site_wide="#dd9933";</script>
Hi,
In that case you can also change the thumb used on module 10 and set it to use a larger one from the one the theme creates. So you can edit the module 10 file and change the thumb size to the one you want from the one available, like this: http://screencast.com/t/QQMxiCMC
You can find all thumbs size in the config file or in theme panel: http://screencast.com/t/eGILCU4e
Please note that after changing this might also need changing the thumb container style and adjust it via custom css.
Hope this helps!
Thanks
Hi,
Please try to use small font size for top menu items: http://screencast.com/t/z6td1ZGYeY4 and reduce margin, padding with this css:
.top-header-menu li a{
margin: 0px 0px 0px 3px;
}
.top-header-menu .td-icon-menu-down{
padding-right: 3px;
}
.td-header-sp-top-menu .td_data_time{
margin-left: 10px;
}
Thanks!
Hello!
First of all thank you for your time viewing my mobile and ipad issues!
I have these problems:
1) When i’m on an Ipad the portait mode looks like this in my Block 9 posts: http://www.screencast.com/t/BX8ZnV4e0 . How can i make the title and excerpt go to the bottom of the picture ?
Or if that’s not possible, how can i make these pictures smaller so the titles and excerpts look good ?
2) Ipad Landscape mode looks like this on the Latest articles/ Article list: http://www.screencast.com/t/uZRAfFyJ1g . How can i make these images go bigger like this : http://www.screencast.com/t/insdMSaj . Because when you visit my site http://www.sketsi.fi , you can see that the post images are correct size on Ipad Landscape mode, but when you scroll down and get to the Article list, it shows the post images in a smaller size.
3) Ipad portait mode also shows the Latest article list pictures smaller than it should be , so how can i get those bigger ? http://www.screencast.com/t/ajq8xs2Hlg
4) My mobile shows homepage post images too large, more than full screen size. How can i make these smaller, maybe like this, just on the mobile landscape mode ? http://www.screencast.com/t/MVr7oxewTjZO
Because now its like this, and you have to scroll really hard down to see the title and excerpts : http://www.screencast.com/t/qvljiAW0NY2
5) I managed to get the website logo in the middle and the search logo on the right, but only in the mobile portait mode like this http://www.screencast.com/t/cSstk8tc12 . How can i also make this the same in the mobile landscape mode ? now its like this: http://www.screencast.com/t/5oQkd4gQ0 .
And there is also a gap between the menu and the big slider in the mobile landscape view.
I had the same thing in mobile portait mode, but the texts were way too big and the gap was confusing, so i had to disable it. Any suggestions on these ?
Hi,
1. Please try this custom css to hide subcategories from mobile menu in Theme Panel > Custom Css: http://screencast.com/t/yRuT7Fge8Vp
.td-mobile-content .sub-menu{
display: none;
}
2. For megamenu use this css code:
.td_mod_mega_menu{
float: right;
}
Result: http://screencast.com/t/07b9plER – http://screencast.com/t/mqFR1oy5
3. Also for category pages: http://screencast.com/t/pP96VMwBqX
.archive .span8.column_container .span6:first-child {
float: right;
margin-left: 4%;
}
.archive .span8.column_container .span6{
margin-left: 0;
}
Please search also on the forum there are many rtl threads that may can help you: https://forum.tagdiv.com/search/rtl/
-
This reply was modified 11 years by
Alin [tagDiv].
Hi,
I added this in our list and we will try to fix it soon as possible.
Please try this css solution untill we solve this issue: http://screencast.com/t/nT9Y1vHYDd
#inner-wrap{
min-height: 600px;
}
Please increase height value if you add more menu items.
Thanks for reporting this and sorry for inconvenience!
Hi,
Try this css code in Theme Panel > Custom Css: http://screencast.com/t/kmWMfD2f
.blog-stack .sf-menu ul li{
background-color: #5C5A5A;
}
.blog-stack .sf-menu ul .menu-item a:hover{
background-color: black;
}
Hope this helps!
Hi,
Try this css in Theme Panel > Custom Css: http://screencast.com/t/M1Leh7h2q
.td-load-more-wrap a{
color:red !important;
}
.td-load-more-img{
display: none !important;
}
Thanks!
Hi,
You can try this css code for images on post page: http://screencast.com/t/qUkH233SxOJ
@media (min-width : 375px)
and (max-width : 667px) and (orientation : landscape){
.single img{
max-width: 50%;
}
.td-post-featured-image{
text-align: center;
}
}
Please try this css code for space between the menu and the Big Slider: http://screencast.com/t/C9pB6IcgUF
.home .td-grid-wrap {
padding-top: 10px;
}
Thanks!
Hi,
Please paste a link which contains an element that’s not displayed properly, i’ll look into it and get back with a css fix.
Thank you, Emil G.
Thanks for the reply. Unfortunately, setting the frontpage to display the latest articles removes key customization elements that I need to utilize. It sounds like my only way to achieve what I’m looking for is to modify the code?
Is there any way I can create my own block? Or to make it easier, take the existing code of a similar block such as Block 3 and edit it to fit my needs?
As mentioned, I’m familiar with HTML, CSS, PHP, and some Javascript. However, I’m still relatively new to this. Is there any way that you could give me a little bit of direction on how/where to find the code that represents these Blocks so I can customize my own? I would greatly appreciate it.
Any additional information that you think would help me would also be greatly appreciated, thanks.