Announcement

Collapse
No announcement yet.

Inserting a flash banner CSS

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    Inserting a flash banner CSS

    Good morning,

    I am trying to insert a flash banner (width="717" height="80">) onto all pages inbetween the lower navbar and the search function. http://www.packitdirect.co.uk/

    I have all the HTML Code to insert but I need help with the CSS sheet to add a new object.

    Below is a copy of the CSS sheet:

    Code:
    html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
a, em, img, strong,
ol, ul, li,
table, tr, th, td,
form {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
input, button{
  overflow: visible;
}
html {
  overflow: auto;
}
html, body {
  height: 100%;
  min-height: 100%;
}
body {
  font: normal 12px 'Segoe UI', Tahoma, Verdana, Arial, Helvetica, sans-serif;
  line-height: 1.2;
  color: #1e2022;
  text-align: center;
  background: #fcfcfc;
}
p {
  padding: 0 0 10px;
}
ul {
  padding: 0 0 0 16px;
}
li {
  padding: 0 0 8px;
}
a {
  text-decoration: none;
  color: #005ace;
}
a:hover {
  text-decoration: underline;
  color: #39f;
}
.clear { display: inline-block; }
.clear:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }
.none,
.hidden {
  display: none;
}
.page {
  position: relative;
  width: 100%;
  min-width: 750px;
  min-height: 100%;
}
* html .page {
  height: 100%;
}
.page .header {
  border-bottom: 1px solid #0f0f14;
  width: 100%;
  height: 49px;
  text-align: left;
  background: #363b47 url('../img/common/top_bg.gif') 0 0 repeat-x;
}
.page .header .company-logo {
  float: right;
  display: block;
  margin: 5px 10px 0 0;
  width: 115px;
  height: 38px;
  overflow: hidden;
  text-indent: -9999px;
  background: transparent url('../img/common/def_parallels_logo.gif') 0 0 no-repeat;
}
.page .header .header-area {
  height: 49px;
}
.page .header h1 {
  float: left;
  width: 156px;
  height: 49px;
  text-align: left;
}
.page .header h1 a {
  display: block;
  width: 210px;
  height: 49px;
  overflow: hidden;
  text-indent: -9999px;
  background: url('../img/common/def_plesk_logo.gif') no-repeat;
}
.page .header .header-text {
  float: right;
  font-size: 11px;
}
.page .header .header-text a {
  float: left;
  margin: 11px 13px 0 0;
  color: #f1f1f1;
  text-decoration: none;
  font-size: 11px;
}
.page .header .header-text a.txt-banner {
  margin-right: 10px;
}
.page .header .header-text a strong {
  font-weight: normal;
}
.page .header .header-text a.top-copyright {
  text-align: right;
}
.wrapper {
  margin: 0 auto;
  padding: 40px 0 80px;
  width: 734px;
  text-align: left;
}
.wrapper .container {
  border: 1px solid #b8c1d0;
  margin-bottom: 12px;
  padding: 6px;
  background: #fff;
}
.wrapper .content {
  background: #fff url('../img/common/content_bg.gif') 0 0 repeat-y;
}
.wrapper .content .description {
  padding: 0 15px 0 190px;
  min-height: 229px;
  font-size: 12px;
  background: transparent url('../img/common/banner.jpg') 0 0 no-repeat;
}
* html .wrapper .content .description {
  height: 229px;
}
.wrapper .content h2 {
  margin: 0 0 10px;
  padding: 10px 0 3px;
  font-size: 18px;
  font-weight: normal;
  color: #039;
}
.wrapper .content .hr {
  border-top: 1px solid #8b919f;
  margin-top: 5px;
  padding-top: 5px;
}
.wrapper .promo,
.wrapper .test-pages {
  margin-bottom: 12px;
}
.promo .block-area,
.test-pages .block-area {
  border: 1px solid #b8c1d0;
  background: #fff;
}
.wrapper .promo h3,
.wrapper .test-pages h3 {
  padding: 0 0 6px;
  font-size: 12px;
  font-weight: normal;
  color: #039;
}
.wrapper .test-pages p {
  padding: 10px;
}
.wrapper .two-col .test-pages,
.wrapper .two-col .promo {
  float: left;
  width: 362px;
}
.wrapper .two-col .promo {
  margin-left: 10px;
}
.promo .promo-block {
  margin: 10px 10px 0;
}
.promo .promo-block a.box {
  float: left;
  margin: 0 0 0 -105px;
}
.promo .promo-block div {
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 10px;
  padding: 0 0 10px 105px;
}
.promo .promo-block h4 {
  font-size: 20px;
  padding: 4px 0 8px;
}
.promo .promo-block h4 span {
  display: block;
  margin-bottom: -5px;
  font-size: 14px;
  font-weight: normal;
}
.promo .promo-block h4 a {
  text-decoration: none;
  color: #1e2022;
}
.promo .promo-block a.more {
  padding: 2px 0 3px 24px;
  line-height: 19px;
  font-size: 12px;
  font-weight: bold;
  color: #616161;
  background: transparent url('../img/common/arrow.gif') 0 0 no-repeat;
}
.promo .promo-block h4 a:hover,
.promo .promo-block a.more:hover {
  text-decoration: none;
  color: #39f;
}
.promo ul {
  margin: 0 10px 5px;
  padding: 0 0 0 16px;
}
.promo ul li {
  padding-bottom: 5px;
}
.page .footer {
  position: absolute;
  left: 0;
  bottom: 0;
  border-top: 1px solid #9db6c5;
  width: 100%;
  min-width: 300px;
  height: 69px;
  background: #f1fbfe url('../img/common/footer_bg.gif') 0 0 repeat-x;
}
.page .footer-area {
  height: 69px;
  font-size: 11px;
  text-align: left;
  color: #000;
  background: url('../img/common/footer_right_bg.png') 100% 0 no-repeat;
}
.page .footer a {
  color: #06c;
  text-decoration: none;
}
.page .footer a:hover {
  color: #39f;
  text-decoration: underline;
}
.page .footer .description {
  margin: 0;
  padding: 8px 10px 0;
}
.icons-area {
  padding: 0 0 0 15px;
}
.icon {
  display: -moz-inline-box;
  display: inline-block;
  overflow: visible;
  border: 0;
  margin: 0 5px 12px 0;
  height: 32px;
  font: normal 11px 'Segoe UI', Tahoma, Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  vertical-align: top;
  color: #000;
  background-color: transparent;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.icon:hover {
  text-decoration: none;
  color: #000;
}
.icon span {
  display: block;
  padding: 0 0 0 38px;
  height: 32px;
  width: 70px;
  line-height: 32px;
  cursor: pointer;
}
#asp { background-image: url('../img/glyph/btn_asp_bg.gif'); }
#aspnet { background-image: url('../img/glyph/btn_aspdotnet_bg.gif'); }
#coldfusion { background-image: url('../img/glyph/btn_coldfusion_bg.gif'); }
#perl { background-image: url('../img/glyph/btn_perl_bg.gif'); }
#php { background-image: url('../img/glyph/btn_php_bg.gif'); }
#python { background-image: url('../img/glyph/btn_python_bg.gif'); }
#ssi { background-image: url('../img/glyph/btn_ssi_bg.gif'); }
#fcgi { background-image: url('../img/glyph/btn_fast_cgi_bg.gif'); }
#miva { background-image: url('../img/glyph/btn_miva_bg.gif'); }
.test {
  width: 680px;
}
.test .pathbar {
  color: #7b7b7b;
}
.test .pathbar a {
  text-decoration: underline;
  color: #7b7b7b;
}
.test .pathbar a:hover {
  color: #39f;
}
.test h2 {
  margin: 10px 0;
  font-size: 17px;
  font-weight: normal;
}
.test .tab-content {
  border: 1px solid #8b919f;
  padding: 10px;
}
fieldset {
  border: 1px solid #b8c1d0;
  margin: 0;
  padding: 0 10px 10px;
}
legend {
  margin: 0;
  padding: 0 2px 5px;
  vertical-align: middle;
  font-weight: bold;
  color: #002c61;
}
.form-fields {
  padding-top: 6px;
}
.formFields {
  margin: 5px 0;
}
.formFields,
.formFields input,
.formFields select,
.formFields textarea {
  font: normal 11px 'Segoe UI', Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
.formFields td.name {
  padding: 0 10px 10px 0;
  width: 200px;
  vertical-align: top;
  font-weight: bold;
}
.buttonsContainer {
  margin-top: 10px;
  text-align: right;
}
.buttonsContainer .commonButton {
  display: inline;
  margin-left: 14px;
}
.buttonsContainer .commonButton span {
  display: none;
}
.buttonsContainer .commonButton button {
  border: 0;
  width: 91px;
  height: 21px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  font: normal 11px 'Segoe UI', Tahoma, Verdana, Arial, Helvetica, sans-serif;
  background: transparent url('../img/glyph/btn_bg.gif') 0 0 no-repeat;
}
.commonButton button[disabled] {
  color: #999;
  background-image: url('../img/glyph/btn_bg-disabled.gif');
}
#bid-ok button  {
  padding-left: 8px;
  background-image: url('../img/glyph/btn_ok_bg.gif');
}
.commonButton button:hover {
  background-position: 0 -21px;
}
.commonButton button[disabled]:hover {
  background-position: 0 0;
}
.testRelults#testFailed {
  border: 1px solid #ccc;
  margin: 0 0 10px;
  padding: 10px 10px 10px 32px;
  background: #fde9e5 url('../img/icons/fail.gif') 10px 11px no-repeat;
}
.testRelults#testSuccessful {
  border: 1px solid #ccc;
  margin: 0 0 10px;
  padding: 10px 32px;
  background: #bff7b4 url('../img/icons/success.gif') 10px 11px no-repeat;
}
.testResult {
  font-weight: bold;
}
.test-data {
  text-align: left;
}
.test-data table {
  border-collapse: collapse;
  margin-bottom: 10px;
  width: 100%;
  color: #000;
  background-color: white;
}
.test-data table th,
.test-data table td {
  padding: 4px 6px;
}
.test-data tr.subhead {
  background-color: #ccc;
}
.test-data th.alt {
  color: white;
  background-color: black;
}
.test-data tr.alt {
  background-color: #eee;
}
    Tags: None
    #2
    What css 'object' are you wanting to add?

    Comment

      #3
      Hello Duncan,

      I can insert the HTML flash code on the site to imbed the .swf file, but my problem is the position and I do not have the CSS knowledge to position the banner where I need it.

      I believe this is done with the style sheet but not sure how to link everything up.

      Thanks for the help

      Comment

        #4
        The positioning will be far more to do with where you insert the html code in relation to the code around it within the actual template. It will require little or no css in almost all cases.

        Comment

          #5
          I am almost there, do any of you gents know how to move the main content of the site down a few pixels.

          e.g. Pack it Direct® Bags Gold & White

          www.packitdirect.co.uk

          Actinic style sheet below

          Code:
          /*************************/
/****Begin teclan CSS*****/
/*************************/

body {
  margin:0px;
  padding:0px;
  background:<actinic:variable name="BGColor"/><actinic:block if="%3cactinic%3avariable%20name%3d%22IsBackgroundColor%22%20%2f%3e%20%3d%3d%20False"> url("<actinic:variable name="BackgroundImageFileName" />") repeat-x</actinic:block>;
  font-family:<actinic:variable name="ACTCSSFONTFAMILY" />;
  color:<actinic:variable name="TextColor" />;
  font-size:<actinic:variable name="StandardFontSize" />;
  text-align:center;
}

/* Main Containers */

/* General rules */
a img {
  border:none;
}

/* Floats and clears */
.fleft {float:left;}
.fright {float:right;}
.cleft {clear:left;}
.cright {clear:right;}
.clearit {clear:both;}

#container {
	margin:0px auto;
	text-align:left;
	width:876px;
	margin-top:10px;
	position:relative;
}

#header {
	position:relative;
	height:255px;
}

#content {
	background:white;
	padding-top:20px;
	position:relative;
	width:865px;
}

#footer {
	text-align:right;
	margin-top:10px;
}

#topnav {
	position:absolute;
	z-index:3;
	text-align:center;
}

#topnav a.checkout-checkoutbg:link {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: none;
}

a.checkout-checkoutbg:visited {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: none;
}

a.checkout-checkoutbg:hover {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: underline;
}

a.checkout-checkoutbg:active {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: underline;
}

a.checkout-textcolor:link {
	color: <actinic:variable name="TextColor" />;
	text-decoration: none;
}

a.checkout-textcolor:visited {
	color: <actinic:variable name="TextColor" />;
	text-decoration: none;
}

a.checkout-textcolor:hover {
	color: <actinic:variable name="TextColor" />;
	text-decoration: underline;
}

a.checkout-textcolor:active {
	color: <actinic:variable name="TextColor" />;
	text-decoration: underline;
}

#topnav ul {
	list-style-type:none;
	margin:0px;
	padding:0px;
}

#topnav li {
	float:left;
	margin-right:7px;
	text-align:center;
}

#topnav a {
	display:block;
	background:url('top-nav-bg.jpg') repeat-x;
	height:25px;
	line-height:20px;
	color:white;
	padding:3px 27px 3px 26px;
	font-size:15px;
	text-transform:lowercase;
}

#topnav a:hover {
	background:url('top-nav-bg-hover.jpg') repeat-x;
	text-decoration:none;
}

#logo {
	position:absolute;
	top:55px;
}

#banner {
	background:url('main-image.jpg') no-repeat;
	height:260px;
	width:865px;
	position:absolute;
	top:20px;
	z-index:1;
}

#fav_section_nav {
	position:absolute;
	top:175px;
	z-index:4;
}

#fav_section_nav a.checkout-checkoutbg:link {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: none;
}

a.checkout-checkoutbg:visited {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: none;
}

a.checkout-checkoutbg:hover {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: underline;
}

a.checkout-checkoutbg:active {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: underline;
}

