Sidebar contents lack styling

  • Resolved bryanhiggs

    (@bryanhiggs)


    6 months ago

    I am adding a left sidebar to some posts in my Blocksy theme.

    I populated the matching widget with some content, which is styled with links and other stuff. But when I view the post, the sidebar displays without active links, block spacing is ignored, and border lines and rounding are missing, despite being specified in the widget (and seen in the widgets page).

    The sidebar is supposed to look like the one on this page:

    https://viclaf.dreamhosters.com/nh-free-tax-help-site-info/

    (that is not a sidebar; it’s using columns. Eventually, I will want that page to change to using a sidebar.)

    Can you please help me figure out how to enable the styling on sidebars?

    Thanks,

    Bryan

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter bryanhiggs

    (@bryanhiggs)

    6 months ago

    Strangely, the header at the top of the sidebar does show styling. But everything below that does not.

    Eduard

    (@cteduard)

    6 months ago

    Hello @bryanhiggs

    I see that you may have some plugin related to sidebars, that seems to affect the HTML structure of the sidebar by encapsulating all widgets into a single div. This div: https://ibb.co/mrtRR9mV, should not be present by default in our software.

    Have you had the chance to check out your installed plugins to see if any one of them affect this workflow?

    Thanks.

    Thread Starter bryanhiggs

    (@bryanhiggs)

    6 months ago

    Thank you for your quick response.

    I indeed am using a plugin, Content Aware Sidebars, and yes I had told it to insert that <div>.

    So, now, I have temporarily disabled the Content Aware Sliders, and am using the Main Sidebar widget temporarily on that post. It now looks like this: https://viclaf.dreamhosters.com/center-ossipee-tax-aide-at-ossipee-public-library/

    As you can see, the styling is there, except for the links. For comparison, here is what the Main Sidebar looks like in the Widgets area of the website (note the links are present):
    https://ibb.co/LD16CwQs

    So, can you tell me how to enable the links in the sidebar?

    Once I’ve figured that out, then I can proceed to do what I need to do with Content Aware Sidebars.

    Thanks!

    Bryan

    Thread Starter bryanhiggs

    (@bryanhiggs)

    6 months ago

    Well, now I see that the links are active. Just not rendering the same way as links elsewhere on the site. What is different about sidebars?

    Well, I investigated that, and it seems that there’s a separate specification of font colors (including link and link hover) in the Blocksy Customize>Sidebars (why?). I had to set the link color so that it would show the conventional link color. So, now it looks better.

    But I could find no way of making the links be underlined, as is the case throughout the rest of the website, so I added some CSS to render all links within the sidebar to have the underline. It seems strange that the sidebar rendering behavior is inconsistent, and I could only find the rather mysterious “Links type” under Customizing > General > Entry Content. Hard to find, and no indication or explanation of what the different links types might be.

    So, now, the sidebar appears to render properly, and I can continue on to using Content Aware Sidebars to do what I need to do.

    But it seems I may have uncovered an area in Blocksy that is somewhat less than ideal. Certainly, an area that needs improvement. Perhaps in a future version?

    Thanks for your help, and for listening.

    Bryan

    Eduard

    (@cteduard)

    5 months, 4 weeks ago

    Hello @bryanhiggs

    Let’s back it up a bit.

    First, we need the sidebar structure, as implemented by WordPress, to remain untouched. Unfortunately, plugins that modify the standard structure cannot be taken into account, as there are a million of possible combinations, which would be impossible to keep up with.

    This plugin that you used modifies the entire sidebar structure and encapsulates the content into its own div. This is not really that correct, because it can break a lot of other software that relies on the default structure. If you wish to explore a no-frills alternative, I will shamelessly plugin our Blocksy Pro extension that lets you create custom sidebars and assign them to various parts of the website: https://creativethemes.com/blocksy/docs/extensions/multiple-sidebars/

    Second, the sidebar controls are kept separate in order to let people have more flexibility when designing their website.

    Third, the link types currently affected by the Customiser options are under the following CSS selectors:

    .entry-content p>a, .entry-content em>a, .entry-content strong>a, .entry-content>ul a, .entry-content>ol a, .wp-block-table a, .ct-link-styles

    Other links cannot be currently affected, as we could be mistakenly catching other links that should not be affected, such as various buttons from page builders.

    Hope this clears everything up!

    Thanks.

    Thread Starter bryanhiggs

    (@bryanhiggs)

    5 months, 4 weeks ago

    Thank you for your response.

    First, let me make it clear: I like the Blocksy theme a lot, and I appreciate the amount of effort that has gone into creating and maintaining it. My comments were intended to be constructive criticism (combined with my thought processes as I delved into trying to solve the issues I was having).

    I understand the need to maintain the WordPress sidebar structure. As far as I am able to tell, the Content Aware Sidebars does not do what you say. I have compared the <div> structure from a Blocksy website that does not have the Content Aware Sidebars plugin with my current site, where I have the plugin installed, and causing the contents of the left sidebar to be displayed with a sidebar created through that plugin. See https://ibb.co/yccjgTgQ .

    My first submission, to which you replied with a display of the <div> structure, did have an inserted <div>, which was my fault; I chose a Content Aware Sidebars plugin option which I have since removed.

    I would love to use your Blocksy Pro sidebars extension. Unfortunately, I am working on this website on behalf of a 501(c)(3) non-profit organization that has a very limited budget. I am trying to keep the costs down as much as possible. I believe I did determine that your extension has the capability of displaying different sidebars on posts with different categories, which is what I need. Thanks for the suggestion!

    I have no problem with your decision to make the sidebar controls separate from the main controls. I understand the need for flexibility. What I do not understand is why the sidebar controls do not, by default, inherit from the main controls. I would have thought that would be the main use-case for many websites. Also, why the area of link rendering seems hard to find, and once I found it, it was hard to visualize what the links types would do (yes, I could see the changes in link rendering on the page, but it was subtle), and finding the link color for the sidebar was a little obscure. If the default could be made that sidebars inherit the same rendering as the main website, with the user option of making them different, it would have save me a lot of time going down an unnecessary rat-hole.

    I saw your response to another forum post (https://wordpress.org/support/topic/blog-sidebar-and-quote-blocks-are-not-underlining-the-hyperlinks/), which indicates that others are experiencing similar difficulties. I do not understand the relationship to HTML output from page builders, as I would have thought that whatever you do to render links in the rest of the website would be subject to similar restrictions. Why are sidebars different? In both cases, we don’t want to underline links that are buttons or icons.

    Summing up, I have great respect for the creators of Blocksy. Please consider my comments as an attempt to provide constructive criticism, especially in the areas of making the Customizer clearer in certain areas, and perhaps making the default behavior easier for the simple case.

    Thank you for listening.

    Bryan

    Eduard

    (@cteduard)

    5 months, 4 weeks ago

    Hello @bryanhiggs

    No worries, and yep we actually encourage users to share their feedback with us, so that we can improve the product for future generations. The developers are constantly looking through these emails and noting things down.

    Sorry if the previous message seemed somehow out of place. I just wanted to clear things up and let you know how the system works.

    Re: Content aware plugin – yep, I was just referring to the past scenario where it was adding a <div> tag, which made some things look out of place. Seeing as you have confirmed that things have improved after disabling that feature of theirs, I just wanted to emphasise how things fall into place and how a tiny thing can throw things off very quickly. Ah, the magic of software development. šŸ˜€

    Re: Sidebar controls inheriting – actually, this should already happen by default. The sidebar controls will automatically inherit the colours set in the palette, as shown here: https://streamable.com/lwbkya. The only scenario where this could not happen is if you have previously set the sidebar colours to something else.

    Re: Sidebars not inheriting link types – if I recall correctly, this was changed when WordPress changed its widgets system to be Gutenberg based. And with Gutenberg being able to insert pretty much anything inside the sidebar, automatically catching some links would’ve resulted in other elements being underlined, such as buttons, icons and so on, because some page builders that offer Gutenberg blocks chose to output their HTML in a specific way. For example, we’ve seen page builders represent their buttons not as <button> but as a standard <a> tag, which would automatically be caught by the CSS selector and be incorrectly underlined.

    All in all, thanks a lot for your passionate feedback. It definitely went to the right ears. And hopefully things are clearer now.

    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.