Color and background images is useful for both the design and the organization of a Web page. Gavick templates allows you to modify almost all aspects of visualization, for example background customization – change of selected element or all page background image/color. Note that some color settings can be made via Template configuration but others, more advanced, requires code modifications or overrides technique. To create flexible, modern solutions to design problems, we must figure out how we can get by using CSS3 reducing number of graphics.
- First, you have to prepare image and hex color code or gradient code.
- Second, you need Firebug tool installed in your browser to check which Class or ID you need to override to make final changes.
- Third, you need to learn some basic of CSS and CSS3.
The CSS background properties
- The background-color property allows you to set a background color.
- The background-image property is used to specify a background image.
- The background-image: -webkit-gradient is used to create a color gradient.
- The background-repeat property allows you to control background tiling, you can choose from: repeat | repeat-x | repeat-y | no-repeat.
- The background-position property is used to control how the background is positioned.
- We use background-attachment property to control whether the background scrolls with the page or remains fixed in place. By default, the background image scrolls with the content of the web page. If the “fixed” keyword is provided the background image remains fixed in place while the page scrolls.
- The background size property allows you to sets the width and height of the image within the element’s background as an absolute length, percentage, or the keywords cover, contain (both make the browser scale the image proportionally) or it can be auto.
The background color
The background-color property is used to specify a solid background color and accepts the same color values as the foreground color property. So it can be a color keyword, like blue, an RGB value like rgb(34, 121, 160), a hexadecimal color value such as #2279A0, or a short hexadecimal color like #ccc.
body { background-color: #003399;}
or
body { background: #333;}
![colors-table]()
By default, backgrounds are transparent, so the parent element’s background will show through unless the background color or image for that particular child element is set. You can give a background color to almost any element — from <p>, <h1>, <ul> elements all the way up to the entire body element, like in following example.
![To change background color of menu you have to override only one...]()
To change background color of menu you have to override only one line from class
To change this element background color we use:
.gkMenu > ul { background-color: #808080; }
In template configuration –> Advanced settings (tab) -> Custom CSS code field:
![custom-css-code-background]()
IMPORTANT: Of course this was only example how to change menu background color that works only when your GK template uses that class – if you want to change different element background use firebug to localize corresponding class or ID.
CSS TIP: Unlike the color property, background colors are applied only to the element, and are not directly inherited by its children.
Note: The background generally should provide the most contrast with the foreground text colors.
The background image
The background-image property enables you to provide an image (JPG, PNG or animated GIF) for the background, one or more background images for an element. Before CSS3, only one background image per box was allowed. The value for background-image should be either an absolute (complete Web address with http://) or relative path to one or more images, each wrapped with url(“”) and delimited with commas.
For example, you can create a background out of a small, repeating texture – after using the repeat value of the background property.
body {background: #ccc url("images/joomla_green.gif") repeat-x;}
or use:
.gkMenu > ul {
background: #674817 url('templates/gk_gamenews/images/bg3.jpg');
}
If you’re using GK GameNews and you want to change menu background.
![desk-gn]()
That is similar to the way that the background property can be followed by multiple values. Using this shorthand property, you can set the color of the background (the background-color), and supply the URI of an image to be used on the background at the same time.
Note that by default, a background-image is repeated along both vertical and horizontal axes, and is repeated in both directions. So it covers the entire element.
For example, the value “none” ensures that no background-image will be displayed; this is the default setting, so you don’t need to define it explicitly unless you want to override previous background-image declarations.
div.example {background-image:none;}
BACKGROUND TIP: How to add full page background
CSS Gradient Background
One of the features is the ability to specify gradients using pure CSS3, without having to create any images and use them as repeating backgrounds for gradient effects. CSS gradients are scalable !
We will show you how to use CSS gradients for some major browsers: Firefox, Safari, Chrome and also IE. Which means that you can add linear and radial gradients compatible with modern browsers. Although almost all browsers can display gradients, the syntax has not been standardized by the W3C, so all have a unique way to define the style.
If you need nice gradient you don’t have to use images – gradients are implemented within the background-image property. We recommend using a online tool(s) that computes the CSS code for you:
- http://gradients.glrzad.com/
- http://www.colorzilla.com/gradient-editor/
- http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/
- http://www.cssmatic.com/gradient-generator
Those tools adds appropriate vendor prefixes to the code that enables web browsers to display gradients suitably.
Finally, the result panel always has the CSS for the current gradient for easy copying and pasting into your custom CSS field or stylesheet (gk_TemplateName\css\override.css) file.
![gradient-custom]()
Custom CSS code in GK Template configuration
![CSS3 Gradient Menu (without images)]()
CSS3 Gradient Menu (without images)
TIP: If you need to add new background (color/image) or change its color use Custom CSS
, remember to rename it. Now you can add this lines to header of your template (gk_TemplateName\layouts\default.php) in <head>…</head> section.
Go to User Manager and click on your account name, change your editor to “Code Mirror” or “No editor” and use Save button to apply changes.
