By hate90 on

hi, how can i style an specific node or a content type so i can give specific css to it

Comments

duckzland’s picture

duckzland commented

easy way
use node--your_content_type.tpl.php and put the custom id in the wrapper so you can target it via css

more advanced way
implement yourtheme_template_preprocess_node or yourtheme_template_preprocess_page from template.php and tweak out the variables for attributes (classes)

--------------------------------------------------------------------------------------------------------
if you can use drupal why use others?
VicTheme.com

nevets’s picture

nevets commented

Some themes already include a class for the content type and other for the node in the div wrapper that surrounds the nodes output.

misscosmic’s picture

misscosmic commented

Sorry my knowledge of php is very little to non and in general for me Drupal is still very complicated.

Could someone please explain step by step how I can achieve it so that a certain content type gets it's own css..?

Thanks in advance

nevets’s picture

nevets commented

What version of Drupal are you using and what is the theme used?

misscosmic’s picture

misscosmic commented

I have Drupal 7.10 and CorporateClean is the theme

nevets’s picture

nevets commented

If you inspect a node with a tool like firebug you will find it in wrapper div something like this

<div id="node-3" class="node node-blog node-promoted node-teaser" typeof="sioc:Post sioct:BlogPost" about="/corporateclean/node/3">

The one you want is the one that reflects the type, in this case 'node-blog'. So by prefixing your css with this class you can target specific node types so for example

.node-blog h2 a {
  color: green;
}

would make the node title for blog teasers green

misscosmic’s picture

misscosmic commented

This is what Firebug shows"

<head profile="http://www.w3.org/1999/xhtml/vocab">
</head>
<body class="html not-front logged-in one-sidebar sidebar-first page-node page-node- page-node-17 node-type-page toolbar toolbar-drawer lightbox-processed" style="padding-top: 85px;">
<div id="skip-link">
</div>
<div class="region region-page-top">
</div>
<div id="header">
</div>
<div id="header-menu">
</div>
<div id="content">
</div>
<div id="footer">
</div>
<div id="footer-bottom">
</div>
<div class="region region-page-bottom">
</div>
<div id="cboxOverlay" style="display: block; opacity: 0.9; cursor: pointer;"></div>
<div id="colorbox" class="" style="display: block; padding-bottom: 38px; padding-right: 0px; top: 352px; left: 169px; position: absolute; width: 800px; height: 462px;">
<div id="cboxWrapper" style="height: 500px; width: 800px;">
<div>
</div>
<div style="clear: left;">
<div id="cboxMiddleLeft" style="float: left; height: 462px;"></div>
<div id="cboxContent" style="float: left; width: 800px; height: 462px;">
<div id="cboxLoadedContent" style="display: block; width: 800px; overflow: auto; height: 462px;">
<div id="content">
<div id="content-inside" class="inside">
<div id="main">
</div>
<div id="sidebar"> </div>
</div>
</div>
</div>
<div id="cboxLoadingOverlay" style="float: left; display: none;"></div>
<div id="cboxLoadingGraphic" style="float: left; display: none;"></div>
<div id="cboxTitle" style="float: left; display: block;"></div>
<div id="cboxCurrent" style="float: left; display: none;"></div>
<div id="cboxNext" style="float: left; display: none;"></div>
<div id="cboxPrevious" style="float: left; display: none;"></div>
<div id="cboxSlideshow" style="float: left; display: none;"></div>
<div id="cboxClose" style="float: left; opacity: 1;">close</div>
</div>
<div id="cboxMiddleRight" style="float: left; height: 462px;"></div>
</div>
<div style="clear: left;">
</div>
</div>
<div style="position: absolute; width: 9999px; visibility: hidden; display: none;"></div>
</div>
<div id="lightbox2-overlay" style="display: none;"></div>
<div id="lightbox" class="lightbox2-orig-layout" style="display: none;">
</div>
</body>
</html>

The only thing I can see of use in this code is "node-type-page", but about all the content is of this, isn't it..? It is not the specific node/page name whichs' machine name is 'event'..

John Yates’s picture

John Yates commented

.page-node-17 h2 a
{
color:red;
}

misscosmic’s picture

misscosmic commented

Hi cyberdog_sk, does this mean that the content type is 'page-node', and that so I have to create a page--page-node.tpl.php if I want to have all the 'files' of this content type to get the same css specifications..?

nevets’s picture

nevets commented

'page-node' tell you the first part of the path is 'node'. 'node-type-page' tells you the content type is 'page'. And no, you do not need 'page--page-node.tpl.php', the point of using the class allows you to target elements based on that class

mcfilms’s picture

mcfilms commented

To be clear, that code cyberdog gave you would go in your css file. It is telling the link (a) of any H2 heading on the page for node-17 to be red.

If you just edit the style.css file in the theme you are using and add that you will see the H2 links become red.

LAter you may want to read up on creating a sub-theme and adding an additional external style sheet. That way if you update your theme, it will not erase your changes.

A list of some of the Drupal sites I have designed and/or developed can be viewed at motioncity.com

kumar_naga’s picture

kumar_naga commented

You can use module -- code per node

http://drupal.org/project/cpn

klinion’s picture

klinion commented

I added
#node-4 {
text-shadow:0 2px #ffffff;
}
Seems to work. Didn't try a content type.

ZitaS’s picture

ZitaS commented

Thanks to this thread.

I just wanted to change the CSS within a couple of specific node as well. Got the Node ID, which should be the id selector (#) - double checked it was the case by inspecting the element on the page

Then put this in the theme's css stylesheet - This was to change the text align for p in two specific nodes:

#node-15, #node-19 p {
text-align: justify;
-moz-text-align-last: center; /* Code for Firefox */
text-align-last: center;
margin-bottom: 15px;
}

Worked like a beauty.

Seems like my web coding skills are progressing. I'm still learning and it's been a staggered approach to learning, but with consistency I'll get there and keep getting those "Ah Ha!" or "ahh, derrr, of course" moments

tamerzg’s picture

tamerzg commented

In Drupal 7, there is a class like path-node-NID (with NID replaced by the node ID of the node being viewed) added to the <body> tag so we can easily add CSS styles to specific nodes.

 Drupal 8 is missing this core D7 functionality, but now there is a module for that, its called Body node ID class

--------------
zoubi.me