Hi,
I’ve got a question and I hope you’d like to help me!
At the bottem of each blog post, we have a design issue. Please see:
https://www.screencast.com/t/GWnihC6vVgp
The shown text is Dutch, but translated is says:
RELATED ARTICLES – MORE OF THIS AUTHOR
We would like to remove (or change) the background image (but only at this place – we are using the same background image on several other places on the website). Could you please tell me how to do this?
I look forward to your response!
Best regards,
Nick Beijer
Hello,
By default that backgorund image should not be there in the arts and crafts demo. Here is an example: https://demo.tagdiv.com/newspaper_craft_ideas/tasty-and-easy-fruit-dessert-recipes/
If you added it custom, you will have to remove it.
By default this code removes the image from the related articles section:
.td-craft-ideas .td_block_template_6 .td-related-title{
background-image: none;
}
Thanks.
Hi Bogdan,
I’m sorry for my late response.
Thanks a lot for your help!!
Could you please tell me where I have to add this code?
In Newspaper > Theme Pannel > Custom Code > Custom CSS?
I did not add the image manually over there. I only changed the header background-image of Header Box 6 (please see this topic I created: https://forum.tagdiv.com/topic/excerpt-not-shown-on-blog-page-change-background-of-headers/)
I look forward to your response!
Nick
Hi,
Yes, CSS code should be added in the custom code css section.
Thanks.
Hi Bogdan,
Unfortunately, this did not help. (The header image is still shown)
Is there another way to fix this problem?
Nick
Hello Nick,
You should use the code below and place it in Theme panel -> Custom CSS area.
The code is ->
.td-related-left {
background-image: url(https://demo.tagdiv.com/newspaper_craft_ideas/wp-content/uploads/2017/03/header-bg.png)!important;
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;
line-height: 2;
}
.td-related-right {
background-image: url(https://demo.tagdiv.com/newspaper_craft_ideas/wp-content/uploads/2017/03/header-bg.png)!important;
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;
line-height: 2;
}
The result is here -> https://www.screencast.com/t/c3vaEQuhdB6
Hope this helps!
Thanks.
Hi,
Unfortunately, this also did not help.
See: https://www.screencast.com/t/svqMtsIZqH
I deleted the provided code, and I tried the following code (I added !important):
.td-craft-ideas .td_block_template_6 .td-block-title {
background-image: none !important;
}
This is the result: https://www.screencast.com/t/FQBi8yrXPy
Now we’ve managed to delete the image, but no also the Header-image in the Widget area is deleted..
Previously Bogdan B. said the image should not even be there. Maybe that’s the problem? We try to delete an image that should not even be there?
As mentioned before, I changed the header image manually (this is the topic: https://forum.tagdiv.com/topic/excerpt-not-shown-on-blog-page-change-background-of-headers/). Maybe something went wrong there?
I hope you can help me fix this!
Kind regards, Nick
Hi,
In addition to my last e-mail:
This is the code I changed to Newspaper > includes > demos > craft_ideas > demo_style.css :
https://www.screencast.com/t/7Qze1ZKWG
Nick
Hello Nick,
Please notice that if you have made this change you will remove that image for all block template style 6 and that’s why this image does not appear. You should use another code with the right path of your image and added it to the right section of your website. Please notice that task involves doing such additional customization and we cannot provide support for this. I have done a suggestion in this case and further, you should implement it yourself. Otherwise, please consider hiring a freelancer/developer to help you.
Thanks for your understanding!
Hi,
I’ve reset the demo-settings (so please forget the everything discussed above), but I still have an issue.
All I want to do is to change the background-image of TD-block 6. I just added this code to my Custom CSS:
.td-craft-ideas .td_block_template_6 .td-block-title {
background-image: url("http://reisdromen.com/wp-content/uploads/2018/03/Brush-stroke.png");
}
The code works, but still this happens:
https://www.screencast.com/t/GWnihC6vVgp
The new background-image still appears in a place it shoudn’t be. Could you please tell me how to fix this?
Kind regards,
Nick
Hello Nikolaas49,
Sorry, but the theme has not been designed to use this on that section and if you want to make some additional customizations to your website, please check the following useful guide from here -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/ because there you will find all the steps which are needed to follow in order to create your own custom CSS code.
Thanks.
Hi Catalin,
When I add the code to Theme Panel > Custom Code nothing happens.
When I add the code in the Live CSS box, I see the desired adjustment. So I assume I can beter use the Live CSS box?
Anyway: with the code, I can adjust the background image of Header Block 6. Unfortunately, the image also appears overhere:
https://www.screencast.com/t/GWnihC6vVgp
Could you please help me prevent this?
Kind regards,
Nick
Hello Nikolaas49,
Please provide some useful screenshots with your used code in Live CSS Box for further investigations.
Thanks.
Hi Catalin,
Sure:
https://www.screencast.com/t/yjLkMdSDqXD
The used code:
.td-craft-ideas .td_block_template_6 .td-block-title {
background-image: url("http://reisdromen.com/wp-content/uploads/2018/03/Brush-stroke.png");
}
I look forward to your response.
Nick
Hello Nikolaas49,
Please notice that is not a simple task to add that image to the Related Articles section, sorry! The theme has not been designed to be used something like this. Try to change the block header and try to adjust the design from CSS and if you cannot do this, please consider hiring a freelancer/developer to help you!
Thanks for your understanding!
Hi Catalin,
I don’t understand is why it’s so difficult to change a background image of a block header.
Previously Simion C. answered me this: https://forum.tagdiv.com/topic/excerpt-not-shown-on-blog-page-change-background-of-headers/
He advised me to go to Newspaper/includes/demos/craft_ideas/demo_styles.css
Change the code in line 175 from
background-image: url(“images/header-bg.png”);
to
background-image: url(“http://reisdromen.com/wp-content/uploads/2018/03/Brush-stroke.png”);
When I changed the background image in the code, the same problem appears. I would really appreciate it when you ‘d like to give me some serious advice.
I look forward to your response.
Nick
Hello Nick,
Try to use the code below and place it in Theme panel -> Custom CSS area.
.td-related-left, .td-related-right {
background-image: url(https://demo.tagdiv.com/newspaper_craft_ideas/wp-content/uploads/2017/03/header-bg.png)!important;
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;
padding-bottom:10px!important;
}
The result can be seen here -> https://www.screencast.com/t/uRMBQhUFBii9
Thanks for your understanding!
Hi Catalin,
Thanks for your input.
This is a code you already provided a few weeks ago. I’ve tried again, but this is the result:
https://www.screencast.com/t/So5froZKDt
The issue is that the green stroke stroke should not even appear in this place. The CSS-code to change the header background-image doesn’t tell the theme to place a header image in this place, so it’s very strange that this happens.
Could you please help me with some other input?
Kind regards, Nick
Hi,
Let’s try and identify the problem here. I believe you don’t want to display that background image for the related articles section, only for other blocks
– https://www.screencast.com/t/IcdaPgqzTg
It can be removed by adding this code in addition to the one you are currently using
– https://www.screencast.com/t/ryvSlN00L6
If you need something more please let me know
.td-craft-ideas .td-related-title.td-block-title {
background-image: none;
}
Thanks
Hi Simion,
You’re my hero of the day. This code helped me fixed the problem I had for weeks. Thanks a lot!!!
