VBForums Beautifier - A google chrome extension that will slightly modifies the looks

VBForums Beautifier - Chrome Extension

A Google Chrome extension that will modify the looks of VBForums.com site making it a bit prettier for the eyes.
The extension will inject some CSS and a little bit of JS to mod the looks of the site. What you are downloading contains full sourcecode. It's not a compiled package!
As of v1.02, I have included a b'day notifier that will let you know if any of your friends have b'day, today when you access the home of the website.
Let me know your suggestions/critics about the extension. :D

If you wish to buy me a beer, PM me! :rolleyes: :p

********************************************[ INSTALL FROM CHROMESTORE ]************************************

Chrome Store Link : https://developer.chrome.com/webstor..._v2_206x58.png

********************************************[ /INSTALL FROM CHROMESTORE ]************************************

********************************************[ SOURCECODE ]************************************

Download Latest Version : https://github.com/akhileshbc/VBForu...rome-Extension
(since it is harder to maintain the files by uploading it to vbforums after each updation, I created a public Git repo)

********************************************[ /SOURCECODE ]************************************

INSTALLATION(**edit** - now you can install the extension from Chrome Store):
-------------
* Download the zip and extract it
* Open the Extensions window in your Google Chrome by choosing: Main Menu --> More Tools --> Extensions
* Put check mark on the "Developer Mode" : http://i.imgur.com/ExOX1rA.png
* Drag and drop the extracted folder from the zip you downloaded, to the Extensions page : http://i.imgur.com/zPJC7kQ.png
* Voila! Now access vbforums.com site to see the changes

DEMO VIDEOS:

- Birthday Notifier: https://youtu.be/-hFDtkBuvRM


CHANGE LOG
----------

**Version 1.03:**
+++++++++++++

1. Profile badge for users, that will be dynamically created. User can right click and save to computer and then upload it anywhere: http://i.imgur.com/GIX96aj.png
2. Fixed issue with fetching the profile pic image. I forgot to change the hardcoded profile pic (of mine) to be selected dynamically! :P
3. Added provision to upload the profile badge to imgur(free image hosting) server upon clicking a button, and the BBcode and HTMLcode for using uploaded image will be displayed to the user. Screenshots: http://i.imgur.com/ZfRnOyU.png || http://i.imgur.com/pgI9JXu.png
4. Reduced the pulsing the "Rate this post" button's red color, as suggested by techgnome
5. Updated the installation guide on where to drop the folder(that too suggested by techgnome)

Version 1.02:
+++++++++++++
1. Issue with the top "Notifications" menu's submenu is fixed. Earlier the text was in white color that made it unable to read!
2. Updated the looks of the "Notifications" menu when having any notifications in it: http://i.imgur.com/c6FJgQa.png
3. Fixed the blinking alert issue on the reputation column in "Members List" page. Thanks to kfcSmitty for spotting it.
4. Removed the URL matching case for "http://vbforums.com", because it seems to be that the server has rewrite rules to always use the "www" version.
5. Fixed this error that was shown in Console window: "Denying load of jquery.min.map. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension."
6. Added new feature for displaying birthdays of friends in home page. When you are at home page, the right top corner will display "Update friends db". Click on it so that your friends list(you should be already logged in to your vbforums account) will be fetched and stored locally. After that, on each visit to the home page, you will be notified if any of your friends have birthday today!
7. Fixed the overlapping issue with [TT] tags. Thanks to kfcSmitty for pointing it out.
8. Added a help button in Quick Reply Box, to open up the BBcode list : http://i.imgur.com/2DA4j18.png
9. Added shadow effect on the images inserted inside the post content by users, so that it will project out : http://i.imgur.com/XVNsCOj.png

Version 1.01:
+++++++++++++
1. Removed the blue border around the avatar pic as suggested by kfcSmitty. Because earlier I only took the case of square avatars like mine. :P
2. Fixed the issue with not showing the Reputation popup box