a.checkout-textcolor:link {
	color: <actinic:variable name="TextColor" />;
	text-decoration: none;
}

a.checkout-textcolor:visited {
	color: <actinic:variable name="TextColor" />;
	text-decoration: none;
}

a.checkout-textcolor:hover {
	color: <actinic:variable name="TextColor" />;
	text-decoration: underline;
}

a.checkout-textcolor:active {
	color: <actinic:variable name="TextColor" />;
	text-decoration: underline;
}

#fav_section_nav ul {
	list-style-type:none;
	margin:0px;
	padding:0px;
}

#fav_section_nav li {
	margin-right:7px;
	text-align:center;
	float:left;
}

#fav_section_nav a {
	display:block;
	background:url('fav-sec-bg.jpg') repeat-x;
	color:white;
	height:42px;
	line-height:38px;
	text-transform:lowercase;
	padding:0px 25px 6px 24px;
	font-size:16px;
}

#fav_section_nav a:hover {
	background:url('fav-sec-bg-hover.jpg') repeat-x;
	text-decoration:none;
}

#left {
	position:absolute;
	top:20px;
	left:0px;
	width:200px;
}

#center {
	margin-left:230px;
}

.sectionhead {
	background:url('section-head.jpg') repeat-x;
	width:200px;
	height:30px;
	line-height:20px;
	color:white;
	text-align:center;
	font-size:15px;
}

#sectionlist a.checkout-checkoutbg:link {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: none;
}

a.checkout-checkoutbg:visited {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: none;
}

a.checkout-checkoutbg:hover {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: underline;
}

a.checkout-checkoutbg:active {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: underline;
}

a.checkout-textcolor:link {
	color: <actinic:variable name="TextColor" />;
	text-decoration: none;
}

a.checkout-textcolor:visited {
	color: <actinic:variable name="TextColor" />;
	text-decoration: none;
}

a.checkout-textcolor:hover {
	color: <actinic:variable name="TextColor" />;
	text-decoration: underline;
}

a.checkout-textcolor:active {
	color: <actinic:variable name="TextColor" />;
	text-decoration: underline;
}

ul {
	list-style-type:none;
	margin:0px;
	padding:0px;
}

#sectionlist li {
	padding:5px 10px;
	border-bottom:1px solid #666;
}

#sectionlist a {
	color:#333;
}

#sectionlist a:hover {
	color:#0797E4;
	text-decoration:none;
	font-weight:bold;
}

#infolist a.checkout-checkoutbg:link {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: none;
}

a.checkout-checkoutbg:visited {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: none;
}

a.checkout-checkoutbg:hover {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: underline;
}

a.checkout-checkoutbg:active {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: underline;
}

a.checkout-textcolor:link {
	color: <actinic:variable name="TextColor" />;
	text-decoration: none;
}

a.checkout-textcolor:visited {
	color: <actinic:variable name="TextColor" />;
	text-decoration: none;
}

a.checkout-textcolor:hover {
	color: <actinic:variable name="TextColor" />;
	text-decoration: underline;
}

a.checkout-textcolor:active {
	color: <actinic:variable name="TextColor" />;
	text-decoration: underline;
}

ul {
	list-style-type:none;
	margin:0px;
	padding:0px;
}

#infolist li {
	padding:5px 10px;
	border-bottom:1px solid #666;
}

#infolist a {
	color:#333;
}

#infolist a:hover {
	color:#0797E4;
	text-decoration:none;
	font-weight:bold;
}

#cart-summary {
	position:absolute;
	top:80px;
	right:10px;
	width:220px;
	background:<actinic:variable name="Palette3" />;
	text-align:center;
	display:none; 
	color:white;
	border:1px solid white;
	padding:7px;
	font-size:14px;
	text-transform:lowercase;
}

#cart-summary a {
	background:url('top-nav-bg.jpg') repeat-x;
	width:100px;
	height:25px;
	line-height:23px;
	color:white;
	font-size:15px;
	padding:5px 10px;
	margin:5px 0px;
	margin-right:5px;
	text-transform:lowercase;
}

#cart-summary a:hover {
	background:url('top-nav-bg-hover.jpg') repeat-x;
	text-decoration:none;
}

/*************************/
/*****End teclan CSS******/
/*************************/

/* Begin CSS inherited from Actinic */
p, table, td, th {
	font-family: <actinic:variable name="ACTCSSFONTFAMILY" />;
	font-size: <actinic:variable name="StandardFontSize" />;
	font-style: normal;
	font-weight: normal;
	color: <actinic:variable name="TextColor" />;
	margin-top: 0px;
	line-height: 150%;
}

form {
	margin: 0px;
}

a:link {
	color: <actinic:variable name="LinkColor" />;
	text-decoration: none;
}

a:visited {
	color: <actinic:variable name="VLinkColor" />;
	text-decoration: none;
}

a:hover {
	color: <actinic:variable name="HLinkColor" />;
	text-decoration: underline;
}

a:active {
	color: <actinic:variable name="ALinkColor" />;
	text-decoration: none;
}

a.checkout-checkoutbg {
	margin-right: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 8px;
	padding-right: 8px;
	border: <actinic:variable name="CheckoutBG" /> 2px solid;
	border-top: <actinic:variable name="CheckoutBG" /> 2px solid;
	border-right: <actinic:variable name="TextColor" /> 1px solid;
	border-bottom: <actinic:variable name="TextColor" /> 1px solid;
}

a.checkout-checkoutbg:link {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: none;
}

a.checkout-checkoutbg:visited {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: none;
}

a.checkout-checkoutbg:hover {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: underline;
}

a.checkout-checkoutbg:active {
	color: <actinic:variable name="CheckoutBG" />;
	text-decoration: underline;
}

a.checkout-textcolor:link {
	color: <actinic:variable name="TextColor" />;
	text-decoration: none;
}

a.checkout-textcolor:visited {
	color: <actinic:variable name="TextColor" />;
	text-decoration: none;
}

a.checkout-textcolor:hover {
	color: <actinic:variable name="TextColor" />;
	text-decoration: underline;
}

a.checkout-textcolor:active {
	color: <actinic:variable name="TextColor" />;
	text-decoration: underline;
}

ul {
	list-style-type: square;
}

/* Generic text formatting used throughout the store ---------------------------- */

.actCHECKOUTEM {
	background-color: <actinic:variable name="CheckoutEM" />;
}

.actCHECKOUTBG {
	background-color: <actinic:variable name="CheckoutBG" />;
}

.actlarger {
	font-size: <actinic:variable name="LargerFontSize" />;
	color: <actinic:variable name="TextColor" />;
}

.actsmaller{
	font-size: <actinic:variable name="SmallFontSize" />;
	color: <actinic:variable name="TextColor" />;
}

.actxxsmall {
	font-size: <actinic:variable name="SmallFontSize" />;
	color: <actinic:variable name="TextColor" />;
}

.actxsmall {
	font-size: <actinic:variable name="StandardFontSize" />;
	color: <actinic:variable name="TextColor" />;
}

.actsmall {
	font-size: <actinic:variable name="StandardFontSize" />;
	color: <actinic:variable name="TextColor" />;
}

.actregular {
	font-size: <actinic:variable name="LargerFontSize" />;
	color: <actinic:variable name="TextColor" />;
}

.actlarge{
	font-size: <actinic:variable name="LargeFontSize" />;
	color: <actinic:variable name="TextColor" />;
}

.actxlarge {
	font-size: <actinic:variable name="ExtraLargeFontSize" />;
	color: <actinic:variable name="TextColor" />;
}

.actxxlarge {
	font-size: <actinic:variable name="ExtraLargeFontSize" />;
	color: <actinic:variable name="TextColor" />;
}

.actwarningcolor {
	color: <actinic:variable name="RequiredColor" />;
}
	
.actrequiredcolor {
	color: <actinic:variable name="RequiredColor" />;
}

.actsearchhighlightcolor {
	color: <actinic:variable name="SearchHighlightColor" />;
}

.actrequired {
	color: <actinic:variable name="RequiredColor" />;
}

.actwarning {
	font-size: <actinic:variable name="StandardFontSize" />;
	color: <actinic:variable name="RequiredColor" />;
}

.actwelcome {
	font-size: <actinic:variable name="StandardFontSize" />;
	color: <actinic:variable name="TextColor" />;
}

.actlogotext {
	font-size: <actinic:variable name="StandardFontSize" />;
	color: #D9090E;
	font-style: normal;
	font-weight: bold;
	text-align: center;
}
.actlogout {
	font-size: <actinic:variable name="StandardFontSize" />;
	color: <actinic:variable name="LinkColor" />;
}

/* Shopping cart and checkout fields ------------------------------------------- */

div.CheckoutCartSection {
	margin-top: 0px;
	margin-bottom: 10px;
}

table.checkout#idTableCheckoutSection {
	margin-bottom: 0px;
}

table.checkout-cart {
	width: <actinic:variable name="ACTSTDWIDTH" />px;
	border-collapse: collapse;
	padding: 0px 0px;
	margin-bottom: 5px;
}

table.checkout-cart th{
	font-weight: bold;
	background-color: <actinic:variable name="CheckoutBG" />;
	border-top: solid 1px <actinic:variable name="CheckoutEM" />;
	border-bottom: solid 1px <actinic:variable name="CheckoutEM" />;
	padding: 4px 4px;
}

table.checkout-cart td{
	padding: 4px 4px;
}

table.checkout {
	width: <actinic:variable name="ACTSTDWIDTH" />px;
	border-collapse: collapse;
	padding: 0px 0px;
	text-align: left;
	margin-bottom: 5px;
}

table.checkout th {
	background-color: <actinic:variable name="CheckoutEM" />;
	font-size: <actinic:variable name="LargerFontSize" />;
	font-weight: bold;
	color: <actinic:variable name="CheckoutBG" />;
	text-align: left;
	padding: 5px 2px;
	border-bottom: solid 3px <actinic:variable name="BGColor" />;
}

table.checkout th.instruction {
	font-size: <actinic:variable name="StandardFontSize" />;
	font-weight: normal;
}

table.checkout th.change {
	font-size: <actinic:variable name="StandardFontSize" />;
	font-weight: bold;
	padding: 0px 0px;
	text-align: right;
}

.checkout-change-button	{
	line-height: 13px;
	height: 20px;
	width: 86px;
	margin: 0px 1px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size : <actinic:variable name="StandardFontSize" />;
	background-color: <actinic:variable name="Palette2" />;
	border: 1px solid <actinic:variable name="Palette1" />;
	color: <actinic:variable name="PaletteBG" />;
	background-image: url('theme_icon_add_to_cart.gif');
	word-spacing: normal;
	}

table.checkout td {
	background-color: <actinic:variable name="CheckoutBG" />;
	border-right: solid 1px <actinic:variable name="BGColor" />;
	border-bottom: solid 1px <actinic:variable name="BGColor" />;
	padding: 2px 2px;
}

table.checkout#idBothAddressesTable col {
	width: auto;
}

td#idCheckoutHelpLabel,
table.checkout#idBothAddressesTable col.prompt {
	width: 130px;
}

.cart {
	background-color: <actinic:variable name="CheckoutBG" />;
	border-bottom: solid 1px <actinic:variable name="CheckoutEM" />;
}

.checkout-cartheading {
	font-weight: bold;
	background-color: <actinic:variable name="CheckoutBG" />;
	border-top: solid 1px <actinic:variable name="CheckoutEM" />;
	border-bottom: solid 1px <actinic:variable name="CheckoutEM" />;
}

.cartheading {
	background-color: <actinic:variable name="CheckoutEM" />;
	font-weight: bold;
	color: <actinic:variable name="CheckoutBG" />;
}

h2.checkout-heading {
	background-color: <actinic:variable name="CheckoutEM" />;
	font-size: <actinic:variable name="LargerFontSize" />;
	font-weight: bold;
	color: <actinic:variable name="CheckoutBG" />;
	padding: 5px 2px;
	border-bottom: solid 3px <actinic:variable name="BGColor" />;
	width: <actinic:variable name="ACTSTDWIDTH" />px;
}

h3.checkout-heading {
	width: <actinic:variable name="ACTSTDWIDTH" />px; 
	padding: 3px 0;
	background-color: <actinic:variable name="CheckoutEM" />;
	font-size: <actinic:variable name="LargerFontSize" />;
	font-weight: bold;
	color: <actinic:variable name="CheckoutBG" />;
	border-bottom: solid 3px <actinic:variable name="BGColor" />;
}

.checkout-subheading {
	font-weight: bold;
	padding: 0;
	margin: 0;
}

img.cartthumbnail {
	border: 0px;
	margin-left: 2px;
	margin-right: 2px;
	width: 25px;
}

input.normal-button {
	font-family: <actinic:variable name="ACTCSSFONTFAMILY" />;
	font-size: <actinic:variable name="StandardFontSize" />;
	font-weight: bold;
	color: <actinic:variable name="BGColor" />;
	background: <actinic:variable name="Palette2" />;
	padding: 5px;
	border: solid 1px <actinic:variable name="TextColor" />;
}

input.highlight-button {
	font-family: <actinic:variable name="ACTCSSFONTFAMILY" />;
	font-size: <actinic:variable name="StandardFontSize" />;
	font-weight: bold;
	color: <actinic:variable name="BGColor" />;
	background: <actinic:variable name="Palette1" />;
	padding: 5px;
	border: solid 1px <actinic:variable name="TextColor" />;
}

.checkout-field-label {
	width: 160px;
}

.checkout-field-input {
	width: auto;
}

.checkout-field-input input, .checkout-field-input select {
	font-family: <actinic:variable name="ACTCSSFONTFAMILY" />;
	font-size: <actinic:variable name="LargerFontSize" />;
	color: <actinic:variable name="TextColor" />;
	background-color: <actinic:variable name="BGColor" />;
	padding: 2px;
}

