Sponsored Content
The Lounge What is on Your Mind? My Badges Page - A Major UserCP Update (v0.661): Post 303032000 by Neo on Saturday 9th of March 2019 04:39:22 AM
Old 03-09-2019
My Badges Page - A Major UserCP Update (v0.661):

Another major upgrade on the new UserCP today. I have created the "My Badges" page in the new control panel, and it's looking very cool Smilie

If you have visited the new UserCP recently, you will more-than-likely need to close your browser (completely) and then restart it to clear out the old Javascript from your cache.

Hope you like it! I spend about 6 solid hours on getting the badges grid and all the tooltips to work correctly (I think)!!

Code:
https://www.unix.com/usercp/#/badges


Image
These 4 Users Gave Thanks to Neo For This Post:
 

9 More Discussions You Might Find Interesting

1. Web Development

How to auto update html page

is there any way to auto update html page. I created html page entry.html, whenever i change in html script i need to refresh my page. If not in html, can we do this in any other language and how? (2 Replies)
Discussion started by: RohitKJ
2 Replies

2. What is on Your Mind?

Update to Advanced Search Page (Phase 1)

Update: I have completed the first phase of revamping the "Advanced Search" page using Bootstrap (desktop not mobile yet): https://www.unix.com/search.php https://www.unix.com/search.php I may change this to a Bootstrap modal later and change the CSS a bit more; but for now it is much... (0 Replies)
Discussion started by: Neo
0 Replies

3. What is on Your Mind?

New Badging System - Badges Prototype Beta 1 (Badges Only)

Today I mapped out the new badging system using FA icons, Beta 1 in no particular order except a 6 x 8 grid: https://www.unix.com/members/1-albums215-picture991.png The prototype HTML code for this layout: <style> .fa-badge-grid { font-size: 1.5em; } .row { ... (38 Replies)
Discussion started by: Neo
38 Replies

4. What is on Your Mind?

