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!