Forums

Working with header properties

Permalink
I have looked everywhere to try and manipulate the header of my website but I keep coming up short.

Where or how do I find where to "Edit Area Design" like all the other areas on the site?
How do I change the header background from a solid color to a image?
how do I set containers width to a percentage? so that I can cause the container to cover the header from one side to the other regardless of screen size. Dynamically changing size.

Thanks again for any and all help.

http://HuzzahGamers.com
realdude19
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi realdude19,

"Where or how do I find where to "Edit Area Design" like all the other areas on the site?"

The page <header> is not defined as an area in the Elemental theme.

"How do I change the header background from a solid color to a image?"

You can set a background for the <header> using Custom CSS.

http://www.concrete5.org/documentation/using-concrete5-7/in-page-ed...

Example: the background you are using in the Main Area
.ccm-page header {
    background: url(/application/files/3014/2156/5580/Background-Gradient-black-green-blue5.png);
}


To add a different image as the background. You need to upload the image using the File Manager. After uploading the file, right click on the image thumbnail and select "Properties" from the menu. Under the Details tab, look for "URL to File". You will use the portion of the image URL starting with /application...

Example:
URL:
"http://localhost/concrete5/application/files/8914/2042/7214/chicken_pot_pie.jpg"
Portion of the URL to paste into the CSS
/application/files/8914/2042/7214/chicken_pot_pie.jpg

.ccm-page header {
    background: url(PASTE HERE);
}


Optional properties to control repeat pattern:
background-repeat: no-repeat;
background-repeat: repeat;
background-repeat-x: repeat;
background-repeat-y: repeat;

"how do I set containers width to a percentage? so that I can cause the container to cover the header from one side to the other regardless of screen size. Dynamically changing size."

The Elemental theme uses Bootstrap 3 as its grid system. The grid system is controlling the container widths.

If you are comfortable modifying the page templates, you have some options on making the <header> width 100%.