Recent
Categories
View Replies (15)

Adjust Horizontal Ruler

  1. Issue
0
Votes
Undo
  1. webneus
    webneus
  2. Sherlock Holmes
  3. Commercial Templates
  4. Thursday, 06 June 2024
  5.  Subscribe via email
Hi Ciaran,
I want to add the HR so that there is a better separation between the news articles. The HR is now very narrow and I want to make it thicker and longer. I saw this tip but it doesn't work for me.

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

Can you help further?

Greetz Maikel
References
  1. https://emm.webneus.nl/index.php/nieuws
Responses (15)
eumel7
eumel7
Sherlock Holmes The Voice Notable Answerer
Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
I'm not ciaran but maybe my solution will help you too.
You have to copy the code into your template styles in the settings in the tab: "CUSTOM CODE"...



hr {

  max-width: 90%;

  margin: 15px auto 20px;

  border-top: 10px;

}


You can then adjust the numerical values ​​of the code as you wish
  1. more than a month ago
  2. Commercial Templates
  3. # 1
webneus
webneus
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Eumel7,

Unfortunately this doesn't work for me. Placed it in the Custom CSS

But thanks!

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

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

hr:not([size]) {

    border-top-width: 5px;

    max-width: 300px;

}


Edit to taste

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
webneus
webneus
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

Still not working my friend.

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

I am not seeing the suggested CSS in your source code. Do you have multiple template styles created? If so, could you try adding the CSS to each of the styles.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
webneus
webneus
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

1 style with code in CSS see attachment,

Maikel
Attachments (1)
style.JPG style.JPG
  1. more than a month ago
  2. Commercial Templates
  3. # 6
eumel7
eumel7
Sherlock Holmes The Voice Notable Answerer
Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Just a try. When I look at your picture, could it be that the code above the rule is missing the final "}" ??
Attachments (1)
Unbenannt-1.jpg Unbenannt-1.jpg
  1. more than a month ago
  2. Commercial Templates
  3. # 7
webneus
webneus
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Eumel,

Sharpe! But still not working.

Maikel
  1. more than a month ago
  2. Commercial Templates
  3. # 8
eumel7
eumel7
Sherlock Holmes The Voice Notable Answerer
Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Too bad.
Apart from the fact that you inserted the code in the wrong template style, I can't think of anything else...
Sorry
  1. more than a month ago
  2. Commercial Templates
  3. # 9
FrancW
FrancW
Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo 


hr:not([size]) {

  height: 3px;

}

works for me
  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
Hello

Could you try placing the CSS at the start of the field rather than at the end? If there is any errors in CSS, CSS after the error will not get applied.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 11
webneus
webneus
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

Still not working,:(

Maikel
  1. more than a month ago
  2. Commercial Templates
  3. # 12
eumel7
eumel7
Sherlock Holmes The Voice Notable Answerer
Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Can you paste your entire CSS code here?
  1. more than a month ago
  2. Commercial Templates
  3. # 13
FrancW
FrancW
Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
try this


hr {

  height: 1px;

  max-width: 300px;

  margin: 15px auto 20px;

  background-color: transparent;

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

}
  1. more than a month ago
  2. Commercial Templates
  3. # 14
webneus
webneus
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi FrancW,

Thanks my friend, problem solved!

Maikel
  1. more than a month ago
  2. Commercial Templates
  3. # 15
  • 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.