Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Set Page Background Color

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hello,

Is there a way to set the template page background color to pure white?

I checked in template manager, theme magic, the forum, and the template documentation, though maybe I overlooked something key or obvious.

Thanks!
  • BUser100's Avatar
  • BUser100
  • 6 Month Developer
  • 81 posts
  • Karma: 0
The administrator has disabled public write access.
Sure you just need to add the following to your custom.css file:

#gradient {background:#fff}

Cheers Anthony
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
Hello,

Thank you for the input and apologies for the delay in response.

I tried it out and I didn't see a visual difference where I was looking for it, which made me think maybe I was asking for a change in the wrong location and I can provide more clarity.

I am using a custom module with content to be the main content on the home page. content added in that module shows up with a white background, though the space around it appears to be a share of gray. Image is attached for reference. Is there a way to have the entire custom module background be all white (and not just the area directly behind text characters or an image)?


bk1_2013-12-12.png



Thank you!
  • BUser100's Avatar
  • BUser100
  • 6 Month Developer
  • 81 posts
  • Karma: 0
The administrator has disabled public write access.
Hi

Can you add a link for the site?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi, it's currently on the host with the host-defined domain name (not the vanity domain that will ultimately be used). I just sent a support ticket with the info (not sure if sharing the host-defined name publicly is of any security concern so just put it in a ticket).

Let me know if you need anything else at all

Thanks,
Dan
  • BUser100's Avatar
  • BUser100
  • 6 Month Developer
  • 81 posts
  • Karma: 0
The administrator has disabled public write access.
ok - thanks
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Yes sure it looks liek you may need to specify an !important after the #gradient rule int he custom.css file.

#gradient{background:#fff !important}

In this template we grouped all of the bg colours together so if you want to change it across the board you need to apply it to all selectors:
#grid1wrap .zen-container, #grid2wrap .zen-container, #grid3wrap .zen-container, #grid4wrap .zen-container, #grid5wrap .zen-container, #grid6wrap .zen-container, #mainWrap .zen-container, #bottomrow .zen-container, #gradient, .items-more, .headline, .subheading, .result-created, ul.simple li {background:#fff !important}

Thanks Anthony
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
That did it!

All is looking great - I wouldn't have been able to figure that one out myself. Thanks very much for your help!
  • BUser100's Avatar
  • BUser100
  • 6 Month Developer
  • 81 posts
  • Karma: 0
The administrator has disabled public write access.
Thanks for update :)

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Just what I needed, did all the above to change general background, but modules in sidebar and article title (box) still displays in the light grey

Also is there a quick way to change all text colour?

Thanks

this is what I added to my custom.css file:
#gradient {background:#09a57e!important}
#grid1wrap .zen-container, #grid2wrap .zen-container, #grid3wrap .zen-container, #grid4wrap .zen-container, #grid5wrap .zen-container, #grid6wrap .zen-container, #mainWrap .zen-container, #bottomrow .zen-container, #gradient, .items-more, .headline, .subheading, .result-created, ul.simple li {background:#09a57e !important}

Sean
  • Sean's Avatar
  • Sean
  • 12 Month basic
  • 207 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.
Hi Sean,

Do you have a link for the site?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul,

I'm only mucking about with right now to see what is possible. This is an existing site which I have copied to a test zone in order to experiment. The communication graphic concept is about to be re-vamped for the school and company.

www.edgeneve.ch/test

the original (untouched and functioning is just www.edgeneve.ch)

Basically I'm trying the following without great success:

- getting all the article and grid spaces to be a solid colour
- getting rid of light borders
- getting the tabs where the article titles are shown to match the page background
- article text displayed on solid colour to be white
- wondering if I can have the front page as the solid colour for the slide modules, then rest of site in white as usual?
- wondering if there is a way to get the header photo to be different for a part of the site

lots of questions. Can't seem to find the code in the css that I can change and paste into the custom file.

cheers

Sean
  • Sean's Avatar
  • Sean
  • 12 Month basic
  • 207 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.
Hi Sean,

A lot of stuff here :)

Looks like you have covered 1

.sidebar .moduletable {border:0;} will remove sidebar border

Tabs meaning the home page tags being green?
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
p {color: #fff;}

a:hover {
color: #09a57e;
}

You will need to change the link hover text

Not quite sure with some of the others exactly what you mean
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
"wondering if there is a way to get the header photo to be different for a part of the site"

Would depend on how many different images you wanted to show but if its just a couple then you could use theme magic with different template styles assigned to different pages

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Wow , thanks Paul, I will be trying all of those.
Of course setting diffrent versions of template for different areas, why didn't I think of that???

Yes by tags I meant home page tabs of slide area so it is all green.
But also the rectangle where the article title is.


Will report back :-)

Sean
  • Sean's Avatar
  • Sean
  • 12 Month basic
  • 207 posts
  • 1 Thanks
  • Karma: 0
Last Edit: 6 years 3 months ago by Sean.
The administrator has disabled public write access.
So tab wise you would need to override

#sliderwrap ul.nav-tabs {
background: #fafafa;
background-color: #fcfcfc;
background-image: -moz-linear-gradient(top,#fafafa,#fff);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fafafa),to(#fff));
background-image: -webkit-linear-gradient(top,#fafafa,#fff);
background-image: -o-linear-gradient(top,#fafafa,#fff);
background-image: linear-gradient(to bottom,#fafafa,#fff);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffffffff', GradientType=0); }
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
Last Edit: 6 years 3 months ago by manh.
The administrator has disabled public write access.
But also the rectangle where the article title is -

This is the styling currently applying

article .article-title {background: #fafafa;
background-color: #fcfcfc;
background-image: -moz-linear-gradient(top,#fafafa,#fff);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fafafa),to(#fff));
background-image: -webkit-linear-gradient(top,#fafafa,#fff);
background-image: -o-linear-gradient(top,#fafafa,#fff);
background-image: linear-gradient(to bottom,#fafafa,#fff);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffffffff', GradientType=0);
}
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hello,

As this is part of the same topic , I will continue the convo.
Thanks to numerous forum help I have successfully transformed my sites to what I needed.

One last thing, how do I get rid of the thin white line on top of the article space (now coloured) ?

www.edgeneve.ch
www.edgeneve.ch/bjg

Oh, and the font I have substituted means that the ticks in the small boxes on the tabs of the front page slide areas do not come up (replaced with some other symbols) anyway I can tweak that?

cheers

Sean
  • Sean's Avatar
  • Sean
  • 12 Month basic
  • 207 posts
  • 1 Thanks
  • Karma: 0
The administrator has disabled public write access.
The thin line

#gradient {border-top: 1px solid #fff;}

Try adding that with your own colour or remove it

#gradient {border-top: 0;}
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers