Page 1 of 1

Changing Background of Protostar/Beez3

Posted: Thu Oct 17, 2013 12:13 pm
by alani
I tried changing background color via css files and it did not work. Specifically in templates prostar template.css and beez3 in both personal.css and template.css.

Then I succeeded by changing background color under Template->Options, with entering the color value, e.g. #ffcccc, directly in the text box - setting via the palette does not seem to work until after first setting once in the text box. After doing that I see that no template css files have changed, so the setting must be elsewhere.

So 2 questions
1. Where is the background setting value stored?
Will same location apply to change background image?

2. Modifying via the template did not work for me first time. Is there a small Joomla bug there?

Alan

Re: Changing Background of Protostar/Beez3

Posted: Thu Oct 17, 2013 1:03 pm
by imanickam
The template style's optional values are stored in the database table xyz_template_styles, where xyz_ is the database prefix of your Joomla! site.

What version of Joomla! is being used?

Re: Changing Background of Protostar/Beez3

Posted: Sun Oct 20, 2013 10:27 am
by alani
Thanks for the DB table info to know how this works. The Joomla version is 3.1.5.

How can I set a background image since the templates do not provide such an option?

Re: Changing Background of Protostar/Beez3

Posted: Sun Oct 20, 2013 12:29 pm
by imanickam
You could change the following css entry to add the background-image. This css is available in the file template.css that is located in the directory /templates/protostar/css

Code: Select all

body.site {
	border-top: 3px solid #0088cc;
	padding: 20px;
	background-color: #f4f6f7;
}
Note: Make sure to take a copy of the file before editing it.

Re: Changing Background of Protostar/Beez3

Posted: Mon Oct 21, 2013 8:01 pm
by alani
I added background image and changed background color to that file, C:\inetpub\wwwroot\joomla_3.1.5\templates\protostar\css\template.css as follows
body.site {
border-top: 3px solid #0088cc;
padding: 20px;
background-color: #3333FF;
background-image: url('/images/joomla_green.gif');

And neither seems to apply. On my article page the background is pink per setting under protostar template option background color setting #ffccf5.

What am I missing?

Re: Changing Background of Protostar/Beez3

Posted: Tue Oct 22, 2013 4:29 am
by 9themestore
Hi alani,

You don't have the close tag "}". So your CSS code section is wrong. Copy the bellow CSS code section and paste to your template.css file.

Code: Select all

body.site {
  border-top: 3px solid #0088cc;
  padding: 20px;
  background-color: #3333FF;
  background-image: url('/images/joomla_green.gif');
}
Regards

Re: Changing Background of Protostar/Beez3

Posted: Tue Oct 22, 2013 9:54 am
by alani
Thanks. I have the close }, but had neglected to copy it. Here is the full style to be sure it's correct syntax

body.site {
border-top: 3px solid #0088cc;
padding: 20px;
background-color: #3333FF;
background-image: url('/images/joomla_green.gif');
}

Re: Changing Background of Protostar/Beez3

Posted: Tue Oct 22, 2013 10:15 am
by 9themestore
Hi,

I think the fast solution you should post your site url here, we'll help you debug it.

Re: Changing Background of Protostar/Beez3

Posted: Tue Oct 22, 2013 1:17 pm
by alani
Hi,

My site is on my PC, localhost, so cannot give that site access. If there is a public Joomla location where I can create a site, I can recreate the scenario.

Can you and others change the background color (and set the background), using these templates, by modifying only the css file as recommended in earlier replies?

Re: Changing Background of Protostar/Beez3

Posted: Tue Oct 22, 2013 2:20 pm
by imanickam
Hope you are having the image joomla_green.gif to the directory \templates\protostar\images.

Change the following attribute to as shown below:

What you have now:

Code: Select all

background-image: url('/images/joomla_green.gif');
Suggested:

Code: Select all

background-image: url('../images/joomla_green.gif');
or

Code: Select all

background-image: url(../images/joomla_green.gif);

Note:
Generally, in these situations you could use the tool FireBug to inspect elements and view the css entries.

The tool FireBug that is available in browsers such as FireFox and Chrome could be used for this purpose. With FireBug you can inspect an element in a web page and find out its css entries and in which file the entries are located. You could even change the css entries to see how it affects the look and feel of your site. Once you are satisfied you could incorporate the changes in the actual file.

Review the file http://docs.joomla.org/Tutorial:Using_F ... la_Website for more information about how to use FireBug.

Re: Changing Background of Protostar/Beez3

Posted: Tue Oct 22, 2013 5:48 pm
by alani
Yes, moving the image to the template images folder and changing the URL did it - thanks. (Previously I had image in the Joomla images folder).

Thanks so much for all the help!

The background color is still taken from template configuration and not the css background-color attribute.

Re: Changing Background of Protostar/Beez3

Posted: Wed Aug 06, 2014 12:23 pm
by clebinho75
Hi my friends!
I know this topic is pretty old, but I don't want to create a new one, then I have a question:
How can I stop move the background image? I could put the image like you said here, it worked perfectly, but when I scroll down the informations the image go down too.
Thank you!
PS: I'm using protostar and joomla 3.3

Re: Changing Background of Protostar/Beez3

Posted: Wed Aug 06, 2014 12:55 pm
by imanickam
Probably you could use the css attribute background-attachment for achieving what you want.

Suggest reviewing the page http://www.w3schools.com/css/css_background.asp; especially the link "How to set a fixed background image".

Re: Changing Background of Protostar/Beez3

Posted: Wed Aug 06, 2014 2:16 pm
by clebinho75
It worked perfectly, THANK YOU VERY MUCH!

Re: Changing Background of Protostar/Beez3

Posted: Mon Dec 01, 2014 11:42 am
by jlz13fr
Hello,
I have a strange issue when I try to change my background image (protostar template)
I modified my template.css I followed your instructions but it does' nt works.
(I used Full Supersized extension but now I prefer to have a simple background image.
I unpublished the module)

When I analyse my page with firebug I see this strange input for my background area. See first (capture, capture2 and capture3 files).
When I modify in firebug (see capture2 file) the entry in this area it's works but I don't know where comme from this css element!!? see the result in capture3 file.
I definitely need skills on firebug!
best regard

Re: Changing Background of Protostar/Beez3: OK solved

Posted: Mon Dec 01, 2014 5:11 pm
by jlz13fr
hi,
I still worked on this problem and I tried to do this:
firstly I created an addon to my template.css file named modif_du_css.css where I added change on body.site entry with "background-color: green; for test.
secondly I modified index.php an add this addon

we can see the result in my capture4 file
Why do I still have this background-color to #f4f6f7!?
Where come from these changes!?
I'm wrong somewhere
regards,

All is in index.php in template directory

Re: Changing Background of Protostar/Beez3

Posted: Sat Dec 06, 2014 6:38 pm
by xanterra
Hello, I have the same issue and read al this article befor sending my question, unfortunately manually editing the template.css still did not work for my site neither nor changing via palette in backend.

Site;
http://www.s497735293.onlinehome.us/joomla/
In template.css I have below settings:

body
{
background: #857575;
color: #857575;
font-size: 100.1%;
padding: 0px;
text-align: center;
}

body.contentpane {
width:auto;
margin:10px;
text-align: left;
}
img { border: 0 none; }


Can someone please help me to see what I am missing or do anything else to change my background colour?

Thans in advance

Re: Changing Background of Protostar/Beez3

Posted: Sat Dec 06, 2014 8:04 pm
by Per Yngve Berg
Your template does not have a template.css. It's set in red.css.

Re: Changing Background of Protostar/Beez3

Posted: Sun Dec 07, 2014 1:34 am
by xanterra
Hello Per Yngve Berg, thanks for pointing out the correct .css file.
In red. css file i have noticed that there are few reference to background colour, i have enclosed the file for your information.

Can you please tell me in which line i should change the background colour?

Re: Changing Background of Protostar/Beez3

Posted: Sun Dec 07, 2014 9:07 am
by Per Yngve Berg
Use your browser's Diagnostic Tools to Inspect.

https://docs.joomla.org/Diagnostic_tools

Re: Changing Background of Protostar/Beez3

Posted: Thu Feb 25, 2016 3:31 pm
by pfeilmayer
imanickam wrote:You could change the following css entry to add the background-image. This css is available in the file template.css that is located in the directory /templates/protostar/css

Code: Select all

body.site {
	border-top: 3px solid #0088cc;
	padding: 20px;
	background-color: #f4f6f7;
}
Note: Make sure to take a copy of the file before editing it.

Hello
On on of my sites, this works like a charm. On another one does not (protostar, joomla 3.4.8 ). I used a module to change the background color, called je animated background. I didn't notice that the background changed (into white with black coloured writing) until a day ago. It was black (animated with the module - changed between a few shades of black) with white (or close to white) writing. Initially I disabled the module. No change. I uninstalled the module and tryied to edit template css. Still no dice. It seems I can't change the f background. And I think that this is a result of the last update to joomla to 3.4.8 .
Is there any way to restore previous version of the site ? OR more important question : Is there any way to change the bg and text color ? Even more important is to make that stupid module that changed the bg color to work again.
Perhaps the database was affected by the last joomla update because the file (template.css) doesn't do squat ?!
Thank you



L.E.
this is the "config" in the database :
{"templateColor":"#525259","templateBackgroundColor":"#000000","logoFile":"","sitetitle":" ","sitedescription":"","googleFont":"1","googleFontName":"Open+Sans","fluidContainer":"0"}

L.E.2
the parameters from the module in phpmyadmin
{"jQuery":"1","bgSpeed":"1500","bgColor1":"#000000","bgColor2":"#080808","bgColor3":"#0F0F0F","bgColor4":"#080808","bgColor5":"#000000","module_tag":"div","bootstrap_size":"0","header_tag":"h3","header_class":"","style":"0"}

Re: Changing Background of Protostar/Beez3

Posted: Mon Jun 27, 2016 1:50 am
by Richard97386
So I found this info very helpfull where can I set the background image for the mobile viewport

Re: Changing Background of Protostar/Beez3

Posted: Sun Jul 03, 2016 6:21 pm
by boristhemoggy
I can successfully change the background and set an image there instead of a colour. The image repeats on both x and y axis so is it possible to set an image to the max width of the page, (1920 x 1080) but 'shrink' if it was viewed at say, 800x600?
Is this possible?

Re: Changing Background of Protostar/Beez3

Posted: Sun Jul 03, 2016 6:32 pm
by Per Yngve Berg

Re: Changing Background of Protostar/Beez3

Posted: Sun Jul 03, 2016 6:53 pm
by boristhemoggy
Good link, but nothing there about resizing the image :(

Re: Changing Background of Protostar/Beez3

Posted: Sun Jul 03, 2016 7:41 pm
by sozzled
boristhemoggy wrote:I can successfully change the background and set an image there instead of a colour. The image repeats on both x and y axis so is it possible to set an image to the max width of the page, (1920 x 1080) but 'shrink' if it was viewed at say, 800x600?
Is this possible?
Speaking a little hypothetically, I would say, as a general answer to your question, yes. Specific case studies may require further analysis, however. Have you experimented with your own site with differently sized windows (e.g. on a tablet or other mobile device) and what were your conclusions?

Re: Changing Background of Protostar/Beez3

Posted: Sun Jul 03, 2016 7:45 pm
by boristhemoggy
Yeah, I set an image as background but it doesn't resize. Can you set an image to a percentage instead of a fixed pixel size?

Re: Changing Background of Protostar/Beez3

Posted: Sun Jul 03, 2016 7:48 pm
by sozzled
boristhemoggy wrote:Can you set an image to a percentage instead of a fixed pixel size?
Yes

Re: Changing Background of Protostar/Beez3

Posted: Sun Jul 03, 2016 7:56 pm
by boristhemoggy
Thanks. I'll go to a CSS forum and find out how then.