1. MySigma
  2. Sherlock Holmes
  3. Commercial Templates
  4. Friday, 03 February 2017
  5.  Subscribe via email
Hi Ciarán,

I'm currently building a website for different languages (starting now with EN and DE) with the template Hannah. My problem is that I don't know where to place the language selector (flags). :(
In my opinion language selector should be on top and fixed... like the hornav menu.... somewhere on the right side?

And the secon question... (maybe I'm blind) ... is there a possibilty to add a background image for the website?

Kind regards and greetings from Austria,
Manfred
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Setting your image to 100% on both height and width will cause your image to distort and have incorrect ratios on most screen sizes. As screensizes vary so much it is impossible to have a one size fits all without either cropping, letter boxing or distorting the image.

I would suggest the following article which details how to hide the component/article area of your template which will remove some of the scroll and whitespace... https://joomla51.com/tutorials/item/hiding-the-component-article-area-on-a-page

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

I love my customer... I'm not done :( The background is still not perfect, it's good but not perfect... the words of my customer...

"The background image should always fit into the display"... This means, independent of the screen resolution, the background image should be completely visible. Height and width should be 100% of the screen resolution.

My screen resolution: 1680 x 1050px
Taking a look into my project, it seems that the slideshow is a little bit to high and therefore I'm getting a scrollbar. Scrolling down a little bit, I'm seeing the rest of the background image (a beach and some waves). I've reduced the height of the slideshow until the scrollbar disappears. Now, half of my background image is gone.

What my customer would like to have: The "Home" page should only contain the main menu, the slideshow with a few pictures, the background image in full size and NO scrollbar. All other pages could have a scrollbar but the background images should always be fully visiable. I think it could be a problem if there is a scrollbar and the background picture is getting larger and larger and distorted because of "100% height". Maybe the background image should remain fixed, optimised for the screen resolution...the background image is not scrolling.

You can see the current custom CSS a few postings above and I attached a screenshot to explain what I exactly mean. :)

Do you understand what I mean? English is not my native language, so it's a little bit hard to eplain.

Thank you for your help and assistance! :)

https://www.twisst-mocktails.com/xbug/missing_background.jpg
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciarán!

AHHHHHH.... NICE :)

Thank you and kind regards!
Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

You can add the suggested CSS to the end of the CSS in your post.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciarán,

There is already this style within the custom css. Here is the content of custom css:


#container_main .wrapper960 {
background-color: transparent;
}

#container_header-sticky-wrapper {
position: relative;
top: 0;
z-index: 1;
}

#body_panel {

background-image: url("https://www.twisst-mocktails.com/xnewweb/images/web/beach_bg.jpg");
background-size: cover;

}

#container_slideshow {
background-color: transparent;

}

#container_header_slide, #container_header {
opacity: 0.8;
}

#container_header-sticky-wrapper {
top: 20px;
}

#container_slideshow {

padding-top: 64px;

}

.hornav > ul > li.active {

border-bottom: 1px solid #ffffff;

}

.hornav > ul > li:hover {

border-bottom: 1px solid #ffffff;

}

.hornav > ul {
width: auto;
}
.hornav > div {
display: inline-block;
width: auto;
}


Kind regards,
Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Manfred

Appears we were looking at the wrong site :)

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

#container_header-sticky-wrapper {
top: 0;
}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciarán,

Browser: FireFox and IE

https://www.twisst-mocktails.com/TWISST_white_bar_on_top.jpg

The green main menu bar is a few pixel displaced downwards and you see a white bar on top. Scrolling down, the white white bar disappears.

Kind regards,
Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 7
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Manfred

So we understand you correctly could you include a screenshot of the white bar in question?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 8
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciarán,

The main menu is now clickable but it slipped a little bit downwards and a white bar is now visible on the top. ;)

Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 9
Accepted Answer Pending Moderation
0
Votes
Undo
Happy to help! :)

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

#container_header-sticky-wrapper {
position: relative;
top: 0;
z-index: 1;
}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 10
Accepted Answer Pending Moderation
0
Votes
Undo
I've just found a little bug!? When you open the website, the navigation (including the flags) are visiable but you can not click it. You need to scroll down a little bit and the menu and language flags active / possible to click. Something is overlaying the menu !?

Kind regards,
Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 11
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciarán!

Only one word: Awesome! Your support is fantastic !!!!!!! Never seen that before....

A very very satisfied customer,
Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 12
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

I have edited your template to also load the 'hornav' module position along with your main menu.

To set a background image try adding the following to the Custom CSS field of your templates parameters (edit to taste)...

#body_panel {
background-image: url("https://www.twisst-mocktails.com/xnewweb/images/web/beach_bg.jpg");
background-size: cover;
}
#container_slideshow {
background-color: transparent;
}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 13
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Manfred

By default these options are not available however if you can send temporary administration access to your Joomla installation to info@joomla51.com and we will examine the possibility further. For our reference please paste a link to this post in your email.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 14
  • Page :
  • 1


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

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.