Just thought I'd give a quick update on my progress in updating Silicon for Vanilla 2.1. It's been a slow and difficult process as I've had to rebuild the CSS from scratch (that'll teach me to make a theme by modifying style.css ). The plus side is I've redesigned and improved a great deal of the theme and think the new version will be much, much better. It will also be responsive out of the gate.
I have an early preview screenshot for you, and will eventually have a live preview forum that you can explore:
By the way: I think it is a mess to build a unique looking side on top of a full blown CSS file, although it might be easier to maintain and also a help at first. But in the end you are always looking why an element doesn't behave the way you expect it to do or trying to kill some "important"s
@R_J said:
By the way: I think it is a mess to build a unique looking side on top of a full blown CSS file, although it might be easier to maintain and also a help at first. But in the end you are always looking why an element doesn't behave the way you expect it to do or trying to kill some "important"s
That was my logic when I first made Silicon. Modifying style.css meant I could make the theme with much fewer lines of CSS and spend less time squashing inherited rules. However, it also made upgrading to 2.1 virtually impossible. The HTML structure in 2.1 changed dramatically and thus made the entire stylesheet useless. I would either have to try and update the old stylesheet, which would lead to more and more visual bugs cropping up as time goes on, or try and hunt down and re-apply my changes from scratch onto the 2.1 style.css (which then just repeats the cycle).
So, in the interest of maintainability, I decided to go with the custom.css override file that most themes work with. Ultimately, Vanilla is pretty lightweight and the few more CSS lines I have to add have a negligible impact on performance, so it's not really worth fussing over. Plus, I have very limited free time as it is, so if people ever want to see updates to Silicon, this is the only way I can do it. I had considered ending support for Silicon for that very reason, so this is a nice compromise.
@R_J said:
By the way: I think it is a mess to build a unique looking side on top of a full blown CSS file, although it might be easier to maintain and also a help at first. But in the end you are always looking why an element doesn't behave the way you expect it to do or trying to kill some "important"s
The one time I wrote a theme from scratch, I unloaded the base style.css file via a themehook. Saved me a lot of headache come time for upgrades.
@hgtonight said:
The one time I wrote a theme from scratch, I unloaded the base style.css file via a themehook. Saved me a lot of headache come time for upgrades.
Actually, Vanilla will do this for you. If you call your theme's CSS file "style.css," it won't load Vanilla's default style at all (as opposed to when it's called "custom.css").
Good news, I've finished the new Silicon theme! The update is currently pending on Themeforest, but for now you can check out the live preview here: http://secondwindprojects.com/silicon/ I don't know about you, but I think the new design is leagues ahead of the original version.
Let me know if you spot any bugs. A few always manage to get past me.
I created an account to look around, but I don't think the mail server is set up right. Do you have a test account for logging in an looking around the entire frontend?
I created an account to look around, but I don't think the mail server is set up right. Do you have a test account for logging in an looking around the entire frontend?
Whoops, my bad. It should be working now, but I'll create a test account anyway.
[edit] Account credentials are test/password, but I don't want to allow the account to post, so it's not super useful.
"Quote" link is verbose for a discussion but iconized for comments.
In multi page discussions, pager and that nice "here come the comments!"-symbol don't have the same height.
Matter of taste
Contrast between alternating items is very low, so I would add some space between comments, discussions in discussion index and activity posts to separate them clearly
I don't like that the date in a discussion/comment is floated in the Body and not part of the Discussion/CommentHeader
When viewing a message, the Delete Conversation button text pops out of the side menu when it is in the side menu
This is a really bizarre issue, not sure why it's happening or why only in FF. I'll take a look at it, but might have to change how the sidebar is hidden instead. I still don't have the sidebar behavior working perfectly (if the list of items in the sidebar goes below the screen, you can't scroll down to see it, also for some reason it allows you to scroll right on mobile even though that content is set to hide overflow), so I'll have to keep playing with it until I discover the perfect combination.
@hgtonight said:
Side Menu Navigation Pills conflict with the avatar and change picture styles in the profile page
Could you elaborate on this one? Not quite sure what you mean.
@hgtonight said:
The Side Menu Navigation pills conflict with the 'Recent Discussions' filter styles. This might be intentional, but I don't like it
Yeah it's whatever, it was just a space-saving measure. If I can get the side menu to scroll properly, there won't be a need for it anymore.
@hgtonight said:
On a long discussion, the pagination list's and little quote icon's buffer doesn't match up
Bottom pagination is not centered in the pill shaped hole
Can you elaborate on both of these? Maybe provide screenshots?
@R_J said:
With open menu you can see that the highlighted "recent discussion" has a wrong height
Snap. Silly Firefox. Looks like these pills are more trouble than they're worth.
@R_J said:
Pagination is broken if you change between the pages
Checkboxes are not where they are supposed to be
Am not able to reproduce these issues, can you provide screenshots?
@R_J said:
Contrast between alternating items is very low, so I would add some space between comments, discussions in discussion index and activity posts to separate them clearly
I think the contrast is secondary, the same design could be done with no alternating colors and the amount of padding between items would still make it easy to separate them visually. But I'll try slightly increasing the contrast.
@R_J said:
I don't like that the date in a discussion/comment is floated in the Body and not part of the Discussion/CommentHeader
Not sure what you mean here. The "date box" is actually floated above both of them, so it should align perfectly with the top-right corner of the comment box (so it looks as if it's in the header and then extends slightly down into the body as well). Maybe provide a screenshot so I can make sure it's lining up the way it should.
It's like you've said: date is inside of the comment.
I just meant that I prefer to have it only in the header and not even the small part of it in the body.
The checkboxes in the Notification Preferences only look awkward if you scale the screen to mobile screen width (that's what I was looking at your theme with at first).
And speaking of mobile: the theme isn't usable at all with my Opera mobile browser (too many faults to list...)
What's strange is, that I can't recreate the "Recent Discussion" height problem, although I've seen that issue 6 hours ago every time I was hovering over "Recent Discussion".
@R_J said:
It's like you've said: date is inside of the comment.
I just meant that I prefer to have it only in the header and not even the small part of it in the body.
Ah, I see. Well, I'm chalking this up to personal preference, as I rather like the way it is. Plus for it to be moved to ONLY the header, I'd either have to make the header much taller (and I don't want to do that, at least not on the desktop view, it's already that way in mobile), or make the date box much smaller (can't do that, the text will be too small to read).
The checkboxes in the Notification Preferences only look awkward if you scale the screen to mobile screen width (that's what I was looking at your theme with at first).
Ah yes, stupid tables. I'll see if I can figure out how to fix that. [Edit] Now fixed!
And speaking of mobile: the theme isn't usable at all with my Opera mobile browser (too many faults to list...)
Really? Which OS? I tried Opera Mini on iOS and it worked fine.
What's strange is, that I can't recreate the "Recent Discussion" height problem, although I've seen that issue 6 hours ago every time I was hovering over "Recent Discussion".
That's because I fixed it. Full list of fixes:
Fixed:
In multi page discussions, aligned page control height with icon height.
Fixed "Recent Discussions" link having wrong height in collapsed sidebar in FireFox.
Slightly increased contrast between all alternating items.
Made comment icon consistent across theme (now mutli-comment icon for comments and single-comment icon for discussions).
Quote link in discussion header is now an icon.
Fixed issue where user could scroll right when sidebar was open to reveal hidden content.
Sidebar can now scroll when content exceeds its height
Removed sidebar pill boxes in favor of consistent link style
Fixed issue where the Delete Conversation button would be visible when the sidebar was closed in FireFox
Redesigned the Edit Profile page with a white content box to differentiate fields and buttons.
Fixed issue where notification options went beyond the page in mobile views.
Do you have the latest versions of both? I'm seeing that some users have issues with Font Awesome in Opera Mobile, but I haven't found anyone who's been able to track down the problem yet.
Comments
@wweovn peddle your SPAM elsewhere
There was an error rendering this rich post.
Nuked :-D
There was an error rendering this rich post.
Hello everyone!
Just thought I'd give a quick update on my progress in updating Silicon for Vanilla 2.1. It's been a slow and difficult process as I've had to rebuild the CSS from scratch (that'll teach me to make a theme by modifying style.css
). The plus side is I've redesigned and improved a great deal of the theme and think the new version will be much, much better. It will also be responsive out of the gate.
I have an early preview screenshot for you, and will eventually have a live preview forum that you can explore:
Enjoy!
That's a truly amazing theme!
By the way: I think it is a mess to build a unique looking side on top of a full blown CSS file, although it might be easier to maintain and also a help at first. But in the end you are always looking why an element doesn't behave the way you expect it to do or trying to kill some "important"s
Thanks!
That was my logic when I first made Silicon. Modifying style.css meant I could make the theme with much fewer lines of CSS and spend less time squashing inherited rules. However, it also made upgrading to 2.1 virtually impossible. The HTML structure in 2.1 changed dramatically and thus made the entire stylesheet useless. I would either have to try and update the old stylesheet, which would lead to more and more visual bugs cropping up as time goes on, or try and hunt down and re-apply my changes from scratch onto the 2.1 style.css (which then just repeats the cycle).
So, in the interest of maintainability, I decided to go with the custom.css override file that most themes work with. Ultimately, Vanilla is pretty lightweight and the few more CSS lines I have to add have a negligible impact on performance, so it's not really worth fussing over. Plus, I have very limited free time as it is, so if people ever want to see updates to Silicon, this is the only way I can do it.
I had considered ending support for Silicon for that very reason, so this is a nice compromise.
The one time I wrote a theme from scratch, I unloaded the base style.css file via a themehook. Saved me a lot of headache come time for upgrades.
That said, I am a pretty crappy designer. XD
Search first
Check out the Documentation! We are always looking for new content and pull requests.
Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.
Actually, Vanilla will do this for you. If you call your theme's CSS file "style.css," it won't load Vanilla's default style at all (as opposed to when it's called "custom.css").
Good news, I've finished the new Silicon theme! The update is currently pending on Themeforest, but for now you can check out the live preview here: http://secondwindprojects.com/silicon/ I don't know about you, but I think the new design is leagues ahead of the original version.
Let me know if you spot any bugs. A few always manage to get past me.
Well shoot that was fast, it's already been approved.
I like the way you designed the dates. very nice.
I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.
This looks great!
I created an account to look around, but I don't think the mail server is set up right. Do you have a test account for logging in an looking around the entire frontend?
Search first
Check out the Documentation! We are always looking for new content and pull requests.
Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.
Whoops, my bad. It should be working now, but I'll create a test account anyway.
[edit] Account credentials are test/password, but I don't want to allow the account to post, so it's not super useful.
Some bugs/issues I had (only tested on FF 30.0)
I really like the subtle read/unread styling on the left side of the discussions list.
Search first
Check out the Documentation! We are always looking for new content and pull requests.
Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.
I like that theme of yours best! Here are some things I've noted (Firefox 24.6):
Tablet screen width
http://secondwindprojects.com/silicon
With open menu you can see that the highlighted "recent discussion" has a wrong height
http://secondwindprojects.com/silicon/discussion/6/suspendisse-eu-aliquam-lectus/p1
Pagination is broken if you change between the pages
Anywhere: Open the side menu and try to scroll right – it works and so scrolls the content behind the menu
Phone screen width
http://secondwindprojects.com/silicon/profile/preferences/10/test
Checkboxes are not where they are supposed to be
Consistency
In http://secondwindprojects.com/silicon/categories the symbol for a discussion is one speech bubble and for comments it is two speech bubbles. In http://secondwindprojects.com/silicon/ the number of comments is preceeded with the one speech bubble icon
Buttons on http://secondwindprojects.com/silicon/profile/edit have nearly the same color as input boxes. On http://secondwindprojects.com/silicon/activity and popup boxes they are dark blue.
The "Browse..." button here http://secondwindprojects.com/silicon/profile/picture is not styled at all, but it seems as if this is a Vanilla/File Upload problem?
"Quote" link is verbose for a discussion but iconized for comments.
In multi page discussions, pager and that nice "here come the comments!"-symbol don't have the same height.
Matter of taste
Contrast between alternating items is very low, so I would add some space between comments, discussions in discussion index and activity posts to separate them clearly
I don't like that the date in a discussion/comment is floated in the Body and not part of the Discussion/CommentHeader
Thanks for the feedback, guys! I've created a list of known issues and will get to them as soon as I can.
This is a really bizarre issue, not sure why it's happening or why only in FF. I'll take a look at it, but might have to change how the sidebar is hidden instead. I still don't have the sidebar behavior working perfectly (if the list of items in the sidebar goes below the screen, you can't scroll down to see it, also for some reason it allows you to scroll right on mobile even though that content is set to hide overflow), so I'll have to keep playing with it until I discover the perfect combination.
Could you elaborate on this one? Not quite sure what you mean.
Yeah it's whatever, it was just a space-saving measure. If I can get the side menu to scroll properly, there won't be a need for it anymore.
Can you elaborate on both of these? Maybe provide screenshots?
Snap. Silly Firefox. Looks like these pills are more trouble than they're worth.
Am not able to reproduce these issues, can you provide screenshots?
Yeah I can't style that button.
I think the contrast is secondary, the same design could be done with no alternating colors and the amount of padding between items would still make it easy to separate them visually. But I'll try slightly increasing the contrast.
Not sure what you mean here. The "date box" is actually floated above both of them, so it should align perfectly with the top-right corner of the comment box (so it looks as if it's in the header and then extends slightly down into the body as well). Maybe provide a screenshot so I can make sure it's lining up the way it should.
It's like you've said: date is inside of the comment.
I just meant that I prefer to have it only in the header and not even the small part of it in the body.
The checkboxes in the Notification Preferences only look awkward if you scale the screen to mobile screen width (that's what I was looking at your theme with at first).
And speaking of mobile: the theme isn't usable at all with my Opera mobile browser (too many faults to list...)
What's strange is, that I can't recreate the "Recent Discussion" height problem, although I've seen that issue 6 hours ago every time I was hovering over "Recent Discussion".
Ah, I see. Well, I'm chalking this up to personal preference, as I rather like the way it is.
Plus for it to be moved to ONLY the header, I'd either have to make the header much taller (and I don't want to do that, at least not on the desktop view, it's already that way in mobile), or make the date box much smaller (can't do that, the text will be too small to read).
Ah yes, stupid tables. I'll see if I can figure out how to fix that. [Edit] Now fixed!
Really? Which OS? I tried Opera Mini on iOS and it worked fine.
That's because I fixed it.
Full list of fixes:
Fixed:
Opera Mobile, Android 4.3
Seems like the icons are not loaded and the status bar at the bottom behaves strange
Do you have the latest versions of both? I'm seeing that some users have issues with Font Awesome in Opera Mobile, but I haven't found anyone who's been able to track down the problem yet.
It's that one: https://play.google.com/store/apps/details?id=com.opera.browser.classic
But with that one, everything is okay: https://play.google.com/store/apps/details?id=com.opera.browser