Changing Background of Protostar/Beez3

[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

[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?

[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?

[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.

[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?

[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

[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');
}

[9themestore]

Hi,

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

[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?

[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.

[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.

[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

[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".

[clebinho75]

It worked perfectly, THANK YOU VERY MUCH!

[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

[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

[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

[Per Yngve Berg]

Your template does not have a template.css. It's set in red.css.

[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?

[Per Yngve Berg]

Use your browser's Diagnostic Tools to Inspect.

https://docs.joomla.org/Diagnostic_tools

[pfeilmayer]

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"}

[Richard97386]

So I found this info very helpfull where can I set the background image for the mobile viewport

[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?

[Per Yngve Berg]

http://www.w3schools.com/css/css_background.asp

[boristhemoggy]

http://www.w3schools.com/css/css_background.asp

Good link, but nothing there about resizing the image

[sozzled]

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?

[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?

[sozzled]

Can you set an image to a percentage instead of a fixed pixel size?

Yes

[boristhemoggy]

Thanks. I'll go to a CSS forum and find out how then.