Version 1.0:
++++++++++++
1. Arranged the logo to a bit top left: http://i.imgur.com/9nk53tH.png
2. Changed the nav bar top right corner to a new look
3. The top flash ad has been moved to the right
4. Font size for the forums in home page is increased: http://i.imgur.com/kbhTeY7.png
5. Spacing between the description and the forum title is also increased.
6. Spacing for forum stas(number of Threads & number of Posts) on each forum
7. Rounded border for each of the posts/comments in each thread
8. Flashing "Rate this post" link in each post
9. Top sub navigation was given some border and shadow to make it look sleek
10. Bottom button below reply box buttons is made a little bit rounded
11. Top & Bottom "Reply to Thread" button was changed with new bg color: http://i.imgur.com/6FTrcax.png
12. Bottom quick reply box is given a new dark bg
13. Some bg and spacing adjustments for the title of Quick Reply Box: http://i.imgur.com/3Oz87ZU.png
14. Each post/comment in a thread is given a new title bg as well as new border color: http://i.imgur.com/Gr36jwk.png
15. Social buttons at the top of every thread is hidden
16. Results (page counts) at top right corner was given a new look
17. Buttons below the Quick Replybox was given a bigger size and the "Post Reply" button is given a new bg color
18. [TT]...[/TT] shortcode elements will get a new look: http://i.imgur.com/Gr36jwk.png
19. A better look for the [CODE]...[/CODE] shortcode elements for a better readability: http://i.imgur.com/5bK2jwY.png
20. For not logged users, the login box's looks has been changed: http://i.imgur.com/mBiHYwK.png
21. Timer icon for the post date
22. RESOLVED threads is given a better notification: http://i.imgur.com/OeSE2ud.png
23. Thread starters username is set to bold

SCREENSHOTS:

http://i.imgur.com/VJq5MWr.png

http://i.imgur.com/Atom8be.png

http://i.imgur.com/MXwf65o.png

http://i.imgur.com/CGPkmNJ.png

http://i.imgur.com/QruxfU2.png

http://i.imgur.com/aQfhpzx.png

http://i.imgur.com/dAInMAa.png

Just loaded it up and so far I like it. I'll let you know if it does anything wonky :)

Nice work!

*edit* Just noticed an issue -- you're putting a blue border around images with a hyperlink. So avatars don't look quite right now.

The extension also breaks the "rate this post" option. When clicking it, it displays behind the posts, so you can't actually enter anything.

Quote:

---

Originally Posted by kfcSmitty

Just loaded it up and so far I like it. I'll let you know if it does anything wonky :)

Nice work!

*edit* Just noticed an issue -- you're putting a blue border around images with a hyperlink. So avatars don't look quite right now.

---

Quote:

---

Originally Posted by kfcSmitty

The extension also breaks the "rate this post" option. When clicking it, it displays behind the posts, so you can't actually enter anything.

---

Thanks :wave:

Both issues have been fixed and I have re-uploaded the code. :)

Another glitch: If you go to the member list, the "reputation" column flashes like you have on the "rate this post" link.

Quote:

---

Originally Posted by kfcSmitty

Another glitch: If you go to the member list, the "reputation" column flashes like you have on the "rate this post" link.

---

Thanks :wave:

I have fixed it in my local code. Will upload the latest code after two days. In the mean time, do let me know if you find any other glitches or if you liked to have any new feature/mod as extra. :)

Quote:

---

Originally Posted by kfcSmitty

Another glitch: If you go to the member list, the "reputation" column flashes like you have on the "rate this post" link.

---

I have updated clearing the issues and fixing some other bugs too. Also added a new feature that will let you know if anyone among your friends list is having b'day today!

Please note that, I have moved the code to a public Git repo for easy release of updations.

:wave:

Found another glitch. The tt tag line-height causes overlapping.

You can view an example here:

http://www.vbforums.com/showthread.p...=1#post4893291

Quote:

---

Originally Posted by kfcSmitty

Found another glitch. The tt tag line-height causes overlapping.

You can view an example here:

http://www.vbforums.com/showthread.p...=1#post4893291

---

Thanks. Fixed it. :thumb:

The updated file is "abc_vbf.css". Check the git repo. :wave:

Screenshot after fixing the issue:

http://i.imgur.com/WoiofOo.png

• Added a help button in Quick Reply Box, to open up the BBcode list : http://i.imgur.com/2DA4j18.png
• Added shadow effect on the images inserted inside the post content by users, so that it will project out : http://i.imgur.com/XVNsCOj.png

:wave:

Added dynamic profile badge for users. The image can be saved to PC by right clicking the image and choosing "Save image as..".

Screenshot:

http://i.imgur.com/GIX96aj.png

:wave:

Sweet! Just loaded it onto my Chromebook. Niiiice. A quick observation about the installation instructions.
You mention "Drag and drop the extracted folder from the zip you downloaded" but don't mention where the drop it. I assumed you meant the Extensions tab... but I didn't need to do that, as there is a "Load unpacked extension" button you can click, navigate to the extracted folder and load the extension that way.

I'm still trying to decide how I feel about the pulsing rate this post ... I'm easily distracted by things like that. Maybe if it was a little more subtle, like maybe only going to 50% red instead of 100% ... on the chromebook it's less of an issue since posts are usually long enough, but the moment this syncs with my work PC... which has a monitor 2.5 times bigger... I see more posts on it... it might get a little dist

Quote:

---

Originally Posted by techgnome

Sweet! Just loaded it onto my Chromebook. Niiiice. A quick observation about the installation instructions.
You mention "Drag and drop the extracted folder from the zip you downloaded" but don't mention where the drop it. I assumed you meant the Extensions tab... but I didn't need to do that, as there is a "Load unpacked extension" button you can click, navigate to the extracted folder and load the extension that way.

I'm still trying to decide how I feel about the pulsing rate this post ... I'm easily distracted by things like that. Maybe if it was a little more subtle, like maybe only going to 50% red instead of 100% ... on the chromebook it's less of an issue since posts are usually long enough, but the moment this syncs with my work PC... which has a monitor 2.5 times bigger... I see more posts on it... it might get a little dist

---

Thanks for the suggestions :thumb:

I have reduced the intensity of red color. Hope it's okay now.

New updates are as follows:

- Fixed issue with fetching the profile pic image. I forgot to change the hardcoded profile pic (of mine) to be selected dynamically! :P

- Added provision to upload the profile badge to imgur(free image hosting) server upon clicking a button, and the BBcode and HTMLcode for using uploaded image will be displayed to the user. Screenshots:
http://i.imgur.com/ZfRnOyU.png
http://i.imgur.com/pgI9JXu.png

- Reduced the pulsing the "Rate this post" button's red color, as suggested by techgnome

- Updated the installation guide on where to drop the folder(that too suggested by techgnome)

:wave:

It appears that the badge doesn't work when a user has a gif as their avatar. For me, it just shows a white block.

Also, the image seems stretched, causing it to look slightly blurry.

http://i.imgur.com/1vTSHwx.png


*edit* it appears it only looks blurry while in my profile.

Attachment 127765


*edit #2*
-- It would also be nice to have a settings menu to enable/disable certain features. For example, I will never use the friends DB and alway go into the extension to remove it after updating.

Quote:

---

Originally Posted by kfcSmitty

It appears that the badge doesn't work when a user has a gif as their avatar. For me, it just shows a white block.

Also, the image seems stretched, causing it to look slightly blurry.

http://www.vbforums.com/images/ieimages/2015/06/1.png


*edit* it appears it only looks blurry while in my profile.

Attachment 127765


*edit #2*
-- It would also be nice to have a settings menu to enable/disable certain features. For example, I will never use the friends DB and alway go into the extension to remove it after updating.

---

Yours is an animated gif image as dp. So I think there's more overhead in extracting a frame from it and then draw on the badge image. Will see if I can implement that in the future releases. :thumb:

Am not sure regarding your issue of stretched image. Because the uploaded image is also looking fine at my end, except the file that you have attached in the above post as an attachment:

http://i.imgur.com/6QvLC36.png

And regarding the settings page, I will add that facility in the next version probably. :thumb:

:wave:

Nice, glad to hear you're still adding features :)

As for the screenshot, the 2nd one is the one that actually displays in my profile, I just took a screenshot; it displays as blurry. However, since it only shows up in the current user's profile, it probably isn't a big bug.

Also, random question: is there a reason you haven't added your app to Google's app store? I don't mind running in developer mode, but it would be nice to have it install (and update) from the app store instead.

Quote:

---

Originally Posted by kfcSmitty

Nice, glad to hear you're still adding features :)

As for the screenshot, the 2nd one is the one that actually displays in my profile, I just took a screenshot; it displays as blurry. However, since it only shows up in the current user's profile, it probably isn't a big bug.

Also, random question: is there a reason you haven't added your app to Google's app store? I don't mind running in developer mode, but it would be nice to have it install (and update) from the app store instead.

---

Thanks :wave:

Yeah, I think the bug would be there for all users who are using animated gif as profile pic. Will see if I can figure out something in the future. :thumb:

For publishing it to Chrome store, I was thinking that I would have to pay a one time developer fee of 25$. Since I was not going to create more apps and am leaving the app as open source, I didn't bothered to check the details regarding publishing the app.

But after doing a quick look in here, I came to know that the one time developer fee is just 5$. So I will try it anyway. Just waiting for my Card to get credited. At the moment, it has no balance! :p

http://i.imgur.com/ByBC6Gk.png

Hey Akhilesh,

really nice work with the extension, i have to say i saw you extension a while ago but only just installed it and i really like it :)

The only (constructive) criticism i have is on the menu bar a the top right, i like the black background, but i don't really like the hover over style, it just looks kind of strange.

The dark blue with the light blue line underneath doesn't really go with the black.

If it was me i would make the hover over, go the full height of the menu and i would make it a semi-transparent glow like effect rather than a different colour.

Other than that really good work :wave:

Quote:

---

Originally Posted by NeedSomeAnswers

Hey Akhilesh,

really nice work with the extension, i have to say i saw you extension a while ago but only just installed it and i really like it :)

The only (constructive) criticism i have is on the menu bar a the top right, i like the black background, but i don't really like the hover over style, it just looks kind of strange.

The dark blue with the light blue line underneath doesn't really go with the black.

If it was me i would make the hover over, go the full height of the menu and i would make it a semi-transparent glow like effect rather than a different colour.

Other than that really good work :wave:

---

Thanks for the suggestion :thumb:

You mean something like this? :

http://i.imgur.com/lAskjfT.png

Yes that's more like it :thumb:,

although i would be interested to see what it looked like with a full box around the selection? (so those same blue glow lines at the top and bottom as well )

Not sure if you're interested, but I wrote a tool a while ago that I use regularly on VBForums that allows conversion of normal text into a code block.

Might be handy to have in the extension rather than using a Tampermonkey script:

http://www.vbforums.com/showthread.p...-tampermonkey)

Quote:

---

Originally Posted by NeedSomeAnswers

Yes that's more like it :thumb:,

although i would be interested to see what it looked like with a full box around the selection? (so those same blue glow lines at the top and bottom as well )

---

Here it is:

http://i.imgur.com/Shbth6f.png

:wave:

Quote:

---

Originally Posted by kfcSmitty

Not sure if you're interested, but I wrote a tool a while ago that I use regularly on VBForums that allows conversion of normal text into a code block.

Might be handy to have in the extension rather than using a Tampermonkey script:

http://www.vbforums.com/showthread.p...-tampermonkey)

---

Thanks :thumb:

Updated it in github. Just done a few mods on styling. The rest of your code and credits are untouched.

Screenshot:

http://i.imgur.com/QmCd1rz.png

:wave:

Great stuff :thumb:

Quote:

---

Originally Posted by NeedSomeAnswers

Great stuff :thumb:

---

So you like that effect?

:wave:

Yes i do,

if i could make one more suggestion ( hope i am not being a nuisance :) ) it would look even better if the glowed selection had rounded corners but either way it already is much better than the old one :afrog:

Hey Akhilesh,

i tried to install you new version but i get this error -

Attachment 128003

Attachment 128005

Unzip it yourself first... then load it by pointing it at the unzipped folder. Worked for me.

-tg

Quote:

---

Originally Posted by NeedSomeAnswers

Hey Akhilesh,

i tried to install you new version but i get this error -

Attachment 128003

Attachment 128005

---

You need to unzip it to a folder and then drag and drop it.
Btw, I will be registering for a chrome developer account in a day or two and will setup the app there. So that you could install it directly from webstore, without facing these hurdles.

:wave:

Quote:

---

Originally Posted by techgnome

Unzip it yourself first... then load it by pointing it at the unzipped folder. Worked for me.

-tg

---

:thumb:

You can now install from Chrome Store. Link: https://chrome.google.com/webstore/d...njmkpbjapfjheo

You don't have to install it in the other way of downloading from Git repo. Once installed from Chrome Store, it will stay up-to-date. You don't have to worry again!

:wave: