=VG= SemlerPDX
-
Posts
4,766 -
Joined
-
Last visited
About =VG= SemlerPDX
- Birthday 06/07/1979
Recent Profile Visitors
=VG= SemlerPDX's Achievements
Major General (16/18)
6.2k
Reputation
Single Status Update
See all updates by =VG= SemlerPDX
-
Wot I been up to:
Crafting the new VG Wiki using our database forms system, to allow any old joe with little to no editing experience to create or edit great looking Wiki pages in a very VG themed style. All entries feature an automated Contents menu linking to any section with content, little 'edit' buttons next to any section that open the editor and jump to the part of the form containing that content, a Summary Box panel that sizes automatically with content (up to a certain min/max width), and up to 64 sections with optional inset image panel (with subtitle) which uses simple logic to stagger left/right on odd/even numbered sections.
Once the form/system is set, I'll be able to create additional categories, and even category-specific fields such as a standardized format for the Summary Box on a per subject/topic basis. Permissions can be set separately for who can create new pages/entries, or who can edit, so we can create a roadmap of 'stub' entries that can be filled in by users of specific group(s) that we dictate (such as Jr. Officers and higher only, etc.).
This is also being used to learn about custom CSS and HTML, and IPS logic, as it pertains to in-page links that jump around the same page (such as the proposed 'Back to Top' button for this website, globally). Like, I thought I knew a little about HTML and certain tags/properties like <a> and <div>, but this project has had me diving in much deeper requiring me to create my own custom <div> classes. The little white square brackets around the in-page links like [edit] are custom CSS added before and after the parent class, and ended up looking a lot more concise than three <span>'s in a row all with their own style dictated any time they were used.
the difference being:
<div class="vg-wiki-edit-link"><a href="./?do=edit&#subsection-{$vg_wiki_section}"><span>edit</span></a></div>
instead of this ugly mess:
<a target="_self" href="./?do=edit&#subsection-{$vg_wiki_section}"><span style="color:#bababa;font-size:12px;">[</span> <span style="color:#dba901;margin:2px;font-size:10px;font-weight:bold;">edit</span> <span style="color:#bababa;font-size:12px;margin-right:15px;">]</span></a>
Got some pics - first is day 1 proof of concept, then day 2, then day 3... coming right along, a lot of the work now is in the system/editor as opposed to the front end "look" of the Wiki pages:
(*images and text, and subsection titles etc. are placeholders for visualization purposes, of course)
-
-
2
-
- Report
- Show previous comments 7 more
-
@=VG= Fastjack The text content size and exact picture placement is skewed for the example images, since it's very hard to take a screenshot of a tall webpage without zooming out a bit. The inset images stagger left and right for odd/even numbered sections, so if something had 5 sections, and each one used the image inset option, the first would be on left, next on the right, and so on... A user could skip a section and that would appear to have it's image also on the left or right (same as the section above) if they wanted, too. The number of the content item and the section is actually irrelevant. If you added content to sub-section 1 and also sub-section 42, they would appear in the end as #1 and #2 in the Table of Contents (just not in the editor view).
Blogs are a different system, so, no there is no way to directly apply these customized HTML/CSS form elements that I made for the VG Wiki to the current Blogs system. Those are essentially blank pages, and you can use your own creativity to achieve nearly the same results using bbcode and editor tools. There will be a few more buttons for the Editor (seen in all posting, the bar of tools when you write posts or replies like this) as well, so that may help to make things look more personalized when desired.
You already can put pictures or banners in the same style (probably not with a box and subtitle, unless bbcode supports that), with text flowing around an inline image instead of being bumped down to the next paragraph line.
Also, the pictures #1, #2, and #3 are not different options, they are the evolution of my progress crafting this system (from my first day, through the third day, and look better in that order as I added/fixed elements).
-
-
2
-
- Report
-
FTR, this is what that #3 style sample looks like on my 24" 1080p monitor:
-
-
2
-
- Report
-
blurbs all day ... now it's bedtime... these are pretty cool - I built in lots of options... shape, size, position, slant, color, border color...
And that body of text is a div below the top three blurbs, very cool custom container magic
https://www.w3schools.com/code/tryit.asp?filename=GODU88O6CHIA
-
-
1
-
- Report
