CSS design feature. Suggestions?
Have any of you started playing with the new CSS design feature? Can we share our our suggestions here? On my side I've started introducing some minimal changes to the layout.
My feedback is good so far.
-
My suggestion is to think of the goal you'd like to achieve. What do you really want to see changed? Which sections in the blog? Which colors are you going to use? After that, working with Chrome Developer Tools via F12 is a huge help.
Have a look at my blog.
-
I've been playing with lately.
- I've improved the colors and breaks between sections
- made the floating bar multi-colored, larger, and no longer flat (I hate flat UI design.)
- added some hover features
- made the blog icon "pop" more.
- added better highlighting and separation to posts.
- turned the tags to italic.
- highlighting the image in the magnify view.
Basically, all just minor view improvements to make the blog have more pop.
I'll probably work on getting better spacing on the ... menu so that they don't blend into the next post and try to improve their hitboxes next.
What I've been looking for a way to do is make the .newask element inline in a text post, so I could do something like "Click here to send an ask" and have it fire the ask prompt or even inline the ask prompt into the post. I don't think that's possible with just CSS, though.
The biggest problem I've run into (apart from the impossible task I just described) is that all post types seem to be a single class type: .postholder, and the content is in .image_container (even if it is a text type post). This makes it really difficult to change the style based on type.
-
2lf
I've thought about, and I may in the near future, once I kinda reach a happy point with the my own design, and make my changes more mobile-friendly. (Things like the hover feature don't work too well when you have no mouse to hover).
If you want to see the differences it makes, compare jennie.bsdmlr.com to officeconfisexual.bdsmlr.com (both are mine.) Both use the "responsive" layout, but I've made no css changes to officeconfisexual yet. I'll probably use that one to screenshot the changes when/if I do make the tutorials.
If this thread gets with specific questions, I'd be happy to post any answers I can provide in the tutorial sections for those as well.
I also want to play with the idea of the "default" layout, but have the title bar/bio be fixed on the side, and the scroll to the left. I'll probably try that on one of my other secondary blogs. I think this is doable just using css.
Support Bdsmlr
Personally, I think having the different type classes would be useful. Professionally, I don't have web UI experience to say if it would be or what exactly would be useful. I'm a programmer, not a web designer. :-) I did manage to find a workaround for my particular use case.
I've noticed that the root blog view (blog.bdsmlr.com -- i don't know what term you guys use for this) and the permalink view both use the same class -- .sidepostimage. This means what looks on good on the root view may not look good on the permalink view. (At least for the "responsive" layout.) I was able to get around that on mobile using @ media to detect screen size, but that won't help for permalinks on desktops. (Again, I don't have the web experience to know the "proper" solution here, so maybe there's a simple one.)
-
I was playing with the idea of a side-by-side view, where the title/icon/bio are on the left and the content is on the right.
It's still a work-in-progress, and it's only for desktops, but I have minimal functionality going on one of my side blogs. Spacings, colors, and borders need work, but that's just minor tweaking I need to fix. It's at https://jenniesdrabbles.bdsmlr.com/
If anyone is interested I can post the CSS.
Please sign in to leave a comment.
Comments
9 comments