How do I remove underline from Web Part Title?

Question

This seems like it would be an easy fix with a Content Editor Web Part to modify the css of the page's Web Parts. The underline I mean is the long line that leads to the dropdown arrow where the Modify, minimize, close, etc. options are. I have tried this code with no visible results:

<style>
ms-standardheader {text-decoration:none;}
</style>

Answer 1

You need to read up about CSS selectors.

A CSS rule is composed of two parts: a selector and a declaration block.

Generally, they look something like this:

selector { declaration block }

Your problem is with the selector, and to understand your error I'll have to explain some basic selector syntax.

In the selector you can 'target' HTML elements with styles using various constructs:

• Target by tag name
• Target by id
• Target by class name

Target by Tag Name

The simplest is targeting by Tag Name. In this case use the tag name of the element targetted with white space on both sides:

p { /*...*/ }

Now all <p> elements will be affected by the above rule.

Target by Id

If the element you are targeting has an id attribute you can target by id by prefixing with an octothorpe #:

#p { /*...*/ }

Now the element with id="p" (no matter what the tag name) will be affected.

Target by Class Name

If the element you are targeting has a class attribute you can target by class name by prefixing with a period .:

.p { /*...*/ }

Now the elements with class="p" (no matter what the tag name) will be affected. Note that an element can have more than one class name, separated by spaces, so class="p x" is also affected.

Your Rule Doesn't Make Sense

So your rule doesn't work first and foremost because is doesn't make sense ;)

ms-standardheader {text-decoration:none;}

In the absence of a period . or an octothorpe # this targets by tag name. But <ms-standardheader> elements don't exist, so it has no effect.

Your Rule Is Also The Wrong Rule

You're also trying to style the wrong element, so let's look at the Web Part to style. I assume you're trying to remove the line I've pointed out with the red rectangle:

This line is not actually an underline, but is instead a border-bottom from a <td> element. The rule which creates this underline is on line 2664(ish) of _layouts/1033/styles/core.css and looks a little like this...

.ms-WPHeader TD{
    border-bottom:1px solid #4e7cb7;
    border-collapse:collapse;
}

Try this in another CSS file:

html body .ms-WPHeader td {
    border-bottom:none;
}

Adding the html body increases the specificity of your rule so it will take precedence over the rule in core.css.