• Register
    • Help

    striker  0 Items
    Currently Supporting
    • Home
    • News
    • Forum
      • Try XenForo Demo
      • New Posts
      • FAQ
      • Calendar
      • Community
        • Groups
        • Albums
        • Member List
      • Forum Actions
        • Mark Forums Read
      • Quick Links
        • Today's Posts
        • Who's Online
      • Sponsor
        • Sponsor a Feature
        • List of Donors
    • Wiki
    • Support
    • What's New?
    • Buy Now
    • Manual
    • 
    • Forum
    • VaultWiki How-Tos
    • VaultWiki Questions
    • Best Practices for CSS and Templates?

    1. Welcome to VaultWiki.org, home of the wiki add-on for vBulletin and XenForo!

      VaultWiki allows your existing forum users to collaborate on creating and managing a site's content pages. VaultWiki is a fully-featured and fully-supported wiki solution for vBulletin and XenForo.

      The VaultWiki Team encourages you to join our community of forum administrators and check out VaultWiki for yourself.

    Results 1 to 5 of 5

    Thread: Best Practices for CSS and Templates?

    • Thread Tools
      • Show Printable Version
    1. December 22, 2017 #1
      SurferJon
      • View Profile
      • View Forum Posts
      • View Blog Entries
      • View Articles
      SurferJon is offline
      Junior Member
      Join Date
      November 7, 2015
      Posts
      21
      Rep Power
      129

      Best Practices for CSS and Templates?

      Hi,

      I run a Pokemon fan website and have a listing of Pokemon products that have been released each month. So I'll have a page on 2017's products with each H2 showing a month ("May 2017") and then each product released in that month under the header. Each product listing shows the product's image, release date, price, etc.

      So to display a month's worth of products under each H2 header, I have a "product header" template that starts the div HTML for that month and calls up the CSS to display the products, then each "product item" template, then a closing "product footer" template that closes the div. So it's something like: "product header" template, "product item" template for product #1, "product item" template for product #2, "product item" template for item #3, and then the closing "product footer" template.

      Now here's my questions:

      1. The "product header" template is what starts up the div for each month and calls up the CSS for the product display. If you're making a template, would you store the CSS directly in that template? Do you put the CSS somewhere else in Vaultwiki? Do you call up the CSS via a style tag and put the CSS file on the server? What's the best way to do this?

      2. Now here's my other problem. The "product" CSS is called up 12 times on each year's product page because it's called up every single time under every single month. Is this how it should work? Shouldn't Vaultwiki only allow it to be called up once?

      Basically I'm just trying to figure out how to organize my wiki before it opens to the public so that we're doing things correctly. A big wiki can get very messy very quickly, so I want to understand what's the best way to work on templates, store their CSS, etc., especially when there will be hundreds of templates.

      Thank you!
      Reply With Quote Reply With Quote

    2. December 22, 2017 #2
      pegasus
      • View Profile
      • View Forum Posts
      • View Blog Entries
      • Visit Homepage
      • View Articles
      pegasus is offline
      VaultWiki Team
      Join Date
      March 28, 2004
      Location
      New York, NY
      Posts
      2,959
      Blog Entries
      18
      Rep Power
      687
      For repeating styles, use CSS classes instead of inline styles. Make sure you edit the DIV BB-Code's options and add your classes to its whitelist of allowed classes.

      You can add these custom classes to your forum style's vw_additional.css template.
      - lead developer for VaultWiki
      Reply With Quote Reply With Quote

    3. December 22, 2017 #3
      SurferJon
      • View Profile
      • View Forum Posts
      • View Blog Entries
      • View Articles
      SurferJon is offline
      Junior Member
      Join Date
      November 7, 2015
      Posts
      21
      Rep Power
      129
      Quote Originally Posted by pegasus View Post
      Make sure you edit the DIV BB-Code's options and add your classes to its whitelist of allowed classes.
      Thanks for the quick reply, pegasus!

      I'm confused as to what this means, could you explain it more?

      Should I be using some kind of DIV BB Code instead of HTML? I've been using pure HTML in my templates. (<div class="product"></div>)
      Reply With Quote Reply With Quote

    4. December 22, 2017 #4
      pegasus
      • View Profile
      • View Forum Posts
      • View Blog Entries
      • Visit Homepage
      • View Articles
      pegasus is offline
      VaultWiki Team
      Join Date
      March 28, 2004
      Location
      New York, NY
      Posts
      2,959
      Blog Entries
      18
      Rep Power
      687
      VaultWiki has a built-in DIV BB-Code, but if you're using pure HTML, then you don't need to perform any whitelisting.
      - lead developer for VaultWiki
      Reply With Quote Reply With Quote

    5. December 25, 2017 #5
      Forsaken
      • View Profile
      • View Forum Posts
      • View Blog Entries
      • View Articles
      Forsaken is offline
      Junior Member
      Join Date
      June 13, 2013
      Posts
      13
      Rep Power
      0
      Quote Originally Posted by SurferJon View Post
      Thanks for the quick reply, pegasus!

      I'm confused as to what this means, could you explain it more?

      Should I be using some kind of DIV BB Code instead of HTML? I've been using pure HTML in my templates. (<div class="product"></div>)
      Code:
      [div] class="wiki-list" |
      [div] class="row flex-dir-row-reverse dragon-template" |
      
      	[div] class="small-12 medium-12 large-3 columns wiki-block" |
      		[div] class="block-background" |
      			[div] class="key-information" |
      				[div] class="heading" | {{{dragonName}}}[/div]
      				[div] class="image-block" | {{{dragonImage}}}[/div]
      				[div] class="key-header" | Vital Information [/div]
      				[div] class="information-lists" |
      					[dl]
      						[dt]Level[/dt]
      						[dd]{{{dragonLevel}}}[/dd]
      					[/dl]
      					[dl]
      						[dt]Zone[/dt]
      						[dd]{{{dragonZone}}}[/dd]
      					[/dl]
      					[dl]
      						[dt]Region[/dt]
      						[dd]{{{spawnRegion}}}[/dd]
      					[/dl]
      					[dl]
      						[dt]Family[/dt]
      						[dd]{{{dragonFamily}}}[/dd]
      					[/dl]
      					[if={{{canRun|}}}==true]
      					[dl]
      						[dt]Running Speed[/dt]
      						[dd]{{{runningSpeed}}}[/dd]
      					[/dl]
      					[else /]
      					[/if]
      					[if={{{canSwim|}}}==true]
      					[dl]
      						[dt]Swimming Speed[/dt]
      						[dd]{{{swimmingSpeed}}}[/dd]
      					[/dl]
      					[else /]
      					[/if]
      					[if={{{canFly|}}}==true]
      					[dl]
      						[dt]Flight Speed[/dt]
      						[dd]{{{flightSpeed}}}[/dd]
      					[/dl]
      					[else /]
      					[/if]
      					[if={{{canGlide|}}}==true]
      					[dl]
      						[dt]Gliding Speed[/dt]
      						[dd]{{{glidingSpeed}}}[/dd]
      					[/dl]
      					[else /]
      					[/if]
      					[if={{{wildDragon|}}}==true]
      					[dl]
      						[dt]Wild HP[/dt]
      						[dd]{{{wildHP}}}[/dd]
      					[/dl]
      					[else /]
      					[/if]
      					[if={{{hasTitle|}}}==true]
      					[dl]
      						[dt]Title[/dt]
      						[dd]{{{dragonTitle}}}[/dd]
      					[/dl]
      					[else /]
      					[/if]
      					[if={{{companionSupport|}}}==true]
      					[dl]
      						[dt]Companion Support[/dt]
      						[dd]{{{supportValue}}}[/dd]
      					[/dl]
      					[else /]
      					[/if]
      				[/div]
      				[if={{{hasSpawnLocation|}}}==true]
      					[div] class="heading" | Spawn Location[/div]
      					[div] class="image-block" |{{{spawnLocation}}}[/div]
      				[else /]
      				[/if]
      				[if={{{hasSpawnTable|}}}==true]
      					[div] class="key-header" | Spawn Calendar[/div]
      					[div] class="information-lists" |
      						{{{spawnTable}}}
      					[/div]
      				[else /]
      				[/if]
      				[if={{{hasSpawnTimes|}}}==true]
      					[div] class="information-lists" |
      						[div] class="primaryContent" |
      							{{{spawnTimes}}}
      						[/div]
      					[/div]
      				[else /]
      				[/if]
      			[/div]
      		[/div]
      	[/div]
      	[div] class="small-12 medium-12 large-9 columns wiki-block main-column" |
      		[div] class="block-background" |
      			[div] class="heading" | Dragon Description [/div]
      				[div] class="primaryContent" |
      					{{{dragonDescription}}}
      				[/div]
      			[div] class="heading" | Dragon Compendium [/div]
      				[div] class="primaryContent" |
      					{{{dragonCompendium}}}
      				[/div]
      			[if={{{hasObtainGuide|}}}==true]
      				[div] class="heading js-expandmore" | Obtaining Guide [/div]
      				[div] id="captureGuide" class="js-to_expand" |
      					[div] class="key-header" | How to Obtain {{{dragonName}}}[/div]
      						[div] class="primaryContent" |
      							{{{obtainDescription}}}
      						[/div]
      				[/div]
      			[else /]
      			[/if]
      			[div] class="heading js-expandmore" | Quick Guide [/div]
      			[div] id="quickGuide" class="js-to_expand is-opened" |
      				[div] class="key-header" | Location [/div]
      				[div] class="primaryContent" |
      					[dl]
      						[dt]Zone Ancient[/dt]
      						[dd]
      							[if={{{isZoneAncient|}}}==true]
      								{{{zoneAncient}}}
      							[else /]
      								No
      							[/if]
      						[/dd]
      					[/dl]
      					[dl]
      						[dt]Dungeon Ancient[/dt]
      						[dd]
      							[if={{{isDungeonAncient|}}}==true]
      								{{{dungeonAncient}}}
      							[else /]
      								No
      							[/if]
      						[/dd]
      					[/dl]
      					[dl]
      						[dt]Roaming Ancient[/dt]
      						[dd]
      							[if={{{isRoamingAncient|}}}==true]
      								{{{roamingAncient}}}
      							[else /]
      								No
      							[/if]
      						[/dd]
      					[/dl]
      				[/div]
      				[div] class="key-header" | Flutes [/div]
      				[div] class="primaryContent" |
      					[dl]
      						[dt]Melodic / Resonating Flutes[/dt]
      						[dd]
      							[if={{{isMelodicFlute|}}}==true]
      								{{{melodicFlute}}}
      							[else /]
      								No
      							[/if]
      						[/dd]
      					[/dl]
      					[dl]
      						[dt]Other Dragon Flutes[/dt]
      						[dd]
      							[if={{{isOtherFlute|}}}==true]
      								{{{otherFlute}}}
      							[else /]
      								No
      							[/if]
      						[/dd]
      					[/dl]
      				[/div]
      				[div] class="key-header" | Marketplace [/div]
      				[div] class="primaryContent" |
      					[dl]
      						[dt]Egg[/dt]
      						[dd]
      							[if={{{isMarketEgg|}}}==true]
      								{{{marketEgg}}}
      							[else /]
      								No
      							[/if]
      						[/dd]
      					[/dl]
      					[dl]
      						[dt]Gacha[/dt]
      						[dd]
      							[if={{{isMarketGacha|}}}==true]
      								{{{marketGacha}}}
      							[else /]
      								No
      							[/if]
      						[/dd]
      					[/dl]
      					[dl]
      						[dt]Other Purchases[/dt]
      						[dd]
      							[if={{{isMarketPurchase|}}}==true]
      								{{{marketPurchase}}}
      							[else /]
      								No
      							[/if]
      						[/dd]
      					[/dl]
      				[/div]
      				[div] class="key-header" | Other [/div]
      				[div] class="primaryContent" |
      					[dl]
      						[dt]Special Process[/dt]
      						[dd]
      							[if={{{isSpecialProcess|}}}==true]
      								{{{specialProcess}}}
      							[else /]
      								No
      							[/if]
      						[/dd]
      					[/dl]
      					[dl]
      						[dt]Special Reward[/dt]
      						[dd]
      							[if={{{isSpecialReward|}}}==true]
      								{{{specialReward}}}
      							[else /]
      								No
      							[/if]
      						[/dd]
      					[/dl]
      					[dl]
      						[dt]Dragon Incubation[/dt]
      						[dd]
      							[if={{{isDragonIncubation|}}}==true]
      								{{{dragonIncubation}}}
      							[else /]
      								No
      							[/if]
      						[/dd]
      					[/dl]
      				[/div]
      			[/div]
      			[if={{{hasGallery|}}}==true]
      				[div] class="key-header" | {{{dragonName}}} Gallery[/div]
      				{{{dragonGallery}}}
      			[else /]
      			[/if]
      			[if={{{hasTrivia|}}}==true]
      				[div] class="key-header" | {{{dragonName}}} Trivia[/div]
      				{{{dragonTrivia}}}
      			[else /]
      			[/if]
      		[/div]
      	[/div]
      [/div]
      [/div]
      This isn't a modular template, but one for a full page that is re-used repeatedly and has a specific design.
      Reply With Quote Reply With Quote

    Similar Threads

    1. <BR's> between templates
      By SurferJon in forum VaultWiki Questions
      Replies: 7
      Last Post: March 25, 2016, 6:18 PM
    2. GUI Templates
      By bazaarocommunity in forum Ideas & Suggestions
      Replies: 0
      Last Post: October 16, 2015, 6:05 PM
    3. Templates
      By JesterP in forum General Discussion
      Replies: 5
      Last Post: April 8, 2012, 6:21 PM
    4. Templates - How to use them and what I need out of them
      By Alan_SP in forum VaultWiki Questions
      Replies: 8
      Last Post: March 31, 2011, 3:20 AM
    5. Templates
      By iamacyborg in forum General Discussion
      Replies: 4
      Last Post: July 31, 2010, 4:42 PM

    Tags for this Thread

    css, header, month, product, template

    View Tag Cloud

    Bookmarks

    Bookmarks
    • Submit to Digg Digg
    • Submit to del.icio.us del.icio.us
    • Submit to StumbleUpon StumbleUpon
    • Submit to Google Google

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •  
    • BB code is On
    • Smilies are On
    • [IMG] code is Off
    • [VIDEO] code is
    • HTML code is Off

    Forum Rules

    • Contact Us
    • License Agreement
    • Privacy
    • Terms
    • Top
    All times are GMT -4. The time now is 11:59 PM.
    This site uses cookies to help personalize content, to tailor your experience, and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Learn more… Accept Remind me later
  • striker
    Powered by vBulletin® Version 4.2.5 Beta 2
    Copyright © 2025 vBulletin Solutions Inc. All rights reserved.
    Search Engine Optimisation provided by DragonByte SEO (Pro) - vBulletin Mods & Addons Copyright © 2025 DragonByte Technologies Ltd.
    Copyright © 2008 - 2024 VaultWiki Team, Cracked Egg Studios, LLC.