(I originally mis-posted this in "discussions.")

Here are some cosmetic issues in the Post Box I'm noticing here on the "day after" the 3/12/20 release.  I know I can solve some by custom CSS but in a few cases they may be "unintended consequences" you'll want to fix before I do.


1. Options Icon is a Blurry Blob
blurry
 
Also, would like to add the word "Options" back in to make it obvious to our infrequent visitors. Probably add the word "Link" too. Help? 

2.  Avatar size in Byline is reduced to the point you can't tell what the avatars are.

avatar-size-issue


 3. Byline post box no longer differentiated from the post body. Byline also too close to top line of post.

padding

 

I know I can css this (and just did), but seems like you'd want to fix that. 

The following seems to work for me, though I haven't vetted it completely.  
.post-box-byline {
margin-bottom: 25px; /*moves first line of posted content away from byline*/
font-weight: 700;
background-color: #f9f8f8; /*differentiates the byline box from post*/
margin-right: 20px; /*creates symetry with left margin*/
padding: 7px;   /*pads the byline box*/
 
What I'd really prefer is a wall to wall byline (and rearrangement of the Title and "follow this topic" option as seen below). 
 
wish

 
Neil

Attachments

Images (4)
neil
Original Post

Replies/Updates (15)

Hi Neil,

Some thoughts:

1. The icon might appear blurry to some, but I don't think it is. It's multi-colored, which might be throwing things off for you visually. If you'd like to make it a single color, you can add this CSS:

/* use monotone cog icon */
.fad.fa-cog {
font-family: "Font Awesome 5 Pro";
}

The share and cog/gear icon are pretty universal at this point, so generally speaking, we don't see the need to further clarify them by adding text. A simple hover/tap on the icons will quickly reveal what they are for.

If you'd really like to show some textual labels for those, you could do some more advanced CSS like this to achieve what you're looking for:

/* show text labels for share and manage icons */
.post-box .h-manage {
white-space: nowrap;
}

.post-box .h-manage a:first-child:before {
content: "Share ";
}

.post-box .h-manage a:nth-child(2):before {
content: "Options ";
}

Regarding your comment about the Follow button, that's actually an improvement in the v2 / Card Mode interface. The follow button is replaced with a follow icon that is right aligned with the title. I'm not sure there's an easy way to accomplish that in the v1 / Legacy UI that you're using, though.

Finally, there's also not an easy way to word wrap the byline to be centered as shown in your last screenshot. Either the entire line has to be centered or or left aligned. In that particular example, I might suggest reducing the length of the custom title to reduce the overall width. That wrapping is generally not a very common scenario.

Hope this all helps!

Brian

Brian Lenz

I'm sure the perceived blurriness is due to the duotone nature of the icon. As font icons, the Font Awesome icon set behaves very similarly to vector graphics; they are not images, so there aren't generally sharpness/blurriness issues. As such, I don't think it's actually blurry; it's just appearing blurry due to the color differences. You can see the actual icon used here.

If you don't like the icon as it's displaying on your site, the custom CSS to change it to monotone is your best bet to address it 

Brian Lenz

Using your code as the base, Brian, here's what I came up with to achieve the following look. The last one didn't work. Suggestions?

/*adds share and options text to 3.12.20 release*/
.post-box .h-manage a:first-child:before {
content: "Share ";
font-size: .8rem;
}
.post-box .h-manage a:nth-child(2):before {
content: "Options ";
font-size: .8rem;
}
/*removes two-tone shading on FA options gear cog*/
.fad {
position: relative;
font-family: "Font Awesome 5 Pro";
font-weight: 900;
}
/*puts share and cog on same line, otherwise, it wordwraps*/
.columns+.columns:last-child {
float: right;
width: inherit;
}

The last width tweak was needed to keep the share and gear from wordwrapping to a second line since the addition of the text blew out the width. It solved the share--options wordwrap but blew the widget to the bottom of the screen. Help?

Attachments

Images (1)
neil
Last edited by neil

That's not really a bug, per se; it's just that the Custom CSS you're using isn't fully handling that scenario. We are going to be making some improvements to this section later this week that will help, including add the Share icon for copying a link to the private message, as Carol reported. Once we add that, this issue will likely resolve itself

Brian Lenz

Hi @neil,

Here's an updated version of the original CSS I gave you to more explicitly do what you're looking for:

/* show text labels for share and manage icons */
.post-box .h-manage {
white-space: nowrap;
}

.post-box .h-manage a.h-share-icon:before {
content: "Share ";
font-size: 0.8rem;
}

.post-box .h-manage a.h-manage-icon:before {
content: "Options ";
font-size: 0.8rem;
}

You may need to update it based on whatever customizations you did (though I did add in the font size). The key change is in the second two selectors, which no longer need to use first-child and nth-child.

Hope that helps!

Brian

Brian Lenz

You're treading a bit into unsupported territory here, @neil ðŸ™‚ You could try something like this, but you're likely on your own at this point since you're getting into advanced CSS that isn't part of our general support offering.

@media only screen and (max-width: 40em) {
.h-manage { width: 40%; }
}

We can't make any guarantees that any custom CSS is going to be flawless, won't cause other issues, or will continue to function over time.

Regards,

Brian

Brian Lenz

Still alive.  See any potential issues with the following?

Your CSS worked for small (cellphone) screens. But it didn't help keep the COG stay inside the box on browser windows opened only to a small-width. I often manually narrow my browser windows when working on my laptop. The second bit of CSS seems to have cured the "options cog floating outside the box" problem.  (Probably created something bad somewhere else, but I haven't seen it yet ,)

/*Brian's good fix for keeping "options" cog (with added text) inside the content box on cellphone screen*/

@media only screen and (max-width: 40em) {
.h-manage { width: 40%; }

 

/*Neil apparently good fix for keeping the options cog inside the box in small browser width*/

.small-2.columns.text-right.hor-space-children-10 {
padding-right: 90px;}

 

Note to self and others: Keep in mind that I'm having to do these things because I wanted to add the texts "share" and "options" their icons and it threw off the spacing. Wish I didn't have to, but our folks seem stupified by icons. 

neil

Add Reply

  • Crowdstack
  • Eve Community
  • FeePod
  • ×
    ×
    ×
    ×
    Link copied to your clipboard.
    ×