.InvoiceField input, .InvoiceField select {
	font-family: <actinic:variable name="ACTCSSFONTFAMILY" />;
	font-size: <actinic:variable name="LargerFontSize" />;
	color: <actinic:variable name="TextColor" />;
	background-color: <actinic:variable name="BGColor" />;
	padding: 2px;
}

.DeliverField input, .DeliverField select {
	font-family: <actinic:variable name="ACTCSSFONTFAMILY" />;
	font-size: <actinic:variable name="LargerFontSize" />;
	color: <actinic:variable name="TextColor" />;
	background-color: <actinic:variable name="BGColor" />;
	padding: 2px;
}

table.checkout#idBothAddressesTable select {
	width: 211px;
}

input.checkbox {
	background-color: <actinic:variable name="CheckoutBG" />;
	border: 0;	
}

.checkout-field-area {
	background: <actinic:variable name="CheckoutBG" />;
	border-bottom: solid 2px <actinic:variable name="BGColor" />;
	width: <actinic:variable name="ACTSTDWIDTH" />px;
}

.checkout-field-area p {
	margin: 0;
	padding: 4px;
}

div.checkout-buttons {
	width: <actinic:variable name="ACTSTDWIDTH" />px; 
	height: 50px; 
	margin-top: 20px;
}
	
.left { 
	float : left; 
	width : 50%; 
}

.right { 
	float : right; 
	width : 40%; 
}

.spacer { 
	clear : both; 
}

.checkout-help-hide { 
	display: none; 
}

/* Checkout Progress Indicator  ------------------------------------------------ */

p.checkout-progress-heading {
	width: 300px;
	margin: 0px auto;
}

#checkout-progress-indicator {
	width: 300px;
	height: 19px;
	background-image: url('cpi-background.gif');
	margin: 0 auto 0px auto;
}

.checkout-progress-0 {
	width: 75px;
	height: 19px;
	background-color: <actinic:variable name="Palette1" />;
	background-image: url('cpi-main.gif');
	float: left;
}

.checkout-progress-1 {
	width: 150px;
	height: 19px;
	background-color: <actinic:variable name="Palette1" />;
	background-image: url('cpi-main.gif');
	float: left;
}

.checkout-progress-2 {
	width: 225px;
	height: 19px;
	background-color: <actinic:variable name="Palette1" />;
	background-image: url('cpi-main.gif');
	float: left;
}

.checkout-progress-3 {
	width: 300px;
	height: 19px;
	background-color: <actinic:variable name="Palette1" />;
	background-image: url('cpi-main.gif');
	float: left;
}

#checkout-progress-indicator .cpi-end {
	width: 8px;
	padding: 0;
	margin: 0;
	border: 0;
	height: 19px;
	background-image: url('cpi-end.gif');
	background-position: right;
	background-repeat: no-repeat;
	float: left;
}

table#idCheckoutProgress {
	margin-bottom: 10px;
}

table#idCheckoutProgress td{
	background-repeat:repeat-x;
	background-color:transparent;
	border: 0px;
	padding: 0px;
	height:19px;
	text-align:center;
}

table#idCheckoutProgress td.cpi-left{
	background-image:url("cpi-main.gif");
	color:white;
	width:160px;
}

table#idCheckoutProgress td.cpi-complete{
	background-image:url("cpi-main-mid.gif");
	color:white;
	width:160px;
}

table#idCheckoutProgress td.cpi-incomplete{
	background-image:url("cpi-background.gif");
	color:black;
	width:160px;
}

table.CheckoutProgress {
	width: <actinic:variable name="ACTSTDWIDTH" />px;
	border-collapse: collapse;
	margin-bottom: 10px;
}

table.CheckoutProgress td {
	padding: 0px 0px;
	background-repeat: repeat-x;
	background-color: transparent;
	height: 19px;
	text-align: center;
	width: 140px;
}

table.CheckoutProgress td.cpi-start{
	background-image: url("cpi-main.gif");
	width: 8px;
}

table.CheckoutProgress td.cpi-inactive{
	background-image: url("cpi-main-mid.gif");
	color: <actinic:variable name="BGColor" />;
}

table.CheckoutProgress td.cpi-active{
	background-image: url('cpi-background.gif');
	font-weight: bold;
	color: <actinic:variable name="TextColor" />;
}

table.CheckoutProgress td.cpi-end {
	background-image: url("cpi-end.gif");
	width: 8px;
}

table.CheckoutProgress td.cpi-spacer {
	background-image: url("cpi-main-mid.gif");
	width: auto;
}

/* Formatting for the site map -------------------------------------------- */

#actinic-sitemap {
	margin-left: 5px;
}

#actinic-sitemap ul {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* headings ----------------------------------------------------------------------------- */

h1	{
	font-size: <actinic:variable name="ExtraLargeFontSize" />;
	font-weight: 900;
	margin: 0px;		
	padding: 16px 0px 4px 0px;
	color: <actinic:variable name="Palette1" />;
	}
	
h1.subheading	{
	font-size: <actinic:variable name="LargerFontSize" />;
	font-weight: 900;
	margin: 0px;
	padding: 0px 0px 14px 0px;
	color: <actinic:variable name="Palette2" />;
	}
	
h2	{
	font-size: <actinic:variable name="LargeFontSize" />;
	font-weight: 900;
	margin: 0px;
	padding: 2px 0px 14px 0px;
	color: <actinic:variable name="Palette2" />;
	}
	
h2.clearall	{
	font-size: <actinic:variable name="LargeFontSize" />;
	font-weight: 900;
	margin: 0px;
	padding: 2px 0px 14px 0px;
	color: <actinic:variable name="Palette2" />;
	clear:both;
	}
	
h3.product	{
	font-size: <actinic:variable name="LargerFontSize" />;
	font-weight: 900;
	margin: 0px;
	padding: 0px 0px 6px 0px;
	color: <actinic:variable name="Palette2" />;
	}
	
h3.product_price	{
	font-size: <actinic:variable name="StandardFontSize" />;
	font-weight: 900;
	margin: 0px;
	padding: 0px 0px 20px 0px;
	}
	
.text_heading_left_column	{
	margin: 0px;
	padding: 19px 0px 4px 0px;
	line-height:normal;
	color: <actinic:variable name="Palette1" />;
	font-weight: 900;
	font-size: <actinic:variable name="LargerFontSize" />;
	}

/* Default formatting of all text boxes used in store pages ---------------- */

.form_input_general	{
	line-height: normal;
	font-size : <actinic:variable name="StandardFontSize" />;
	word-spacing: normal;
	}

/* Styles for 'Quick Search Bar With Larger Button' ------------------------ */

.form_main_search_box	{
	line-height: 13px;
	width: 76px;
	height: 16px;
	margin: 0px 1px 0px 1px;
	padding: 0px 0px 0px 2px;
	font-size : <actinic:variable name="StandardFontSize" />;
	background-color: <actinic:variable name="CheckoutBG" />;
	border: 1px solid <actinic:variable name="CheckoutBG" />;
	color: <actinic:variable name="TextColor" />;
	vertical-align: top;
	}

.form_main_search_box_td	{
	background-color: <actinic:variable name="Palette2" />
	}

.form_button_quick_search	{
	line-height: 13px;
	height: 18px;
	width: 85px;
	margin: 1px 1px 1px 1px;
	padding: 0px 0px 0px 12px;
	font-size : <actinic:variable name="StandardFontSize" />;
	background-color: <actinic:variable name="Palette2" />;
	border: 1px solid <actinic:variable name="Palette1" />;
	color: <actinic:variable name="PaletteBG" />;
	background-image: url('theme_icon_search.gif');
	word-spacing: normal;
	}

/* Styles for product image and fragment image placement in some layouts -------------------------- */

.image_float_right	{
	float: right;
	margin: 16px 0px 15px 20px;
	}

.image_product	{
	margin: 0px 18px 10px 0px;
	text-align: center;
	float: left;
	}

/* lines -------------------------------------------------------------------------------- */

.dotted_line_blue	{
	height: 1px;
	background-color: <actinic:variable name="Palette2" />;
	background-image:url('theme_dotted_line.gif');
	clear:both;
	}
	
.solid_line_light_blue	{
	height: 1px;
	padding: 0px;
	margin: 0px;
	background-color: <actinic:variable name="Palette2" />;
	clear:both;
	}
	
.solid_line_blue	{
	height: 1px;
	padding: 0px;
	margin: 0px;
	background-color: <actinic:variable name="Palette1" />;
	clear:both;
	}
	
.dotted_outline_blue	{
	border: 1px dotted <actinic:variable name="Palette2" />;
	padding: 8px;
	}

          Comment

            #6
            The title is wrapped in a H1 tag, you can change the padding in the style sheet. If you want to shift all pages content down you'd need to add padding within #center and adjust it.
            Peblaco

            Comment

              #7
              Hi Peblaco,

              You are a gent for helping, I would like to move the catalog products further down the page on all pages.
              I have tried editing :
              #center {
              margin-left:230px;
              }

              but the page does not seem to come down. The code is already there on the actinic style sheet that I last posted.

              Can I call on the professional services of Peblaco to look into why our site www.packitdirect.co.uk does not display properly on Internet explorer.

              Thanks

              Comment

                #8
                It's interpreting incorrect code and pushing out of place. It would not be quick to fix.
                Peblaco

                Comment

                Previous template Next
                Working...
                X