- 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,
In the demo are elements raw html or css, here is the extra code, you can check if the elements have an extra class set -> https://i.imgur.com/Z8oZ3q9.png -> https://i.imgur.com/Jkkv2T6.png
Thank you!
Hello,
You can use this css
.td-read-down .td-icon-read-down{
display: none;
}
Set the code in Theme Panel ->Custom code -> Custom CSS
Thank you!
Hi there,
I have been struggling for few months now but the website that i built using newsmag wordpress theme is still slow. The website link is https://annals.edu.sg.
I have tried to implement w3 total cache, upgraded server hosting plan, etc and i still think the website is still loading too slow.
Is there any suggestions/ideas to improve the speed? or is there a way to take out some css/js/elements that are not used in the newsmag theme?
Please advise soonest!
Regards,
Frans
Hi,
In module builder, the color overlay 1 and color overlay 2 options in css section is full of bugs. When I apply an overlay on the module featured image, it doesn’t appear. And, then I add the module article title and try to apply color overlay on it and then it adds the color overlay on both the image and the featured image. Now it can’t be removed and the opacity is also fixed. It’s pretty messed up.
I think this is what’s happening:
1. The overlay on the image is sent behind the image covering the entire row area.
2. The title is added below image but it also has color over as background because the image overlay covers the entire row.
3. The overlay added to the title is also applied to the entire row area but it is above the image and behind the title.
This is how the layer is ordered: Title->Color overlay on title covering entire row area->Featured image->Color overlay on featured image covering entire row area.
I’ve done a screen recording of the issue. Please have a close look. (set the quality to 720p)
CSS and JS code that I’ve written is currently loaded sitewide.
However, styling for articles should not be loaded on the homepage,
likewise, JS functionality for the home and category pages is not needed on article (single) pages.
How to have certain CSS / JS code load only on some templates, but not others?
Highly optimized and clean responsive design theme gets me 84 on Google PageSpeed mobile, but Speed Index (4.7s) and LCP (3.6s) is not good.
I can’t get find a way to reduce the unused (theme?) CSS/Javascript (1.2s) so I’m trying to optimize these:
1) Defer offscreen images 0.35s on <div class=”td-menu-background” style=”visibility:hidden”>
This is the background menu/search image on the mobile viewport:
Lazy Load settings/plugins for some reason won’t defer it.
How to defer it?
2) Efficiently encode images 0.25s on <div class=”tdb-featured-image-bg”>
The featured image is shows full desktop size on the mobile viewport:
On a desktop I show the 1920×0 version, retina quality for devices that support it.
The mobile viewport is showing the same big size, not a smaller version.
How to fix this? Maintaining separate mobile/stale AMP templates is not cost-effective/productive for most of us.
Greetings
using a CSS code, is it possible to remove this down arrow? I wish it would disappear completely.
What string of css code should I put in the custom code?
I use the standard theme and don’t want to change it. Style is number 7.
Url example: https://www.novabbe.com/wp-content/uploads/2023/05/freccia-in-giu-esempio-scaled.jpg
Hi,
Maybe you can try to set the color for the zone in the tab css, using tagDiv Composer.
Thank you!
I found a solution so I’ll share it with the community.
:root {
--color-page-bg: lightblue;
}
body, .td-post-category {
background-color: var(--color-page-bg)
}
.post, .td-main-content-wrap, .td-category-grid, .td-container-wrap {
background-color: transparent !important;
}
In this example I’ve set the background in the CSS to be lightblue.
Then I removed the fixed colors in the theme for the 4 elements that have them defined.
I am setting the page background to lightblue, using css
{body:background-color:lightblue !important}
which works great but only the header shows up in that color.
The maincontent has a white background. I checked each row and none has a background assigned,
so the page background should shine through.
In Developer Tools I found the offending css code:
.post {background-color:#fff}
Where is this set and how can I change it to NOT have a background color?
I tried .post {background-color:green !important} in the CSS code, just to try first how I could override it but that didn’t do anything.
Hello @zhangleji !
1. Yes, because on mobile phones there is not enough spaces for both. You can arrange the columns like this: https://prnt.sc/NSsPAVvs8ARU and change the values for font, width,etc.
2. Make sure that is not hidden in the mobile viewport. Click on any element on desktop viewport, css tab.
Thank you!
Hi,
Unfortunately, you can’t exclude terms from category siblings, you can try to hide them with custom code css.
Thank you!
Hello @Prateek!
If there are no settings for that, then you should add CSS code and change the color you want.
Thank you for understanding!
Hello!
There are multiple layouts of images and an animation. You can find the code in the Raw CSS and HTML: https://prnt.sc/fCOF8RmlgSLG
Thank you!
Hi,
On the mentioned lines of code (/home/svijetsi/public_html/wp-content/plugins/td-composer/legacy/common/wp_booster/td_module.php on line 545) are only some } https://i.imgur.com/ekbLOVk.png
Also, in the error log I see some errors related to the fonts, templates, css templates…
What I can recommend si to check to see if the errors still apers if you are using the main theme and only the theme plugins because it is possible that some code from the child theme or extra plugin to interferes with the theme.
Thank you!
Hi,
sorry it’s really urgent. After update from 12.3 to 12.4 I’m having issues with news ticker widget and footer (desing), footer css is strange and widget is also strange.
Thx
Hi,
Usually, the color and image are set on the row, so please edit with tagDiv Composer and select the row and go in the tab CSS https://i.imgur.com/UkgqKNM.jpg -> https://forum.tagdiv.com/topic/background-color-of-the-main-menu-be-changed/ please check each row/column and delete the background image.
Thank you!
Hi,
This is an example https://app.screencast.com/elMwu8f1KDe7p
To do with mobile menu, you need to use a custom code CSS, because as you can notice only those are the settings for mobile menu -> https://i.imgur.com/zx3YWtq.png
Thank you!
Hi,
I’m trying to do the above, but I can’t find how to grabb “Global template” tag codes in TD Composer format (ex: “[tdc_zone type=”tdc_content”][vc_row tdc_css="eyJhbGwiOnsicGFkZGluZy10b3AiOiIyNSIsImRpc3BsYXkiOiIifX0="][vc_column][/vc_column][/vc_row]…”).
Can you help me?
Thanks
Hi,
Please set the margin bottom 0 for the element in the tab css.
Thank you!
Hi,
You need to use a custom code css -> .td-main-menu-logo img
{
max-height: 100px;
}
.td-header-wrap
{
height: 80px;
}
The code need to be set in Theme panel> Mobile theme> Custom code> css.
Thank you!
Hello @internath !
The tagdiv plugins I meant from above. Deactivate the Autoptimize also, clear all the cache and see the results.
If the issue is not solved after that, then you can add this CSS code in the Live CSS section:
.tdb-drop-down-search { width: 100vw!important;}
Thank you!
Hi,
how can I change the Style, and CSS of tagdiv widget elements?
For example: [tagDiv] Block 1
Thanks
Hello,
Please set margin bottom 0 for the first element in css tab -> https://i.imgur.com/3y8G7z8.png
Thank you!
