Different Image

Hello,

Could you outline steps to recreate frontpage's main image (sliders) on other pages.

There are multiple ideas throughout Forums with no clear solutions.

Hi

As a first step please duplicate the module and publish in a new page. Second step is to add a page class suffix "nobg" using template configuration panel.

Q: Now I'm lost... template configuration panel under templates?

Or modules?

Q: How do I display a different image behind sliders?

Hi

As a first step please duplicate the module and publish in a new page. Second step is to add a page class suffix "nobg" using template configuration panel.

Hi

Sorry I missunderstood You in the first part of the question. An image behind is placed using css code. This is the code:

Code: Select all

#gkHeader.nobg {
    background: url("../images/header_bg.jpg") no-repeat scroll center top transparent;
    min-height: 760px;
}


You can add the same code leading to a different image to override.css file, but remember to enable using override in template configuration.

Also suffix needs to be added to a module parameters not template as I've mentioned earlier.

I turned on override and then pasted this into override.css:

But regardless of adding a different image... the image from frontpage is still coming up.




/*
#------------------------------------------------------------------------
# Startup - October Joomla! template (for Joomla 2.5)
#
# Copyright (C) 2007-2012 Gavick.com. All Rights Reserved.
# License: Copyrighted Commercial Software
# Website: http://www.gavick.com
# Support: [email protected]
*/
#gkHeader.nobg {
background: url("../images/header_bg1.jpg") no-repeat scroll center top transparent;
min-height: 760px;
}


/* Here you can include your override CSS styles */

I turned on override and then pasted this into override.css:

But regardless of adding a different image... the image from frontpage is still coming up.




/*
#------------------------------------------------------------------------
# Startup - October Joomla! template (for Joomla 2.5)
#
# Copyright (C) 2007-2012 Gavick.com. All Rights Reserved.
# License: Copyrighted Commercial Software
# Website: http://www.gavick.com
# Support: [email protected]
*/
#gkHeader.nobg {
background: url("../images/header_bg1.jpg") no-repeat scroll center top transparent;
min-height: 760px;
}


/* Here you can include your override CSS styles */

Ok...

the code that you suggested I use in override is changing frontpage's image as well.

I would like to use a different image from frontpage/

How would I code that?

Hi

If You want a different image for different page You need to create different module suffixes. For example " page-120" than the code to load an image for this particular module will be:

Code: Select all

#gkHeader.page-120 {
    background: url("../images/header_bg.jpg") no-repeat scroll center top transparent;
    min-height: 760px;
}


Hi

If You want a different image for different page You need to create different module suffixes. For example " page-120" than the code to load an image for this particular module will be:

Code: Select all

#gkHeader.page-120 {
    background: url("../images/header_bg.jpg") no-repeat scroll center top transparent;
    min-height: 760px;
}


This is what I did::


#gkHeader.page-120 {
background: url("../images/1.jpg") no-repeat scroll center top transparent;
min-height: 760px;
}

/* Here you can include your override CSS styles */


Frontpage is now correctly showing chosen image. However #gkHeader.page-120 is not showing 1.jpg.

I recently asked for the same thing and it was answered http://www.gavick.com/forums/startup-jo ... 21713.html

I recently asked for the same thing and it was answered http://www.gavick.com/forums/startup-jo ... 21713.html

Thanks... this one is a little more complex than the usual click and copy.

Hi

Dziudek presented one of the possible solutions. I'm more of a CSS fan, so will try and make it differently.

@Poppie please show me an exact page where You have this module. Ans send me an access to Your joomla panel.

Hi

Dziudek presented one of the possible solutions. I'm more of a CSS fan, so will try and make it differently.

@Poppie please show me an exact page where You have this module. Ans send me an access to Your joomla panel.

Hi... just pm you. Thank-you!

Hi

Dziudek presented one of the possible solutions. I'm more of a CSS fan, so will try and make it differently.

@Poppie please show me an exact page where You have this module. Ans send me an access to Your joomla panel.

http://www.thuto.us/why-thuto

1. created new module
2. new page suffix
3. css code in override.css is


#gkHeader.page-120 {
background: url("../images/header_bg2.jpg") no-repeat scroll center top transparent;
min-height: 760px;
}

3. created new images and titled as follows:

a) header_bg2.jpg
b) header_bg_mobile2.jpg
c) header_bg_tablet2.jpg

PM'd you Joomla User details for www.thuto.us

Thank-you for your help

Hi

It's so good to have an access and not need to guess. I was mistaken in a part of my previous posts sorry. This solution is legit:

1. Check the ID of a page, You can make it in menu menager (the page You have shown me as example is 606)

2. In template settings add a page class suffix to a page with ID You've learned in previous point. I've used "p606" for page with ID 606, to make it easy.

3. Make sure override is enabled (it wasn't in Your template configuration)

4. Add a CSS code to override.css which will load this image:

Code: Select all

.p606 #gkHeader {
    background: url("../images/header_bg2.jpg") no-repeat scroll center top transparent;
    min-height: 760px;
}


As You can see the name of the class created in point 2 is at front with dot at the beginning.

That's all

That did work! Final Questions regarding header:

Is it possible to use code in override.css to reposition Title and buttons of Slider?

And if so, what is the code?

Please see attached example of what I mean.

Hi

All depends where do You want to move it, but the code is there already to position it. Please just try to play with values:

Code: Select all

.gkIsWrapper-gk_startup .gkIsText.active {
    left: auto;
    margin: 0;
    right: 0;
    text-align: right;
    top: 429px;
}


Hi

All depends where do You want to move it, but the code is there already to position it. Please just try to play with values:

Code: Select all

.gkIsWrapper-gk_startup .gkIsText.active {
    left: auto;
    margin: 0;
    right: 0;
    text-align: right;
    top: 429px;
}


Hi... don't know where this code is?

1. Front page has to be independent from

2. Other page's images etc.

3. So should this be in override.css??

Hi

You should keep all css changes in override.css than when template updat is released You will not use Your changes if all will be in one file.

If You want to separate this change by module simply add a module class suffix and use it with this code:

Code: Select all

.some_module_class_suffix .gkIsWrapper-gk_startup .gkIsText.active {
    left: auto;
    margin: 0;
    right: 0;
    text-align: right;
    top: 429px;
}


Hi

You should keep all css changes in override.css than when template updat is released You will not use Your changes if all will be in one file.

If You want to separate this change by module simply add a module class suffix and use it with this code:

Code: Select all

.some_module_class_suffix .gkIsWrapper-gk_startup .gkIsText.active {
    left: auto;
    margin: 0;
    right: 0;
    text-align: right;
    top: 429px;
}


Could you have a look at http://www.thuto.us/why-thuto.

Need to move wrapper to the right but it's not going in that direction.

What is wrong with the code below?


.p606 .gkIsWrapper-gk_startup .gkIsText.active {
left: 450;
margin: 0 0 0 200;
right: 0;
text-align: right;
top: 100px;
}

Hi

Here is the code that made it:

Code: Select all

.p606 .gkIsWrapper-gk_startup .gkIsText.active {
    left: auto;
    margin: 0;
    right: 0;
    text-align: right;
    top: 100px;
}