imagebg - frontpage

I do not understand how to set the image frontpage

Hi

The thing on a screenshot is a panel where You can add a page class suffix. What You need is to add this script to css to change the image:

Code: Select all

.imageBg #gkHeader {
    background: url("/joomla25/simplicity/templates/gk_simplicity/images/header.jpg") no-repeat fixed center 0 #000000;
}


ni image

no image

[/quote]

Hi there - I am totally lost on this as well, and I've been using Joomla since 2005, although I am certainly no expert.

Can you please offer step by step instructions on how to get the background image to the homepage?

Thanks!

Hi

This is really simple. You can specifie which background to use on which page thanks to page class suffix configurable in template settings.

For example let attache a page class suffix called "redimage" (this is totally a name of choice) and attcha it to page with ID 123. Than You need to use code:

Code: Select all

.redimage #gkHeader {
    background: url("/joomla25/simplicity/templates/gk_simplicity/images/header.jpg") no-repeat fixed center 0 #000000;
}


hi,

I created a form with id 228, I set suffixes for pages ItemID 228 - imageBg but no picture

But where do you put that code? If we want the image on the home page, where do we put the code? In the template CSS?

Hi

You both got it wrong. Module ID has nothing to do with it. What You need is a menu item ID, which You can find for example in menu manager on the very left column. Than lets for example use a homepage which in our template's demo has an id 101. Go to template settings and fill the page suffix option like on the screen below.

Next step is to add a code to display the background for this page only to override.css file (remember to allow using of override in template settigs).

no image
http://www.212eyewear.com

Hi

Path to the file is wrong.

In Your case it should be:

Code: Select all

.redimage #gkHeader {
    background: url("../images/header.jpg") no-repeat fixed center 0 #000000;
    border-bottom: medium none;
    margin-bottom: 0;
}


additionaly You need to publish something in header module to have something this background can be used with.

Hi
replaced but nothing .....
www.212eyewear.com

Hi

Path is still wrong. I can see "/joomla25/simplicity/templates/gk_simplicity/images/header.jpg" when it should be "../images/header.jpg"

Also nothing is published in header position.

This query is on a couple of threads now.

I too, am 'listening' in to this, as I will need to change my main picture when I get to commissioning the website.

For something this bold and big, and knowing that everyone who purchases the template would want to change this, you think the developers could have made some simpler way of allowing us to edit this picture (i.e. like media manager for header postion)

That being said though, I love the template!

T

made several tests, including "...images/hader.jpg" the immage you can not see, I'm sorry but this is not templete "semplicity"

now is the following

Code: Select all

.redimage #gkHeader {
    background: url("../images/header.jpg") no-repeat fixed center 0 #000000;
    border-bottom: medium none;
    margin-bottom: 0;
}


meme074

being a bit of a novice at this, I will mention something that is maybe pretty silly to suggest......

Have you got the picture you want to use in your images directory and is it called header.jpg?

Oh yeah, this is

Hi

Path is still wrong. I can see "/joomla25/simplicity/templates/gk_simplicity/images/header.jpg" when it should be "../images/header.jpg"

Also nothing is published in header position.

??????Also nothing is published in header position.

OK, there we are, but because you can not see the menu bar?

Having issue with 3.0 Template. I installed the quickstart. Even replace the image it was showing up and then bam... it went away? Whats going on here?

Thank you

Hi

@templeton - the easiest way is to simply replace the image which was used on the template demo in templates /images/header.jpg

@signagefactory - this is a matter for a different thread, please create it and give as many informations as You can there.

@meme074 - please send me an access to Your website. I'll make it for You.

hi teitbite,
http://www.212eyewear.com

now seems to be fine ... thanks for your support

I posted in the 3.0 thread.

Need to figure this out.

Hi

@meme074 - I'm glad it worked.

@signagefactory - I can see Bartek already took care of Your question.

Can we close this thread now. This is more about an individual approach, so may lead other users to wrong solution.

Hi teitbite

Thanks for your quick response.

It works well.

I have kept the new header pictures I have created the same pixels as the default ones.

By doing this simple change, will the pictures be responsive still?
T

Hi

Image is being added via background so it will not be responsive, but You can use an additional code to make it resize (unfortunately will not work on every device).

Code: Select all

.redimage #gkHeader {
background-size: 100% auto !important;
}


I need help with this...I want to be able to change the head image easily....no fuss. Please advise.

I need help with this...I want to be able to change the head image easily....no fuss. Please advise.

Hi

Like I've said already the easiest way is to simply replace the image keeping the same name at template's /images/header.jpg

Hi

Image is being added via background so it will not be responsive, but You can use an additional code to make it resize (unfortunately will not work on every device).

Code: Select all

.redimage #gkHeader {
background-size: 100% auto !important;
}


Silly question Teitbite......

You are right. Due to the image header picture and not CSS, it looks shocking. The rest of the page looks fantastic with the responsive style.

Regarding your code above, where do I place this?
And do I put it anywhere in the chosen file?

i just tried to apply it to a page and it worked but the "white menu" is still visible:

http://spizzerb.com/index.php/angebote-und-services

how can i change the menu to the same as the "home" page?

also the suffix for nomobile and notablet seem not to work.. i placed the suffix in the newly created header module.

any ideas?

Thanks

i just tried to apply it to a page and it worked but the "white menu" is still visible:

"wrong url"

how can i change the menu to the same as the "home" page?

also the suffix for nomobile and notablet seem not to work.. i placed the suffix in the newly created header module.

any ideas?

Thanks

Wrong url and to late to edit.. sry

correct url:

http://spizzerb.com/index.php/unternehmen

Hi

@templeton all modifications should be done to override.css file but please remember that override needs to be enabled in template settings.

@spizzerb please send me an access to joomla site. I need to compare Your settings with quickstart, because menu is using a different code in both cases.

Hi

@spizzerb please send me an access to joomla site. I need to compare Your settings with quickstart, because menu is using a different code in both cases.

check your pm's

thanks

Hi

I've asked programmers, becuase I do not see problem in configuration. Will let You know when thy will answer.

Hi

I've asked programmers, becuase I do not see problem in configuration. Will let You know when thy will answer.

Thanks!

Is this for both issues? Menu and suffix for nomobile, notablet?

Do you know where i can change the height of the header image?

Hi

Height can be set with this class:

Code: Select all

.imageBg #gkHeaderMod {
    padding: 180px 0 130px;
}


Hi teitbite

You mentioned that the code to make the background image responsive will not work on every device... do you know offhand which browsers will not support this? Just wondering whether to implement this or not. It looks great as responsive...

Thanks!


.redimage #gkHeader {
background-size: 100% auto !important;
}

Hi

Some older devices I believe. Most of present mobile browsers got this option supported.

aha... i am very sorry but i am getting the following error when i try to add the suffix in the features page of the template settings.

specified rule exists error