** changing a class, for just 1 page? **

bigbonthabeat

New Member
There is a single style for the grey box, below the header, that appears on every page. When I try to resize the grey box on the CONTACT page, it changes the grey box for ALL pages (BIO, MUSIC and CONTACT). How do I change it for only 1 page?

pic of my page:
http://i187.photobucket.com/albums/x292/bigbonthabeat/problem3-contact-1.jpg

code for my page

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Bryson Price Music</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
    <title>bryson price contact</title>
        <script type="text/javascript">
var GB_ROOT_DIR = "./greybox/";
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
        </script>

    <script type="text/javascript" src="greybox/AJS.js"></script>
    <script type="text/javascript" src="greybox/AJS_fx.js"></script>
    <script type="text/javascript" src="greybox/gb_scripts.js"></script>
    <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />

    <script type="text/javascript" src="static_files/help.js"></script>

</head>
<body onload="MM_preloadImages('img/rollyoutube.png','img/rolltwitter.png','img/rollfacebook.png','img/rollgmail.png')">
<div class="header"><span class="Biography"><img src="img/contact.png" alt="biography" width="435" height="107" vspace="50" /></span>
</div>
<div id="wrapper">
  <div class="Biography" id="biography">
  </div>    
  <div class="belowheader" id="belowheader"><img src="img/newbelowheadcontact.png" width="390" height="123" alt="belowheader" />
  </div>
<div class="biobody" id="biobody">
  <div class="youtubetwitter"><a href="www.youtube.com/brysonprice" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('youtube','','img/rollyoutube.png',1)"><img src="img/youtube.png" name="youtube" width="213" height="87" border="0" id="youtube" /></a><a href="www.twitter/brysonprice" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('twitter','','img/rolltwitter.png',1)"><img src="img/twitter.png" name="twitter" width="213" height="87" border="0" id="twitter" /></a></div>
  <div class="facebook"><a href="www.facebook.com/brysonprice" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','img/rollfacebook.png',1)"><img src="img/facebook.png" name="facebook" width="217" height="91" border="0" id="facebook" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gmailroll','','img/rollgmail.png',1)"><img src="img/gmail.png" name="gmailroll" width="213" height="87" border="0" id="gmailroll" /></a><a href="form.html" title="Google" rel="gb_page_center[640, 480]"><img src="img/gmail.png" width="213" height="87" alt="gmail" /></a><script type="text/javascript">
GB_myShow = function(caption, url, /* optional */ height, width, callback_fn) {
    var options = {
        caption: caption,
        height: height || 500,
        width: width || 700,
        fullscreen: false,
        show_loading: false,
        callback_fn: callback_fn
    }
    var win = new GB_Window(options);
    return win.show(url);
}
    </script></div>
  </div>
</div>



</body>
</html>
 

DHDdirect

New Member
Just copy gb_styles.css to a new file gb_styles1.css and change what you need inside gb_styles1.css for that one page.

then just change your styles link ref

Code:
[COLOR=#000080][COLOR=#000080]<link href=[COLOR=#0000ff]"greybox/gb_styles1.css"[/COLOR] rel=[COLOR=#0000ff]"stylesheet"[/COLOR] type=[COLOR=#0000ff]"text/css"[/COLOR] media=[COLOR=#0000ff]"all"[/COLOR] />[/COLOR]
[/COLOR]
 

ronaldroe

Super Moderator
Staff member
It would be easier to add a new class with your changes, and just change the class name. Alternatively, depending on the changes, you could add a new class, then reference it as well in the div. You just separate the 2 with a space.
example:
Code:
<div class="class1 class2">

EDIT: Post 100, btw :D
 

bigbonthabeat

New Member
Just copy gb_styles.css to a new file gb_styles1.css and change what you need inside gb_styles1.css for that one page.

then just change your styles link ref


please forgive me because I am new to dreamweaver : )

To my understanding, you cannot change one class without changing all the styles to every page. And also, I don't think you can paste a div on top of another one. So how would I change the class or delete it without doing the same for all projects?

I just noticed that my .css sheet didn't show in the code I gave in the 1st post. My .css code is below and the one I want to change is "biobody":

HTML:
@charset "utf-8";
/* CSS Document */
#wrapper {
	text-align: left;
	width: 960px;
	position: relative;
	padding: 0px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	height: auto;
	background-color: #FFF;
}
body {
	background-repeat: repeat;
	text-align: center;
	margin: 0px;
	padding: 0px;
}
.biobody {
	border: 3px solid #282828;
	height: 400px;
	width: 896px;
	margin-right: 34px;
	margin-left: 36px;
	clip: rect(auto,34px,auto,36px);
	text-align: center;
	background-color: #e9e6e6;
}
.belowheader {
	height: 122px;
	width: 899px;
	margin-left: 38px;
	text-align: center;
}
.gmail {
	height: 87px;
	width: 213px;
	text-align: center;
}
.facebook {
	padding-top: 0px;
}
.youtubetwitter {
	padding-top: 105px;
}

img {
    border: 0;
}
.header {
	height: 170px;
	background-color: #e9e6e6;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 3px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #282828;
	border-right-color: #282828;
	border-bottom-color: #282828;
	border-left-color: #282828;
	text-align: center;
}

once again, thank you for the help : )
 

ronaldroe

Super Moderator
Staff member
please forgive me because I am new to dreamweaver : )

To my understanding, you cannot change one class without changing all the styles to every page. And also, I don't think you can paste a div on top of another one. So how would I change the class or delete it without doing the same for all projects?

Without getting preachy, this is why it's better to learn to hand code first, then use WYSIWYG.

In Dreamweaver, click the code button at the top for the page you're trying to edit. Then, add or change the class for biobody as I described above. Then, do the same for the CSS file, and change your styles. You can make whatever changes you like, you just have to either use a different class on that particular page, or add a second one with the changes you want.
 

bigbonthabeat

New Member
You can make whatever changes you like, you just have to either use a different class on that particular page, or add a second one with the changes you want.

I know how to add another class for that particular page, but my problem is when I add the second class, I want to get rid of the original class. And if I delete the original class from that page, it deletes them from all the pages.
 

ronaldroe

Super Moderator
Staff member
I know how to add another class for that particular page, but my problem is when I add the second class, I want to get rid of the original class. And if I delete the original class from that page, it deletes them from all the pages.

Open it in a text editor and make the change, then open it in Dw.
 

DHDdirect

New Member
I see what your problem is. The grey box code is generated outside of the page displaying it. So in order to make this happen you'd have to run two seperate grey box scripts.

I'm sure there is a less cluttered way to do it but without all the bits and pieces i'd say this is the simplest and fastest.

Create a new folder on your website called greybox2.
Copy all the files in the greybox folder and paste it into greybox2
Then in the page you would like to see a larger grey box change the following lines to:

Code:
var GB_ROOT_DIR = "./greybox2/";
    [COLOR=#800000]<script type=[COLOR=#0000ff]"text/javascript"[/COLOR] src=[COLOR=#0000ff]"greybox2/AJS.js"[/COLOR]>[/COLOR][COLOR=#800000]</script>[/COLOR]
    [COLOR=#800000]<script type=[COLOR=#0000ff]"text/javascript"[/COLOR] src=[COLOR=#0000ff]"greybox2/AJS_fx.js"[/COLOR]>[/COLOR][COLOR=#800000]</script>[/COLOR]
    [COLOR=#800000]<script type=[COLOR=#0000ff]"text/javascript"[/COLOR] src=[COLOR=#0000ff]"greybox2/gb_scripts.js"[/COLOR]>[/COLOR][COLOR=#800000]</script>[/COLOR]
    [COLOR=#000080]<link href=[COLOR=#0000ff]"greybox2/gb_styles.css"[/COLOR] rel=[COLOR=#0000ff]"stylesheet"[/COLOR] type=[COLOR=#0000ff]"text/css"[/COLOR] media=[COLOR=#0000ff]"all"[/COLOR] />[/COLOR]

Then alter the styles that you were before but in the files that are in the new greybox2 folder, more than likely it was gb_styles.
This should generate the grey box from the new greybox2 folder javascript files while all other pages will use the original folder

Good luck
 
Top