Newbie in a pickle with making changes to CSS sheet

[sherryafo]

Hello,

I just installed zen cart and I am a newbie.

I'm trying to set-up my template and I'm not getting anywhere.

I created a new template folder, and it shows up in the admin page along with the "classic green contemporary" template which leads me to believe I did something right.

The trouble is that when I make changes to the css sheet, it's not showing up. The CSS sheet is located in shop\includes\templates\afo\css\stylesheet_afo.css.

I'm not sure if it's in the right location or what...

The zen cart is at http://myfloraloccasion.com/shop (The only change I have managed to make is to the header_bg file and that's not even fitting correctly, which is another fish to fry. )

Ideally, it will have the same design as http://myfloraloccasion.com

Thanks for your time, I hope you can shed some light on this.

Sherry

[gjh42]

You should not have two stylesheets (that cover the same elements) in your /css/ folder. You appear to have put stylesheet_afo.css through an editor program that has double-spaced all of the lines. If it did that, who knows what else it has done to your customized version.

You should scrap that (remove it from the /css/ folder), and apply the changes you have made to the original version using a good file editor like Notepad++ or CrimsonEditor (both free from www.sourceforge.net). What editor have you been using?

You have a nice design, and there is nothing that should require advanced coding to transfer to your Zen Cart template.

You will want to turn off or disable all of the code blocks in tpl_header.php except for the branding display block, and copy the header navigation display code into the sidebar. You can either add it directly in column_right.php (similar to what I did when I was new to ZC) and modify it for vertical display with added <br /> tags, or put it in a blank sidebox (see the mod in Downloads).

You will want to put the sidebar background image into #navColumnTwo and eliminate all.rightBoxContainer borders,and probably the headings as well. The main content background can go in #contentMainWrapper. All this is done in the stylesheet.

[swelter83]

Howdy Howdy!
Welcome to zen-cart, always nice to see a fresh face around the forums! :)

Take a look at this link, perhaps it may aid you in setting up your template correctly so you won't get confused on where your files are and such.

Make sure you read this thoroughly:
https://www.zen-cart.com/tutorials/i...hp?article=230

Along with this as well:
https://www.zen-cart.com/tutorials/i...hp?article=142

If you are having problems with a text editor you may be using try one of the following:
I use all 3 of them in various situation, it helps me alot!

http://www.editpadpro.com/editpadlite.html (Free Text Editor)
http://www.crimsoneditor.com/ (Free Text Editor)
http://www.adobe.com/products/dreamw...eamweaver_home (Dreamweaver is a trial version)

Hope this helps a little
if you have any question don't hesitate to send me a private message
or contact me by ICQ or AIM.

ICQ# 102254544
AIM: elg02

Take Care!

[sherryafo]

I appreciate your help.

I'm using Dreamweaver. I ended up downloading a free template that was for whatever reason easier for me to wrap my head around to start making my own changes and I've made a little progress.

The one major thing I want to accomplish is adding the images to the left and right sides of the zen cart page.

In the original CSS sheet for http://myfloraloccasion.com it looked like this:

#content {
float: left;
width: 400px;
padding: 0 0 0 95px;
background: url(images/img04.gif) no-repeat;
}

And then this:

#sidebar {
float: right;
width: 160px;
padding: 0 80px 0 20px;
background: url(images/img05.gif) no-repeat right top;
}

Where would I fit this in? The issue I believe I'm having is adding the images. I have tried to insert one right here:

#mainWrapper{ margin: 0 auto; padding: 0; background: #FFFFFF url('..images/img01.gif') repeat-x ; text-align: left; width: 760px; height: 180 px; vertical-align: top; border: 1px solid #dddddd; }

But that is not showing. The only way I have gotten any of my images on the page is by changing their names to the image files included in the template. I have placed the images in \shop\includes\templates\afo\images so I don't know where I'm going wrong.

Thanks again for all your help.

Sherry

[swelter83]

Hey there again!
check out the site i am working on and see if this is what you are looking for?
http://cart.lifewaynutrition.com

I THINK that is what you might be looking for? Try putting this into your
stylesheet.css this is how i changed my centerbox images.
below the .centerBoxHeading {} id is a second id for how to add a background
for the left sideboxes. for the right boxes, it will be just that... an ID called
.rightBoxContainer.

.centerBoxHeading {
background-image: url(../images/your_image.gif .png .jpg);
width: 668px;
height: 72px;
background-repeat:no-repeat;
background-position: center center;
padding-top: 3.1em;
margin-left: 25px;
font-family:"Century Gothic";
font-size: 16px;
font-weight: Normal;
}


.leftBoxContainer {
background-image: url(../images/your_image.gif .png .jpg);
width: 200px;
height: 367px;
margin-top: 75px;
}

these ID's can be found around line 1009
also, to change the header in the top of a sidebox like i have done,
check out this tutorial it explains exactly what to do and it's very easy to understand!

https://www.zen-cart.com/tutorials/i...hp?article=135

if you have ANY other questions please don't hesitate to ask again, and if this wasn't specific enough for your problem then try me again!

Hope this helps!

[swelter83]

One more thing!

make SURE you have your override folders set correctly if you are using it.
go here for further instructions on setting it up.
a VERY common mistake for people just starting out is that they do not understand
how the override system works and the file-tree completely confuses them, which leads to uploaded files in the wrong locations :)

https://www.zen-cart.com/tutorials/i...hp?article=143

[gjh42]

To get the effects in the original site, #navColumnTwo and #contentMainWrapper will actually be the best locations for the respective background-images.

You will need to make sure that elements inside those have transparent backgrounds, and add paddings to the correct edges of the wrappers.

PS - Nice-looking site, Swelter!

[swelter83]

Thanks glenn :)
been workin' hard on it, still some things need changin'
perhaps you couldhelp me with something i've been trying to get figured out today.

my search field in the header has a smaller height than the "go" button.
is there a way that i can fix this so it will be inline with the go button?

take a look at this template to see what i mean, i want it to look like the search in the header here:

http://osc2.template-help.com/zencart_15519/index.php


i'd appreciate any help you could give.

[gjh42]

That's something CSS alone can't do, because there are no tags to differentiate the input field from the input button, and they are not exactly adjacent.

You would need to add a class tag in /includes/templates/your_template/sideboxes/tpl_search_header.php.

  if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes') {
    $content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 100px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . ' ' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON);
  } else {
    $content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 100px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '&nbsp;<input type="submit" value="' . HEADER_SEARCH_BUTTON . '" style="width: 45px" />';
  } 

Add '<span class="searchHeaderTextField">' . and </span> in two places to get

  if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes') {
    $content .= '<span class="searchHeaderTextField">' . zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 100px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '</span>&nbsp;' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON);
  } else {
    $content .= '<span class="searchHeaderTextField">' . zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 100px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '</span>&nbsp;<input type="submit" value="' . HEADER_SEARCH_BUTTON . '" style="width: 45px" />';
  } 

Then you can style

.searchHeaderTextField {position: relative; bottom: 1px;}

or whatever makes it align properly.