Table styles in blogroll plugin

[NickGreen]

Synopsis

While testing out the blogroll plugin, we've noticed that some table styles from the theme are negatively affecting the way the blogroll looks.

Site 1

URL: https://omco-development.mystagingwebsite.com/blogroll/ Problems:

• table, td and tr outlines
• Link underline and carat icon (not sure what's causing this one)
• Positioning of blogroll menu icon

Screenshot:

Site 2

URL: Local site running Twenty Twenty-one WordPress theme Problems:

• td outline
• table min-width

Screenshot:

Next Steps

The solution might be as simple as explicitly setting these styles in the files that are loaded with the blogroll plugin.

[scripting]

I've started looking at the first one, and it looks like the theme it's using has customized parts of Bootstrap.

For example, the vertical ellipses for the menu is a .dropdown-toggle, which has a width of 42px in the customization.

.dropdown-toggle {
    background-color: transparent;
    border: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    content: "";
    height: 42px;
    padding: 0;
    position: absolute;
    text-transform: lowercase;
    /* Stop screen readers to read the text as capital letters */
    top: 3px;
    right: 0;
    width: 42px;
}

In the smallbootstrap.css file there's nothing about the width for a dropdown-toggle.

So I guess what we would do there is add a style to smallbootstrap.css that says:

.divBlogrollContainer .dropdown-toggle {
   width: auto;
}

Not sure if that'd do it, and I don't think there's a way I can test that, which is another challenge.

Interested in your thoughts about how we can set up a testbed for this stuff that we can interact with to try fixes out.

[NickGreen]

Interested in your thoughts about how we can set up a testbed for this stuff that we can interact with to try fixes out.

There are a couple of different ways that I might suggest tackling this:

Chrome Inspector

In the Chrome Inspector, it's possible to live edit the CSS file to see how changes will affect the page. Do do so:

1. Open Inspector tools
2. Click 'sources', and find the file that you want to edit and click on it
3. Make your changes and cmd-s to save (it will show up with an asterisk if it hasn't been saved)

Screenshot:

Set up a test css file

We could easily have this specific site call a test version of the css file, which you could then tweak to affect only this site. This would be easy to do on our end, so let me know if you want to head that direction.

[scripting]

I use the debugger and inspector all the time.

It's the latter concept I was asking about. I need to be able to change a file, iteratively.

Let's talk about how we do that. ;-)

[NickGreen]

Sure thing. If you let me know what you want the name of the test file to be, I can change the path of the css on Om's dev site to that.

[scripting]

Excellent.

How about this?

http://scripting.com/code/testing/blogrolltoolkit/styles.css

Right now there are no changes to it, it's exactly what it was before.

But I can put experiments in there, and see them take effect next time I do a hard refresh.

Does that all make sense?

[NickGreen]

@scripting I'm trying to figure out which of these css files it replaces, can you help with that?

wp_register_style(
        'bootstrap',
        'https://s3.amazonaws.com/scripting.com/code/blogroll/smallbootstrap.css',
        array(),
        '1.0.0',
        false,
    );

    wp_register_style(
        'feedland-basic',
        'https://s3.amazonaws.com/scripting.com/code/includes/basic/styles.css',
        array( 'bootstrap' ),
        '1.0.0',
        false,
    );

    wp_register_style(
        'feedland-blogroll',
        'https://s3.amazonaws.com/scripting.com/code/blogroll/blogroll.css',
        array( 'bootstrap' ),
        '1.0.0',
        false,
    );

    wp_register_style(
        'feedland-blogroll-custom',
        'https://s3.amazonaws.com/scripting.com/code/feedland/home/misc.css',
        array(),
        '1.0.0',
        false,
    );

[scripting]

@NickGreen -- ignore my previous comment.

Here's the new URL, use it to replace blogroll.css in the list in the previous comment.

http://scripting.com/code/testing/blogroll/blogroll.css

Note the "/testing" in the path.

[NickGreen]

Great, thank you! I've updated the blogroll on Om's test site to use this css file:

    wp_register_style(
        'feedland-blogroll',
        'https://s3.amazonaws.com/scripting.com/code/testing/blogroll/blogroll.css',
        array( 'bootstrap' ),
        '1.0.0',
        false,
    );

Feel free to try it out and let me know if there are any issues. I'm not sure if versioning will result in the need to hard refresh each time you update it, or if there's other caching that might get in the way, so let me know how it goes.

[scripting]

It's working. I fixed the problem I described above, with the vertical ellipses being 42px wide. I added a style that fixes it at 5.25px, which is the computed value in the scripting.com rendering.

The good news is that when I reload the page, the updated styles are applied. So this is a valid process. :smile:

Now I'm going to look at the next problem.

[scripting]

I have gotten rid of the extraneous borders, but have not gotten rid of the underlines yet.

Also the links under each blog are also formatted with unwanted underlines.

[scripting]

Something other than text-decoration is causing the underlines.

I thought at first it was a drop-shadow, but I tried turning that off and the underlines were still there (and at the top, under the men).

[scripting]

The theme for the site is also popping up a dialog offering to share a link on various sites, and this is applied to links in the blogroll, like the When and Title links above the columns, and probably others.

[scripting]

A random thought as I go through all these issues, I think there are probably going to be some themes the blogroll can't be compatible with. We'll get it working here.

[scripting]

The alignment of the cells are all screwed up.

The left edge of title is supposed to line up with the left edge of the titles in the table. It does line up on blogrolls.social.

We should check to see if they line up on Doc's.

Also the rows are too tall, or the text is too widely separated vertically. Not sure which it is.

I've been trying to figure this out for a while, and then punted, and accepted that there would be differences in vertical spacing.

I need to call it day now. I'll be back at this, not sure exactly when, maybe later tonight, probably sometime tomorrow.

[scripting]

@NickGreen -- when you get a chance, undo the /testing change.

I'm comfortable trying out new ideas with the real version.

Thanks! :-)

[scripting]

BTW, I think Site 2 should now work. I can't test it here, don't have the URL, but the problems visible in the screen shot are ones that should be addressed.

[NickGreen]

Om's test site

The css file has been updated to reference https://s3.amazonaws.com/scripting.com/code/blogroll/blogroll.css

That file should now be loading here: https://omco-development.mystagingwebsite.com/blogroll/

Twenty Twenty-One theme

When loading the blogroll on a default site with Twenty Twenty-one theme, the table styles look much better.

There's still one style that needs to be explicitly overridden. This is what the theme is doing:

table {
  min-width: 240px;
}

Screenshot:

[scripting]

I added this to blogroll.css.

.divBlogrollContainer table {
    min-width: 0;
    }

[NickGreen]

Looks good from here:

[scripting]

It looks better but still is not right.

The T in title is supposed to line up vertically with the M in Mitch.

The n in When is supposed to line up with the n in 2 min.

Also, note that the weird underline char is gone in your screen shot but still present in mine.

To compare, look at the blogroll on blogrolls.social. This is what it's supposed to look like. A lot of work went into getting that to look just so. ;-)

[scripting]

Also try expanding an item. Here's what it looks like when I expand one item on Om's site.

It actually looks pretty good, but the links are still underlined. Are they that way on your system??

[NickGreen]

Expanded on Twenty Twenty-One theme:

[scripting]

BTW, see that extra space after Why Normal is NOT good?

I got rid of that, it's so cool that I can fix bugs so far away buried under so many layers of software! :-)

[scripting]

Thanks for posting the screen shot.

The underlines are gone there, so I won't worry about them being here? Do you agree?

And it looks like there's a problem wrapping. I'm going to take a look now.

[scripting]

Just to be sure -- are we working on Om's blog now?

This is the site I'm testing now.

https://omco-development.mystagingwebsite.com/blogroll/

[NickGreen]

Yes, that's the correct URL for Om's development site.

If it would be helpful, I could set up a fresh public test site with different themes installed, including Twenty Twenty-One, for anyone to play with. It might make iteration faster. Let me know if that's something you'd like me to do.

[scripting]

I got one of the problems fixed.

This is what it took:

.divBlogrollContainer {
     box-sizing: content-box;
    }

[scripting]

Next puzzle -- to figure out why the When isn't properly aligned.

[scripting]

If it would be helpful, I could set up a fresh public test site with different themes installed, including Twenty Twenty-One, for anyone to play with. It might make iteration faster. Let me know if that's something you'd like me to do.

Not needed at this time. I just wanted to be sure we're working with the same test case.