- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- TutorialsFrom WPBakery to tagDiv Composer
- TutorialsDefault Block Settings Guide
- TutorialsHow to use custom fonts
Hello,
The css for image align center is this one:
.aligncenter {
text-align: center;
clear: both;
display: block;
margin: 6px auto;
}
For extend image the code is similar to this one:
.aligncenter img {
margin-left: -30px;
width: calc(100% + (2 * 30px));
max-width: none!important;
}
Thank you!
What is the image extension CSS code?
I’d like to fill in the margins on both sides of the writing image.
The CENTER ALINED IMAGES function is not applied, so if you let me know the custom css code, I will apply it.
Hello Khalid!
You should check the differences and fix them with some CSS code. Or make sure it is not from an extra, non-tested plugin.
Thank you!
Why is it not there can I know? Can’t it be done with any CSS code?
Edit:
For better understanding ill post this code:
this is what my rendered site looks like in the footer:
<div class="td-footer-template-wrap" style="position: relative">
<div class="td-footer-wrap ">
<div id="tdi_137" class="tdc-zone"><div class="tdc_zone tdi_138 wpb_row td-pb-row" >
<style scoped>.tdi_138{min-height:0}</style><div id="tdi_139" class="tdc-row"><div class="vc_row tdi_140 wpb_row td-pb-row" >
<style scoped>.tdi_140,.tdi_140 .tdc-columns{min-height:0}.tdi_140,.tdi_140 .tdc-columns{display:block}.tdi_140 .tdc-columns{width:100%}</style><div class="vc_column tdi_142 wpb_column vc_column_container tdc-column td-pb-span12">
<style scoped>.tdi_142{vertical-align:baseline}.tdi_142>.wpb_wrapper,.tdi_142>.wpb_wrapper>.tdc-elements{display:block}.tdi_142>.wpb_wrapper>.tdc-elements{width:100%}.tdi_142>.wpb_wrapper>.vc_row_inner{width:auto}.tdi_142>.wpb_wrapper{width:auto;height:auto}</style><div class="wpb_wrapper" ></div></div></div></div><div id="tdi_143" class="tdc-row"><div class="vc_row tdi_144 wpb_row td-pb-row" >
<style scoped>.tdi_144,.tdi_144 .tdc-columns{min-height:0}.tdi_144,.tdi_144 .tdc-columns{display:block}.tdi_144 .tdc-columns{width:100%}</style><div class="vc_column tdi_146 wpb_column vc_column_container tdc-column td-pb-span12">
<style scoped>.tdi_146{vertical-align:baseline}.tdi_146>.wpb_wrapper,.tdi_146>.wpb_wrapper>.tdc-elements{display:block}.tdi_146>.wpb_wrapper>.tdc-elements{width:100%}.tdi_146>.wpb_wrapper>.vc_row_inner{width:auto}.tdi_146>.wpb_wrapper{width:auto;height:auto}</style><div class="wpb_wrapper" ></div></div></div></div><div id="tdi_147" class="tdc-row stretch_row"><div id="footer-jonas-id" class="vc_row tdi_148 footer-jonas-class wpb_row td-pb-row tdc-element-style" >
<style scoped>.tdi_148,.tdi_148 .tdc-columns{min-height:0}.tdi_148,.tdi_148 .tdc-columns{display:block}.tdi_148 .tdc-columns{width:100%}.tdi_148{padding-top:54px!important;padding-bottom:20px!important;position:relative}.tdi_148 .td_block_wrap{text-align:left}@media (max-width:767px){.tdi_148{padding-top:40px!important}}@media (min-width:768px) and (max-width:1018px){.tdi_148{padding-top:44px!important}}</style>
<div class="tdi_147_rand_style td-element-style" ><div class="td-element-style-before"><style>.tdi_147_rand_style>.td-element-style-before{content:''!important;width:100%!important;height:100%!important;position:absolute!important;top:0!important;left:0!important;display:block!important;z-index:0!important;background-image:url("https://entwicklung.nahe-news.de/wp-content/uploads/2023/12/Felsenkirche.webp")!important;background-position:center center!important;opacity:0.4!important;background-size:cover!important}</style></div><style>.tdi_147_rand_style{background-color:#111111!important}.tdi_147_rand_style::after{content:''!important;width:100%!important;height:100%!important;position:absolute!important;top:0!important;left:0!important;z-index:0!important;display:block!important;background:rgba(0,0,0,0.36)!important}</style></div><div class="vc_column tdi_150 wpb_column vc_column_container tdc-column td-pb-span12">
<style scoped>.tdi_150{vertical-align:baseline}.tdi_150>.wpb_wrapper,.tdi_150>.wpb_wrapper>.tdc-elements{display:block}.tdi_150>.wpb_wrapper>.tdc-elements{width:100%}.tdi_150>.wpb_wrapper>.vc_row_inner{width:auto}.tdi_150>.wpb_wrapper{width:auto;height:auto}</style><div class="wpb_wrapper" ><div class="vc_row_inner tdi_152 vc_row vc_inner wpb_row td-pb-row" >
<style scoped>.tdi_152{position:relative!important;top:0;transform:none;-webkit-transform:none}.tdi_152,.tdi_152 .tdc-inner-columns{display:block}.tdi_152 .tdc-inner-columns{width:100%}</style><div class="vc_column_inner tdi_154 wpb_column vc_column_container tdc-inner-column td-pb-span4">
<style scoped>.tdi_154{vertical-align:baseline}.tdi_154 .vc_column-inner>.wpb_wrapper,.tdi_154 .vc_column-inner>.wpb_wrapper .tdc-elements{display:block}.tdi_154 .vc_column-inner>.wpb_wrapper .tdc-elements{width:100%}</style><div class="vc_column-inner"><div class="wpb_wrapper" ><div class="wpb_wrapper wpb_text_column td_block_wrap td_block_wrap vc_column_text tdi_155 tagdiv-type td-pb-border-top td_block_template_1" data-td-block-uid="tdi_155" >
<style>.td-theme-wrap .tdi_155 .td-pulldown-filter-link:hover,.td-theme-wrap .tdi_155 .td-subcat-item a:hover,.td-theme-wrap .tdi_155 .td-subcat-item .td-cur-simple-item{color:#ff0000}.td-theme-wrap .tdi_155 .block-title>*,.td-theme-wrap .tdi_155 .td-subcat-dropdown:hover .td-subcat-more{background-color:#ff0000}.td-theme-wrap .td-footer-wrapper .tdi_155 .block-title>*{padding:6px 7px 5px;line-height:1}.td-theme-wrap .tdi_155 .block-title{border-color:#ff0000}.td-theme-wrap .tdi_155 .td_module_wrap:hover .entry-title a,.td-theme-wrap .tdi_155 .td_quote_on_blocks,.td-theme-wrap .tdi_155 .td-opacity-cat .td-post-category:hover,.td-theme-wrap .tdi_155 .td-opacity-read .td-read-more a:hover,.td-theme-wrap .tdi_155 .td-opacity-author .td-post-author-name a:hover,.td-theme-wrap .tdi_155 .td-instagram-user a{color:#ff0000}.td-theme-wrap .tdi_155 .td-next-prev-wrap a:hover,.td-theme-wrap .tdi_155 .td-load-more-wrap a:hover{background-color:#ff0000;border-color:#ff0000}.td-theme-wrap .tdi_155 .td-read-more a,.td-theme-wrap .tdi_155 .td-weather-information:before,.td-theme-wrap .tdi_155 .td-weather-week:before,.td-theme-wrap .tdi_155 .td-exchange-header:before,.td-theme-wrap .td-footer-wrapper .tdi_155 .td-post-category,.td-theme-wrap .tdi_155 .td-post-category:hover{background-color:#ff0000}</style>
<style>.tdi_155,.tdi_155 p{text-transform:capitalize!important}.tdi_155 h1{text-transform:capitalize!important}.tdi_155 h2{text-transform:capitalize!important}.tdi_155 h3{text-transform:capitalize!important}</style><div class="td-block-title-wrap"><h4 class="block-title td-block-title"><span class="td-pulldown-size">APOTHEKEN-NOTDIENST</span></h4></div><div class="td-fix-index">
as you can see, i added a class and an id to my container:
.footer-jonas-class
#footer-jonas-id
I tried everything but i cant change the background image:
Felsenkirche.webp via CSS, as the other containers are generated randomly:
I can use the following classes, but that will only affect the homepage, as the ids would be different on other subsites.
.tdi_143_rand_style > .td-element-style-before {
background-image: url(NEWIMAGE.JPG)!important;
}
Hello @indrajeetb !
Click on the row and hide the entire row from the CSS tab of the element: https://prnt.sc/1FJiMub9ke4s
Thank you!
Hi,
Unfortunately, there is no option for this, sorry!
If you want you ca try this custom css, I made the top menu to look better – https://i.imgur.com/UjnTnz1.png
.td-header-style-1 .td-header-top-menu {
display: block;
text-align: center;
margin-bottom: 16px
}
.td-header-sp-top-menu .td_data_time, .top-bar-style-1 .td-header-sp-top-widget {
display: none!important;
}
Thank you!
I have a sidebar on the website that displays varios widgets [tagdiv] Instagram, [tagdiv] block
I dont want them to show up on the mobile version of the website. I tried adding a css class but it wont work. Installed the widget options plug in to see if it would work but no luck.
Hello, could you let me know the live css code in order to hide the featured image in 1 post only? I found something on another site that recommended this:
.post-3026 .wp-post-image {
display: none;
}
But it doesn’t work. I’m assuming “.wp-post-image” isn’t the correct code for the featured image?
Please let me know.
Thanks!
Hi,
You can try to add this code to the initial css:
text-decoration: underline;
text-decoration-color: red;
Hi,
This can be done on pages using tagDiv Composer, select the element, then check in css tab from composer and down it is an option to hide element (this can be hide per view port). – https://i.imgur.com/Vedo9Ik.png
Thank you!
Hello,
This can be done only with custom css:
.td-header-style-1 .td-header-top-menu {
display: block;
}
.td-top-bar-container {
display: inline-flex;
}
Set the above code in the theme panel > custom code> advance css phone section.
I hope this will help you!
Hello!
You can achieve this only with CSS code.
If you use a cloud template, then you can edit the homepage with the TagDiv Composer and edit the header as well. There is actually a recycle bin basket for every element: https://www.screencast.com/t/wFYdqgpo6pT You can hide every element from the CSS tab: https://prnt.sc/1FJiMub9ke4s for each viewport: https://www.screencast.com/t/XDQJedlggSB
Check out this guide: https://forum.tagdiv.com/font-customization/.
Both modals are default, so there are some settings in the theme panel available for them.
Thank you!
Hello!
Try to disable the inline CSS and check after. (Theme panel -> Block settings -> Inline CSS) This was the only fix for optimization.
I hope that helps you!
Thank you!
Hello,
Usually, the color and image are set on the row, so please edit and select the row and go in the tab CSS https://i.imgur.com/iqpxjpt.jpg -> https://forum.tagdiv.com/topic/background-color-of-the-main-menu-be-changed/ please check each row/column/zone and replace the background color/image -> https://i.imgur.com/LgeVdGD.jpg
To change the background image, go in Theme Panel -> Background -> Mobile menu/mobile search => https://www.screencast.com/t/uvDejzbX and delete the image, because this no longer exists.
Thank you!
maybe learn how to frickin use css?
Thanks. I’m not looking to make a new newsletter. Even with custom CSS for my embedded mailchip form, it doesn’t display correctly with column text.
Returning to my screenshot, is there just a way to match the form I have on top with the form you created? I only wish to increase the input box size and button size. The form is working perfectly, I just need to change those two items to match what you have. That way, when someone signs up it goes to Mailchimp.
This is your child theme function
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 11);
function theme_enqueue_styles() {
wp_enqueue_style('td-theme', get_template_directory_uri() . '/style.css', '', TD_THEME_VERSION, 'all' );
wp_enqueue_style('td-theme-child', get_stylesheet_directory_uri() . '/style.css', array('td-theme'), TD_THEME_VERSION . 'c', 'all' );
}
This is mine
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 11);
function theme_enqueue_styles() {
wp_enqueue_style('td-theme', get_template_directory_uri() . '/style.css', '', TD_THEME_VERSION, 'all' );
wp_enqueue_style('td-theme-child', get_stylesheet_directory_uri() . '/style.css', array('td-theme'), TD_THEME_VERSION . 'c', 'all' );
}
// Preload Newspaper fonts for responsive theme (main theme)
function dns_prefetch_responsive() {
echo "<link href='https://www.telodoioildungeon.it/wp-content/themes/Newspaper/images/icons/newspaper.woff?21' rel='preload' as='font' type='font/woff' crossorigin>";
echo "<link href='https://www.telodoioildungeon.it/wp-content/plugins/td-composer/legacy/Newspaper/assets/images/icons/newspaper-icons.woff?1' rel='preload' as='font' type='font/woff' crossorigin>";
}
add_action( 'wp_head', 'dns_prefetch_responsive', 0 );
there are no other changes
Hi,
This can be resolved only with a general css, you can try something like this one:
.tdb_single_content p span{
text-underline-offset: 0.1em;
}
The css can be set in single post template in a css element or in the theme panel > custom code> custom css.
I hope this will help you!
HEllo,
Im having some trouble when it comes to import a section from the cloud. The message of “are you sure you want to import this?” gets stuck behind the pop-up for the cloud. See images. I can move it with CSS, but its not clickeble.
Hello!
1. Unfortunately, no. For example, if this will help you, a podcast can be added how I was explained here: https://forum.tagdiv.com/topic/where-is-the-featured-audio-coming-from/
2. Add a partial locker after a paragraph you need: https://forum.tagdiv.com/lockers/ Try to apply a shadow there https://app.screencast.com/70zPTfUpTf3Re -> https://app.screencast.com/eCea3GX5OWyKY.
This is another example: https://app.screencast.com/CqVMnp0uInrzJ -> https://app.screencast.com/cQ96gO8yzFR6l
It could be possible to achieve the same effect with some CSS code.
Thank you!
I have noticed this in the server, we have continuous visits from ips from rumania and netherlands asking for “/wp-json/tdw/save_css”. Fortunately this petitions are resolve with 403 instead this ips are not blocked. Look the screenshot: https://ibb.co/SnpVDsL
This happened months ago too. A code was inserted in template css and javascripts options boxes when you look there. Then you update the theme, and it seems that petition to be solved with a 403. It seemed they (I mean the hackers) disappears but since a couple of weeks I have noticed they are asking for CSS again because they know you have a vulnerability there. Today they are asking without stops, sometimes more than 50 times per minute…
Someone is attacking your theme without stop. You should take a look to this issue. Right now, fortunately, I have not been injected but they could find a new way again. This is a long-standing problem.
Add this CSS to “customize theme”—->Additional CSS
div.wp-block-embed__wrapper{
padding-bottom:56.25%;
position:relative;
width: 100%;
display:block
}
iframe{
position:absolute;
top:0;
left: 0
}
Hi there
It’s been more than 3 months I have turn off the publish date from the theme. I had used coding on css also tried WP Meta and Date remover and still using this plugin. Some of my post has no publish or updated date on google but some posts are still showing the date which is not related to publish date.
I wanted to remove the code from theme but I can not find the code from theme editor.
This is the what I would like to do ;
”To do so, navigate to Appearance → Theme Editor from your WordPress dashboard.
Under the Template-parts folder, select the template file, mostly named content.php, and remove the date code.”
The problem is there is not content php on my theme editor and also there is no Template-parts folder section as well. Could you please help ? Is there somethings wrong with my theme ?
