- NewsmagtagDiv Composer Tutorial
- NewsmagBlock settings tutorial
- NewsmagLogo & Favicon
- NewsmagFooter templates
- NewsmagUsing other ads
- NewsmagUsing Typekit fonts
I actually got it worked out for anyone that may be interested.
HTML Code
<div class="eventsPageHeader"><h1>Featured Events</h1></div>
CSS Code (plugged into the Theme Panel > Custom Code > CSS)
.eventsPageHeader h1 {
text-transform:uppercase;
text-align:center;
font-family: "Work Sans";
font-size: 25px;
font-weight: 500;
line-height: 54px;
margin-top:12px;
}
.eventsPageHeader h1:after {
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
content: '';
display: block;
position: absolute;
width: 80px;
height: 1px;
background-color: #38a6c1;
opacity: .2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity='20')";
filter: alpha(opacity=20);
}
Hi! I can’t found where this css styles are from
https://prnt.sc/o2hqch
Problem is that we use Helvetica at theme panel and I can’t found where this styles with Fira Sans are from.
We use WP Bakery composer in our posts.
I tried to install 9.7 using the guide (https://tagdiv.com/updating-the-core-of-tagdiv-themes/). I already had TD composer switched on as I had built the previous homepage in it. After updating the theme files I then updated the plugins and the activated them. The result was a site that looked like it was missing most of its css.
I have reverted to a backed up version of the site in the mean time.
I’m using litespeed cache and my CSS is being loaded from a CDN.
Non of my amp pages are working when I do this and I get the following error:
The style[amp-custom] element is populated with:
0 B: style[amp-custom=]
73 B (57%): link#amp-default-css[rel=stylesheet][id=amp-default-css][href=https://sheffield.bigstamp.co.uk/wp-content/plugins/amp/assets/css/amp-default.css?ver=1.1.3][type=text/css][media=all]
34528 B (88%): link#dashicons-css[rel=stylesheet][id=dashicons-css][href=https://sheffield.bigstamp.co.uk/wp-includes/css/dashicons.min.css?ver=5.2.1][type=text/css][media=all]
223 B (0%): link#bp-nouveau-css[rel=stylesheet][id=bp-nouveau-css][href=https://sheffield.bigstamp.co.uk/wp-content/plugins/buddypress/bp-templates/bp-nouveau/css/buddypress.min.css?ver=4.3.0][type=text/css][media=screen]
1671 B (34%): link#td-plugin-newsletter-css[rel=stylesheet][id=td-plugin-newsletter-css][href=https://sheffield.bigstamp.co.uk/wp-content/plugins/td-newsletter/style.css?ver=9.7.3][type=text/css][media=all]
2047 B (57%): link#td-theme-amp-css[rel=stylesheet][id=td-theme-amp-css][href=https://sheffield.bigstamp.co.uk/wp-content/plugins/td-composer/mobile/style-amp.css?ver=9.7.3][type=text/css][media=all]
29 B: style[type=text/css]
74 B: h2.amp-wp-b371fd6[class=amp-wp-b371fd6]
97 B: span.amp-wp-dffa517[class=amp-wp-dffa517]
75 B: div.td-author-name vcard author amp-wp-9c76635[class=td-author-name vcard author amp-wp-9c76635]
75 B: p.amp-wp-224b51a[class=amp-wp-224b51a]
93 B: amp-iframe.amp-wp-b3bfe1b[src=https://www.googletagmanager.com/ns.html?id=GTM-TD2R4HW][height=400][sandbox=allow-scripts allow-same-origin][layout=fixed-height][class=amp-wp-b3bfe1b]
Total included size: 38,985 bytes (48% of 80,016 total after tree shaking)
The following stylesheets are too large to be included in style[amp-custom]:
25439 B (45%): link#td-theme-css[rel=stylesheet][id=td-theme-css][href=https://sheffield.bigstamp.co.uk/wp-content/plugins/td-composer/mobile/style.css?ver=9.7.3][type=text/css][media=all]
Total excluded size: 25,439 bytes (45% of 55,892 total after tree shaking)
Total combined size: 64,424 bytes (47% of 135,908 total after tree shaking)
If I don’t serve via the CDN everthing works fine.
I’ve tried a few different plugins to see whether it was an issue with litespeed and i get the same problem with all the other CDN plugins.
Hi,
How do I change the text colour of the black post titles on the Whiskey section of the homepage – https://www.theirishplace.com/
Something to do with Inspect Element and add custom css? Is this best done in the composer or somewhere in the theme panel? Any guidance greatly appreciated.
Thanks
I’m having the exact issue with Newspaper 9.7.3 and VaultPress. This is the description
4:50pm, Fri, June 14
Detected the signature Vulnerable.WP.Extension on ./wp-content/plugins/td-composer/style.css.
I had to take it down.
David
I understand now, but it is not easy. On one hand AMP specifies that the main logo should be 60px in height, as it is now – http://prntscr.com/o1ublo – http://prntscr.com/o1uds1
You would have to remove this code in order for the logo to be bigger
– http://prntscr.com/o1udbm
Then it will look like this – http://prntscr.com/o1udjw so it will require some CSS to change the design, and CSS in the old AMP plugin can only be entered like mentioned here
– https://forum.tagdiv.com/topic/amp-page-formatting-questions/
Not to mention the modification it would require to center the logo. To center it maybe try and remove this margin here – http://prntscr.com/o1ui6k
The old AMP plugin looks like this – https://demo.tagdiv.com/newspaper_crypto/td-post-ripple-ceo-and-ethereum-co-founder-bash-ico-industry/amp/
It doesn’t have any settings to change the logo size or center it. This plugin is a simple plugin with the design based on the Yoast website
– https://yoast.com/meta-descriptions/amp/
Now the solution is the mobile theme and official AMP plugin, for which there will be more and more options added in coming updates – https://tagdiv.com/amp-newspaper-theme/
Hi,
Most of the theme files were moved into the tagdiv composer plugin as per the requirements of envato: https://help.author.envato.com/hc/en-us/articles/360000472383-WordPress-Theme-Requirements.
We wrote an article on the subject here: https://tagdiv.com/updating-the-core-of-tagdiv-themes/
Moving forward with such requirements, a child theme will only work with functions.php, and style.css as there are very few files left in the main theme as envato requires all functionality to be added through plugins.
There is only one inline ad spot provided by the theme. I believe there are plans to add more in a coming theme update. Sorry for the inconvenience.
So for the moment you could enter the ad code in the post content itself, or try this solution provided by a theme user
– https://forum.tagdiv.com/topic/possibility-to-add-multiple-inline-ads-after-multiple-paragraphs-within-content/
Thanks.
Hi,
You can achieve the shadow on images on post if you are using a custom css
-> https://www.screencast.com/t/v1t8Zwkq -> https://www.w3schools.com/css/css3_shadows.asp
Create custom code with the browser’s Inspector or the Live CSS Box -> https://tagdiv.com/how-to-create-custom-code-in-newspaper-theme/
Thank you!
Hi,
Since Newspaper v9.7 the child theme is working only for the functions.php and style.css files.
Unfortunately I do not know what will happen with child theme in the coming update, for the moment there are no news about what will happen.
Thank you for your understanding and sorry for the inconvenience!
Hi,
I want to remove main sidebar from mobile. I followed this from another thread, but dont work.
Please set this custom css in Theme panel>Custom code>Advance css section phones -> https://www.screencast.com/t/qUpAKhGAzT
.td-pb-row .td-main-sidebar{
display: none;
}
The sidebar is added in TagDiv composer, dont know if that cause the problem?
Hi,
If you want to hide a specific category on blocks you can use a custom css ,
for example I want to hide the category Travel -> https://www.screencast.com/t/sCinDIlcM
-> https://www.screencast.com/t/p6jk08Lu4E -> https://www.screencast.com/t/ICb5keRVOkK -> https://www.screencast.com/t/HTYRjgZw0c
.td-module-image a[href$="/travel/"],
.td-meta-info-container a[href$="/travel/"],
.single .td-category a[href$="/travel/"]
{
display: none;
}
All you need to do is to change the category in code and the background color will apply on that category.
Thank you for your understanding!
Hi,
Please replace the above custom css with this one
.sf-menu li:hover ul, .sf-menu li.sfHover ul{
z-index: 999;
-webkit-transform: translate3d(0,0,0);
}
Thank you!
Hi,
If you want to achieve that result, you will need to use the code below and place it in Theme panel -> Custom CSS area.
ul.sub-menu {
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
width:19.5em!important;
}
The result is here -> https://www.screencast.com/t/Vy4fUnKc
Thank you!
Hi,
I think that there is something that change the position of the overlay, please try this css -> https://www.screencast.com/t/q13CDvEa
.td_module_mx1 .td-module-thumb a:last-child:before {
top: 50px;
}
Set the code in Theme panel>Custom code>Custom css
Thank you!
Hi, the portrait view for my menu when viewed on an Ipad is a little off. More specifically, the menu items cross into the logo. If you visit the site here (https://dev.dezignark.com/) and decrease the screen size, you’ll see the ‘stories’ menu item overlapping with the logo. This only happens in portrait mode when using the Ipad. Is there some css I could add to prevent this?
Thank you
Entered CSS,
Cleared all Caches,
Purged OpCache,
Regenerated critical CSS (RocketCache)
Still dropdown menu appears under content elements on the page.
Please see screen cap from Safari Dev Tools here:
http://j.mp/2RkhIPa
This shows the error, the html sent to Safari and the CSS codes applicable to the menu when it’s dropped down.
(Note this is a problem ONLY in Safari, have not tried any other webkit browsers)
Thanks,
Kim
Hello !
Please add this custom CSS in here: https://www.screencast.com/t/ld6i55sl
.td-container-wrap {
background-color:black;
}
And the result should be this: https://www.screencast.com/t/XisqCJFosbcJ
Thank you !
Hi,
Please make sure that you do not have a plugin conflict with untested plugins, please deactivate all non theme/tested plugins, also if you are using child theme, clear all cache and try again.
Did you made some updates to some plugins/theme/WordPress ?
Please try to set those fonts in Theme panel>Custom code>Custom css and set the font name and path from here https://www.screencast.com/t/xtRbZt7kc here -> https://www.screencast.com/t/aJc8xVGip0 also please make sure that you load the font from here, is should look like this -> https://www.screencast.com/t/qj0SWdL4
results -> https://www.screencast.com/t/nBonobIS
Thank you!
Hello !
The designs do not match because you are using the mobile theme. The Mobile theme was specially designed for optimization on mobile devices. Unfortunately on mobile theme you cannot do much changes of design. If you want to have the same design as on desktop mode you can achieve that by simply disabling the mobile theme. Cloud templates are included. They do no work while having mobile theme.
We are sorry for the inconvenience !
Please try this custom CSS and paste it here if you are using the Mobile Theme:https://www.screencast.com/t/T0N7cNzJHN ; If you are not using the mobile theme paste it here: https://www.screencast.com/t/0vBfC9NJgBv And as you can see here the result: https://www.screencast.com/t/RYnwC7Babk7
Here is the code:
.wpb_wrapper .td_flex_block_1{
box-shadow: none!important;
}
Thank you !
Hi,
Sorry, but using css is not easy to achieve what you need, maybe you can try to use the single post template from tagDiv Cloud Library.
Thank you!
Hi,
If you mean this – http://prntscr.com/o1bly5 that is the category name. It displays like that because of a customization specific to the lifestyle demo. The default category template 7 looks like this – https://demo.tagdiv.com/newspaper/category/template-style-7/
Depending on what exactly you would like to do, I could try and give you a CSS solution. Mention some more details about it.
Thanks
Hi,
Please set this custom css in Theme Panel>Custom code> Advance css> Phone
.td-mobile-content .td-sub-menu-open > ul {
max-height: 10000px;
}
-> https://www.screencast.com/t/lYlCHUZl
Please make sure that you clear all cache after you set the code.
Thank you!
Hi,
Please try this custom css
.sf-menu li:hover ul, .sf-menu li.sfHover ul{
z-index: 999;
}
Set the code in Theme panel>Custom code> Custom css
Please clear all cache after you set the css.
Hope this will help you!
Thank you!
Hi,
1. It is true that WPBakery has dedicated Woocommerce elements, while the composer does not. It does support Woocommerce shortcodes however, as I mentioned above
– https://docs.woocommerce.com/document/woocommerce-shortcodes/
Shortcodes can be entered in text elements, like the column text. The column text element can display shortcodes. Blocks can also display products, although they can’t be filtered only sorted – http://prntscr.com/o1ap44
2. The theme has general font settings in the theme panel, and also more specific font settings per element in the composer. These specific settings will override the general settings.
I have inspected the website and I see the problem. The font size CSS seems to be coming from a custom stylesheet from a plugin – http://prntscr.com/o1arjv
– http://prntscr.com/o1arob
That code will override the theme CSS. You could remove that code from the plugin, or disable it.
Let me know if you have more questions.
Thanks