FAQ: How do I put a separator between articles or news items?

[HarryB]

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." 

[pe7er]

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.

[HarryB]

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...

[pe7er]

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....

[Writer]

Doesn't work. I added

Code: Select all

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

To my template CSS and I get nothing!

I'm runniing 1.0.8

Ideas??

[pe7er]

what's your URL?

[Joomlawebber]

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

/K
   

[guilliam]

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

[Writer]

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!

[celaine]

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;
}

[celaine]

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

[crow]

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

[tarr]

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/

[cdx]

Doesn't work here...

I wonder why...

[Plaidfox]

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!