How to Add a New ArtBlock to an Artisteer 3.0 Template (Revised) These instructions detail how to create a new artblock style within an Artisteer 3.0 template. In this example, the new module class suffix, titled “fuchsia”, changes the css styles and set of graphics files on the artblock (Fuchsia Block in the pic on the right). Be advised, the set of graphic files on the fuchsia block, are copies of the graphic files for the original block. The graphic files for the fuchsia block have been modified using Photoshop/Gimp and they have been uploaded to the web server in the following location: (/templates/[yourTemplate]/images). Once the graphic files have been uploaded, the only file that needs to be modified is the template.css file. 1st Step: Enter the name of the new suffix in module class suffix field and place a blank space before the name. In this example, “ fuchsia” | was entered in the field. blank space 2nd Step: Update the template.css file (/templates/[yourTemplate]/css/template.css) with the new block array. In this example, the entire CSS code for the Box, Block (the pdg-block array) was copied, pasted and modified accordingly. An example of the modified code has been provided below; the red, boldface text denotes the changes. /* begin Fuchsia Box, Block */ .fuchsia .pdg-block { position: relative; min-width: 45px; min-height: 45px; margin: 21px; } .fuchsia .pdg-block-tr, .fuchsia .pdg-block-tl, .fuchsia .pdg-block-br, .fuchsia .pdg-block-bl { width: 68px; height: 68px; background-image: url('../images/block_s2.png'); } .fuchsia .pdg-block-body { position: relative; padding: 11px; } .fuchsia .pdg-block-tl { top: 0; left: 0; clip: rect(auto, 34px, 34px, auto); } .fuchsia .pdg-block-tr, .fuchsia .pdg-block-tl, .fuchsia .pdg-block-br, .fuchsia .pdg-block-bl, .fuchsia .pdg-block-tc, .fuchsia .pdg-block-bc, .fuchsia .pdg-block-cr, .fuchsia .pdg-block-cl { position: absolute; } .fuchsia .pdg-block-tr { top: 0; right: 0; clip: rect(auto, auto, 34px, 34px); } 347-494-1588 | www.presguru.com | www.presguruprint.com | www.presgurulearn.com | www.presgurudesign.com | [email protected] .fuchsia .pdg-block-bl { bottom: 0; left: 0; clip: rect(34px, 34px, auto, auto); } .fuchsia .pdg-block-br { bottom: 0; right: 0; clip: rect(34px, auto, auto, 34px); } .fuchsia .pdg-block-tc, .fuchsia .pdg-block-bc { left: 34px; right: 34px; height: 68px; background-image: url('../images/block_h2.png'); } .fuchsia .pdg-block-tc { top: 0; clip: rect(auto, auto, 34px, auto); } .fuchsia .pdg-block-bc { bottom: 0; clip: rect(34px, auto, auto, auto); } .fuchsia .pdg-block-cr, .fuchsia .pdg-block-cl { top: 34px; bottom: 34px; width: 68px; background-image: url('../images/block_v2.png'); } .fuchsia .pdg-block-cr { right: 0; clip: rect(auto, auto, auto, 34px); } .fuchsia .pdg-block-cl { left: 0; clip: rect(auto, 34px, auto, auto); } .fuchsia .pdg-block-cc { position: absolute; top: 34px; left: 34px; right: 34px; bottom: 34px; background-color: #a50043; } /* end Box, Block */ Once the changes have been made, save the template.css file and upload it to the web server. Additionally, you can make the changes to the template.css file directly in Joomla, in the Template Manager section. ~Special thanks to WP for an alternate solution~ _____________________________________________________________________________________________________________ Presentation Guru assumes no responsibility for errors or omission and assumes no liability for damages resulting from the use of the information contained herein. © Copyright 2011, Presentation Guru, All Rights Reserved. presguru.com – Page 2 of 2
© Copyright 2024