- 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
Hello
I’m building a site using VIDEO NEWS from Newspaper.
https://demo.tagdiv.com/newspaper_video_news_pro/
I have a question about some theme fixes.
Q1:
When I made a mobile layout,
There is a lot of space on the right and no space on the left on the post page. I want to make spaces evenly on the left and right.
Please tell me how to modify it.
1.pdf
Q2:
The layout of the top page is broken when the tablet is displayed horizontally.
Also, when the tablet is displayed vertically, the layout of the top page is also broken.
This phenomenon is done by default in the theme.
It is displayed nicely in the simulator, but the display is broken when actually displayed on the iPad.
I’m obviously checking the cache out.
2.pdf
Q3:
I have some content that is modal, but I am having trouble because it is not displayed in the foreground.
The following description in CSS is not reflected.
.tribe-common div.tribe-dialog {
z-index: 999;
}
3.pdf
View it on your PC and click the link.
Please click「Get Tickets」
Please display this link on your smartphone. It is displayed without any problem in the simulator, but when the page is actually displayed on the iPhone, the menu appears on the modal. Of course, the cache is deleted and verified.
I would like to know how to modify it.
Thank you.
Thanks, but I know the path to find the style.css for mobile. But I don’t know exactly which parameter i should change to really get a bigger Post-Title on mobile. I have already tried H1 and page-title but there was no change in the size.
Greetings Kathrin
Hi,
Without view count this option will not work, the only thing that you can do is to hide this element for the eye and in this way it will still be set in the source page, if you are using cloud templates, you can do it using tagDiv Composer -> https://i.imgur.com/0AhtJf6.png, for standard post templates you need to use custom css.
Thank you!
Hi HamzaAm,
If you want to remove the Next/Prev buttons then you can use a custom css if you need help with this, just provide me a link to that post and I will help you.
If you want to be on more posts, then you can use a single post template from tagDiv Cloud Library and you can edit it using tagDiv Composer.
Thank you!
Hi,
I think that on the menu element is set a css that is apply first and only after that is apply the right css to make the menu look normal, unfortunately i can not say for sure what are the wrong settings, this can be find only checking the setting from menu with tagDiv Composer, if you want we can take a look, send us an email at contact@tagdiv.com and provide admin login. We will take a look. Include a link to this topic in the email.
Thank you!
Hi,
Is look that the css is not apply correctly, there is something that is block the code.
Please try the below css this will help you:
@media (max-width: 1018px) and (min-width: 768px){
.td-header-style-3 .td-header-sp-logo {
width: 214px;
margin: 14px 28px 0;
max-height: 60px;
}
}
@media (max-width: 1140px) and (min-width: 1019px){
.td-header-style-3 .td-header-sp-logo {
width: 224px;
margin-left: 0;
}
}
The code need to be set in theme panel> custom code> custom css.
Thank you!
Hello !
This can be found in here: wp-cah perontent/plugins/td-composer/mobile/style.css
Thank you !
Hi,
Please replace the above css with this one:
#bbpress-forums > *, .bbpress .td-page-title a
{
color: #ffa301!important;
}
#bbpress-forums .bbp-topic-started-by a, #bbpress-forums .bbp-topic-started-in a , #bbpress-forums .bbp-forum-freshness a, #bbpress-forums .bbp-topic-freshness a, #bbpress-forums .bbp-forum-title, #bbpress-forums .bbp-topic-permalink
{
color: #fbf8f8!important;
}
.bbp-forum-content ul.sticky, .bbp-topics ul.sticky, .bbp-topics ul.super-sticky, .bbp-topics-front ul.super-sticky, #bbpress-forums .bbp-body .super-sticky, #bbpress-forums .bbp-body .sticky {
background-color: transparent!important;
background: transparent!important;
}
Hope this will work better.
Thank you!
Hi there,
Can you help me with some of the CSS and JS code that can be removed from the theme using Asset Clean Up ( or any other optimization) plugin?
For example – js_files_vue_modals_last, tdb_front_style, tdb_wp_admin?
Also, can you please set the difference between the homepage and posts?
Thanks
Hi,
As I can see the problems is that on the staging you no longer have the unique class, on this was set the background color -> https://i.imgur.com/43w6VOE.png
What can be done is to add the css to an existent class -> https://i.imgur.com/FyN6sZs.png
.tdn_block_newsletter_subscribe {
background-color: #222;
}
The css need to be set in theme panel> custom code> custom css.
Hope this will help you!
Thank you!
Hi,
You can increase the submenu width using a custom css, if you need help with this, please provide me a link to your website and I will help you.
Thank you!
Hi there, sorry but that does not work. Since Template_7 is a TagDiv default template it is not editable in the TagDiv Composer. None of the default style templates are. Which is a real pain as they are great templates.
Is there a way to edit these templates in TagDiv Composer that I am unaware of? If so please let me know.
if not, could you provide Custom CSS for me to change the Title Text ins the modules.
Thanks
b…
Where in the mobile theme style.css I can change the size of the post-title? If I try the h1 one I can’t see any change…
Greetings Kathrin
Thank you for your answer. It is really helpful, but it does not fully cover all customization that I need. No issues with customizing CSS, I got that.
But, for example, these changes https://cl.ly/ef82ab315ae9 definitely required to add additional HTML code. So my question is how can I do that with “dynamic content build with tagDiv Composer”? I was hoping that you guys can point me to the way of creating custom blocks or something.
I know that I can create my own shortcode and make it work, but I want it to build it right, so that way my custom block will be native for the theme and TagDiv composer.
Tank you!
Hi,
For a part of these changes is no need to edit any file, also this is a dynamic content (there are no html file) build with tagDiv Composer and cloud library.
-> https://i.imgur.com/NjxAYpa.png click on flex element and check the settings -> https://i.imgur.com/rAyEY3l.jpg the only think that con not be moved using the settings is the next prev buttons, but this can be done with some extra css, you can assign an extra class on element and use the custom css -> https://i.imgur.com/9rzqbrf.png -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Hope this will help you!
Thank you for your understanding!
Thanks a lot This helped my problem to be solved about 60% 🙂
can you please also share some insights on these texts which are not visible(i mean css code )for the highlighted once I have highlighted it in the images here
Thank you for the code. However, it does not correct the problem. I added it to Custom CSS on the theme panel, then tried the site in four different browsers.
The ad headings are still indented.
Please advise.
Thank you!
Hello !
You can use this css code: .td-post-sub-title {
color:red;
}
The code must be inserted here: https://www.screencast.com/t/J1Nxw5s5
Thank you !
Hi,
I think that you are referring to these socials -> https://i.imgur.com/Rhhq78f.png these are from WordPress not from our theme, here is a topic where is provide a solution for this question -> https://wordpress.org/support/topic/remove-fields-in-profiles/
To remove the newsticker from mobile version you need to edit the homepage using tagDiv Composer, click on mobile viewport after that select the element and in css tab select display hidden -> https://i.imgur.com/kLtGxS2.png
Thank you!
Hi,
Unfortunately there is no option for this, but you can use a custom css for this.
If you want help with theme, just provide me a link to your website and I will try to help you!
Thank you!
Hi,
Unfortunately there are no option for editing the bbpress style, but it can be achieve with a custom css like this one -> https://i.imgur.com/S84N6V4.png
The code need to be set in theme panel> custom code> custom css:
#bbpress-forums > *
{
color: #ffa301!important;
}
#bbpress-forums .bbp-topic-started-by a, #bbpress-forums .bbp-topic-started-in a , #bbpress-forums .bbp-forum-freshness a, #bbpress-forums .bbp-topic-freshness a, #bbpress-forums .bbp-forum-title, #bbpress-forums .bbp-topic-permalink
{
color: #fbf8f8!important;
}
.bbp-forum-content ul.sticky, .bbp-topics ul.sticky, .bbp-topics ul.super-sticky, .bbp-topics-front ul.super-sticky, #bbpress-forums .bbp-body .super-sticky, #bbpress-forums .bbp-body .sticky {
background-color: transparent!important;
background: transparent!important;
}
Hope this will help you!
Hi slivertorp,
Unfortunately this option is available only on images inside a post/article for the moment it can not be set on Image Info box. What you need can be achieve with custom work, here is some examples https://www.w3schools.com/howto/howto_css_modal_images.asp
Thank you for your understanding!
Hi,
Please try this custom css
.td-a-rec-id-custom_ad_1 .block-title, .td-a-rec-id-custom_ad_2 .block-title, .td-a-rec-id-custom_ad_3 .block-title, .td-a-rec-id-custom_ad_4 .block-title, .td-a-rec-id-custom_ad_5 .block-title, .td-g-rec-id-custom_ad_1 .block-title, .td-g-rec-id-custom_ad_2 .block-title, .td-g-rec-id-custom_ad_3 .block-title, .td-g-rec-id-custom_ad_4 .block-title, .td-g-rec-id-custom_ad_5 .block-title {
margin-left: 0;
}
This will adjust the margin for all ads.
The code need to be set in theme panel> custom code> custom css.
Thank you!
Hello!
First of all, thank you guys for this awesome theme, great work!
I’ve been using the “Gadget” theme of the layout and trying to customize one of the page elements https://cl.ly/17c565693382. But the changes I want to implement are required to edit the HTML, CSS, and JS. Here is a quick example https://cl.ly/82066fb1eae5 but that is a small part of whole plan. So I wanted to display images of the posts, move slider buttons and change the way how sliding works (instead of loading all three posts I want to have it one by one with image magnifying).
Anyhow, there are two problems I’m stuck with:
1. I can’t find where the section layout is located (where exactly HTML files)
2. Once (hopefully, with your help) I found it, I’m not sure how to properly customize and insert it into my page.
I’ve been thrilled how nice and easy it was to get the header footer parts imported from the cloud library and easy to customize the way I want. And then I was killed by not being able to do the same with other sections of the page. Maybe I did something wrong but the only option I saw is to “create a page with the section”, but I didn’t want to create a new page I need to get that component to be able to customize it.
Please let me know!
Thank you.
Hi imagpt,
Where you want to apply the code, if you want to align Justified the post content this can be achieve using a single post template from tagDiv Cloud Library, edit it with tagDiv Composer click on single post content and set the extend direction “Lift & Right ” https://i.imgur.com/TRXJLvD.jpg
Or you an use a custom css ->
.tdb_single_content p, .tagdiv-type p{
text-align: justify;
}
Thank you!