- TutorialsDefault Block Settings Guide
How do I change the pages to full width? I’m sure the answer is simple, I’ve figured out how to change the header and footer to full width but can’t seem to get the pages to change, is there a way to change the default on this?
Hi!
Example page here: https://stevivor.com/reviews/shadow-of-the-colossus-review/
Two requests:
1) How can I reduce the height of my header in desktop view? I’m talking about the blue area around my logo — my logo image is just as high as its text, and there’s a lot of unnecessary padding.
2) I’d like to remove the dotted lines around the subtitle (which I’ve moved underneath the featured image) and also make the text black. How can I do so?
Thanks as always for excellent support!
Still not correct as I just noticed that this css also stripped the background from the footer on this page. Still looking for a way to make the header transparent, leaving the footer alone. Thanks!
Hi,
Sorry about the misunderstanding, I believe this is what you want
– https://www.screencast.com/t/IKP0ieY60
Enter this code in Theme panel->Custom CSS section
.td-header-style-5 .td-header-menu-wrap {
-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.09);
-moz-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.09);
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.09);
}
You can make modifications to the code if you want to, this is a guide about using box-shadow
– https://css-tricks.com/almanac/properties/b/box-shadow/
Thanks
Hi,
I’m using Newspaper 8.6, Header Style 3 – Multipurpose.
I have set Theme Colors > Main Menu Background to a solid color, but I want to create a transparent header on one page only using CSS.
So far I have tried the code below in the Live CSS – it changes the color of the correct area, but when setting the alpha to 0.0, it allows the color from the theme panel to show through – it does not make the header transparent to the background image. I’m using the template Pagebuilder + Overlay Menu.
.td-header-menu-wrap {
background-color: rgba(0, 0, 0, 0.0);
}
Can you please assist with the CSS override I need?
Thanks!
Hello ljhiser,
I have inspected your website and your header ad seems to work as expected, as you can see here -> https://www.screencast.com/t/DqPtFOqsFg1E If you have an Ad Blocker, do not forget to turn off if you want to see your ads. Clear all the caches and check the results.
Thanks for the message!
Hi – I’m struggling a bit with full-width logo. I’m using header style 11.
I’ve created a logo which is 1068×180. This is lovely on a desktop and matches the page width. On a mobile, I don’t want to specify a mobile logo (as it’s a bit small, squashed in between the menu and search icons) so I’m relying on the same 1068×180 logo on mobile too, which displays full-width below the Main Menu. Problem is with mobile display sizes, whitespace padding appears between the Main Menu (at the top) and the logo. Also padding just below the logo to the faint dividing line. I’m wondering if it’s possible to make the scaling a bit more elegant, perhaps top-justify the logo so there’s no white space between Main Menu and logo, and also perhaps lose that divider just below the logo?
Hi,
This code will increase the height of the mobile header, like this
– https://www.screencast.com/t/2OBzz0URu
It will remain the same size when sticky as well
– https://www.screencast.com/t/nJTTeiaXT
This is the code used
@media (max-width: 767px) {
.td-header-wrap .td-header-menu-wrap-full, .td-header-wrap .td-header-menu-wrap, .td-header-wrap .td-header-main-menu, #td-header-menu {
height: 100px !important;
}
#td-top-mobile-toggle,
.header-search-wrap {
top: 23px;
}
.td-main-menu-logo img {
max-height:100px;
}
.td-header-menu-wrap.td-affix {
transform: translate3d(0px, 0px, 0px)!important;
}}
You may modify values if needed, or leave it as it is.
Thanks
I’m finally setting up my newspaper theme and I’m trying to get my host’s ad code set up. I put the information needed in the <head> meta section and then the other part where I want my ad to show in the theme panel ad code section for the header ad but the ads aren’t showing on my site. I’m not sure if I’m doing something wrong or if it’s something to do with the ad code.
Ad code is here: it’s the first one 728 above the fold: http://www.flaunt.nu/new_2015_flaunt_tags_en.html
website: http://www.shineon-media.com/ – trying to make the ad show to the right of the logo.
Thanks so much.
After multiple attempts*, I can’t solve the problem of the search icon position, always on a second line.
So I go back to version 8.2
Is there a real solution?
Thanks
JL Cougy (jl.cougy@gmail.com)
* 8.6 Update via FTP – Save in the theme panel to regenerate the CSS cache of the theme – Clear Cache
Site : https://www.enrevenantdelexpo.com/
Header Style 3
Custom CSS :
.td-header-header {
background-image: url(“https://www.enrevenantdelexpo.com/wp-content/uploads/2018/01/En-revenant-de-lexpo_Blog-2018.jpg”
);
background-repeat: no-repeat;
}
.td-header-menu-wrap-full{
height:30px!important;
}
#td-header-menu{
min-height: 30px!important;
}
.sf-menu > li > a{
line-height: 30px!important;
}
.td-main-menu-logo{
height:30px!important;
}
.home .td-main-page-wrap{
padding-top:0!important
}
.td-header-gradient:before{
display:none!important
}
Hi,
The forum is custom designed including the header. A similar header style available in the theme would be style 6
– https://forum.tagdiv.com/header-styles/
Or maybe another one with some modifications to it. A header ad is not a must, you can either use one or not. If used, different header styles may display the ad in different locations.
Thanks
Hello,
I cannot recreate this issue on my end. Your logo is 132×42 http://www.interestinganswers.com/wp-content/uploads/2018/02/132×42-1.png
If i test with this size, on header style 6 the logo will be: 138 x 48
Please check any image optimization plugins you may use and disable them for testing purposes.
Thanks.
Hi,
The menus indeed can be set in Appearance->Menus, there you can edit the menus and their locations. Save the settings once made, there should be no problem doing that.
Or set the menu through the theme panel, each location has a setting, like this example for the header
– https://www.screencast.com/t/i3GjpOaU
If you already tried this and the menu is not setting, try deactivating all plugins, leave only theme plugins active. Check the theme system status
– https://forum.tagdiv.com/system-status-parameters-guide/
Ask your hosting provider to increase the WordPress allocated resources if needed, according to the guide. Then check if you can set a menu properly.
Thanks
Hello,
Please provide a link to your site so we can inspect the header.
Thanks
Hi,
@m2sahin Follow the steps as shown above and make the modifications to the files. By default the login is displayed only in the top bar, not the main header menu.
This can only be done through customization, the method shown above should still work, give it a try if you want to do this.
Thanks
The Live CSS editor is currently being included in the code of every page using the Newspaper theme (even for non-logged in users), and is merely being hidden from view with a style="display: none"
I noticed it when looking at my site’s results in Google search, and seeing this in the summary for every page:
“Edit with Live CSS. Save. Write CSS OR LESS and hit save. CTRL + SPACE for …”
This issue was also brought up by someone else as a comment on Themeforest: https://themeforest.net/comments/18588378
As was mentioned by that user in the Themeforest thread, this can be fixed by manually commenting out the require_once "css-live/css-live.php"; line in the wp-content/plugins/td-composer/td-composer.php file.
But that does not seem like the best long term solution.
Would it be possible in a future Newspaper update to set this to only be included on a page when a user is logged in, for example with a is_user_logged_in() check or something?
Because, besides the effects in the search engines, I think it is totally unnecessary to load all this extra code on each page when no one is even logged in to make use of the editor:
<div id="tdw-css-writer" style="display: none" class="tdw-drag-dialog tdc-window-sidebar">
<header>
Edit with Live CSS
<div class="tdw-less-info" title="This will be red when errors are detected in your CSS and LESS"></div>
</header>
<div class="tdw-content">
<div class="tdw-tabs-content tdw-tab-editor tdc-tab-content-active">
<script>
(function(jQuery, undefined) {
jQuery(window).ready(function() {
if ( 'undefined' !== typeof tdcAdminIFrameUI ) {
var $liveIframe = tdcAdminIFrameUI.getLiveIframe();
if ( $liveIframe.length ) {
$liveIframe.load(function() {
$liveIframe.contents().find( 'body').append( '<textarea class="tdw-css-writer-editor" style="display: none"></textarea>' );
});
}
}
});
})(jQuery);
</script>
<textarea class="tdw-css-writer-editor td_live_css_uid_1_5a77558c5778f"></textarea>
<div id="td_live_css_uid_1_5a77558c5778f" class="td-code-editor"></div>
<script>
jQuery(window).load(function (){
if ( 'undefined' !== typeof tdLiveCssInject ) {
tdLiveCssInject.init();
var editor_textarea = jQuery('.td_live_css_uid_1_5a77558c5778f');
var languageTools = ace.require("ace/ext/language_tools");
var tdcCompleter = {
getCompletions: function (editor, session, pos, prefix, callback) {
if (prefix.length === 0) {
callback(null, []);
return
}
if ('undefined' !== typeof tdcAdminIFrameUI) {
var data = {
error: undefined,
getShortcode: ''
};
tdcIFrameData.getShortcodeFromData(data);
if (!_.isUndefined(data.error)) {
tdcDebug.log(data.error);
}
if (!_.isUndefined(data.getShortcode)) {
var regex = /el_class=\"([A-Za-z0-9_-]*\s*)+\"/g,
results = data.getShortcode.match(regex);
var elClasses = {};
for (var i = 0; i < results.length; i++) {
var currentClasses = results[i]
.replace('el_class="', '')
.replace('"', '')
.split(' ');
for (var j = 0; j < currentClasses.length; j++) {
if (_.isUndefined(elClasses[currentClasses[j]])) {
elClasses[currentClasses[j]] = '';
}
}
}
var arrElClasses = [];
for (var prop in elClasses) {
arrElClasses.push(prop);
}
callback(null, arrElClasses.map(function (item) {
return {
name: item,
value: item,
meta: 'in_page'
}
}));
}
}
}
};
languageTools.addCompleter(tdcCompleter);
window.editor = ace.edit("td_live_css_uid_1_5a77558c5778f");
// 'change' handler is written as function because it's called by tdc_on_add_css_live_components (of wp_footer hook)
// We did it to reattach the existing compiled css to the new content received from server.
window.editorChangeHandler = function () {
//tdwState.lessWasEdited = true;
window.onbeforeunload = function () {
if (tdwState.lessWasEdited) {
return "You have attempted to leave this page. Are you sure?";
}
return false;
};
var editorValue = editor.getSession().getValue();
editor_textarea.val(editorValue);
if ('undefined' !== typeof tdcAdminIFrameUI) {
tdcAdminIFrameUI.getLiveIframe().contents().find('.tdw-css-writer-editor:first').val(editorValue);
// Mark the content as modified
// This is important for showing info when composer closes
tdcMain.setContentModified();
}
tdLiveCssInject.less();
};
editor.getSession().setValue(editor_textarea.val());
editor.getSession().on('change', editorChangeHandler);
editor.setTheme("ace/theme/textmate");
editor.setShowPrintMargin(false);
editor.getSession().setMode("ace/mode/less");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: false
});
}
});
</script>
</div>
</div>
<footer>
Save
<div class="tdw-more-info-text">Write CSS OR LESS and hit save. CTRL + SPACE for auto-complete.</div>
<div class="tdw-resize"></div>
</footer>
</div>
I set some on my site using several hacks (but only for the current item, for example, when you click on a category in the header menu). But if you mean different colours for the categories when in the homepage, then for that I tried testing my site with inspect element in chrome, and the suggestion I have would only work if you provide your site link for further inspection, or wait for the tagdiv team to assist you on Monday.
Newspaper/style.css includes the following code (in 8.6 this is lines 4143-4148):
@media (min-width: 767px) {
.td-header-style-10 .td-affix .td-main-menu-logo {
position: absolute;
left: 0;
}
}
I found that as a result, there is one pixel where the logo does not look correct — it should be position: initial up to 767px inclusive. So min-width could be 768px instead.
I originally posted this:
https://forum.tagdiv.com/topic/widget-title-color/
That helped me with TagDiv widgets but not the generic widgets that come with WordPress.
What is the best way to do this? I want my wiget title backgrounds to be the same color purple that I use in my header.
Thanks
Style 6 says to use 132×74. I created an image of this size but it displays as 96×54.
I noticed https://forum.tagdiv.com is 104×24.
What size should I use?
I like it.I want a rectangular icon to the left and menus to the right. I don’t want an ad in the header.
Thanks.
I would like to add a shadow to the header. It was there before, but I don’t know how it is gone.
Thx.
Hi,
why there are a div in my homepage with this code? I’m not logged-in on wordpress, what this need?
<div id="tdw-css-writer" style="display: none" class="tdw-drag-dialog tdc-window-sidebar"> <header> <a title="Editor" href="#">Edit with Live CSS</a><div class="tdw-less-info" title="This will be red when errors are detected in your CSS and LESS"></div> </header><div class="tdw-content"><div class="tdw-tabs-content tdw-tab-editor tdc-tab-content-active"> <script>(function(jQuery, undefined) {
jQuery(window).ready(function() {
if ( 'undefined' !== typeof tdcAdminIFrameUI ) {
var $liveIframe = tdcAdminIFrameUI.getLiveIframe();
if ( $liveIframe.length ) {
$liveIframe.load(function() {
$liveIframe.contents().find( 'body').append( '<textarea class="tdw-css-writer-editor" style="display: none"></textarea>' );
});
}
}
});
})(jQuery);</script> <textarea class="tdw-css-writer-editor td_live_css_uid_1_5a75e0c2a3b33">.home-boxo-mini .td-custom {
border:2px solid #ececec;
}</textarea><div id="td_live_css_uid_1_5a75e0c2a3b33" class="td-code-editor"></div> <script>jQuery(window).load(function (){
if ( 'undefined' !== typeof tdLiveCssInject ) {
tdLiveCssInject.init();
var editor_textarea = jQuery('.td_live_css_uid_1_5a75e0c2a3b33');
var languageTools = ace.require("ace/ext/language_tools");
var tdcCompleter = {
getCompletions: function (editor, session, pos, prefix, callback) {
if (prefix.length === 0) {
callback(null, []);
return
}
if ('undefined' !== typeof tdcAdminIFrameUI) {
var data = {
error: undefined,
getShortcode: ''
};
tdcIFrameData.getShortcodeFromData(data);
if (!_.isUndefined(data.error)) {
tdcDebug.log(data.error);
}
if (!_.isUndefined(data.getShortcode)) {
var regex = /el_class=\"([A-Za-z0-9_-]*\s*)+\"/g,
results = data.getShortcode.match(regex);
var elClasses = {};
for (var i = 0; i < results.length; i++) {
var currentClasses = results[i]
.replace('el_class="', '')
.replace('"', '')
.split(' ');
for (var j = 0; j < currentClasses.length; j++) {
if (_.isUndefined(elClasses[currentClasses[j]])) {
elClasses[currentClasses[j]] = '';
}
}
}
var arrElClasses = [];
for (var prop in elClasses) {
arrElClasses.push(prop);
}
callback(null, arrElClasses.map(function (item) {
return {
name: item,
value: item,
meta: 'in_page'
}
}));
}
}
}
};
languageTools.addCompleter(tdcCompleter);
window.editor = ace.edit("td_live_css_uid_1_5a75e0c2a3b33");
// 'change' handler is written as function because it's called by tdc_on_add_css_live_components (of wp_footer hook)
// We did it to reattach the existing compiled css to the new content received from server.
window.editorChangeHandler = function () {
//tdwState.lessWasEdited = true;
window.onbeforeunload = function () {
if (tdwState.lessWasEdited) {
return "You have attempted to leave this page. Are you sure?";
}
return false;
};
var editorValue = editor.getSession().getValue();
editor_textarea.val(editorValue);
if ('undefined' !== typeof tdcAdminIFrameUI) {
tdcAdminIFrameUI.getLiveIframe().contents().find('.tdw-css-writer-editor:first').val(editorValue);
// Mark the content as modified
// This is important for showing info when composer closes
tdcMain.setContentModified();
}
tdLiveCssInject.less();
};
editor.getSession().setValue(editor_textarea.val());
editor.getSession().on('change', editorChangeHandler);
editor.setTheme("ace/theme/textmate");
editor.setShowPrintMargin(false);
editor.getSession().setMode("ace/mode/less");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: false
});
}
});</script> </div></div><footer> <a href="#">Save</a><div class="tdw-more-info-text">Write CSS OR LESS and hit save. CTRL + SPACE for auto-complete.</div><div class="tdw-resize"></div> </footer></div>
Im not aware of a way that this would be implemented.
Im looking to have different 728 banners in different categories.
At this time, there is no option to show an 728 within, or before, the posts loop of a category, but only a header one.
Please let me know about possible ways of implementing this (i.e. altering the php file to accept a shortcode and then adding the banner in a text box of a plugin that handles them)
Hey everyone,
I have been trying to resolve this on my own for the last two hours, and I have not had any luck.
Here is my website: http://www.jeanfrancoisdp.com
What I am trying to do is replace the grey color around my logo in the header to white on the desktop version of my site. I also want to replace the small patch of grey located on the top-right of the search icon.
What I am looking to accomplish is just to have the upper part of the top menu white and not grey.
Thanks!
