- 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 there, I have tried using the new CSS Anayliser feature on my site TVBlackbox.com.au a few times, but it always gets stuck on the first step of the scan and never completes?
Hello,
If you are using the Gutenberg editor, then there will be no sidebar in the editor, this will look like this -> https://i.imgur.com/F6PUBhU.png
If you are using some classic editor plugin, then the sidebar can be removed only from the files, for this, you need to go in -> wp-content/themes/Newspaper/editor-style.css and comment these lines of CSS -> https://i.imgur.com/DqjLdxU.png
Hope this will help you!
Thank you!
Hello, @sidusinfieri
To remove the shadow on the header, you need to use a Custom Code CSS, like this => https://www.screencast.com/t/n3inNw3P59b3
.td-header-gradient:before {
content:none;
}
Set the code in Theme Panel -> Custom Code -> Costum CSS.
Hope this helps you!
Thank you!
Hello Betina
I cannot provide links because it’s on Maintenance mode now
Here you can find screenshots
how header and footer should look like
Main page with header based on cloud template
https://photos.app.goo.gl/CBaJssPSfNCYm58n9
Main page with header based on theme template
https://photos.app.goo.gl/qJoqFmEiUrxS1tGi8
How header and footer look on category page (author page and maybe others)
https://photos.app.goo.gl/Kt1sPTnU6secQ5vn7
https://photos.app.goo.gl/ssSV2zDMLDYU9gV9A
The same page in editing in composer view looks ok
https://photos.app.goo.gl/ssSV2zDMLDYU9gV9A
As I see it’s theme header and footer without CSS
Thanks Vlad.
Unfortunately, I have played with the CSS options and I cannot get rid of the huge white space on mobile devices below the revolution slider row.
Screenshot: https://drive.google.com/file/d/14Gm4gabt_KQ9_kU8ng9xBZUAfPaZKdb8/view?usp=sharing
Issue 1: The bottom of the revolution slider should be touching the top of the dark gray row below it. The huge blank area of white space should not exist.
Issue 2: The revolution slider should fit to 100% of the screen width so there is no white space to the right/left of the slider image. I selected Row Stretch = Stretch Row and Content, but that didn’t work. Note that on desktop it properly fills the entire width/row.
The revolution slider element does not have any CSS settings.
On the row CSS (for mobile) I set the bottom margin at -50 and could see that it moved things up, but not nearly enough. If I do “-350” then I can see it moves it up, but then within the Editor, I can no longer see the row at all. And that is too big a number that something must be wrong. The same problem happens if I edit the column mobile CSS.
Please advise how to resolve this.
Note that using your previous screenshot, I was able to resolve the spacing issue between the image blocks below.
Thanks in advance.
Hello,
To achieve that you need to use a custom code CSS, for this you need to add an extra class on the block, for example, “td-bgf” => https://www.screencast.com/t/vvE7EKVsXon and use this custom code
.td-bgf .td_module_flex_6 {
margin-bottom: 10px;
}
Set the code in Theme Panel -> Custom Code -> Costum CSS.
Hope this helps you!
Thank you!
Hi Support team,
I created header with Cloud template and applied it on Theme Panel
It looks good everywhere except Category pages, where Header looks like it lost all its CSS
How I can fix this?
Hello!
You can adjust the position of your elements by using the CSS options from each element as you can see here: https://www.screencast.com/t/X8tzLkOe You can use both positive and negative values. ( 25px or -25px for example) This allows you to adjust your elements by pixel.
Unfortunately on the Revolution slider you cannot adjust its height.
Thank you!
Hello,
You can change the header background image with tagDiv Composer => https://www.screencast.com/t/9NCnIaZERkh select the row on the header menu and in the tab called “CSS” you can add/remove the Background Image => https://www.screencast.com/t/fwWK3AvGyA
If you don’t mean this, then please provide me with more details and screenshots.
Thank you!
Hi, I love TagDiv Newspaper.
Is there any way to replace all theme accent colors at once?
I understand there’s some way to edit component colors;
A Change them from Theme panel > THEME COLORS
B Change them from TagDiv composer on each elements
C Change them by adding own CSS codes
For example, beautifully prebuilt template ‘GOURMET PRO’,
I’ve expected all of pale green has been replaced if I change setting THEME COLORS > THEME ACCENT COLOR. But just only some of elements has changed its color, such as right bottom jump-to-top button. Not for active/hover text colors. The THEME COLORS menu has an item for ACTIVE/HOVER TEXT COLOR but it’s for just Mobile menu / Mobile search.
I can deal with the way B but editing all pages and all elements is too hard.
Is there any good way to replace all pale green at once?
Thank you.
Hi,
If the options for header are not apply on footer elements, then please try this custom css -> https://i.imgur.com/fNUuHKu.png
.td-footer-container .block-title > span, .td-footer-container .block-title > a, .td-footer-container .widgettitle {
background-color: #000;
}
Please set the code in theme panel > custom code> custom css.
I hope this will help you!
Hi,
I think that this problem is because the js files are trying to use some css that it is not yet loaded, you need to try to load the theme css faster (in head of the page), or make a test by disabling the css optimizer option from WP Rocket.
Thank you!
Hi,
Here are the images, please do the needful.
http://firstnews.pk/attachments/cat-view1.png
http://firstnews.pk/attachments/cat-view2.png
Please provide the external CSS so we can make this website even more awesome. We are in a process of making it excellent using tagDiv technology and even we are ready to give credit to tagDiv by adding a small tagDiv post. We would love to get you more customers as you are doing awesome in the industry.
Thank you
1. my site url
http://ggnnews.kr
2. problem
The size of the text area (title + excerpt) exceeds the height of the photo area (float-left), so it looks bad. Looking at other sites, there is no such problem.
3. question
How can I ensure that the text area does not exceed the height of the photo?
(class=”td-module-container td-category-pos-image”)
I want the height of the text area (Title + Excerpt) not to exceed the height of the photo even if the device screen size changes.
How can I solve this problem? (Please tell me how to solve it using CSS)
Hello,
This can be achieved using a custom code CSS =>https://www.screencast.com/t/keyKSSIf2dO
.td-header-style-4 .td-header-menu-wrap-full {
top: -40px;
}
.td-main-page-wrap {
padding-top: 0px;
}
Set the code in Theme Panel -> Custom Code -> Costum CSS.
Hope this helps you!
Thank you!
Hello,
You need to add an extra class on the block => https://www.screencast.com/t/irQ3tCur0v, for example, “td-border” and use this custom code CSS for title
.td-border.td_block_template_3 .td-block-title .td-pulldown-size
{
border-radius: 20px;
}
Set the code in Theme Panel -> Custom Code -> Costum CSS.
Hope this helps you!
Thank you!
Hello,
how can I make that the block title has round corners? I also want to change the text- and element-size. In tagdiv composer I didn’t find the correct option. Or is this only possible by custom css?
Here you can see what I need (NEUESTE BEITRÄGE): https://ibb.co/7ytQ8Hw
Thank you and best regards
Andre
Yes, I was doing exactly as suggested, but in some cases, it seems that there was no difference between what I configured for the desktop and what I configured for the mobile version. But then, with your suggestions, I was able to update the font size to the different screen size responsively.
Before, I was trying for css and couldn’t find the correct element when inspecting element.
First of all, if my text doesn’t sound too good for a native English speaker, let them know that I’m using Google Translate.
Hi,
Our language is URDU, we write from right to left. Arabic script style. English writing is from Left to right. Ours is the opposite. I hope you understand what I’m saying.
Now, the problem is that the categories on my website are showing the opposite of our script style. They show the number of articles first and then they show the category names. Please see the screenshot attached. The same is with the other sections where pictures are shown on the left while the text is on right. We need to show pictures at the right and then display text next to the pics.
I have attached the screenshot for your assistance.
Please do the needful enabling us to make this theme even more beautiful and helpful in order to make the max revenue.
Thank you
Apparently, I have custom css on the brain.
For some reason, I thought something was overriding the white color in that field.
Not the case. Thanks as always, Calin!
jz
Hello!
If you are using the Gutenberg editor, then there will be no sidebar in editor, this will look like this -> https://i.imgur.com/F6PUBhU.png
If you are using some classic editor plugin, then the sidebar can be removed only from them files, for this you need to go in -> wp-content/themes/Newspaper/editor-style.css and comment these lines of css -> https://i.imgur.com/DqjLdxU.png
Hope this will help you!
Hi Calin,
Love you Bro. You are awesome. Superb!!!
I had no idea you guys are this much helpful. You solved the entire problem. Much appreciated. You made the day, I am so happy.
Now, after implementing the external CSS code, I experienced some issues. At first look, the button looks perfect, but when I click next and reach the second page, one button appears in a large size and the other one is smaller. Please see the screenshot attached http://firstnews.pk/attachments/layout.png
I also have another issue, you will notice that in the same screenshot point 2. A window with news appears when I scroll down a bit. Is there a way that I can hide it, I don’t want to see this window. Please advise what wrong I have done.
Thank you for your continued cooperation and support. I much value your support.
Best Regards, Faisal
Hi discdemo, for this you can use the settings from theme panel -> https://i.imgur.com/HCtrKcG.png -> https://i.imgur.com/TurkpMl.png or if you want you can try this css -> https://i.imgur.com/tXRKVo7.png
.sf-menu > .current-menu-item > a, .sf-menu > .current-menu-ancestor > a, .sf-menu > .current-category-ancestor > a, .sf-menu > li > a:hover, .sf-menu > .sfHover > a {
background-color: #f35;
color: #eee;
}
.sf-menu > li > a, .header-search-wrap .td-icon-search, #td-top-mobile-toggle i {
color: #fff;
}
Thank you!
I am trying to create a 2 x 2 table, where each quadrant has an image (with link).
I have added a row and configured it to be 2 columns.
I then added a “Single Image” content block in each one.
On desktop this is achieving the desired effect, which is perfect.
However, on mobile, it is creating a TON of spacing between each image (both above and below it).
I’ve been trying to edit the CSS, but I can’t seem to get it to work at all.
Can someone please help?
URL: https://ponypulse.com/
Password: winning
Thanks in advance!
Hi Calin,
I have found the problem. It was the 3rd Party “Leap Speedup” from Ezoic. The option “remove unused css” caused the problem.
Best regards
Andre
