add css to one particular page

[cynthiamittel]

I am sure this can be done and it is probably simple once it is pointed out. Was hoping maybe there was a video or at least a link to a post
that shows how and where to add css to one page - for example a squeeze page. What I did was create a squeeze page with html etc and then
created a template to be able to upload that to WP. That worked fine but the issue is the CSS does not appear to be applied to it and therefore it
is just the video showing up with text but no other images which are included in the css.

I am sure there is a way to do it in Catalyst but tried going to advanced options and adding the css there but it did not work. Watched the screencast Eric did on creating a landing page but did not seem to do the trick.

If someone could point me to that it would be greatly appreciated.

thanks

[justme]

You can easily apply CSS to a specific page by including it’s ID when you add your code to Advanced Options > Custom CSS. So something like:

body.page-id-xx #content .page {
	background: #FFFFFF;
	color: #333333;
}

If you need something more than that then a link to the page would be helpful.

[cynthiamittel]

body.page-10459 #content .page {
}

I added that and then all of the rest of the css to it but the graphics are still not showing up.

[justme]

Without a link I can’t do much but I do notice you have no space between the page ID and #content.

body.page-10459 #content .page {
}

[cynthiamittel]

I have tried it this way and still not go about to just delete the page:

body.page-10459 #content .page {
}

body {
margin:0;
padding:0;
background: #FFF url(../images/bg.jpg) repeat-x top left;
font: normal 16px georgia;
color: #1a1a1a;
}


/*--container--*/

#wrapper{
width:970px;
margin:0 auto;
}

#header{
margin:0;
padding:0;
width:970px;
height:176px;
}

#mainbody{
margin:0;
padding:0;
width:970px;
}

#leftcol{
float:left;
margin:0;
padding:0;
width:663px;
}

#rightcol{
float:right;
margin:0;
padding:0;
width:307px;
}

#divider{
margin:0;
padding:0;
height:28px;
background:url(../images/divider.jpg) repeat-x;
}

#comments{
margin:0;
padding:0;
height:159px;
background:url(../images/comment_bg.jpg) repeat-x;
}

#clr{
clear:both;
margin:0;
padding:0;
}

/*--header--*/
#headline{
float:left;
margin:0;
padding:25px 0 0 0;
width:663px;
}

#headline h1.headline{
margin:0;
padding:0;
text-align:center;
color:#FFF;
font-size:30px;
line-height:32px;
}

#headline h3.pre-headline{
margin:0;
padding:3px 0;
text-align:center;
color:#ffffcc;
font-size:16px;
line-height:20px;
}

#arrow{
float:right;
margin:0;
padding:0;
width:307px;
height:176px;
background:url(../images/arrow.jpg) no-repeat top center;
}

/*--leftcolumn--*/
#content{
width:643px;
padding:20px 10px;
}

h1{
color:#990000;
text-align:center;
}

h2{
color:#212121;
font-size:20px;
text-align:center;
}

/*--rightcolumn--*/
#top-optin{
margin:0;
padding:44px 0 0 0;
width:307px;
height:137px;
text-align:center;
background:url(../images/topoptin.jpg) no-repeat top center;
}

#top-optin h2.opttext2{
margin:0;
padding:2px 0;
color:#c3c39f;
font-face:arial;
font-size:18px;
text-align:center;
font-style:italic;
line-height:16px;
}

#top-optin h2.opttext1{
margin:0 20px;
padding:4px 0;
color:#FFF;
font-face:arial;
font-size:28px;
text-align:center;
font-style:italic;
line-height:0;
line-height:24px;
}

#top-optin .optinfo{
margin:0;
padding:5px 20px;
color:#FFF;
font:bold 12px arial, helvetica, sans-serif;
text-align:center;
}

#body-optin{
margin:0;
padding:0;
width:307px;
height:203px;
background:url(../images/optinarea.jpg) no-repeat top center;
}

#bot-optin{
margin:0;
padding:0;
width:307px;
height:22px;
background:url(../images/botoptin.jpg) no-repeat top center;
}

/*--form--*/
#body-optin form{
margin:0;
padding:0;
text-align:center;
}

#body-optin input{
margin:5px 0;
text-align:left;
}

.name_field{
color:#818181;
padding:5px 23px 5px 5px;
width:230px;
border-top:2px solid #a7a7a7;
border-right:2px solid #ccc;
border-bottom:2px solid #ddd;
border-left:2px solid #818181;
background:#F5F5F5 url(../images/name.png) no-repeat right;
}

.name_field:focus{
border:2px solid #84b433;
}

.email_field{
color:#818181;
padding:5px 23px 5px 5px;
width:230px;
border:2px solid #ccc;
background:#F5F5F5 url(../images/email.png) no-repeat right;
}

.email_field:focus{
border:2px solid #84b433;
}
.opt_btn{
cursorointer;
margin:0;
padding:0;
width:264px;
height:47px;
background:url(../images/button.png) no-repeat;
border:none;
}

.opt_btn:hover{
cursorointer;
margin:0;
padding:0;
width:264px;
height:47px;
background:url(../images/button2.png) no-repeat;
border:none;
}

/*--comments--*/
#comhead{
margin:0 auto;
padding:0 30px;
width:910px;
height:44px;
color:#FFF;
font:bold 16px arial;
line-height:44px;
background:url(../images/comhead.jpg) no-repeat top center;
}

#comhead h4{
margin:0;
padding:0;
}

#comcontent{
margin:0 auto;
padding:0;
width:970px;
height:44px;
}

#comment{
float:left;
width:280px;
margin:5px 0;
padding:0 20px;

}

.comborder{
border-right:1px solid #404040;
}

#comment h4{
margin:0;
padding:5px 0;
color:#FFFFCC;
text-align:center;
font-size:18px;
}

#comment h6{
margin:0;
padding:8px 0;
color:#E5E5E5;
text-align:center;
font-size:12px;
}

/*--foot information--*/
#footer{
margin:0;
padding:10px 0;;
color:#F6F6F6;
font:normal 10px verdana, helvetica, arial, sans-serif;
text-align:center;
background:#003144;
}

#footer a{
color:#FFF;
text-decoration:underline;
}

#footer a:hover{
text-decoration:none;
}

[justme]

I have tried it this way and still not go about to just delete the page:

Sorry I have no idea what that means.

I just looked at your code snippet again and realized it is incorrect for another reason - you have:

body.page-10459

when it should be:

body.page-id-10459

Also the code you posted here is empty between the brackets so will do nothing.

[cynthiamittel]

body.page-id-10459 #content .page {

still not working.

now what I have is above and the rest of that from previous is the rest of the css code. thanks

[justme]

I can’t do any more without seeing the page. If you would like to provide a link I can take a look.

[cynthiamittel]

Not sure how this is going to help but here you go
I do appreciate your willingness to help. thank you

[justme]

Well that explains it. You aren’t using Dynamik or Catalyst or even WordPress. There’s no way to expect Catalyst/Dynamik CSS to work. When you said you uploaded a template to WP I understood it was actually part of WordPress. Since it isn’t there’s no way I can tell you how to do what you are trying to do.

If you want to build Landing pages using WordPress / Catalyst / Dynamik I really recommend using the tools Eric has made available. I know you said you watched the screencast but I would revisit that. Others have definitely been using Landing Pages with Catalyst.

http://catalysttheme.com/custom-landing-pages/

http://catalysttheme.com/how-to-crea...sing-catalyst/

We have a lot of other Catalyst Resources available. A good place to start is at http://catalysttheme.com/forum/showt...re-Looking-For.