Recent
Categories
View Replies (9)

Header Background

0
Votes
Undo
  1. Tompakidf2
    Tompakidf2
  3. Commercial Templates
  4. Friday, 25 September 2015
  5.  Subscribe via email
Hello Ciaran,
I came across two other issues at Vitality template:

1. For the typography, from my experience from your them central, the code <div class="page-header"> <h2> </h2> </div> should give a title that has this image ("../images/typo/hr.png";) as underlining element. This does not happen for vitality? The hr.png image is in the template's installation

2. The picture for the Header Background seems NOT to reside inside the <div id="header"> .Thus the picture extends beyond the header and does not scale correctly. Is that the issue or am I doing something wrong?

Thank you again,
Ach
Responses (9)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ach

1. By default our the article titles of our Vitality template does not include any any underlying graphics. An example of the article header of our Vitality template can be seen here.. http://demo.joomla51.com/0123/index.php/j-stuff/singlearticle

2. Would you have a URL to an example of this issue?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Tompakidf2
Tompakidf2
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciaran

1. I asked you because I saw this picture on the templates installation http://taxinicosia.com/templates/j51_vitality/images/hr.png
Also underline is included in other templates from Joomla51 e.g Central

2. The header issue is here: http://taxinicosia.com

Many thanks. I am almost done with the website. I will not bother you much from now on :)

Many Thanks,
Achilleas
  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 Ach

To resolve try adding the following to the Custom CSS field of your templates parameters...


.vegas-slide {

    height: 240px !important;

}


The above CSS will effect your full screen header option so ensure to only add it to styles where this option is disabled.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Tompakidf2
Tompakidf2
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciaran

1. I asked you because I saw this picture on the templates installation http://taxinicosia.com/templates/j51_vitality/images/hr.png
Also underline is included in other templates from Joomla51 e.g Central

2. The header issue is here: http://taxinicosia.com

Many thanks. I am almost done with the website. I will not bother you much from now on :)

Many Thanks,
Achilleas



Hello Ciaran,

Regarding question 1, Is it easy to add some lines of code to get the same functionality and Central

Many Thanks,
Achilleas
  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 you wish you can experiment with some custom CSS and the .page-header class. Maybe something like the following...


.page-header {

    border-bottom: 3px solid #aaa;

    margin-bottom: 10px;

    padding-bottom: 10px;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Tompakidf2
Tompakidf2
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciaran,

I used this
.page-header h2 {
text-align:center;
}
.page-header:after, hr {
background: url("../templates/j51_vitality/images/hr1.png";) no-repeat scroll 50% 0 rgba(0, 0, 0, 0);
content: "";
display: block;
height: 30px;
margin: 0px auto;
position: relative;
top: 20px;
width: 100%;
z-index: 0;
border: none;
}

Works pretty fine.
  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
Excellent!.. thank you for sharing your solution :)

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 7
Tompakidf2
Tompakidf2
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciaran,
I still have the problem with the header background. The picture for the Header Background seems NOT to reside inside the <div id="header"> .The picture extends beyond the header. That is very obvious on mobile where the page scrolls slowly to the left and then the gap at right is visible. The website is http://taxinicosia.com/. I attach a screen shot. The gap is at right side (red circled)

I also did a fresh installation of the template without custom css and the issue is still there.

Many thanks
Achilleas
  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 Achilleas

To resolve try adding the following to the Custom CSS field of your templates parameters...


@media only screen and (max-width: 767px) {

html, body {

    max-width: 100%;

    overflow-x: hidden;

}

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 9
  • 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.