A few Questions

[TRS]

Hi, I have a few questions. I appreciate your help.

I used the 3column theme from shopsite templates.

Menu and submenu:

1) how can I increase the width of the menu boxes on top menu? the titles on the sub menu which is a drop down list are not within the box and runs over.
how can I fix this?

2) I would like to add a one or two extra menu boxes on right away from the left side with a different color can i do that? if not how can I add an icon any where on the site and link it to a page?

[TRS]

I really appreciate someones help here.

[Jim]

There is probably a style assigned to the menu boxes. You should be able to edit the css for the style and set the width that way. You might be able to also widen the boxes by putting a bunch of space characters or multip   at the ends of the menu names to force them to be wider. Another option would be to shorten the text of the submenus so they fit in the width that is currently provided.

As for adding additional information on the right side, that would require editing the template and adding the code in the appropriate location.

You can add an image and link it to some web page using the standard html method. It could be added to any text field in the backoffice that will be displayed on the page you want it on. You could also added it to the template itself to include it on all pages using that template.
Here is the code for the ShopSite logo at the upper left of this page that you can use as an example.

Code: Select all

<a href="./index.php" title="Board index" id="logo"><img src="./styles/prosilver/imageset/shopsite_logo.jpg" alt="" title="" pagespeed_url_hash="4279312559"></a>

You can do a web search (using google, yahoo, bing etc) for "image href" (without the quotes) and find references on how to format the code.

[TRS]

Thanks Jim!

[TRS]

Hi,
I tried to alter the "min-width" back to 110, from the below, as it was before, and I did. However, there the store does does not go back to whatever it was even though the code is correct. any idea why? (it is to change the width of the sub-menu)

I am using File manager from Fatcow to edit my codes. as you might have guessed i am new to this. Please assist. Thanks!

.suckertreemenu ul li a {
display: block;
min-width: 200px;
line-height: 35px;
padding-bottom: 0px;
text-decoration: none;
text-align: center;
color: #FFFFFF;

[ShopSite Lauren]

What is the URL to your website so that I can see what you are referring to? There is a chance that I could create some CSS that is specific to your website that would allow you to add the 2 additional links in the opposite alignment in a different color.

[TRS]

http://www.trshardware.com/store/index.html

[ShopSite Lauren]

The reason why it keeps changing back to what it was is because the files are within ShopSite. When you bypass ShopSite, and edit the files outside of ShopSite, such as through a file manager, then the next time ShopSite republishes, ShopSite uses its un-edited files and replaces your edited files. So you will need to upload and edit the files within ShopSite.

That said, go to Merchandising > Custom Templates > Includes > New Publish File. Name the publish file exactly "3Column-01.css". This will override the original 3Column-01.css file. Then in the 3Column-01.css publish file, add the code below.
3Column-01.css

Code: Select all

 #header {
   height: 100px;
   overflow: hidden;
   position: absolute;
   top: 30px;
 }
 #logo h1 {
   font-size: 30px;
   font-weight: normal;
   margin: 0px;
   padding: 10px 20px;
 }
 #search {
   padding: 40px 0px 0px 0px;
 }
 #toplinks {
   height: 30px;
   line-height: 30px;
   background-image: url(https://shopsite.fatcow.com/ss11.2/shopsite-images/en-US/backgrounds/3col/topnav-bg.jpg);
   background-position: bottom right;
   background-repeat: no-repeat;
 }
 #colorbar {
   background-image: url(https://shopsite.fatcow.com/ss11.2/shopsite-images/en-US/backgrounds/3col/3col-clrbr-01.png);
   background-position: top right;
   background-repeat: no-repeat;
   top: 162px;
   height: 60px;
 }
 #colorbar h2 {
   font-weight: normal;
   font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
   font-size: 160%;
   line-height: 54px;
   color: #FFFFFF;
   margin: 0px;
   padding: 3px 0px 0px 40px;
 }
 #container {
   margin: 224px auto 0px auto;

 }
 #left, #right {
   border-color: #FFFFFF;
 }
 #left {
   background-image: url(https://shopsite.fatcow.com/ss11.2/shopsite-images/en-US/backgrounds/3col/side-bg.jpg);
   background-position: top left;
   background-repeat: repeat-x;
 }
 #left a, #left a.left_pagelink, #right a, table#mini-detail td {
   border-color: #CDCDCD;
 }
 #left a, #left a.left_pagelink {
   background-image: url(https://shopsite.fatcow.com/ss11.2/shopsite-images/en-US/backgrounds/3col/side-bullet.png);
   background-position: center left;
   background-repeat: no-repeat;
 }
 #left a.left_pagetitle, #right a.right_pagetitle {
   color: #000000;
   text-align: left;
   border-bottom: 0px;
 }
 #table td.side-line, #table td.side-line img {
   background-color: #E9E9E9;
 }
 #pagination, #pagination2 {
   background-image: url(https://shopsite.fatcow.com/ss11.2/shopsite-images/en-US/backgrounds/3col/pagination-bg.jpg);
   background-position: center center;
   background-repeat: no-repeat;
 }
 #right {
   background-image: url(https://shopsite.fatcow.com/ss11.2/shopsite-images/en-US/backgrounds/3col/side-bg.jpg);
   background-position: top left;
   background-repeat: repeat-x;
 }
 #footercategories, #press-recal {
   background-color: #DEDEDE;
 }
 div.footcat, div.footer_pagelinks {
   border-color: #FFFFFF;
 }
 #footertext, #footerlinks_inner, #footerlinks_inner a, #lastline {
   color: #777777;
 }
 #footerlinks {
   border-color: #777777;
 }
 
 /* -- Product On Category Pages -- */
 .pr, .gc_pr_hm, .pc_pr {
   border: 1px solid #DEDEDE;
   background-image: url(https://shopsite.fatcow.com/ss11.2/shopsite-images/en-US/backgrounds/3col/product-bg.jpg);
   background-position: bottom left;
   background-repeat: repeat-x;
 }
 #progressbar {
   background-color: #EFD230;
 }
 #toptabs {
   top: 130px;
   height: 27px;
   border-bottom: 3px solid #0997D7;
 }
 .suckertreemenu ul li a {
   background: #0997D7;
   border-top-left-radius: 3px; border-top-right-radius: 3px; -moz-border-top-left-radius: 3px; -moz-border-top-right-radius: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px;
   line-height: 28px;
   min-width: 140px; border-right: 1px solid #FFFFFF;
 }
 .suckertreemenu ul li:last-child {float: right; clear: none;}
 .suckertreemenu ul li:last-child a {background: #113F6D; border-right: 0px; border-left: 1px solid #FFFFFF;}
 .suckertreemenu ul li:last-child a:hover {background: #194E84;}
 .suckertreemenu ul li ul li a {min-width: 200px; border-top: 1px solid #0186BF; border-right: 0px; line-height: 30px; border-top-left-radius: 0px; border-top-right-radius: 0px; -moz-border-top-left-radius: 0px; -moz-border-top-right-radius: 0px; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px;}
.suckertreemenu ul li a:hover {background: #0186BF;}

If you want to edit the color of the last link, the main background color (the dark blue) is 113F6D, you can find that in the CSS code above and replace it with the color you want. The hover color (slightly lighter dark blue) is 194E84.

Last, go to Preferences > Navigation > Add, and add another menu link. Whatever your LAST menu link is, will be the link that is aligned right and is the darker blue.

[TRS]

I've added the code as you explained, however, it did not change the location of the last Menu link. see URL and the "CLEARANCE" tab. What am I doing wrong?

http://trshardware.fatcow.com/store/index.html

[ShopSite Lauren]

Your store isn't using the new CSS file yet.
Did you name the file EXACTLY 3Column-01.css, add it in the 'publish file' section, and publish your store?

[TRS]

I did this:

ShopSite > Merchandising Tools > Custom Templates > New Custom Template >

added the name "3Column-01.css" and clicked on Create

the file is shown in a box called Publish Files (css, js, ...) under
"3Column-01.css(0.00K)"

then went to the "Edit publish" to add the code you have provided and clicked on "save changes" the file was updated to "3Column-01.css(3.81K)" .

now the "Blue publish botton" was not up to click on.

does this make sense?

[ShopSite Lauren]

Yes that makes sense. Making changes to template files does not prompt a publish (so that you can make template changes and not have to republish your entire site each time, you don't need to publish the entire site until you are ready). You can force a publish by going to Utilities > Publish > Regenerate. (you could also just go to a single page or single product > Edit Product/Page Info > Save Changes, and the publish tab will come up and will publish the CSS and JavaScript files, as well as that one page/product).

[TRS]

Thanks! You've been very helpful.

I tried to change the color codes to BB00FF for main and 9900FF for the hover, however, it did not take the change the color. I deleted the CSS file and re-enter it with the colors i wanted and did regenerate the store, it still did not change. I double checked it.

Also the last item on my sub-menu has a different color than the others.

Another question I have is, if you look at my store I've created categories to go to different pages.
see Shower doors> hinges and pivots
or go to http://trshardware.fatcow.com/store/page2.html
how can I put those categories in boxes with descriptions under these boxes? and how can I change the fonts for these descriptions?

[ShopSite Lauren]

Try the CSS file below for changing the colors.

Code: Select all

 #header {
   height: 100px;
   overflow: hidden;
   position: absolute;
   top: 30px;
 }
 #logo h1 {
   font-size: 30px;
   font-weight: normal;
   margin: 0px;
   padding: 10px 20px;
 }
 #search {
   padding: 40px 0px 0px 0px;
 }
 #toplinks {
   height: 30px;
   line-height: 30px;
   background-image: url(https://shopsite.fatcow.com/ss11.2/shopsite-images/en-US/backgrounds/3col/topnav-bg.jpg);
   background-position: bottom right;
   background-repeat: no-repeat;
 }
 #colorbar {
   background-image: url(https://shopsite.fatcow.com/ss11.2/shopsite-images/en-US/backgrounds/3col/3col-clrbr-01.png);
   background-position: top right;
   background-repeat: no-repeat;
   top: 162px;
   height: 60px;
 }
 #colorbar h2 {
   font-weight: normal;
   font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
   font-size: 160%;
   line-height: 54px;
   color: #FFFFFF;
   margin: 0px;
   padding: 3px 0px 0px 40px;
 }
 #container {
   margin: 224px auto 0px auto;

 }
 #left, #right {
   border-color: #FFFFFF;
 }
 #left {
   background-image: url(https://shopsite.fatcow.com/ss11.2/shopsite-images/en-US/backgrounds/3col/side-bg.jpg);
   background-position: top left;
   background-repeat: repeat-x;
 }
 #left a, #left a.left_pagelink, #right a, table#mini-detail td {
   border-color: #CDCDCD;
 }
 #left a, #left a.left_pagelink {
   background-image: url(https://shopsite.fatcow.com/ss11.2/shopsite-images/en-US/backgrounds/3col/side-bullet.png);
   background-position: center left;
   background-repeat: no-repeat;
 }
 #left a.left_pagetitle, #right a.right_pagetitle {
   color: #000000;
   text-align: left;
   border-bottom: 0px;
 }
 #table td.side-line, #table td.side-line img {
   background-color: #E9E9E9;
 }
 #pagination, #pagination2 {
   background-image: url(https://shopsite.fatcow.com/ss11.2/shopsite-images/en-US/backgrounds/3col/pagination-bg.jpg);
   background-position: center center;
   background-repeat: no-repeat;
 }
 #right {
   background-image: url(https://shopsite.fatcow.com/ss11.2/shopsite-images/en-US/backgrounds/3col/side-bg.jpg);
   background-position: top left;
   background-repeat: repeat-x;
 }
 #footercategories, #press-recal {
   background-color: #DEDEDE;
 }
 div.footcat, div.footer_pagelinks {
   border-color: #FFFFFF;
 }
 #footertext, #footerlinks_inner, #footerlinks_inner a, #lastline {
   color: #777777;
 }
 #footerlinks {
   border-color: #777777;
 }
 
 /* -- Product On Category Pages -- */
 .pr, .gc_pr_hm, .pc_pr {
   border: 1px solid #DEDEDE;
   background-image: url(https://shopsite.fatcow.com/ss11.2/shopsite-images/en-US/backgrounds/3col/product-bg.jpg);
   background-position: bottom left;
   background-repeat: repeat-x;
 }
 #progressbar {
   background-color: #EFD230;
 }
 #toptabs {
   top: 130px;
   height: 27px;
   border-bottom: 3px solid #0997D7;
 }
 .suckertreemenu ul li a {
   background: #0997D7;
   border-top-left-radius: 3px; border-top-right-radius: 3px; -moz-border-top-left-radius: 3px; -moz-border-top-right-radius: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px;
   line-height: 28px;
   min-width: 140px; border-right: 1px solid #FFFFFF;
 }
 .suckertreemenu ul li:last-child {float: right; clear: none;}
 .suckertreemenu ul li:last-child a {background: #BB00FF; border-right: 0px; border-left: 1px solid #FFFFFF;}
 .suckertreemenu ul li ul li:last-child a {border-left: 0px; background: #0997D7;}
 .suckertreemenu ul li ul li:last-child a:hover {background: #0186BF;}
 .suckertreemenu ul li:last-child a:hover {background: #9900FF;}
 .suckertreemenu ul li ul li a {min-width: 200px; border-top: 1px solid #0186BF; border-right: 0px; line-height: 30px; border-top-left-radius: 0px; border-top-right-radius: 0px; -moz-border-top-left-radius: 0px; -moz-border-top-right-radius: 0px; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px;}
.suckertreemenu ul li a:hover {background: #0186BF;}
td.pa {text-align: center;}
td.pa a {font-weight: bold;}
td.pa span {}


For your second question, I would suggest going to Pages > Edit Page Layout, and choose to NOT wrap the link text/image (should be one of the first setting on the page). Then go to Pages > Edit Page Content, and you can enter in the description you want in the "Link Text" field. For changing the fonts, below is the CSS (that you will find at the bottom of the CSS file I mentioned above). You can add the font changes there. (you can technically add the font changes in the page link name field and page link text field themselves using HTML, but it is much cleaner and quicker and universal if you do it in the CSS). Examples of CSS that you might add in might be font-weight: bold; or font-size: 110%; or font-family: Verdana, Helvetica, sans-serif;

td.pa {text-align: center;}
td.pa a {font-weight: bold;}
td.pa span {}

[TRS]

Thanks for your help again.

It does make sense to change the css. I can find look online and make the changes i want. However, how can I find that particular code that needs to be changed. for Example I need to do two things done:

1) I need to remove the title above the page. and when I un-check the "Check here to display name on this page." it will also remove the title on the dark blue bar, which I would like to keep.

2) I know the fonts are pre-defined, I want to change the title font weight to bold on the blue bar.

How can I find these codes change them and preview them (if possible) then save.

Thanks again