I need some CSS/HTML help for a new 'news' feature

(Bart Veldhuizen) #1

Hi,

I’d like to experiment with a new ‘Blender News’ feature here on Blender Artists that lists the most recent articles on BlenderNation. By using a dropdown it won’t use any screen space or get in the way unless you’re interested. Here’s what I have in mind:

Now I’m not great at HTML/CSS so I was hoping that someone here give me a hand with that? I can take care of the automatic population of the list (jquery + a json feed from BlenderNation).

0 Likes

#2

Any requirements for this? Flex, grid, floats?

Do you need whole script for dropdown or just dropdown layout in css/html?

2 Likes

(yogyog) #3

Sounds like a good idea - connecting the two great blender community sites.

1 Like

(Bart Veldhuizen) #4

The only requirement I have now is that the ‘top level’ navigation elements are <li> elements, so I suppose you could add another <ul><li> inside?

I can do the jquery part, but I won’t object if someone handles the entire thing :wink: (I have some skeleton code that will load the json feed and spits out the news items as LI’s, haven’t worked on a notification counter yet).

0 Likes

#5

Please send me sample json output (for one element), it will be easier to see what needs to be wrapped up.

1 Like

(Bart Veldhuizen) #6

Here’s the live feed:

https://www.blendernation.com/json/newsfeed/10/

I can add additional elements as needed, but I think this should cover it?

0 Likes

#7

Here is first version of the container itself:
https://codepen.io/cgslav/pen/KYNoxd

It needs fonts styles, icons and links but it is mostly done.

I’ve used gradient on the bottom of the title to partially hide overflow text just for the case of very long ones.

Also I’ve found that the top bar itself is a bit messed up and badly displayed in Firefox:

I’ve sorted this out and will send you later solution to fix this and make consistent across browsers.

0 Likes

(Bart Veldhuizen) #8

That’s a great start, thanks! One question: is there a way to add some kind of scroll behavior if the list becomes long? Maybe just scroll the messages and always leave the BlenderNation logo at the bottom (which can be a little smaller :wink:

Also the thumbnails are getting cropped. Is this just a matter of changing their sizes?

0 Likes

#9

No problem with scroll. We can set fixed height and anything below this value will be scrollable.

Check updated Pen, link is the same.

Thumbnails are scaled to 100x100px and cropped with “cover” value so we can basically see center-center of it filling whole available space.

Edit: Scrollbar will be by default different across browsers. To keep it simple/small and consistent we will need to use some external .js library.

Edit 2: I’ve made scrollbar consistent with only CSS :wink: As most of the mainstream browsers are based on WebKit engine (even new Edge), I’ve just used available styles for Firefox and match webkit to it.

1 Like

#10

I think it’s mostly done: https://codepen.io/cgslav/pen/KYNoxd

2 Likes

(Bart Veldhuizen) #11

It’s starting to look great! We should probably avoid loading in that google font though - the font doesn’t need to match that on BlenderNation, and I don’t really like adding Google resources (privacy!) here.

I’ll see if I can add the comments/shares information to the json feed.

0 Likes

#12

Font was just to use something consistent and I do not have CC subscription to use Nimbus Sans from BA. Do you think that they can track some information from CSS @import? Never thought about it and I’m also privacy freak :wink: Using same font as discours would be the best option.

1 Like

(Bart Veldhuizen) #13

Yeah they can definitely track you - CSS @imports are just a regular web browser request so you’ll be passing IP information and cookies.

And I don’t think we use Nimbus Sans, do we?

0 Likes

#14

OMG, no. I’ve checked another site probably :smile: Too many tabs and windows at once :laughing: Couple of minutes of my life wasted on looking for Nimbus webfont :stuck_out_tongue:

1

Edit: Corrected. Font matches BA :wink:

1 Like