How to make top head v3.0.3 100%?

So cs cart doesn't have instructions for the new 3.0.0 cs cart. Only for the 2.2.



So how do I make my top banner of my site 100% width for each monitor?



So a 15" monitor will show the full top banner and a 20" banner will show the full top banner. Instead of cutting it off for a smaller monitor.



Also, attached I have my header that Id like to put on my website.



When I add the top header to the site and then remove the logo from the blocks area it cuts have the header off. You can see it here: www.harpermoto.com



The header was created at the size of 1581x171px. But like I said when I remove the logo from the blocks menu, It cuts it down to 1581x78px



Can someone help me get this banner to show up its full size?

[url=“CS-Cart Documentation — CS-Cart 4.15.x documentation”]CS-Cart Documentation — CS-Cart 4.15.x documentation

To fix the height of your header problem, try adding a height value to your .header class like this:



.header {

background: url(“…/…/…/…/skins/basic/customer/addons/my_changes/css/images/2013topbanner2.jpg”) no-repeat fixed center top #000000;

height: 170px;

}

One other thing I cannot figure out is why when I use firebug does every style i want to edit have me edit it in the var/cache/template/css/style_c_26419e2061f9923cc40322cf81665016.css

[quote name='harpersmoto' timestamp='1372430519' post='164541']

One other thing I cannot figure out is why when I use firebug does every style i want to edit have me edit it in the var/cache/template/css/style_c_26419e2061f9923cc40322cf81665016.css

[/quote]

That's because you have join_css enabled in the config.local.php script. This is an optimization that speeds up your content delivery by combining all the css files into one file and caching it in the var/cache/template/css folder.

To see the ACTUAL css files that are being combined into the cached css file, simply set join_css to false, upload the script and refresh your page. I do this all the time when making css changes - don't forget to either delete the files in the var/cache/template/css folder before re-enabling the joining, or clear your entire cache with ?cc, so the cached file will rebuild itself.

Personally, I prefer to just use FTP software to delete the cached files as needed instead of deleting the ENTIRE cache.

Also, you shouldn't edit the cached css file - it won't keep.

You need to edit the css file that is being cached into the joined css file.

[quote name='Magpie Don' timestamp='1372436378' post='164557']

That's because you have join_css enabled in the config.local.php script. This is an optimization that speeds up your content delivery by combining all the css files into one file and caching it in the var/cache/template/css folder.

To see the ACTUAL css files that are being combined into the cached css file, simply set join_css to false, upload the script and refresh your page. I do this all the time when making css changes - don't forget to either delete the files in the var/cache/template/css folder before re-enabling the joining, or clear your entire cache with ?cc, so the cached file will rebuild itself.

Personally, I prefer to just use FTP software to delete the cached files as needed instead of deleting the ENTIRE cache.

[/quote]



So basically to do a change correctly, I need to set the join_css to false. Delete the cache. Do my changes in the my styles and what ever other files I need to change and then set join_css back to true and that all?

If using firebug to reference and make changes then you need to turn off join_css. Other than that you just need to clear cache to see changes.

[quote name='harpersmoto' timestamp='1372442545' post='164565']

So basically to do a change correctly, I need to set the join_css to false. Delete the cache. Do my changes in the my styles and what ever other files I need to change and then set join_css back to true and that all?

[/quote]

That's correct. But you only need to clear the cache of the compiled css files prior to turning the joining back on. You can just refresh your browser to see the changes in css (and php) that you are making before they are cached with the joining because css is not cached by CS-Cart unless you are joining the files.

[quote name='Magpie Don' timestamp='1372449609' post='164573']

That's correct. But you only need to clear the cache of the compiled css files prior to turning the joining back on. You can just refresh your browser to see the changes in css (and php) that you are making before they are cached with the joining because css is not cached by CS-Cart unless you are joining the files.

[/quote]



Well now ive got a small issue.



When I changed the join_css file to false, my background image disappeared and now it wont come back up.



I checked both my image folders in the skin and also under my_changes and the images are both there.



Also checked my code in my_changed and under style.css and there all the same and haven't been changed but now my background image wont come back up with the join_css set as true or false and I have cleared my cache also.



UPDATE:



Alright I got my background back. Basically went back and undid everything i did and now its back.

Also the header is the 171px height that I wanted but now Ive got to fix the width because its way to big.



So basically to fix the 100% header problem I need to follow that guide that was posted for the 960.css

The path to the image is bad.

Provided that your css is IN the css folder that you have in this path below…



Change this kind of path:

…/…/…/…/skins/basic/customer/addons/my_changes/css/images/2013topbanner2.jpg

to:

images/2013topbanner2.jpg



My custom images are in the /skins/SKINNAME/customer/images folder and the path is:

…/…/images/background.jpg

Relatively to the css file, the path is going up twice then to the images folder (the css file is in skins/SKINNAME/customer/addons/my_changes/

Because your images are in an image folder inside the my_changes/css folder, you don’t need to go to the root.

Just try fiddling with the path until you get it right. :)

I think I got it figured out.



I'm playing around with that fluid 960 thing and its very interesting.

[quote name=‘Magpie Don’ timestamp=‘1372455594’ post=‘164581’]

The path to the image is bad.

Provided that your css is IN the css folder that you have in this path below…



Change this kind of path:

…/…/…/…/skins/basic/customer/addons/my_changes/css/images/2013topbanner2.jpg

to:

images/2013topbanner2.jpg



My custom images are in the /skins/SKINNAME/customer/images folder and the path is:

…/…/images/background.jpg

Relatively to the css file, the path is going up twice then to the images folder (the css file is in skins/SKINNAME/customer/addons/my_changes/

Because your images are in an image folder inside the my_changes/css folder, you don’t need to go to the root.

Just try fiddling with the path until you get it right. :)

[/quote]



All my pictures and everything are working again.



Im just still have a problem sizing the width of the top banner.

Any thought?



I can resize the header I made in photoshop but that doesn’t help with the sizing the header to fit all screens.

I don't know how to solve your problem (sizing the width of the top banner), but I would like to suggest that you change the background color of your store to #000.

I run a 1920px wide screen resolution and when I make your web site full screen, there is a white background behind your background image that shows up because your background image is only about 1700px wide.

[quote name=‘Magpie Don’ timestamp=‘1373308166’ post=‘165025’]

I don’t know how to solve your problem (sizing the width of the top banner), but I would like to suggest that you change the background color of your store to #000.

I run a 1920px wide screen resolution and when I make your web site full screen, there is a white background behind your background image that shows up because your background image is only about 1700px wide.

[/quote]



I changed that background to #000000 so it wouldnt be white but black now.

Ill continue doing some digging on the top banner.



WOuld you or anyone know how to make an HTML image 100% width?



Ive got an image on the front page that is linked to our parts lookup. Its using an HTML block in the blocks menu’s.


<br />
<p><a href="http://www.harpermoto.com/oem-moto-guzzi-illustrated-parts-catalog.html"><img src="upload://yaZFz6PERD7wNDGSrji8h56zreA.jpeg" alt="" width="893" height="409"></a></p><br />

```<br />
<br />
Anyway of making that 100% width?

You could start by adding align=“center” to the

tag:

, and set the grid's width to FULL in the block manager.

Other than that… it's an image set at a fixed size.

Well here's an idea, is there a way to expand my background so that it is under the top banner? So we can basically eliminate the black background of the top banner?