SEO Update: Back On Page 1 for Google SERPs (between #6 and #8)

Well, good news... Just checked a number of browsers set to the US region of Google , NCR https://www.google.com/ncr unix.com was back on the first page, between #6 and #8. Will be interesting to see if we can make it back to our highest #4 ranking in 2019. Google Webmaster Tools... (4 Replies)
Discussion started by: Neo
4 Replies

5. Web Development

MySQL Query to Build Mockup Vue.js UserCP Timeline Page

Here is the query (and some sample results) I plan to use to build a new timeline page in the mockup vue.js usercp I am working on. When the postid is the same as lastpostid, this means the timeline entry will be - "{{Member}} Started Discussion {{Thread Title}} at {{date and time}}" and when... (4 Replies)
Discussion started by: Neo
4 Replies

6. What is on Your Mind?

New UserCP Landing Page (version 0.48)

There is a know bug deep in the Javascript library d3.js which causes an intermediate charting rendering bug in Vue.js. In a nutshell, when a page is reloaded the chart data is not rendered sometimes, but when the Vue.js route changes (a menu item in the UserCP is selected), it works flawlessly.... (3 Replies)
Discussion started by: Neo
3 Replies

7. What is on Your Mind?

Major Changes in New UserCP (v0.63) Prototype

Regarding the latest version of the UserCP prototype (version 0.63) I have made a lot of major changes, including Added a "Posts Timeline" table for the recent posts, complimenting the non-table version earlier, which has been moved off the main menu (link at the bottom of the table). Added a... (4 Replies)
Discussion started by: Neo
4 Replies

8. What is on Your Mind?

New UserCP Update Profile Image Page (UserCP Screeching Frog 0.7485)

Update! UserCP Screeching Frog 0.7485 Created a new page for uploaded a profile picture (profile pictures are different than avatar pictures). https://www.unix.com/usercp/#/settings/other https://www.unix.com/members/1-albums225-picture1158.png ... (0 Replies)
Discussion started by: Neo
0 Replies

9. What is on Your Mind?

Update: UserCP Screeching Frog 0.7641 - Changed Live Chat to Live Updates

Update: UserCP Screeching Frog 0.7641 - Changed Live Chat to Live Updates In this version of the UserCP, I have changed "Live Chat" to "Live Updates" by disabling the ability to post in the "live chat" area and changed the name to "Live Updates" The reason for this change is that experienced... (6 Replies)
Discussion started by: Neo
6 Replies
GROFF_WWW(7)						 Miscellaneous Information Manual					      GROFF_WWW(7)

NAME
groff_www - groff macros for authoring web pages SYNOPSIS
groff -mwww [ options ] file ... DESCRIPTION
This manual page describes the GNU -mwww macro package, which is part of the groff document formatting system. The manual page is very a basic guide, and the html device driver (grohtml) has been completely rewritten but still remains as in an alpha state. It has been included into the distribution so that a lot of people have a chance to test it. Note that this macro file will be automatically called (via the troffrc file) if you use -Thtml. To see the hyperlinks in action, please format this man page with the grohtml device. Here is a summary of the functions found in this macro set. .HX automatic heading level cut off; $1 point for sections/headers .BCL specify colours on a web page .BGIMG specify background image .URL create a url using two parameters .FTP create an ftp reference .MTO create a html email address .FTP create an ftp reference .TAG generate an html name .IMG include an image file .PIMG include png image .MPIMG place png on the margin and wrap text around it .HnS begin heading .HnE end heading .LK emit automatically collected links. .HR produce a horizontal rule .NHR suppress automatic generation of rules. .HTL only generate HTML title .ULS unorder list begin .ULE unorder list end .LI insert a list item .DC generate a drop capital .HTML pass an html raw request to the device driver Output of the pic, eqn, refer, and tbl preprocessors is acceptable as input. REQUESTS
HX Specify the cut off depth when generating links from section headings. For example, a parameter of 2 would cause grohtml to gener- ate a list of links for .NH 1 and .NH 2 but not for .NH 3. Whereas .HX 0 will tell grohtml that no heading links should be created at all. Another method for turning automatic headings off is by issuing the the command line switch -P-l to groff. BCL This macro takes five parameters: foreground, background, active hypertext link, hypertext link not yet visited, and visited hyper- text link colour. BGIMG the only parameter to this macro is the background image file. URL generates a URL using either two or three arguments. The first parameter is the actual URL, the second is the name of the link, and the third is optional stuff to be printed immediately afterwards. Hyphenation is disabled while printing the actual URL; explicit breakpoints should be inserted with the : escape. Here is how to encode foo <http://foo.org/>: .URL http://:foo.:org/ foo : If this is processed by a device other than -Thtml it appears as: foo <http://foo.org>: The URL macro can be of any type; for example we can reference Eric Raymond's pic guide <pic.html> by: .URL pic.html "Eric Raymond's pic guide" MTO Generate an email html reference. The first argument is mandatory as the email address. The optional second argument is the text you see in your browser, and an optional third argument is stuff printed immediately afterwards. Hyphenation is disabled while printing the actual email address. For example, Joe User <joe@user.org> was achieved by the following macro: .MTO joe@user.org "Joe User" Note that all the URLs actually are treated as consuming no textual space in groff. This could be considered as a bug since it causes some problems. To circumvent this, www.tmac inserts a zero-width character which expands to a harmless space (only if run with -Thtml). FTP indicates that data can be obtained via ftp. The first argument is the url and the second is the browser text. A third argument, similar to the macros above, is intended for stuff printed immediately afterwards. The second and the third parameter are optional. Hyphenation is disabled while printing the actual URL. As an example, here the location of the GNU ftp server <ftp://ftp.gnu.org/>. The macro example above was specified by: .FTP ftp://:ftp.gnu.org/ "GNU ftp server" . TAG Generates an html name tag from its argument. This can then be referenced using the URL <1> macro. As you can see, you must pre- cede the tag name with # since it is a local reference. This link was achieved via placing a TAG in the URL description above; the source looks like this: .TP .B URL generates .TAG URL a URL using either two or three arguments. ... IMG Include a picture into the document. The first argument is the horizontal location: right, left, or center (-R, -L, or -C). The second argument is the filename. The optional third and fourth arguments are the width and height. If the width is absent it defaults to 1 inch. If the height is absent it defaults to the width. This maps onto an html img tag. If you are including a png image then it is advisable to use the PIMG macro. PIMG Include an image in PNG format. This macro takes exactly the same parameters as the IMG macro; it has the advantage of working with postscript and html devices also since it can automatically convert the image into the EPS format, using the following programs of the netpbm package: pngtopnm, pnmcrop, and pnmtops. If the document isn't processed with -Thtml it is necessary to use the -U option of groff. MPIMG Place a PNG image on the margin and wrap text around it. The first parameter is the alignment: left or right (-L or -R). The sec- ond argument is the filename. The optional third and fourth arguments are the width and height. If the width is absent it defaults to 1 inch. If the height is absent it defaults to the width. HnS Begin heading. The heading level is specified by the first parameter. Use this macro of your headings contain URLs. Example: .HnS 1 .HR GNU Troff .URL http://groff.ffii.org (Groff) -- a .URL http://www.gnu.org/ GNU project. Hosted by .URL http://ffii.org/ FFII . .HR .HnE HnE End heading. LK Force grohtml to place the automatically generated links at this position. If this manual page has been processed with -Thtml those links can be seen right here. SECTION HEADING LINKS
By default grohtml generates links to all section headings and places these at the top of the html document. (See LINKS <1> for details of how to switch this off or alter the position). HR Generate a full-width horizontal rule. NHR Suppress generation of the top and bottom rules which grohtml emits by default. HTL Generate an HTML title only. This differs from the TL macro of the ms macro package which generates both an HTML title and an H1 heading. Use it to provide an HTML title as search engine fodder but a graphic title in the document. HTML All text after this macro is treated as raw html. If the document is processed without -Thtml then the macro is ignored. Inter- nally, this macro is used as a building block for other higher-level macros. For example, the BGIMG macro is defined as .de BGIMG . HTML <body background=$1> .. DC Produce a drop capital. The first parameter is the letter to be dropped and enlarged, the second parameter is the ajoining text whose height the first letter should not exceed. The optional third parameter is the color of the dropped letter. LIMITATIONS OF GROHTML
tbl information is currently rendered as a PNG image. FILES
/usr/share/groff/1.18.1/tmac/www.tmac SEE ALSO
groff(1), troff(1) grohtml(1), netpbm(1) AUTHOR
grohtml was written by Gaius Mulley <gaius@glam.ac.uk> BUGS
Report bugs to the Groff Bug Mailing List <bug-groff@gnu.org>. Include a complete, self-contained example that will allow the bug to be reproduced, and say which version of groff you are using. Groff Version 1.18.1 Nov 2003 GROFF_WWW(7)
All times are GMT -4. The time now is 07:15 AM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy