Change Background Color But Keep White In Center Of Page Ps 1.6

[plutten22]

Hi.

 

I have a problem that i would like to have some help with.

 

Im making a new website with ps 1.6.1.2 default theme.

 

I would like to change the background to a (color or picture) but keep the center of the page

white. Also i want the background to be still when i move down on the page.

 

I have tried to make changes in global.css but but nothing works.

 

I attach a picture how i mean of my old website made in ps 1.5

 

Regards

 

Plutten22

[plutten22]

Hi

 

No one knows how to do this. This is strange.

 

Is my explanation bad or is there something I have missed ?

 

Please help me.

 

Plutten22

[plutten22]

Still no answers.

[razaro]

Can you put link to your site not possible to see from image ?

 

But it should not be hard to do that, for background maybe position fixed or background-size: cover.

And to central be white you probably need to change color in few places. 

[plutten22]

Hi

 

Thank you for responding.

 

I am developing a new site with Ps 1.6 based on my existing site that is made in ps 1.5

 

Link to new site: www.cykelstaden.se/cykelstaden2013

 

Existing site: www.cykelstaden.se

 

I would appreciate very much if you can help me.

 

Regards

 

Plutten22

[razaro]

Well there is some work there. Generally you need to remove background from wrapper element and applied same style to container inside.

And there are some styles from theme6 that you need to override or comment out.

body {
    background-color: #282828;
    background: url(http://www.cykelstaden.se/themes/default/css/../img/stockholm.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Here are some code are commented out just for reference, where exactly it is you will see when you disable smarty cache for CSS but probably in global.css and in themeconfigurator/css/theme6

.header-container, .columns-container {
    /* background: url(http://www.cykelstaden.se/cykelstaden2013/modules/themeconfigurator/css/../img/bg-theme6.jpg) repeat 50% 0; */
}
body, #page, header, .columns-container {
    /* background: #D3D3D3!important; */
    /* background-image: none!important; */
}
.header-container {
    background: transparent;
}

#header {
    /* background: url(http://www.cykelstaden.se/cykelstaden2013/modules/themeconfigurator/css/../img/bg-theme6.jpg) repeat 50% 0; */
}

header .banner {
    background: transparent;
    max-height: 100%;
}

header .nav {
    background: transparent;
}

header .nav .container {
    background: #333;
}

.container {
    background: #fff;
}

.footer-container {
    background: transparent !important;
}

.footer-container #footer {
    color: #777777;
    background: #3f3f3f;
    padding: 0 15px;
}

And maybe you need some padding but you can add that later. Also if you want transparent background use

.container {
    background: rgba(255,255,255,0.75);
}

[plutten22]

Hi

 

Thanks for your answer.

 

Can you explain more precisely where and what I need to change.

 

My knowledge is limited.

 

Plutten22

[razaro]

What more info do you need? What parts are not clear?

 

Will try to explain better.

[plutten22]

Hi

 

Tanks for your reply.

 

1. I have never disable smarty cache and i dont understand what it does and how it works and what it can help me whith.

But i would like to learn.

 

2. I viewed the theme6 folder on the ftp server but it did not look like anything you showed.

 

3. I viewed the global.css  in themes/default-bootstrap/css/global.css and it also did not look like you showed.

 

I would appreciate if you could explain more precisely where and what i need to change if it is possible.

 

I have tried to find others who have wanted to do this but have not found anyone that has written about it in the forum.

 

Hope you can help me.

 

Plutten22

[razaro]

Ok can not confirm that this will work as you have smart cache for css enabled

so all css is in one file but try this. Add following code at the end of global.css

.header-container, .columns-container {
     background: none !important; 
}
body, #page, header, .columns-container {
     background: inherit !important;
     background-image: inherit !important;
}
.header-container {
    background: transparent !important;
}

#header {
    background: none !important;
    padding-bottom: 0 !important;
}

header .banner {
    background: transparent !important;
    max-height: 100% !important;
}

body {
    background-color: #282828 !important;
    background: url(http://www.cykelstaden.se/themes/default/img/stockholm.jpg) no-repeat center center fixed !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
}

header .nav {
    background: transparent !important;
}

header .nav .container {
    background: #333 !important;
}

.container {
    background: rgba(255,255,255,0.75) !important;
}

.footer-container {
    background: transparent !important;
}

.footer-container #footer {
    color: #777777 !important;
    background: #3f3f3f !important;
    padding: 0 15px !important;
}

If this code is not displaying ok disable Smart cache for css in back office Advanced Parameters > Performance and also clear cache by clicking 

button in top right corner of that page.That way I could check.

Edited December 9, 2015 by razaro (see edit history)

[plutten22]

Hi

 

Yes it worked. I just need to make some adjustments.

 

How can i make the center colum little wider.

 

Plutten22

[razaro]

Adjust these values, max-width, they are in global.css

@media (min-width: 1200px)
.container {
    max-width: 1170px;
}

@media (min-width: 992px)
.container {
    max-width: 970px;
}

@media (min-width: 768px)
.container {
    max-width: 750px;
}

[plutten22]

Hi

 

Thanks.

 

I tryd adjusting the values you sent but im not getting the effect i want.

 

I want the text and pictures to stay as they are but the center to get just a little wider so that

i get som more space.

 

Is this possible.

[razaro]

Try to add some padding, this line you already have 

.container {
    background: rgba(255,255,255,0.90) !important;
    padding: 0 15px !important;
}

So 15px or more.

[plutten22]

Hi

 

Thanks. Works just fine.

 

But the Quick view function is not working any more

[razaro]

Well Quick view have no connection to previous code you edited so you should open new topic.

 

Also if you need someone to modify/code your theme post in Job offer section.

Edited December 10, 2015 by razaro (see edit history)

[plutten22]

Hi.

 

Thats strange.

 

Bc if i take away  padding: 0 15px !important; quickview works again.

[razaro]

You are right , I apologize, it have connection with container width.

You can try to edit this code to

@media (min-width: 1200px)
.container {
    max-width: 1190px;
}

that influence on this JavaScript code in global.js I think

 

function blockHover(status)
{var screenLg=$('body').find('.container').width()==1170;
.....

 

so maybe you do not need to change that container width in css but just change this js value 1170 to 1150. 

It is total padding you added 2*10px.

[plutten22]

Homerun.

 

It works.

 

Thanks

[plutten22]

Hi again.

 

One thing i noticed today.

 

The top banner dos not fill out edge to edge. I get 10px of white on the sides.

 

How can i solve this.

[razaro]

You can use 

#header .banner .container {
    padding: 0 !important;
}

similar to any other container just put it parent element to be specific.

 

You know basic css is not that hard check https://www.codecademy.com/learn/web good free cource.

[Raheem429]

Hey guys, 

 

I'm really stuck here and I need HELP! :I

 

I screwed up with my Global.css and there is no back up. 

 

My problem is that I can't change the colour of my background into white and I have accidentally changed the top bar and my attempts of fixing it clearly failed. 

I just want to have a plain white background an no grey tones at all. 

 

 

 

Can anyone help here please?

 

 

Raheem

Edited January 14, 2016 by Raheem429 (see edit history)