Sandbox

Ever wondered if there was an easy way to put a separator between a new items and articles? 

Well, there is a CSS class recognized by the Joomla! core that makes this a simple chore.  At the end of each content item, Joomla! generates the following statement:

 

The folowiing example puts a solid back line at the bottom of each news item and/or article:

.article_ seperator {
border-top: 1px solid #000000;
display: block;
width: 95%;         
margin-left: 10px;
margin-top:  10px;
}

And yes it is "seperator," not "separator." 

very interesting, thanks for sharing!

only: you cannot use this method to get a border around the whole article, can you?

Wouldn't it be better if there was some
tag in front of the article and at the end?
then you could define a border around the article
or a "border-bottom: 1px solid #000000;" would give some article seperator.

Yes, this would work, but this would have to be a change to the Joomla core code by the core developers.  Based on its name (i.e., article_seperator), seems to me the intended purpose was to alllow separation between articles, not drawing border around articles.

Also, I believe you can use the .contentpageopen class to draw a border around entire article.

And you are correct, you could use border-bottom...css I showed was just an example...there are many different ways to get whatever your desired effect...

http://www.halfvast.com shows the result of the example css I showed...

Yes, alternatively I can change the code myself, but with every patch it might be needed to re-do it
I saw the ".contentpageopen" class in the past, it seems to be missing at my current installations (1.0.7)

btw: I like what you did with the box on your homepage....

Doesn't work. I added


To my template CSS and I get nothing!

I'm runniing 1.0.8

Ideas??

what's your URL?

article_ seperator {<---------------THIS is the issue. There is space between _ and the seperator, and that is why it wont work.

/K
   

Joomlawebber wrote:article_ seperator {<---------------THIS is the issue. There is space between _ and the seperator, and that is why it wont work.

/K
 

good eye!



@Writer, was this the issue?

- g

Actually it wasn't. There was a blank space between the underscore and the word sseperator.

However, their post made me focus on that part of the script.

Thanks!

How do you adjust this to use an image?

oops! I just found my answer! I'll post it here in case anyone else comes looking for the same thing...


.article_seperator {
display : block;
height : 15px;
background-image : url(../images/separator.gif);
background-repeat : repeat-y;
}

Ahhh...I do have another question, though. One site I inserted a line divider between articles is showing two mambots below the line that I want to appear above the line, with the content of the article (it's an author link and a save this link related to the article). You can see what I am talking about here:
http://www.nationalcapitolsquadron.org/ ... e&Itemid=1

Is there a way to add an Vertical seperator also?? I have frontpage with 2 columns and sometimes News Title is owerlaped ower other row and making frontpage looking a bit nasty....

Thnx

HarryB wrote:Ever wondered if there was an easy way to put a separator between a new items and articles? 

Well, there is a CSS class recognized by the Joomla! core that makes this a simple chore.  At the end of each content item, Joomla! generates the following statement:

 

The folowiing example puts a solid back line at the bottom of each news item and/or article:

.article_ seperator {
border-top: 1px solid #000000;
display: block;
width: 95%;         
margin-left: 10px;
margin-top:  10px;
}

And yes it is "seperator," not "separator." 

Nice, but this won't work on my site
http://www.libra-counseling.com/

Doesn't work here...

I wonder why...

HarryB wrote:Ever wondered if there was an easy way to put a separator between a new items and articles? 

Well, there is a CSS class recognized by the Joomla! core that makes this a simple chore.  At the end of each content item, Joomla! generates the following statement:

 

The folowiing example puts a solid back line at the bottom of each news item and/or article:

.article_ seperator {
border-top: 1px solid #000000;
display: block;
width: 95%;         
margin-left: 10px;
margin-top:  10px;
}

And yes it is "seperator," not "separator."   ;)

(Using Joomla 1.5)
Actually, it is separator.  If you look at the page source, joomla automatically puts in:    After fixing the space issue, and still having it not work correctly, my boss noticed the misspelling.  So, your css code should be:

.article_separator {
border-top: 1px solid #000000;
display: block;
width: 95%;         
margin-left: 10px;
margin-top:  10px;
}

Hope this helps!