By Swooperz on

Hello.

I am using the Goofy template because I like the layout and the rounded blocks, but I am having a tough time with changing the link text color of my story headlines/titles without affecting all the other links on the page.

I've altered the theme's block border colors from Orange to a Medium Blue. The text for a story's title isn't very visible with black on blue, so I changed the text to white.

The first problem is that the title is a link to the full story. So, I just edited the Link text color and made that white too.

The second and biggest problem is now all my links are white and I don't want that. I want to somehow use the span command or create another css rule to specifically and only change the text color of the story headline/title text, which is a link.

Any ideas?

Thanks for your time,
Swoop

⋅ Categories: Drupal 4.6.x

Comments

paddy_deburca’s picture

paddy_deburca commented

To change the link settings within a block try this CSS in your style.css

.block a, .block a:visited {
  color: #00f;
}
.block a:hover {
  color: #0f0;
}

to change for a specific block, try

#block-user-0 a, #block-user-0 a:visited {
  color: #00f;
}
#block-user-0 a:hover {
  color: #0f0;
}

For nodes, use .node instead of .block.

Paddy.

http://deburca.org, and http://amadain.net

Paddy.

http://deburca.org

Swooperz’s picture

Swooperz commented

Paddy.
Thanks for the reply!

I will give that a shot.

Interesting thing is that the Goofy theme didn't have any .block rules in the css file at all. I am hoping Goofy will understand the .block rule.

I am off to try it now.

Thanks,
Alan

Swooperz’s picture

Swooperz commented

Paddy,
That did the trick. Thanks so much for that great piece of info.

One other question:
I am not sure I understand the specific node/block code (#block-user-0...)

Can you explain how that works? (What is user and what is the numeral?)

Thanks,
Alan

paddy_deburca’s picture

paddy_deburca commented

Alan,

The whole difference is a class is used as a generic way of updating one or more items of information on the html page. All these items can have the same class (e.g. ".block" or ".node-item"). A class definition in your CSS file of

.block { color: #f00; }

would change the font colour of all items of that class.

Now, you may want specific control of an item on the html page; for this you give it a _unique_ id - there can only be one such id per page. To refer to this specific id in your CSS file you use the # instead of the dot. Therefore a block with id "block-user-0" could has CSS as follows

#block-user-0 { background-color: #0f0; }

The following HTML code 

<div class="block">
  <p>This is some red text"</p>
</div>
<div class="block" id="block-user-0">
  <p>This is some red text on a green background</p>
</div>

Notice block was used more than once, while block-user-0 was used only once.

A very good resource for learning CSS is to view the source of a page and try to understand the differences between _similiar_ blocks.

Paddy.

http://deburca.org, and http://amadain.net

Paddy.

http://deburca.org

Swooperz’s picture

Swooperz commented

Hi Paddy.
Thanks for the reply. I think I understand about how the #block rule part works, but I was more interested in trying to understand how to discover what the node's (or block's) id value is or is going to be, since it is dynamic php that is generating the id.

Maybe I will dig deeper to see how id's are assigned to my nodes.

Thanks again,
Alan

Swooperz’s picture

Swooperz commented

Looks like blocks all get their own id's but nodes do not, so I guess they will have to get a blanket css rule until I figure something else out.

Thanks again,
Alan

gnerdalot’s picture

gnerdalot commented

If you view the source, you'll see the block ID's - then make code like this - the previous post was right - replace the . with #

/* Who's online */ .sidebar #block-user-3 { background-color: #FFFFFF; }
/* Main nav block */ .sidebar #block-user-1 { background-color: #FF0000 ; }
/* Calendar*/ .sidebar #block-event-0 { background-color: #FFCC00; }

I comment a lot :)

And on and on for every unique block in the list. This is what I did and it works - control over every block.

Gregg

Swooperz’s picture

Swooperz commented

Correct. I understand blocks. I am interested in nodes. Goofy doesn't seem to ID nodes like that.

paddy_deburca’s picture

paddy_deburca commented

You may need to customise you node template to include the node ID.

You could aim at creating HTML that would resemble

<div class="node" id="node-123">
....
....
....
</div>

where 123 is the number of your node. Using CSS you could then create #node-123 {} styles to format and personalise individual nodes.

Paddy.

http://deburca.org, and http://amadain.net

Paddy.

http://deburca.org

anne-pierre’s picture

anne-pierre commented

Thank you Paddy Deburca,

That helped me do my changes.

Alc Ninja’s picture

Alc Ninja commented

Paddy,mate you'll never know how much you've helped people new to css styling (including me)!
million thanks!

cheers