Topic: CSS...sharing IDs..?? Pages that link to <a href="https://ozoneasylum.com/backlink?for=31106" title="Pages that link to Topic: CSS...sharing IDs..??" rel="nofollow" >Topic: CSS...sharing IDs..??\

 
Author Thread
SleepingWolf
Paranoid (IV) Inmate

From:
Insane since: Jul 2006

IP logged posted posted 07-06-2009 23:18 Edit Quote

In the current theme for my Wordpress blog the main template refers to a div called content. In the main style sheet, the content is defined as below.

I have created a custom page template on the main template. This custom page template will refer to the same main style sheet.

If I change the name of the div in the custom page template from content to content2 and I only want to change the background-color can i do this without having to duplicate all the other rules? I would remove the background-color from content, but the rest would be shared.

code:
#content {
	text-align:left;
	font-size:12px;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	padding:12px 80px;
	color:#EDE6EE;
	
	background-color:#303030;
	float: left;
	width: 628px;
	}

	
#content a {
	color:#FFEBCD;
	text-decoration: none;
	outline: none;

	}
#content a:hover {
	color:#EDE6EE;
	}




Trying to do:

code:
#content { background-color:#303030; 	}
#content2 { background-color:#000000; 	}


#content  content2{
	text-align:left;
	font-size:12px;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	padding:12px 80px;
	color:#EDE6EE;
	
	float: left;
	width: 628px;
	}

	
#content content2 a {
	color:#FFEBCD;
	text-decoration: none;
	outline: none;

	}
#content content2  a:hover {
	color:#EDE6EE;
	}





Nature & Travel Photography
Main Entrance

(Edited by SleepingWolf on 07-06-2009 23:31)

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 07-06-2009 23:33 Edit Quote

No. The CSS would have no way to know that you want to relate it to the #content styles.

The easiest way to do this would be to add a class to the div (in addition to the id), and define your new background color in the styles for that class.
Just make sure the background color for the class is defined AFTER the styles for the id in your css.

{{edit -
Ok, it looks like you were editing while I was posting! I may have misunderstood your intent a little

this: "#content content2{}" tells the browser to style an element of the type 'content2' (which doesn't exist as an element type) that is inside an element with an ID of "content".

What you need is

code:
#content, #content2 
{

...shared styles....

}


if you want an element with either ID to share the styles.
and then you will need

code:
#content a, #content2 a 
{

...shared styles....

}


and so on...

You can do this with any number of selectors...you can specify any number of elements, id's, and classes that will share a set of styles, simply by separating them with commas.
if you separate with a space, you are specifying that the second item is a child of the first.

You could mix it up completely

code:
#content, div p span strong a, .thisclass, li.thatclass, .thisclass .thatclass, #thisid .thisclass (etc etc etc){
...shared styles....
}


and so on...

(Edited by DL-44 on 07-06-2009 23:50)

SleepingWolf
Paranoid (IV) Inmate

From:
Insane since: Jul 2006

IP logged posted posted 07-06-2009 23:56 Edit Quote

Ok thanks DL.
I will create a new class for each background color and then specify it in the content dive for each template.
Thankfully the theme had only two files to edit.

code:
.bgcontent0 {
 background-color:#303030;
}



with

code:
<div id="content" class="bgcontent0">



Nature & Travel Photography
Main Entrance

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 07-07-2009 04:53 Edit Quote

Of course, ideally you would also have a class name that was semantically relevant - one that gave an indication of the purpose of the element (or the purpose of the differentiation in class), that would remain relevant should the particular style attribute you are addressing at the moment was no longer the issue...a hint at the subject matter contained within perhaps...?

SleepingWolf
Paranoid (IV) Inmate

From:
Insane since: Jul 2006

IP logged posted posted 07-07-2009 06:17 Edit Quote

Agreed, but then I would have to be sane right?


Nature & Travel Photography
Main Entrance

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 07-07-2009 06:23 Edit Quote

I am not aware of anything that has sanity as a prerequisite.

SleepingWolf
Paranoid (IV) Inmate

From:
Insane since: Jul 2006

IP logged posted posted 07-07-2009 21:52 Edit Quote

Missed your edit first time around.
That's exactly my intent. For some reason, when I had tried it with commas as separators. before I posted, it hadn't worked...strange.
This will allow me to customize certain pages without the need for multiple css files.
Thanks again for your help.


Nature & Travel Photography
Main Entrance

amperage
Obsessive-Compulsive (I) Inmate

From: San Antonio, TX
Insane since: Aug 2010

IP logged posted posted 08-09-2010 18:07 Edit Quote

One of the biggest things I've learned is knowing when to use ID= vs. class=.

Use classes for objects that will be used multiple times. Use ID for objects that will be used only 1 time.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu