- 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
Hi
I’ve included a screen shot of the problem: https://imgur.com/a/BQby5. It’s the thin tabel border line I would like gone. But eventhough I use border=0 etc, it’s still there. I think it’s someting in the style.css, but I’m not sure.
Thanks in advance
Hi,
I have tried uploading a svg file in the media library, but this is not allowed by WordPress by default. I had to use a function in order to be able to upload it
– https://css-tricks.com/snippets/wordpress/allow-svg-through-wordpress-media-uploader/
I then uploaded a random svg image in the library, it appeared like this
– https://www.screencast.com/t/62qY6T8jIg
Then I tried setting it as logo, seems to work for me
– https://www.screencast.com/t/4EXNt6ZbRfG
– https://www.screencast.com/t/ZwEIR7vccdw
– https://www.screencast.com/t/MMltiMFYUc
Maybe try it as I did and check the results.
Thanks
Hi,
The theme does not have such settings, once inserted in the theme panel the ads will show on all pages. Also hiding Adsense ads with CSS is not recommended by Google.
You could instead use a plugin to display ads on the website. Maybe try teh Adrotate plugin, this is recommended by our users if you want to have more advanced ad settings and control. Some guides here if you would like to give it a try
– http://www.wpbeginner.com/plugins/how-to-manage-ads-in-wordpress-with-adrotate-plugin/
– https://ajdg.solutions/manuals/adrotate-manuals/
Thanks
Hi, I am performing speed optimisations. I have used autoptimze plugin for CSS and html but have found (as others have on this forum) that using this for javascript breaks the theme.
I cannot use tagdiv speed booster as i have incompatible plugins.
Can you recommend a plugin that will help with javascript?
Also, these are my javascript that are render-blocking.
Do you know which ones can be parsed?
https://www.mysite.com/wp-content/themes/Newspaper/js/tagdiv_theme.min.js?ver=8.5.1 (172.1KiB)
https://www.mysite.com/wp-includes/js/jquery/jquery.js?ver=1.12.4 (87.0KiB)
https://www.mysite.com/ (23.9KiB of inline JavaScript)
https://www.mysite.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1 (7.7KiB)
https://www.mysite.com/wp-includes/js/wp-embed.min.js?ver=4.9.4 (1.2KiB)
https://www.mysite.com/wp-includes/js/comment-reply.min.js?ver=4.9.4 (918B)
Is it possible to assign different colors to different categories (regardless of what block/module). What would the css be to do that please?
Hi,
The main menu background can be changed in the theme panel, this will affect the whole website. An option to have different colors by category does not exist, unless custom code is used.
This is an example where I used a code to achieve different backgrounds, by category
– https://www.screencast.com/t/sqfbHe3jV
– https://www.screencast.com/t/5ELJAvc5p
Notice that that by using the category unique class in the code, the results are like you want. Each category page displays the category name and category ID on the body
– https://www.screencast.com/t/VS62hv9PJ
You can use either one in the code
– https://www.screencast.com/t/t1cXHbXgK
This is the code used in the example
.category-2367 .td-header-wrap .td-header-menu-wrap-full {
background-color: blue;
}
Create a different one for each category, then enter it in Theme panel->Custom CSS
– https://www.screencast.com/t/C6nCeuB5HF
This is also a useful tutorial about using the browser inspector to identify the elements on the page and created code for various customization
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thanks
Hi,
The code may be present in the theme custom code sections
– https://www.screencast.com/t/gkb1np1Kr9
Also try editing the page with the composer and check the CSS tab
– https://www.screencast.com/t/1lAeECW1u
And the CSS section here – https://www.screencast.com/t/6ylPiRTN
If you cannot find anything there we could take a look. Send us an email at contact@tagdiv.com and provide admin login information. Also include a link to this topic in the email.
Thanks
Hi,
The header background color can be changed to your linking in the theme panel
– https://www.screencast.com/t/imbQN5KP
The craft demo uses header style 11, it has a logo image and a background
– https://www.screencast.com/t/w7hHOhNcmWwn
However a thing to note is that header style 9,10, and 11 do not have a limit for the logo image size. You can use any image you want
– https://forum.tagdiv.com/logo-favicon/
This demo would be an example of a full width big logo
– https://demo.tagdiv.com/newspaper_cars/
Regarding the footer section, there are many templates to choose from
– https://forum.tagdiv.com/footer-templates/
Some have predefined content, others are empty templates in which you can insert your desired widgets.
The demo used footer template 14, enter your own information in the theme panel and it will appear in the footer
– https://www.screencast.com/t/RPAcxC4qup
– https://www.screencast.com/t/ZstTQg601mr6
Or select a different page template of your choosing.
I believe you are referring to the excerpts displayed on modules (center aligned)
– https://www.screencast.com/t/RXiC4JzrN
Those could be justified with a code like this entered in Theme panel->Custom CSS
– https://www.screencast.com/t/wXUQ91O4RO
.td_module_18 .td-excerpt {
text-align: justify;
}
Rows can be split in columns in the row settings
– https://www.screencast.com/t/DNt18HtVh
You can use widget sidebars if you wish, there is an element for that
– https://www.screencast.com/t/YM3HYouq9x7D
Then you can display sidebars from your available ones.
Big grids and full big grids can only be placed on full rows, a bog grid cannot have a sidebar beside it. Use blocks and other elements for that. These are all the available grids and blocks
– https://demo.tagdiv.com/newspaper/big-grid-1/
– https://demo.tagdiv.com/newspaper/full-big-grid-1/
– https://demo.tagdiv.com/newspaper/block-1/
Thanks
Hi,
@Filandor I couldn’t say if there will be a setting to toggle top bar display on mobile. If this request becomes more popular, it may be considered for implementation. So for the moment it could only be displayed with CSS code.
Thanks
Salutare,
Multumim pentru apreciere, incercam sa facem tot posibilul pentru a oferi un produs de calitate.
1. Da se poate, in setarile WordPress
– https://www.screencast.com/t/Tn9BGdFs
– https://www.screencast.com/t/16HPVEfDyrto
– https://codex.wordpress.org/Formatting_Date_and_Time
2. In author box trebuie introdus ID-ul userului
– http://www.wpbeginner.com/beginners-guide/how-to-find-post-category-tag-comments-or-user-id-in-wordpress/
– https://www.screencast.com/t/VZJKCy6TOg
Vor aparea inforamntii preluate din profilul user-ului
– https://www.screencast.com/t/xFmhvLsoA
3. Icoanele de share vor fi ascunse automat, doar cand nu este destul spatiu disponibil
– https://www.screencast.com/t/oEPEJBgMOxOT
– https://www.screencast.com/t/h6YzT7qaE6
Sunt multe stiluri disponibile pentru icoane in theme panel
– https://www.screencast.com/t/25ub7K9b5
4. Acele tag-uri post fi customizate doar cu CSS, la momentul acesta. Nu este o setare pentru a personalize culoarea acestora. Poate va fi disponibila dupa un update viitor, nu as putea spune sigur.
Deci se poate folosi CSS in aceasta privinta
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
5. Sectiunea de latest (si sidebar aferent) va fi afisata cand este selectat acest page template
– https://www.screencast.com/t/ytNJMKHQmw4
Se poate customiza, sunt optiuni pentru aceasta sectiune. Sau se poate selecta un page template diferit.
6. Acele elemente din footer sunt predefinite. Unele footer templates contin elemente predefinite, altele sunt goale
– https://forum.tagdiv.com/footer-templates/
Elementele predefinite nu pot fi modificate. Se pot adauga widgets in footer configurate dupa preferinta
– https://www.screencast.com/t/G1gd1co9WdMv
7. Acela este un post template (post template 11). Sunt multe modele din care se poate selecta, indiferent de demo instalat
– https://forum.tagdiv.com/post-templates-2/
Pentru featured video posts se recomanda a fi folosite doar unele post templates
– https://forum.tagdiv.com/featured-image-or-video/
8. Se poate customiza in theme panel cu setarile disponibile
– https://forum.tagdiv.com/more-articles-box/
#Sugestii
1. Se poate selecta sa se incarce mobile logo can meniul e sticky, in theme panel
– https://www.screencast.com/t/HrQYiiKkHVqQ
2. Multumim pentru sugestie, o sa adaug acesta propunere pe lista noastra.
Multumesc!
Hello ytre77,
You should use the code below and place it in Theme panel -> Custom CSS area.
.td-sp-googleplus, .td-sp-pinterest{
display:none!important;
}
Thanks for the message!
Hello Stevivor,
If you want to change the color for post subtitle you should use the code below and place it in Theme panel -> Custom CSS area.
.td-post-sub-title {
color:black;
border:0;
}
Also, if you want to change the paragraph to H2, you should edit the theme core file according to your post template used by you. Below I gave you an example of post template style 1. Look at this -> https://www.screencast.com/t/Re43Z9Ad0ndY
Thanks for your understanding!
Hi,
@rsenzon Then something is not working properly with the composer. The display settings should be present for both rows and elements, at the bottom of the CSS tab
– https://www.screencast.com/t/ciNBi3qLu
You could try to deactivate and delete the composer, then install it again. Additionally check the theme system status
– https://forum.tagdiv.com/system-status-parameters-guide/
If needed ask your hosting provider to increase the allocated resources. Also as a quick test try deactivating all plugins, leave only theme plugins active. Test to see if the options appear. Let us know the results.
Thanks
I want adds a CSS class in my WooCommerce.
1、Included ‘products spacing 20 px’.
2、And ‘products box 1px & color light grey’
I do not know how to add, please help me.
Thank you!
Hi,
You could try a code like this to make the header transparent
– https://www.screencast.com/t/natmBKVX4C
This code will apply to the whole website, it could be made more precise if needed. It can be entered in Theme panel->Custom CSS
.td-header-wrap .td-header-menu-wrap-full,
.td-header-wrap .td-container-wrap{
background-color: transparent;
}
.td-header-gradient:before {
display: none;
}
Please let us know if this is not what you wanted, we will try a different solution.
Thanks
Hi,
We could take a look, please provide a link to your website and mention which headings you want to customize and how.
Note that there are Advanced CSS sections in the theme panel which you can use to customize elements based on device. So you could do something like this
– https://www.screencast.com/t/ekiunwgyYo
Thanks
Hello everyone!
How can I make diffrent color the “Main menu color background”, for each category to have diffrent colors?
Someone told me with CSS, but I don’t know how to work with it.
Can someone help me or recomand me any video tutorial?
Best Wishes!
Hi,
I got the following error while importing the default demo (WP_Debug is set to false already) –
“” tagDiv importer detected an error. The importer will try to recover and continue to install the demo after you click ok on this dialog.
Steps to troubleshoot:
– Check the permissions on your upload folder
– Please make sure that WP_DEBUG is set to false in wp-config.php
– Contact our support via email contact@tagdiv.com (please provide your product license key) “”
I press okay on the dialog and it eventually installs.
When I uninstall the demo again, I get this message –
“” Ajax error. Cannot connect to server, it may be due to a misconfiguration on the server.
textStatus: error
td_ajax_request_name: uninstall
errorThrown: No Reason Phrase
responseText: <!DOCTYPE html>
<!–[if lt IE 7]> <html class=”no-js ie6 oldie” lang=”en-US”> <![endif]–>
<!–[if IE 7]> <html class=”no-js ie7 oldie” lang=”en-US”> <![endif]–>
<!–[if IE 8]> <html class=”no-js ie8 oldie” lang=”en-US”> <![endif]–>
<!–[if gt IE 8]><!–> <html class=”no-js” lang=”en-US”> <!–<![endif]–>
<head>
<title>www.xyz.io | 522: Connection timed out</title>
<meta charset=”UTF-8″ />
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=Edge,chrome=1″ />
<meta name=”robots” content=”noindex, nofollow” />
<meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1″ />
<link rel=”stylesheet” id=”cf_styles-css” href=”/cdn-cgi/styles/cf.errors.css” type=”text/css” media=”screen,projection” />
<!–[if lt IE 9]><link rel=”stylesheet” id=’cf_styles-ie-css’ href=”/cdn-cgi/styles/cf.errors.ie.css” type=”text/css” media=”screen,projection” /><![endif]–>
<style type=”text/css”>body{margin:0;padding:0}</style>
<!–[if lte IE 9]><script type=”text/javascript” src=”/cdn-cgi/scripts/jquery.min.js”></script><![endif]–>
<!–[if gte IE 10]><!–><script type=”text/javascript” src=”/cdn-cgi/scripts/zepto.min.js”></script><!–<![endif]–>
<script type=”text/javascript” src=”/cdn-cgi/scripts/cf.common.js”></script>
</head>
<body>
<div id=”cf-wrapper”>
<div id=”cf-error-details” class=”cf-error-details-wrapper”>
<div class=”cf-wrapper cf-error-overview”>
<h1>
<span class=”cf-error-type” data-translate=”error”>Error</span>
<span class=”cf-error-code”>522</span>
<small class=”heading-ray-id”>Ray ID: 3e978196bc8464ff • 2018-02-07 15:51:40 UTC</small>
</h1>
<h2 class=”cf-subheadline” data-translate=”error_desc”>Connection timed out</h2>
</div><!– /.error-overview –>
<div class=”cf-section cf-highlight cf-status-display”>
<div class=”cf-wrapper”>
<div class=”cf-columns cols-3″>
<div id=”cf-browser-status” class=”cf-column cf-status-item cf-browser-status “>
<div class=”cf-icon-error-container”>
<i class=”cf-icon cf-icon-browser”></i>
<i class=”cf-icon-status cf-icon-ok”></i>
</div>
<span class=”cf-status-desc” data-translate=”browser_desc”>You</span>
<h3 class=”cf-status-name” data-translate=”browser_label”>Browser</h3>
<span class=”cf-status-label” data-translate=”browser_status_label”>Working</span>
</div>
<div id=”cf-cloudflare-status” class=”cf-column cf-status-item cf-cloudflare-status “>
<div class=”cf-icon-error-container”>
<i class=”cf-icon cf-icon-cloud”></i>
<i class=”cf-icon-status cf-icon-ok”></i>
</div>
<span class=”cf-status-desc” data-translate=”cloud_desc”>Frankfurt</span>
<h3 class=”cf-status-name” data-translate=”cloud_label”>Cloudflare</h3>
<span class=”cf-status-label” data-translate=”cloud_status_label”>Working</span>
</div>
<div id=”cf-host-status” class=”cf-column cf-status-item cf-host-status cf-error-source”>
<div class=”cf-icon-error-container”>
<i class=”cf-icon cf-icon-server”></i>
<i class=”cf-icon-status cf-icon-error”></i>
</div>
<span class=”cf-status-desc” data-translate=”server_desc”>www.xyz.io</span>
<h3 class=”cf-status-name” data-translate=”server_label”>Host</h3>
<span class=”cf-status-label” data-translate=”server_status_label”>Error</span>
</div>
</div>
</div>
</div><!– /.status-display –>
<div class=”cf-section cf-wrapper”>
<div class=”cf-columns two”>
<div class=”cf-column”>
<h2 data-translate=”what_happened”>What happened?</h2>
<p data-translate=”connection_timed_out”>The initial connection between Cloudflare’s network and the origin web server timed out. As a result, the web page can not be displayed.</p>
</div>
<div class=”cf-column”>
<h2 data-translate=”what_can_i_do”>What can I do?</h2>
<h5 data-translate=”if_website_visitor”>If you’re a visitor of this website:</h5>
<p data-translate=”try_again_in_a_few”>Please try again in a few minutes.</p>
<h5 data-translate=”if_website_owner”>If you’re the owner of this website:</h5>
<p><span data-translate=”522_owner_desc”>Contact your hosting provider letting them know your web server is not completing requests. An Error 522 means that the request was able to connect to your web server, but that the request didn’t finish. The most likely cause is that something on your server is hogging resources.</span> Additional troubleshooting information here.</p>
</div>
</div>
</div><!– /.section –>
<div class=”cf-error-footer cf-wrapper”>
<p>
<span class=”cf-footer-item”>Cloudflare Ray ID: 3e978196bc8464ff</span>
<span class=”cf-footer-separator”>•</span>
<span class=”cf-footer-item”><span data-translate=”your_ip”>Your IP</span>: 78.61.152.246</span>
<span class=”cf-footer-separator”>•</span>
<span class=”cf-footer-item”><span data-translate=”performance_security_by”>Performance & security by</span> Cloudflare</span>
</p>
</div><!– /.error-footer –>
</div><!– /#cf-error-details –>
</div><!– /#cf-wrapper –> “”
Please help identifying what the issue is and what is the best way to fix it?
Thanks Simion,
Other question: to control image heigth in this same solution, is there another way than using CSS? My image has 100px but I want show only 50px as height, like cutting it.
This is brilliant – many thanks!
Sorry for one more question – I’ve tried setting the mobile main menu background like this:
@media (max-width: 767px) {
.td-header-main-menu {
background-color: #fff !important;
}
}
but it’s being overriden with a !important in the theme code here:
@media (max-width: 767px)
style.css?ver=4.9.4:1593
.td-header-wrap .td-header-menu-wrap-full, .td-header-wrap .td-header-menu-wrap, .td-header-wrap .td-header-main-menu {
background-color: #222 !important;
height: 54px !important;
}
Is it possible to override that override without hacking theme files? I’m using a child theme if that helps.
Thanks!
In primul rand “Felicitari pentru tema”!
Totul functioneaza foarte bine, o sa folosesc tema voastra si in proiectele viitoare.
#Am anumite intrebari:
Am instalat demo-ul vostru default (https://demo.tagdiv.com/newspaper/)
1. Pot sa afisez si ora postarii, nu doar data? (pentru un website de stiri este important cine a publicat primul ca si ora si minut). WordPress implicit la postare are: data, ora si minut.
2. De unde customizez “author box” sa aiba poza si descriere?
3. Unde setez ca la articolele postate icoanele de share sa fie vizibile in mod automat si nu doar apasand icoana + (la voi in demo sunt afisate automat).
4. Pe fiecare poza este scrisa categoria. Are default background color negru si la mouse hover este albastra. Se pot schimba aceste culori din meniu fara custom CSS?
5. Cand editez demo-ul vostru cu TD Composer nu pot edita si “LATEST ARTICLES”, de unde incarcati aceste articole? Din ce locatie le customizez?
6. In footer de unde incarcati EDITOR PICKS si POPULAR POSTS? Din ce locatie le customizez?
7. Se poate ca la o postare care este adaugata in categoria “Featured” sa faca display pe homepage in loc de poza un videoclip Youtube? Demo-ul vostru de aici: https://demo.tagdiv.com/newspaper/td-post-after-effects-guru-tracking-and-stabilizing-footage/ nu este incarcat atunci cand instalezi tu ca si client demo-ul, astfel puteam edita si vedeam ce block foloseati.
8. De unde customizez “popup-ul” cu “mai multe articole” care apare in dreapta jos atunci cand accesezi un anumit articol?
#Sugestii:
1. Logo: Atunci cand ai facut ceva scroll pe pagina si dai scroll sus apare din nou meniul website-ului. Aici ar fi bine daca ar incarca logo-ul din mobile, sau alta varianta. Explicatie: Daca in logo ai un motto, cum aveti voi de exemplu: “the art of publishing” acel text nu mai este lizibil la scroll sus cand reapare meniul (asa este si in cazul meu).
2. Clasa “td-adspot-title” care face display la textul “- Advertisement -” este deja declarata de cei de la Adblock in “spam ads”, acesta clasa ar trebui “schimbata” la fiecare update de tema, sau mai ingenios generata in functie de un parametru unic pentru fiecare client, astfel sa le fie aproape imposibil sa o declare “spam ads” asa usor. Daca verificati cu Adblock plus inclusiv demo-ul vostru o sa vedeti ca “- Advertisement -” nu apare.
Apropo: Tema voastra functioneaza perfect cu Wordfence (antivirus, firewall cu +1 milion instalari active).
Hi,
So maybe something like this – https://www.screencast.com/t/ULF2ZJ4vV5ce
This is the code for that, enter it in Theme panel->Custom CSS
@media (max-width: 767px) {
.td-header-style-11 .td-logo-wrap-full .td-logo {
line-height: 68px;
}
.td-header-style-11 .td-logo-wrap-full {
min-height: 68px;
border-bottom: none;
}}
You could chnage the menu background color to white and icons to black in the theme panel for a blending effect, if you want to
– https://www.screencast.com/t/gHFUyQNbopH
We could modify this code if needed, let us know.
Thanks
Hello nigelryans,
If you want to remove that white space, you should use a bit of CSS code to do this. Try the code below and place it in Theme panel -> Custom CSS area.
@media (max-width: 767px){
.td-main-page-wrap {
padding-top: 0px;
}}
.td_block_empty_space {
display:none;
}
The result is here -> https://www.screencast.com/t/gM4g3b4TgTt
Thanks for the message!
Hi,
Adding margins or padding to the elements on the page may break the layout and design. The theme modules and blocks are predefined with fixed values, adding margins to them will most likely damage them.
You could review the codes and see why that is happening and avoid it, also you can use the Advanced CSS sections in the theme panel. Create code based on device if necessary using those sections
– https://www.screencast.com/t/CUJHQNahnXX2
Use the browser inspector to identify the elements on the page and experiment further
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thanks
Am I missing something… I have the same question… i am running Newspaper 8.6. In TD Composer when I select a row or element, then navigate to the CSS tab I do not have an option for Display. The last option I have in the panel is Color 2 overlay. The a link to “Clear CSS”
