Recent
Categories
View Replies (12)

Chloe: configuring length of a horizontal rule

  1. Issue
0
Votes
Undo
  1. webnanny
    webnanny
  2. Sherlock Holmes
  3. Commercial Templates
  4. Thursday, 20 August 2020
  5.  Subscribe via email
It's been many years (decades) since I've used a horizontal rule but I don't remember that there were any problems with defining the width, either setting it to run the width of the page or a desired number of inches. I wanted to use one in an article I'm working on and simply inserting <hr /> between paragraphs gives me a short line, not much more than an inch by eyeball measurement. I want it longer. In the admin side Editor window it spans the width of the page but not on the public side. My fall back would be to make a graphic image instead of using <hr /> but now I'm curious because I don't remember how to do it.

Thank you, yet again.
Responses (12)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

HR tag styling may vary depending on your template but can be easily amended with some custom CSS. Would you have a URL to an example of your HR?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Hemingray
Hemingray
Accepted Answer Pending Moderation
0
Votes
Undo
I am also struggling with this problem. I would like a horizontal rule the width of the module, but I get a very short one when I use <hr />. I have tried entering some custom CSS, but that has not worked. I am using the Ashley template. I would be interested to know the answer to the problem.

Ray
  1. more than a month ago
  2. Commercial Templates
  3. # 2
eumel7
eumel7
Sherlock Holmes The Voice Notable Answerer
Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello
@ Hemingray, What CSS rule did you try?
Like the thread creator, you should also post a link to the problem here!
What CSS file did you put it in? (Possibly the wrong template style was used?)
Maybe, try this:


hr {

    max-width: 100%;

    border-top: 5px solid var(--primary);

}
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Hemingray
Hemingray
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you for your response.

I tried:

hr {
max-width: 100%;
height: 1; }

When I look at the web page, there is a thickish red line, centered and taking up half the width of the article. I have tried what you have suggested, but it has made no difference. I am wondering if there is an overriding setting in the template. Incidentally, I made a mistake in my first post. The template I am using is actually Hayley. A screenshot of the horizontal rule is attached.

Ray
Attachments (1)
horizontal-rule.jpg horizontal-rule.jpg
  1. more than a month ago
  2. Commercial Templates
  3. # 4
eumel7
eumel7
Sherlock Holmes The Voice Notable Answerer
Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Unfortunately they didn't answer two questions.
What CSS did they put it in and a link to their page!
  1. more than a month ago
  2. Commercial Templates
  3. # 5
GF
GF
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
@Hemingray:

Try:

hr {
max-width: 100% !important;
height: 1; }

And did you empty all you caches?
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

The above should work but you can also try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

hr {

    max-width: none;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 7
Hemingray
Hemingray
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you to everyone who has suggested alternative definitions for hr. I have tried them all in Custom CSS, but none of them make any difference to the result at the front end. I still don't get a horizontal rule across the full width of the item, which is actually a module displayed full width in an article, rather than an article.

Ray
  1. more than a month ago
  2. Commercial Templates
  3. # 8
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ray

Would you have a URL to an example of your HR element?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 9
Hemingray
Hemingray
Accepted Answer Pending Moderation
0
Votes
Undo
Hello, Ciaran.

Apologies that I have not been watching the forum in the past week. Here is a link to a page with the horizontal rule:

https://peterboroughchoral.org.uk/

The Custom CSS (one of the suggestions put to me) is currently:
hr {
max-width: 100% !important;
height: 1; }

Ray
  1. more than a month ago
  2. Commercial Templates
  3. # 10
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Ray

Replacing your custom CSS with the following should resolve the issue..

hr {

    max-width: 100% !important;

    width: 100% !important;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 11
Hemingray
Hemingray
Accepted Answer Pending Moderation
0
Votes
Undo
Hello, Ciaran.

Excellent! I replaced the CSS I had with the latest code you have sent me and it has done the trick! The hr now covers the whole width.

Many thanks. I hope that this will also help other people.

Ray
  1. more than a month ago
  2. Commercial Templates
  3. # 12
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok