Background colour

theremotedr

Joined: 2011-11-22
Posts: 75
Posted: Tue, 2011-11-22 19:05

Any advice on how to change the white background colour.
Have been looking but cant find the answer.

Thansk

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Wed, 2011-11-23 00:48

How familiar are you with CSS? Have your tried any edits to the css?

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
theremotedr

Joined: 2011-11-22
Posts: 75
Posted: Wed, 2011-11-23 09:17

I think i need to change the code say #FF0000 to a colour of my choice say #3399FE but i did look before i posted but i could not see anything like this so i could change it myself.
Could you point me in the direction of where the could is stored so i can edit it to acheive the colour i would like to use.

Thanks for the help.

 
theremotedr

Joined: 2011-11-22
Posts: 75
Posted: Wed, 2011-11-23 14:55

Hello again,
If possible can i use a wallpaper/background image as opposed to the colour change.
This then will match my web site & wont look out of place.

Thanks very much.

 
theremotedr

Joined: 2011-11-22
Posts: 75
Posted: Wed, 2011-11-23 22:55
floridave wrote:
How familiar are you with CSS? Have your tried any edits to the css?

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

Can you advise from here please.

 
theremotedr

Joined: 2011-11-22
Posts: 75
Posted: Thu, 2011-11-24 00:10

Ok i have been looking around and found the css files you are talking about.
I can see that there are 2 of them.

1 = screen-rtl.css

2 = screen.css

I have opened each up and a great deal of code in each.
Can you point me in the direction of which of the 2 files i need to make the change for the background.
I know what to do from there.

Cheers.

 
undagiga

Joined: 2010-11-26
Posts: 693
Posted: Thu, 2011-11-24 01:20

Questions liked yours are asked very often. Rather than holding the hand of everyone who wants to change something simple, it's better to help them to help themselves.

Download a plugin for Firefox called Firebug and learn how to use it. It's also available for Chrome. I think IE has something similar but I don't find it quite as easy to use. Firebug will enable you to inspect the elements of a page, see what CSS properties are being applied and from where, and will allow you to experiment with changing them on the fly.

Also, some G3 themes allow you to specify an additional custom CSS file, so that when you upgrade either G3 and/or the theme you won't have to find and reapply your changes. If you're going to start customising CSS it's a good idea to find out how to do this to make your life easier in the future.

U-G

 
theremotedr

Joined: 2011-11-22
Posts: 75
Posted: Thu, 2011-11-24 11:06

I understand what you have wrote & take it onboard.
I have downloaded Firebug & installed it.
I still cant seem to be able to change the background even when Firebug pulls up the line of text and shows me the values etc after clicking Inspect element.

 
undagiga

Joined: 2010-11-26
Posts: 693
Posted: Thu, 2011-11-24 12:50

What you want to change are the CSS properties for that line. They should appear in the right hand column for Firebug. There are property and value pairs. Double click a value like the one for the background-color property and type a new value, which should make a temporary, on-the-fly change for the current page.

You'll still need to find how to change this permanently. You didn't say which theme you are using. I suspect that it's the default Wind theme. I don't recall if Wind has the option for a custom.css file (the Greydragon theme does). If not you'll need to find and edit the relevant CSS file. There is a further complication, in that G3 combines all style sheets into one to minimise downloads. But there are comments inside the merged CSS file indicating the source CSS files, so you should be able to search and find the CSS code that you want to change, and then check which CSS file it is in.

U-G

 
theremotedr

Joined: 2011-11-22
Posts: 75
Posted: Thu, 2011-11-24 13:03

Sorry
I am using the clean canvas dark version.
I will look now at what yopu have advised & report back.

Cheers

 
theremotedr

Joined: 2011-11-22
Posts: 75
Posted: Thu, 2011-11-24 13:03

This is what i see but after changing it nothing alters to the background.
I had tried this before i posted the thread.

.yui-t4 #yui-main, .yui-t5 #yui-main, .yui-t6 #yui-main {
float: left;
margin-right: -25em;
}
3bb064...3bd5e17 (line 608)
#yui-main, .yui-g .yui-u .yui-g {
width: 100%;
}
3bb064...3bd5e17 (line 608)
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
3bb064...3bd5e17 (line 608)
Inherited fromdiv#doc3.yui-t5
#doc, #doc2, #doc3, #doc4, .yui-t1, .yui-t2, .yui-t3, .yui-t4, .yui-t5, .yui-t6, .yui-t7 {
text-align: left;
}
3bb064...3bd5e17 (line 608)
#doc, #doc2, #doc3, #doc4, .yui-t1, .yui-t2, .yui-t3, .yui-t4, .yui-t5, .yui-t6, .yui-t7 {
text-align: left;
}
3bb064...3bd5e17 (line 608)
Inherited frombody
body, html {
font-family: Verdana,Geneva,sans-serif;
}
3bb064...3bd5e17 (line 2961)
body, html {
color: #AAAAAA;
}
3bb064...3bd5e17 (line 1157)
body {
text-align: center;
}
3bb064...3bd5e17 (line 608)
body {
font: 13px/1.231 arial,helvetica,clean,sans-serif;
}
3bb064...3bd5e17 (line 608)
Inherited fromhtml
body, html {
font-family: Verdana,Geneva,sans-serif;
}
3bb064...3bd5e17 (line 2961)
body, html {
color: #AAAAAA;
}
3bb064...3bd5e17 (line 1157)
html {
color: #000000;
}

 
undagiga

Joined: 2010-11-26
Posts: 693
Posted: Fri, 2011-11-25 01:49

Are you sure that this is the CSS for html tag? I don't see a background-color property and I would have thought that one would have been set. I'm not familiar with the clean canvas dark version theme. If you want more help post or PM me a link to your site.

 
undagiga

Joined: 2010-11-26
Posts: 693
Posted: Fri, 2011-11-25 09:35

Looking at your site, I used Firebug to select the body tag in the left column. In its CSS styles in the right column there is the following CSS markup:

    body, html {
        background-color: #000000;
        color: #AAAAAA;
}

and it is also indicated that this block comes from line 1156 of the combined CSS style sheet. Examining just above line 1156 that combined style sheet indicates that the CSS code in question comes from
/* themes/clean_canvas/css/dark/screen_colors.css */
so that's where you would make these changes.

But in doing so you will probably find that you will need to change yet more things. You need to teach yourself how to use Firebug to locate what element on the page needs to have the CSS changed, what that change needs to be, and to be able to track back to the source style sheet in the theme. You should start by using the steps I used to locate how to change the background colour.

U-G

 
theremotedr

Joined: 2011-11-22
Posts: 75
Posted: Fri, 2011-11-25 10:34

I dont see where it tells you the path ?

/* themes/clean_canvas/css/dark/screen_colors.css */
so that's where you would make these changes.

 
theremotedr

Joined: 2011-11-22
Posts: 75
Posted: Fri, 2011-11-25 10:44

I have follwed the path as listed above but the line only goes as far as 421

 
undagiga

Joined: 2010-11-26
Posts: 693
Posted: Fri, 2011-11-25 10:56

There are two CSS files. One is the merged CSS file. To view this, view the source for the web page (CTRL-U in Firefox) and near the top you will find a link for the combined CSS sheet under the line that says:
"<!-- LOOKING FOR YOUR CSS? It's all been combined into the link below -->"

Click on the link href="/mygallery/index.php/combined/css/a395c15be05f9b6127f8b92d575f2e6d" and go to lines 1156-1159 to find the CSS code and slightly above it at line 1134 will be the reference to the second style sheet /* themes/clean_canvas/css/dark/screen_colors.css */ . The larger merged style sheet picks up and merges as many of the separate style sheets as possible.

You then need to find this second sheet on your computer, change it and reupload it. But to save you some trouble you should be able to simulate on-the-fly the changes you want using Firebug. This is much easier than upload-test-change-reupload-etc to get it right.

 
theremotedr

Joined: 2011-11-22
Posts: 75
Posted: Fri, 2011-11-25 11:11

I have followed the instruction as above.
Opened up the source for the web page.
I can see LOOKING FOR YOUR CSS
you say to click the link /mygallery/index.php/combined/css/a395c15be05f9b6127f8b92d575f2e6d but i do not see it on the source page

 
undagiga

Joined: 2010-11-26
Posts: 693
Posted: Fri, 2011-11-25 11:36

It may be a slightly different URL, as removed for public display is probably random, but it is the line under "LOOKING FOR YOUR CSS". Click the href="..." link in that line.

It may also not be exactly line 1156 either in the combined CSS file for the page that you're looking at, but try to work it out.

 
theremotedr

Joined: 2011-11-22
Posts: 75
Posted: Fri, 2011-11-25 11:42

ok looking now

thanks for the help

 
theremotedr

Joined: 2011-11-22
Posts: 75
Posted: Fri, 2011-11-25 17:38

I have been here all day trying to find/work out which css file needs to be edited from the above help but no joy.
It should take seconds yet i been on it all day.
When i click on the link as advise there is no line numbers.
I do a find search on the page and no results found.
All i need to know is what css file i need to edit and im done.
Finding this out is not normal.
Anybody advise how i find the css file name,i can then open filezilla and edit that css file in question.

 
undagiga

Joined: 2010-11-26
Posts: 693
Posted: Fri, 2011-11-25 21:50

I already told you what file you need to edit - it's /css/dark/screen_colors.css for the clean canvas theme.

In my version of Firefox, line numbers are displayed in the status line at the bottom of the window, although you may need to start to scroll down for them to be displayed.

I suggested you learn how to find what you need to change because I strongly suspect that having made that change you will find that you need to make further CSS changes.

 
theremotedr

Joined: 2011-11-22
Posts: 75
Posted: Fri, 2011-11-25 21:54

I have read what you typed.
I have seen what the file is by what you have typed.
I need to know HOW you found the css file name.
I understand you have told me but i need to do it for myself,looking where you have mentioned does not tell me the css file name.
I have looked in all the css files and my edits no problem,this is the long way around.
If i know how to get the css file name i can then go straight to that css file.

 
undagiga

Joined: 2010-11-26
Posts: 693
Posted: Fri, 2011-11-25 22:23

When Gallery3 combines most of the CSS files into one big one, it inserts a comment at the start of each insertion block indicating which CSS file the following block of code came from.

So, at the start of the block inserted from /css/dark/screen_colors.css it inserts the following comment
/* themes/clean_canvas/css/dark/screen_colors.css */
which indicates which file the following block of CSS code came from. (The /* and */ make the characters in between a comment.)

So, having found the code that you're interested in in the combined CSS file, you search upwards until you find the comment indicating which CSS sheet the code came from.