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