PDA

View Full Version : How Do I Start 2 Use Style Sheets?


smudgie
01-Nov-2003, 02:43 PM
I have just got Actinic 6 Business, and would like to add a sytle sheet which willl allow me to create a background which wont be repeated.

I beleive Actinic doesn't like Dreamweaver MX, but I did try setting up the style sheet there first to check it would work and then pasted the html code into Actinic (along with css etc) This of course didn't work.

Please can someone point me in the right direction?

Thanks

pinbrook
01-Nov-2003, 04:45 PM
Actinic does work quite happily with DW MX.....

As for the background issue why don't you add the css code to the actinic.css file. Then you don't need 2 style sheets. Assuming you are using a theme which uses CSS

smudgie
02-Nov-2003, 01:49 PM
I have added my background style sheet in Dreamweaver MX and when previewed It works how I want. But when I view it in Actinic, I can't see my background.

I tried as you suggested and added the code which is in my style sheet are looks like:

.back {
background-image: url(films.jpg);
background-repeat: no-repeat;
background-position: left top;
background-color: #000000;

}


To the botton of the actinic sytle sheet, but this also doesn't work either. Do you have any further suggestions please?

Thanks

garyhay
03-Nov-2003, 08:54 AM
Copy the stylesheet to the preview html folder

pinbrook
03-Nov-2003, 10:50 AM
thisis where theactinic stle sheet sets background etc

body{
background-color:NETQUOTEVAR:BGCOLORCSS;
background-image:url(NETQUOTEVAR:BGIMAGECSS);
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;

}

edit thisyour actinic.css to mirror this....use the netquoteVars or replace with your values


body{
background-color:NETQUOTEVAR:BGCOLORCSS;
background-image:url(NETQUOTEVAR:BGIMAGECSS);
background-repeat: no-repeat;
background-position: left top;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
}

smudgie
03-Nov-2003, 07:01 PM
I'm sorry but I've tried various things but can't get it to work!

I've opened the actinic.css and selected edit. found the code as you have pointed out. However I don't know what I should be adding to make my image appear.

Does the following line need to be changed to my css or image (I presume my image if I'm only calling one css file)?

background-image:url(site1/films.jpeg);
background-image:films.jpeg;

The image I want to use as my background is called films.jpg.Could you please show me an example of what you would do if you had such as image and wanted it as a non repeating background image on all your pages?

Thank you for your time.

pinbrook
03-Nov-2003, 08:16 PM
I have given you the code exactly as you need it

background-color:NETQUOTEVAR:BGCOLORCSS;

if you want a background colour the CSS will use the volour set in Design|options|shopdefaults


background-image:url(NETQUOTEVAR:BGIMAGECSS);

the same there, your background image is the one set in Design|options|shopdefaults


background-repeat: no-repeat;

this line says no repeat ie display the backgrounfd image once

background-position: left top;

This line tells the CSS to anchor the image to the top and left of the screen

smudgie
04-Nov-2003, 06:27 PM
Nope! I don't know what I'm doing wrong, but it isn't working when I preview the site.

I'm sure you've had enough of dealing with this, and it looks like I may have to either create a ridiculously large background image so that it doesn't repeat, or not bother.

If on the off chance you may want to see the actinic.css code as it is, I have pasted it below. Otherwise thank you for trying to help.



/*cope with inheritance bugs*/
body, table, th, td{
color:NETQUOTEVAR:FGCOLORCSS;
font-size:x-small;
font-family:CUSTOMVAR:ACTCSSFONTFAMILY;
}

/*body specific*/
body{
background-color:NETQUOTEVAR:BGCOLORCSS;
background-image:url(NETQUOTEVAR:BGIMAGECSS);
background-repeat: no-repeat;
background-position: left top;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
}

a:link{
color:NETQUOTEVAR:LINKCOLORCSS;
font-size:x-small;
text-decoration:none;
}

a:visited{
color:NETQUOTEVAR:VLINKCOLORCSS;
font-size:x-small;
text-decoration:none;
}

a:hover{
color:NETQUOTEVAR:HLINKCOLORCSS;
font-size:x-small;
text-decoration:none;
}

a:active{
color:NETQUOTEVAR:ALINKCOLORCSS;
font-size:x-small;
text-decoration:none;
}

li{
color:NETQUOTEVAR:FGCOLORCSS;
list-style-type:square;
}

ol{
color:NETQUOTEVAR:FGCOLORCSS;
}

ul{
color:NETQUOTEVAR:FGCOLORCSS;
list-style-type:square;
}

H1, H2, H3, H4, H5, H6 {
font-family:CUSTOMVAR:ACTCSSFONTFAMILY;
}

.actCHECKOUTEM {background-color:NETQUOTEVAR:CHECKOUTEMCSS;}
.actCHECKOUTBG {background-color:NETQUOTEVAR:CHECKOUTBGCSS;}

.actlarger{
font-size: larger;
color:NETQUOTEVAR:FGCOLORCSS;
}

.actsmaller{
font-size: smaller;
color:NETQUOTEVAR:FGCOLORCSS;
}

.actxxsmall{font-size:xx-small;color:NETQUOTEVAR:FGCOLORCSS;}
.actxsmall{font-size:x-small;color:NETQUOTEVAR:FGCOLORCSS;}
.actsmall{font-size:small;color:NETQUOTEVAR:FGCOLORCSS;}
.actregular{font-size:medium;color:NETQUOTEVAR:FGCOLORCSS;}
.actlarge{
font-size:large;
color:NETQUOTEVAR;


:FGCOLORCSS;}
.actxlarge{font-size:x-large;color:NETQUOTEVAR:FGCOLORCSS;}
.actxxlarge{font-size:xx-large;color:NETQUOTEVAR:FGCOLORCSS;}

.actwarningcolor{color:NETQUOTEVAR:REQUIREDCOLORCSS;}
.actrequiredcolor{color:NETQUOTEVAR:REQUIREDCOLORCSS;}
.actsearchhighlightcolor{color:NETQUOTEVAR:SEARCHHIGHLIGHTCOLORCSS;}
.actrequired{color:NETQUOTEVAR:REQUIREDCOLORCSS;}
.actwarning{color:NETQUOTEVAR:REQUIREDCOLORCSS;}
.actwelcome{color:NETQUOTEVAR:FGCOLORCSS;}

.actlogotext {font-family:CUSTOMVAR:ACTCSSFONTFAMILY; font-size: x-small; color: #D9090E; font-style: normal; font-weight: bold; text-align: center}
.actlogout{font-size:x-small;color:NETQUOTEVAR:LINKCOLORCSS;}

smudgie
04-Nov-2003, 06:33 PM
SORRY!!!!!!!!!!!!!!!

It's working... I ignored the design/options/background bit because I thought this wouldn't repeat the image, but the penny has finally dropped.

Sorry about the last email. Thank you for helping.