Style differences

[NickGreen]

Synopsis

We've noticed that some of the styles differ between the plugin test page and the initial example. Should those styles be explicitly set or not?

Details

These differences exist because some of the styles are being inherited from the theme, and aren't explicitly set within the plugin.

Since this is a plugin which will get activated on lots of different sites with lots of different styles, there may be some styles should be explicitly set, and therefore override the theme styles (such as vertical alignment), and some styles which would be good to inherit from the theme (such as font choice).

Here are some possible places where styles maybe should be explicitly set within the plugin:

• Vertical spacing between the blog titles
• Vertical alignment within the lines (the arrows vs. the titles not being vertically centered)
• Possibly more

Screenshot

[scripting]

I did start working on this and was able to fix one of the problems, but I think the fonts aren't getting loaded properly, is that something you can check on? That would be where I'd start. I think that will straighten out some of the alignment problems.

[NickGreen]

Indeed, the fonts aren't being loaded from the plugin. If those fonts are going to be baked into the feeds, then we should be able to just load them directly from Google without too much overhead.

I tested this locally by enqueueing the fonts directly from Google:

wp_enqueue_style(
    'feedland-google-fonts-ubuntu',
    '//fonts.googleapis.com/css?family=Ubuntu:400,500i,700',
);

wp_enqueue_style(
    'feedland-google-fonts-rancho',
    '//fonts.googleapis.com/css?family=Rancho',
);

It works just fine, and cleans up the styling differences (screenshot):

Fernando, would you be able to spend some time checking if that works on the public test site?

[scripting]

It looks a lot better but there are still some tweaks to be made, on my end, in the styles.

[scripting]

This is, for me, the last big thing to do before we can use this with other people.

We have to make the blogroll look excellent without dependencies on the CSS environment it's running in.

Here are two screen shots of where we're at, in the blogroll as displayed on blogroll.social and on the test page, as they appear now.

blogroll.social	WP plugin test site

[scripting]

So where are we at font-wise?

I think I heard that Ubuntu isn't loaded?

That might account for some of the extra spacing between lines?

The text in the right example is too big, again might be due to not having Ubuntu loaded.

Also I'm going to try to see about getting the border around the table. That's a big missing piece, back in a minute.

[NickGreen]

@scripting The font not loading there is almost certainly causing the internal style differences. I can help tackle that today while Fernando focuses on server issue elsewhere. Should be able to get it resolved by EoD today.

[scripting]

Why no border on the blogroll?

In blogroll.css, these styles, yet they aren't applied to the divBlogrollContainer in the page on the test site.

.divBlogrollContainer {
    display: table-cell;
    vertical-align: top;
    width: 240px;
    margin-left: auto;
    margin-right: auto;
    margin-right: 10px;
    border: 1px solid gainsboro;
    background-color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: Ubuntu;
    font-size: 15px;
    }
.divBlogrollContainer:focus {
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0;
    outline: thin dotted \9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    }

[NickGreen]

@scripting I believe it's because the div has an ID, not a class of divBlogrollContainer

For your styles to apply, it should be #divBlogrollContainer instead of .divBlogrollContainer.

I think this should solve it.