Changing Background of Protostar/Beez3

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Locked
alani
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Thu Oct 17, 2013 12:01 pm

Changing Background of Protostar/Beez3

Post by alani » Thu Oct 17, 2013 12:13 pm

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
Last edited by imanickam on Thu Oct 17, 2013 12:31 pm, edited 1 time in total.
Reason: Split the post from the topic http://forum.joomla.org/viewtopic.php?f=619&t=706246 and moved it to the forum Templates - Joomla! 3.x.

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 27333
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: Changing Background of Protostar/Beez3

Post by imanickam » Thu Oct 17, 2013 1:03 pm

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?
Ilagnayeru (MIG) Manickam | இளஞாயிறு மாணிக்கம்
Joomla! - Global Moderators Team | Translations Coordination Team | Tamil (தமிழ்) Translation Team

Eegan - Support the poor and underprivileged

alani
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Thu Oct 17, 2013 12:01 pm

Re: Changing Background of Protostar/Beez3

Post by alani » Sun Oct 20, 2013 10:27 am

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?

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 27333
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: Changing Background of Protostar/Beez3

Post by imanickam » Sun Oct 20, 2013 12:29 pm

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.
Ilagnayeru (MIG) Manickam | இளஞாயிறு மாணிக்கம்
Joomla! - Global Moderators Team | Translations Coordination Team | Tamil (தமிழ்) Translation Team

Eegan - Support the poor and underprivileged

alani
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Thu Oct 17, 2013 12:01 pm

Re: Changing Background of Protostar/Beez3

Post by alani » Mon Oct 21, 2013 8:01 pm

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?

User avatar
9themestore
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 148
Joined: Tue May 10, 2011 4:09 am
Contact:

Re: Changing Background of Protostar/Beez3

Post by 9themestore » Tue Oct 22, 2013 4:29 am

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
My happiness is helping someone. :)
Website: http://www.9themestore.com

alani
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Thu Oct 17, 2013 12:01 pm

Re: Changing Background of Protostar/Beez3

Post by alani » Tue Oct 22, 2013 9:54 am

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

User avatar
9themestore
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 148
Joined: Tue May 10, 2011 4:09 am
Contact:

Re: Changing Background of Protostar/Beez3

Post by 9themestore » Tue Oct 22, 2013 10:15 am

Hi,

I think the fast solution you should post your site url here, we'll help you debug it.
My happiness is helping someone. :)
Website: http://www.9themestore.com

alani
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Thu Oct 17, 2013 12:01 pm

Re: Changing Background of Protostar/Beez3

Post by alani » Tue Oct 22, 2013 1:17 pm

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?

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 27333
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: Changing Background of Protostar/Beez3

Post by imanickam » Tue Oct 22, 2013 2:20 pm

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.
Ilagnayeru (MIG) Manickam | இளஞாயிறு மாணிக்கம்
Joomla! - Global Moderators Team | Translations Coordination Team | Tamil (தமிழ்) Translation Team

Eegan - Support the poor and underprivileged

alani
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Thu Oct 17, 2013 12:01 pm

Re: Changing Background of Protostar/Beez3

Post by alani » Tue Oct 22, 2013 5:48 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 30
Joined: Sun Mar 02, 2014 5:13 pm

Re: Changing Background of Protostar/Beez3

Post by clebinho75 » Wed Aug 06, 2014 12:23 pm

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

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 27333
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: Changing Background of Protostar/Beez3

Post by imanickam » Wed Aug 06, 2014 12:55 pm

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".
Ilagnayeru (MIG) Manickam | இளஞாயிறு மாணிக்கம்
Joomla! - Global Moderators Team | Translations Coordination Team | Tamil (தமிழ்) Translation Team

Eegan - Support the poor and underprivileged

clebinho75
Joomla! Apprentice
Joomla! Apprentice
Posts: 30
Joined: Sun Mar 02, 2014 5:13 pm

Re: Changing Background of Protostar/Beez3

Post by clebinho75 » Wed Aug 06, 2014 2:16 pm

It worked perfectly, THANK YOU VERY MUCH!

jlz13fr
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Sat Feb 23, 2008 1:35 pm
Location: France (Marseille)

Re: Changing Background of Protostar/Beez3

Post by jlz13fr » Mon Dec 01, 2014 11:42 am

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
You do not have the required permissions to view the files attached to this post.

jlz13fr
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Sat Feb 23, 2008 1:35 pm
Location: France (Marseille)

Re: Changing Background of Protostar/Beez3: OK solved

Post by jlz13fr » Mon Dec 01, 2014 5:11 pm

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
You do not have the required permissions to view the files attached to this post.

xanterra
Joomla! Apprentice
Joomla! Apprentice
Posts: 26
Joined: Thu Apr 08, 2010 8:50 pm

Re: Changing Background of Protostar/Beez3

Post by xanterra » Sat Dec 06, 2014 6:38 pm

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
Cheers,
XanterRa

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 26195
Joined: Mon Oct 27, 2008 9:27 pm
Location: Akershus, Norway

Re: Changing Background of Protostar/Beez3

Post by Per Yngve Berg » Sat Dec 06, 2014 8:04 pm

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

xanterra
Joomla! Apprentice
Joomla! Apprentice
Posts: 26
Joined: Thu Apr 08, 2010 8:50 pm

Re: Changing Background of Protostar/Beez3

Post by xanterra » Sun Dec 07, 2014 1:34 am

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?
You do not have the required permissions to view the files attached to this post.
Cheers,
XanterRa

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 26195
Joined: Mon Oct 27, 2008 9:27 pm
Location: Akershus, Norway

Re: Changing Background of Protostar/Beez3

Post by Per Yngve Berg » Sun Dec 07, 2014 9:07 am

Use your browser's Diagnostic Tools to Inspect.

https://docs.joomla.org/Diagnostic_tools

pfeilmayer
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Thu Feb 16, 2012 1:36 pm

Re: Changing Background of Protostar/Beez3

Post by pfeilmayer » Thu Feb 25, 2016 3:31 pm

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"}
You do not have the required permissions to view the files attached to this post.

Richard97386
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Wed Mar 30, 2016 4:29 pm

Re: Changing Background of Protostar/Beez3

Post by Richard97386 » Mon Jun 27, 2016 1:50 am

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

boristhemoggy
Joomla! Intern
Joomla! Intern
Posts: 52
Joined: Mon Feb 27, 2006 4:37 pm

Re: Changing Background of Protostar/Beez3

Post by boristhemoggy » Sun Jul 03, 2016 6:21 pm

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?

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 26195
Joined: Mon Oct 27, 2008 9:27 pm
Location: Akershus, Norway

Re: Changing Background of Protostar/Beez3

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


boristhemoggy
Joomla! Intern
Joomla! Intern
Posts: 52
Joined: Mon Feb 27, 2006 4:37 pm

Re: Changing Background of Protostar/Beez3

Post by boristhemoggy » Sun Jul 03, 2016 6:53 pm

Good link, but nothing there about resizing the image :(

User avatar
sozzled
Joomla! Exemplar
Joomla! Exemplar
Posts: 8207
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: Changing Background of Protostar/Beez3

Post by sozzled » Sun Jul 03, 2016 7:41 pm

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?
https://www.kuneze.com/blog
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

boristhemoggy
Joomla! Intern
Joomla! Intern
Posts: 52
Joined: Mon Feb 27, 2006 4:37 pm

Re: Changing Background of Protostar/Beez3

Post by boristhemoggy » Sun Jul 03, 2016 7:45 pm

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?

User avatar
sozzled
Joomla! Exemplar
Joomla! Exemplar
Posts: 8207
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: Changing Background of Protostar/Beez3

Post by sozzled » Sun Jul 03, 2016 7:48 pm

boristhemoggy wrote:Can you set an image to a percentage instead of a fixed pixel size?
Yes
https://www.kuneze.com/blog
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

boristhemoggy
Joomla! Intern
Joomla! Intern
Posts: 52
Joined: Mon Feb 27, 2006 4:37 pm

Re: Changing Background of Protostar/Beez3

Post by boristhemoggy » Sun Jul 03, 2016 7:56 pm

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


Locked

Return to “Templates for Joomla! 3.x”