Simplicity Background Image

Hello,

Apologies for the newbie question. I've just moved from Yootheme to Gavick so am not quite into the swing of things.

Anyway, it's a mind bogglingly simple problem. I can't seem to find the simple info on how to change the background, so it's like the one in the demo.

I have a new image. Changed the template.css to include this:

}

.imageBg #gkHeader {
background: #000 url('../web.ear-trumpet.net/templates/gk_simplicity/images/sm1366x768.jpg') no-repeat center 0;
background-attachment: fixed;
border-bottom: none;
margin-bottom: 0;
}

Put image in '/images' folder. But no dice. What am I doing wrong? I have read in forums about adding imageBG suffix. Where though?

Thanks in advance, N

Could You please post an url to your site?

Also, what is most important - never modify core template files, use override.css instead and remember to enable it in template settings - advanced section.

Thanks for your reply. Dziekuje bardzo.

Domain: web.ear-trumpet.net

I've just started the site.

Would you mind doing a step by step?

Best, N

It do not work because .bodyBg is not assigned to homepage - it's called page suffixes and you can read about it here:
http://www.gavick.com/documentation/gen ... mla-pages/

So if You add .bodyBg to homepage, then using:

Code: Select all

.imageBg #gkHeader {}


will work correctly.

I'm sorry but that didn't work (the way I've done it anyway) and I found the documentation quite difficult to understand. (Apologies)

That post was titled 'How to disable content on selected pages', but I just want to enable the background image. Do I really need to put be putting in CSS overrides for that? Is there more comprehensive step by step documentation for people who are new to the Gavick methodology?

Just to recap: I put a new rule in features, '101=bodyBG'.
Then added: .imageBg #gkHeader {} to override.css

Nothing happened. Sure I'm probably just being an idiot. But I'm not getting the system at all yet...

Well, If You are not known to css modification, perhaps it would be better if You would start with quickstart installation instead of template installation - then all will be set and You can modify without the need to recreate everything?

Well, If You are not known to css modification, perhaps it would be better if You would start with quickstart installation instead of template installation - then all will be set and You can modify without the need to recreate everything?

I thought of that. But my Joomla is already installed.

I do know some css and modifying hasn't been a problem before. But with those instructions it didn't seem to cover areas in much depth.

I tried adding other suffixes: such as 'noBreadcrumb' to id 101 (home) but nothing happened. What am I missing here?

Is there a list of commonly used suffixes?

I have described to You how suffixes works - You add one and then in css take use of it to change the look of common elements only on that particular page.

but whats most important:

Code: Select all

.imageBg #gkHeader {}


will not do nothing, because it doesn't consist any declarations inside.

Okay. Not sure why you have suffix of 'bodyBg' and css override of 'imageBg' ?

Right now I have suffix of 'imageBg' and and css in override.css of:

.imageBg #gkHeader {background: #000 url('../web.ear-trumpet.net/templates/gk_simplicity/images/sm1366x768.jpg') no-repeat center 0;
background-attachment: fixed;
border-bottom: none;
margin-bottom: 0;}

But, now there is the original image but and not my image (sm1366x768.jpg)... So I guess it's taking the image from the template.css. How do I get it to take from override.css?

Thanks for your help. N

Oops! Just saw that you need 'css override' enabled. Mine was not.

Dzieki bardzo. N

I'm not quite sure if You are familiar with FireBug or Chrome DevTools. With suffix You can check, that its name is added as class to body element, so css writing this way:

Code: Select all

.myCustomSuffix #someElement {... declarations ...}


will affect only element with id someElement that is a child of .myCustomSuffix class element - this way for example You could create different background image for every page (Yea, I know its stupid example) - just by using different suffixes for pages, and then in css using them as main class selector.

Hi, yes familiar with firebug. Thanks for the help here, think I'm getting used to the system you guys have. Still teething problems though unfortunately, I'll ask in another question.

Yeah, its a good idea to post every question with new forum thread. You will get tour answer more quickly this way.

Also, what is most important - never modify core template files, use override.css instead and remember to enable it in template settings - advanced section.

Cyberek, I am just getting used to the system you guys have at GavickPro, got it about override.css - great idea to have a separate file for css tweaks. What about codes that have to usually go into index.html <head> or <body>, like meta geo- from Google and other CEO pieces of code like metricks, trackers and stuff - do you guys have special file for those things too? As of now I had to put it directly into default.php, but wonder if you have that issue covered too like you have with css? Thanks!

OOTB templates works with google analytics code (ID can be submitted in template settings). Other things need to be placed directly into files.
layouts/default.php is probably the one you are searching for.