Applying a color to a HR tag

35 Posts

jknupp Reply #1, 18 years, 6 months ago

Anyone have any ideas how I can apply a color to an HR tag?

I can’t select the HR element in the (visual) editor window, so, I tried it in the raw HTML screen. I can enter the code values to the tag, but once I update it, it vanishes.

I’ve tried it several times with no luck.

Any help would be greatly appreciated.

Thanks!

Justin Knupp

80 Posts

don juan Reply #2, 18 years, 6 months ago

can you paste the code you are using?

674 Posts

jabiertxof Reply #3, 18 years, 6 months ago

by css
color and background-color the same and the end color for compatibility
border-style:none
height...

Jabiertxof (formerly XYZVISUAL)
My bussines: http://marker.es
https://www.youtube.com/user/jabiertxof/videos

35 Posts

jknupp Reply #4, 18 years, 6 months ago

I’ve tried the following methods to try and get it to work:

<hr class="orangeline" />

<hr id="orangeline" />

<hr align="center" width="75%" color="#FFCC00"/>

<hr align="center" style="color:#FFCC00" width="75%" />

Nothing works. I keep getting the standard grey line. I figured the CSS method would work, but even that didn’t work. However, all my other styles are working fine.

One of the problems, is that in the (visual) editor, there is no way to actually "select" the rule to apply the style to it. You have to do it in the HTML code window.

I’m really baffled. Is there something in TinyMCE that I need to change? I’m using pretty much the stock install of modX.

Justin

MODX Staff
12,272 Posts

Ryan Thrash Reply #5, 18 years, 6 months ago

hr.orangeline {
    border: 0;
    background: #fc0;
    height: 1px;
    margin: 0 12.5%;
}

Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me

4,205 Posts

dev_cw Reply #6, 18 years, 6 months ago

Just to eliminate any doubts, use the style above in your style sheet and on the document use
<hr class="orangeline" />

Or if you want every hr to have this style change the style above to:

hr {
    border: 0;
    background: #fc0;
    height: 1px;
    margin: 0 12.5%;
}

and use the simple <hr /> in the document.

Here is a nice tutorial on styling hr elements:
http://www.sovavsiti.cz/css/hr.html

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]