Search Results for 'sidebar'

[mitchell.wright]

mitchell.wright

#268251

Hi

Is it possible to display a different sidebar on pages which show categories and pages which show tags.

I would like Sidebar1 on Tags page and Sidebar2 on Categories page

Is this possible?

Thanks

[mitchell.wright]

mitchell.wright

#268251

Hi

Is it possible to display a different sidebar on pages which show categories and pages which show tags.

I would like Sidebar1 on Tags page and Sidebar2 on Categories page

Is this possible?

Thanks

[Ben Ritner]

Ben Ritner

#268216

Hi,
There are differing and confusing “standards” currently out about adding a style tag outside of the head.

https://stackoverflow.com/questions/28633038/what-is-the-current-state-of-the-scoped-attribute-for-the-style-element-in-htm/45692033#45692033

The important thing to note is that browsers accept this as valid. While some “validators” will give a warning/error because of differents specs around html5 or 5.1

There are even suggestions that adding CSS in content is better for performance. But that is another conversation.

My advice is to ignore this.

However some people really really want the validator to not give any notice. In that case, you need to give some way for WordPress to know that this block is coming and the styles need to be loaded when the head of the page is loaded. Sidebars by default are not loaded and rendered until later in a page load after the head is already loaded. So with the Kadence Theme you can use the elements in Kadence Pro and place all your sidebar content in one, then hook that into the sidebar. By doing that the element will figure out what blocks are used and what CSS is needed before the head loads and place that in the head of the page.

It’s worth noting that WordPress core is aware that a system for seeing which blocks are going to be loaded on the page before the page is loaded is needed and it’s something that could be implemented as early as 5.9.

I hope that clarifies.
Ben

[djbeyhan]

djbeyhan

#268207

Hi

Sticky sidebar and sticky header is very good.

But aside from these, how can I make a row sticky? It can be a row in the content.

Please help.

Best regards

[djbeyhan]

djbeyhan

#268207

Hi

Sticky sidebar and sticky header is very good.

But aside from these, how can I make a row sticky? It can be a row in the content.

Please help.

Best regards

[Karla]

Karla

#268204

Hello,

Thank you for reaching out to us and apologies for the delay in getting back to you.

I do see the error when I tried validating a page with a Row Layout block inside the sidebar. For now, I have sent a note regarding this to the development team so they can further check and give advice accordingly.

Kind Regards,
Karla

[michaeljdeibert]

michaeljdeibert

#268191

Hi Ben,

As I was going through the final checks, I noticed that even though this css adjustment shows the desktop grid down to 1024px (working correctly), there’s a conflict with block display visibility. This is only evident in my sidebar elements, where I have some row blocks set to be hidden on Tablet.
An example can be seen here: https://staging7.queerfilmreviews.com/2021/07/queer-western-films/

In Developer, I’ve pinpointed the media query & css that *should* change this – but while it works in Developer, it’s not actually working on the front end (even after clearing all caches).

Here’s the css I added:

@media screen and (min-width:1024px){
.kvs-lg-false {
     display:none !important;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
.kvs-md-false {
    display: none !important;
    }
}

Again, changing the existing media query to note the max-width of 1023px (instead of the theme 1024px) works fine in Developer – but not elsewhere. It’s as if it’s being overruled – even placing that css in the child’s styles.css file. Is there another place within the theme that I also need to target? Or am I targeting the wrong selector?

I even tried to pinpoint it even further with: .entry-content .wp-block-kadence-rowlayout .kvs-md-false to no avail. But simply targeting the root .kvs-md-false selector should work site-wide.

I hope this is the last element with this, unless there’s anything else you might think should be checked?

Michael

[Karla]

Karla

#268127

Hello,

Thank you for reaching out.

The Ascend theme uses “col” classes that have pre-defined percentage widths for the main content and sidebar columns. If you want to adjust their widths, you can add this in Theme Options > Custom CSS:

@media (min-width: 1200px) {
    .main.kt-sidebar {
        width: 77%;
    }
    aside.kad-sidebar {
        width: 23%;
    }
}

You may also adjust the width values based on your preference.

Hope this helps!

Regards,
Karla

[Ben Ritner]

Ben Ritner

#268123

Hey,
Clarification Tablets are 1024-768 so it’s correct that desktop css is 1025px and not 1024

1.
Could we get an option, ideally via customizer, to include orientation options for tablets? Or get a query rewrite that includes orientation that is then customizable in Customiser with a select option? i.e. to allow landscape orientation to display desktop layout”
It’s more complicated than that. Currently, media queries can’t be set to a CSS variable so there is no good option to make them editable since the CSS files are static. Making them completely dynamic isn’t good for performance so until media queries can be set with variables I don’t foresee this being an option. However, I’m always open to creative ideas for how to solve this on a technical side.

A note about the header, we dynamically output css to create that header functionality and it’s “ok” in the context of the amount of css but not ideal for more situations like all of the content etc.

2. I shouldn’t have put 1024 in the css I sent you before. Since that would target tablets and the css I wrote before wasn’t intended for tablets.

However since you are wanting it to target tablets we can do that it just needs to be a little different since it was working with the desktop layout and if you want to apply this to tablets there is no desktop layout to work with, we are instead needing to add that part as well to the 1024px width range.

So updated:

@media screen and (min-width:1024px) {
.has-sidebar .content-container {
    display:grid;
    max-width: 100%;
    padding: 0;
    grid-template-columns: 70% 30%;
    grid-gap: 0;
    justify-content: center;
}
#secondary {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
}
.has-sidebar .site .content-container .alignwide, .has-sidebar .site .content-container .alignfull {
	margin-left: -90px;
	margin-right: -60px;
	max-width: none;
	width: auto;
	padding-left: 0;
	padding-right: 0;
	}
.has-sidebar .site .content-container .wp-block-kadence-column .alignwide, .has-sidebar .site .content-container .wp-block-kadence-column  .alignfull {
    margin-left:0;
    margin-right:0;
}
}

Let me know if that is what you want.

Ben

[Mike]

Mike

#268120

I certainly don’t see any parameter for setting this so I was wondering if there was a way I could make the sidebar area just a little narrower, maybe 75 pixels. The website I’m working on is HERE and what I’m actually trying to do is get the main content area to move about 75 pixels to the left toward the navigation panel in the sidebar.

Thanks for any help!

[Mike]

Mike

#268120

I certainly don’t see any parameter for setting this so I was wondering if there was a way I could make the sidebar area just a little narrower, maybe 75 pixels. The website I’m working on is HERE and what I’m actually trying to do is get the main content area to move about 75 pixels to the left toward the navigation panel in the sidebar.

Thanks for any help!

[Bonn]

Bonn

#268108

Hello,

There is no built-in function for this.

But you can achieve this by creating a shortcode.

Here is the code for creating the shortcode: https://pastebin.com/PDRNnEM2

You can add this using the code snippets plugin: https://kadence-theme.com/knowledge-base/advanced/how-to-add-a-custom-filter-or-function-with-code-snippets/

Then, you can add the shortcode [featured_image] on the sidebar using Text Widget or Shortcode block.

Hope this helps.

Regards,
Bonn

[michaeljdeibert]

michaeljdeibert

#268103

Hi,

Your custom CSS code would completely rewrite and undo everything that Ben and I worked out… I also don’t have a left sidebar on my site, so unless there’s a bug in that .has-left-sidebar has different settings that are thus overriding any manual css for .has-sidebar, this wouldn’t have any effect beyond your basic test site.

Though there may be something in there regarding adding the grid-column and grid-row properties within the specific min-width: 1024px media query…

But due to the lack of support here (further evidenced by your complete ignorance of the provided code that Ben himself wrote), the issue has already been escalated via premium support. I’d deal with it there, and probably with Ben directly since he understands the initial customisation and code.

The note you should be sending to the development team is: approve or answer comments on feature requests

[Karla]

Karla

#268101

Hi,

Apologies if I missed your questions.

“And changing the screen pixel to 1023px to force a tablet-landscape mode is not displaying correctly either. So do I need to target a more specific class to force desktop layout on 1024px? or go even broader?”

So here is a custom CSS code that can be used to show the desktop layout for 1024px above and start the tablet mode on 1023px:

@media screen and (min-width: 1024px) {
    .has-left-sidebar .content-container {
        grid-template-columns: 2fr 5fr!important;
    }

    .has-sidebar .content-container {
        display: grid;
        grid-template-columns: 5fr 2fr;
        grid-gap: var(--global-xl-spacing);
        -webkit-justify-content: center;
        justify-content: center;
    }
    .has-left-sidebar #main {
        grid-column: 2;
        grid-row: 1;
    }
    .has-left-sidebar #secondary {
        grid-column: 1;
        grid-row: 1;
    }
    .has-left-sidebar .has-sidebar .content-container .kadence-thumbnail-position-behind.alignwide {
        margin-left: -10px;
        margin-right: -10px;
    }
    .has-sidebar .content-container .kadence-thumbnail-position-behind.alignwide {
        margin-left: -10px;
        margin-right: -10px;
        max-width: calc(100% + 20px);
    }
}

This should work with the left/right sidebar layout – https://share.getcloudapp.com/yAuyE6Lx.

“I have my child theme… should that css go into the child theme’s styles.css instead of Customiser’s “Additional CSS” in order for it to load even earlier?”

Placing custom CSS code inside the child theme’s style.css file will make the styles load earlier than the ones from the Customizer > Additional CSS. However, it still should work if you put them in the additional CSS field.

Unfortunately, I cannot say much about feature requests as the development team are the one doing the planning for these additional features. I would send a note to them regarding this so they can address the request regarding “specifically to include ORIENTATION options at 1024px”(tablet).

Regards,
Karla

[Shreekant]

Shreekant

#268074

Hi,
Is it possible to create a sidebar that consists of the featured image for that post?

e.g. *Login to see link

I have a featured image set here, I’d like it to appear in a sidebar … automatically/dynamically.

Many thanks!

[Shreekant]

Shreekant

#268074

Hi,
Is it possible to create a sidebar that consists of the featured image for that post?

e.g. *Login to see link

I have a featured image set here, I’d like it to appear in a sidebar … automatically/dynamically.

Many thanks!

[michaeljdeibert]

michaeljdeibert

#268047

Hi,

1024px is a tricky screen size to target. It’s the upper range of the longest possible resolution size for tablets (according to THIS chart.

Some designers want to keep all tablet sizes the same, whether in portrait or landscape orientation. But others, myself included, want to use a horizontal orientation when the tablets are horizontal, especially when sidebars are included (as they often are on desktop layouts).

Right now, that’s not possible via Customiser and I’m running into troubles achieving it via CSS.
[Note, there is already a theme feature request with 49 upvotes… so this customisation seems wanted.]

It’s been noted that the current Kadence breakpoints are:
– 1024px and above: Desktop
– below 1024px to 768px: Tablet
– below 768px: Mobile

Except when viewing the actual @media queries in all.min.css, the actual desktop layout option targets 1025px and above… not 1024px.

@media screen and (min-width: 1025px){.has-sidebar .content-container{display:grid;grid-template-columns:5fr 2fr;grid-gap:var(--global-xl-spacing);-webkit-justify-content:center;justify-content:center}...}

1. Could we get an option, ideally via customiser, to include orientation options for tablets? Or get a query rewrite that includes orientation that is then customisable in Customiser with a select option? i.e. to allow landscape orientation to display desktop layout. (if not, then it defaults to tablet layouts instead.)

______________

2. My Current CSS Issue:

Working with Ben, we’ve included css to adjust the paddings regarding my right sidebar. The target screen size in our css is min-width:1024px.

/* remove padding for sidebar template and allow full-width within inner content area */

@media screen and (min-width:1024px) {
.has-sidebar .content-container {
max-width: 100%;
padding: 0;
grid-template-columns: 70% 30%;
grid-gap: 0;
}
.has-sidebar .site .content-container .alignwide, .has-sidebar .site .content-container .alignfull {
margin-left: -90px;
margin-right: -60px;
}
.has-sidebar .site .content-container .wp-block-kadence-column .alignwide, .has-sidebar .site .content-container .wp-block-kadence-column .alignfull {
margin-left:0;
margin-right:0;
}
}

It should be overwriting the “grid-template-columns:” choice in the all.min.css code cited above – but it’s not. And changing the screen pixel to 1023px to force a tablet-landscape mode is not displaying correctly either.
[Tested both in Chrome developer in their desktop = 1024px screen size, but also in a custom iPad-Horizontal size – and on my ipad itself in landscape orientation. As usual, all caches cleared, no change.]

However, when I adjusted the few other css changes that involve the 1024px media query, those ARE adjusted. So do I need to target a more specific class to force desktop layout on 1024px? or go even broader?
I have my child theme… should that css go into the child theme’s styles.css instead of Customiser’s “Additional CSS” in order for it to load even earlier?

Help would be appreciated. Thanks!

[michaeljdeibert]

michaeljdeibert

#268047

Hi,

1024px is a tricky screen size to target. It’s the upper range of the longest possible resolution size for tablets (according to THIS chart.

Some designers want to keep all tablet sizes the same, whether in portrait or landscape orientation. But others, myself included, want to use a horizontal orientation when the tablets are horizontal, especially when sidebars are included (as they often are on desktop layouts).

Right now, that’s not possible via Customiser and I’m running into troubles achieving it via CSS.
[Note, there is already a theme feature request with 49 upvotes… so this customisation seems wanted.]

It’s been noted that the current Kadence breakpoints are:
– 1024px and above: Desktop
– below 1024px to 768px: Tablet
– below 768px: Mobile

Except when viewing the actual @media queries in all.min.css, the actual desktop layout option targets 1025px and above… not 1024px.

@media screen and (min-width: 1025px){.has-sidebar .content-container{display:grid;grid-template-columns:5fr 2fr;grid-gap:var(--global-xl-spacing);-webkit-justify-content:center;justify-content:center}...}

1. Could we get an option, ideally via customiser, to include orientation options for tablets? Or get a query rewrite that includes orientation that is then customisable in Customiser with a select option? i.e. to allow landscape orientation to display desktop layout. (if not, then it defaults to tablet layouts instead.)

______________

2. My Current CSS Issue:

Working with Ben, we’ve included css to adjust the paddings regarding my right sidebar. The target screen size in our css is min-width:1024px.

/* remove padding for sidebar template and allow full-width within inner content area */

@media screen and (min-width:1024px) {
.has-sidebar .content-container {
max-width: 100%;
padding: 0;
grid-template-columns: 70% 30%;
grid-gap: 0;
}
.has-sidebar .site .content-container .alignwide, .has-sidebar .site .content-container .alignfull {
margin-left: -90px;
margin-right: -60px;
}
.has-sidebar .site .content-container .wp-block-kadence-column .alignwide, .has-sidebar .site .content-container .wp-block-kadence-column .alignfull {
margin-left:0;
margin-right:0;
}
}

It should be overwriting the “grid-template-columns:” choice in the all.min.css code cited above – but it’s not. And changing the screen pixel to 1023px to force a tablet-landscape mode is not displaying correctly either.
[Tested both in Chrome developer in their desktop = 1024px screen size, but also in a custom iPad-Horizontal size – and on my ipad itself in landscape orientation. As usual, all caches cleared, no change.]

However, when I adjusted the few other css changes that involve the 1024px media query, those ARE adjusted. So do I need to target a more specific class to force desktop layout on 1024px? or go even broader?
I have my child theme… should that css go into the child theme’s styles.css instead of Customiser’s “Additional CSS” in order for it to load even earlier?

Help would be appreciated. Thanks!

[Jeffrey]

Jeffrey

#267526

Loving Kadence WP so far, but still a lot to learn!

Is it possible to create from scratch a complete page layout, with certain common page elements (Header, Navigation, Row Layout, Sidebar(s), Footer, etc.), save that layout as a page ‘template’ of sorts, then apply that same template to multiple pages?

If so, can such templates then be later edited/updated such that the changes will be applied globally to ALL pages built on that template?

Can a site built with Kadence utilize multiple such templates, ex.: “Template A” used for all Car pages, “Template B” for all Truck pages, etc.?

The “Prebuilt Library” option looks interesting, but unsure whether edits/customizations made to these can be saved and applied globally?

Thanks!

[Jeffrey]

Jeffrey

#267526

Loving Kadence WP so far, but still a lot to learn!

Is it possible to create from scratch a complete page layout, with certain common page elements (Header, Navigation, Row Layout, Sidebar(s), Footer, etc.), save that layout as a page ‘template’ of sorts, then apply that same template to multiple pages?

If so, can such templates then be later edited/updated such that the changes will be applied globally to ALL pages built on that template?

Can a site built with Kadence utilize multiple such templates, ex.: “Template A” used for all Car pages, “Template B” for all Truck pages, etc.?

The “Prebuilt Library” option looks interesting, but unsure whether edits/customizations made to these can be saved and applied globally?

Thanks!

[Hannah]

Hannah

#267445

Thank you for the link! Sorry, I should have been able to identify this sooner, but the navigation widget is not set up to work in the header. It is designed for sidebars. So there isn’t a built-in function within Ascend to have a vertical menu in the header, sorry! Let me know if I can help steer you in another direction.

Kindly,
Hannah

[judith.joubert]

judith.joubert

#267295

Hi Karla,

I went into the customizer and disabled featured images in posts. The header and content bounced to the top, even with the top of the sidebar.

Thanks for the clue regarding the function of the whitespace at the top.

Best regards,

Judith

[judith.joubert]

judith.joubert

#267283

Hello,

I’m encountering excess white space between the header and the top of posts in the Kadence theme. This is true whether the content is in classic or blocks format.

The pages line up with the top of the sidebar, but not the posts.

I added this css to the customizer:
.site-header {
padding-bottom: 0;
}

to no avail.

Any ideas what could be causing this problem?

[judith.joubert]

judith.joubert

#267283

Hello,

I’m encountering excess white space between the header and the top of posts in the Kadence theme. This is true whether the content is in classic or blocks format.

The pages line up with the top of the sidebar, but not the posts.

I added this css to the customizer:
.site-header {
padding-bottom: 0;
}

to no avail.

Any ideas what could be causing this problem?

[Kevin]

Kevin

#267254

Hey Alex, thanks for contacting us! Hope you’re having a great day.

There is no setting in the theme for hiding the sidebar in mobile, but you can simply copy and paste this piece of CSS to Customize> Additional CSS to hide it in mobile:

@media screen and (max-width: 768px){
.has-sidebar .primary-sidebar {display:none}
}

If that doesn’t work, please share a link to your site and I’ll make sure to get you some CSS that works.

Thanks,
Kevin

[Divesh Jotwani]

Divesh Jotwani

#267194

Hello,

I added the kadence tab block in the right sidebar. And then, in the first tab, I added the kadence post block. After that, I found there is a huge SPACE gap between the next and the previous post. Please see the attached image for a better idea.

Would you please let me know how I can reduce that space gap?

[Divesh Jotwani]

Divesh Jotwani

#267194

Hello,

I added the kadence tab block in the right sidebar. And then, in the first tab, I added the kadence post block. After that, I found there is a huge SPACE gap between the next and the previous post. Please see the attached image for a better idea.

Would you please let me know how I can reduce that space gap?

[Karla]

Karla

#267107

Hello,

Thank you for reaching out and I’m sorry to hear you’re having this issue.

I tested the page using an iPhone device with a Safari browser but all the book links on your sidebar were clickable. Here are screen recordings for your reference:

• https://share.getcloudapp.com/kpun9QrB
• https://share.getcloudapp.com/kpun9QrB

For us to replicate better, could you indicate the browser version and device you’re using when you encounter the issue?

Best Regards,
Karla