suckerfish CSS assistance please

[pmaine]

Hi Ryan

I just subscribed to a month of premium support. Please visit:

http://www.aonepromos.com and look at the column on the left.

Please provide the CSS code so that I can create a new link above "Rush Service" named "Product Search" Please style the Product Search so that it stands out the most in the left hand menu. The product search should be linked to the following page:
http://www.aonepromos.com/product-search/
Next please note that I have bolded rush service,USA made products,sales & clearences,ecosmart products,top 50 products and breast cancer awareness. Please style thes 6 links to be lessor in importance than the product search but more pronounced that the simple bolding that I used.

[imported_Ryan]

Hi,
Thanks for signing up for premium support ” title=”Smiley” />

I’m not entirely sure exactly how you want the menu to look, but I’ll do my best estimate and post back here once it’s ready so that you can give feedback and request changes.

PS: I’ll move this over to the menus forum too.

[imported_Ryan]

"pmaine" wrote:

Please provide the CSS code so that I can create a new link above "Rush Service" named "Product Search"

Sorry, but I’m a little confused by this. You can already add new menu items above there. It looks like you are using the custom code option in the plugin, so all you would need to do is to add an extra link inside a list item like this:
[code:24kdx52y]
<li><a href="#" title="Product Search">Product Search</a></li>

<!– followed by your current HTML –>

<li class="page_item page-item-216"><a href="http://www.aonepromos.com/products/rush-service/" title="Rush Service"><font color="white"><strong>Rush Service</strong></font></a></li>
<li class="page_item page-item-216"><a href="http://www.aonepromos.com/products/usa-made-products/" title="USA Made Products"><font color="white"><strong>USA Made Products</strong></font></a></li>
<li class="page_item page-item-216"><a href="http://www.aonepromos.com/products/sales-clearances/" title="Sales &amp; Clearances"><font color="white"><strong>Sales & Clearances</strong></font></a></li>
  <li class="page_item page-item-218"><a href="http://www.aonepromos.com/products/ecosmart-products/" title="EcoSmart Products"><font color="white"><strong>EcoSmart Products</strong></font></a></li>
  <li class="page_item page-item-220"><a href="http://www.aonepromos.com/products/top-50-products/" title="Top 50 Products"><font color="white"><strong>Top 50 Products</strong></a></font></li>
  <li class="page_item page-item-222"><a href="http://www.aonepromos.com/products/breast-cancer-awareness/" title="Breast Cancer Awareness"><font color="white"><strong>Breast Cancer Awareness</strong></font></a></li>
[/code:24kdx52y]

[imported_Ryan]

Is this the sort of thing you have in mind perhaps?

[pmaine]

Hi Ryan

I understand how to add items to the menu. Please provide me with different styling to make these menu items stand out more than the simple bolding that I used. Make sure the styling for "Product Search" is more prominent than the items that are currently bold faced.

[imported_Ryan]

Oops, it appears the link I tried to post above never appeared.

Here’s what should have been in my original reply:

[b:fnxzg5k8]https://geek.hellyer.kiwi/demo/aonepromos/[/b:fnxzg5k8]

[pmaine]

This looks good. Please provide me with the code you have added.

[imported_Ryan]

If there any other changes you would like, just let me know and I’ll do them for you.

Here is the CSS I added:
[code:1p290i0q]#suckerfishnav li a strong {
color:#fff;
font-weight:bold;
font-size:13px;
line-height:24px;
}
#suckerfishnav li a em {
color:#fff;
font-weight:bold;
font-size:16px;
line-height:35px;
}[/code:1p290i0q]

Here is the extra HTML I added (only the first line):
[code:1p290i0q]<li><a href="#" title="Product Search">Product Search</a></li>

<!– followed by your current HTML –>

<li class="page_item page-item-216"><a href="http://www.aonepromos.com/products/rush-service/" title="Rush Service"><font color="white"><strong>Rush Service</strong></font></a></li>
<li class="page_item page-item-216"><a href="http://www.aonepromos.com/products/usa-made-products/" title="USA Made Products"><font color="white"><strong>USA Made Products</strong></font></a></li>
<li class="page_item page-item-216"><a href="http://www.aonepromos.com/products/sales-clearances/" title="Sales &amp; Clearances"><font color="white"><strong>Sales & Clearances</strong></font></a></li>
   <li class="page_item page-item-218"><a href="http://www.aonepromos.com/products/ecosmart-products/" title="EcoSmart Products"><font color="white"><strong>EcoSmart Products</strong></font></a></li>
   <li class="page_item page-item-220"><a href="http://www.aonepromos.com/products/top-50-products/" title="Top 50 Products"><font color="white"><strong>Top 50 Products</strong></a></font></li>
   <li class="page_item page-item-222"><a href="http://www.aonepromos.com/products/breast-cancer-awareness/" title="Breast Cancer Awareness"><font color="white"><strong>Breast Cancer Awareness</strong></font></a></li>[/code:1p290i0q]

I also stripped out the FONT tags you had in there as I’ve added the styling for them into the CSS, which is a better idea as it saves you having to add extra HTML to the page and hence reduces page load times (only tiny amount but it’s good practice anyway). So the following:
[code:1p290i0q]
<font color="white"><strong>TEXT</strong></font>
[/code:1p290i0q]
now only needs to be:
[code:1p290i0q]
<strong>TEXT</strong>
[/code:1p290i0q]

[size=1:1p290i0q][b:1p290i0q]Note:[/b:1p290i0q] The URL in the link I added currently doesn’t go anywhere. I didn’t know where it was supposed to be pointed at so I just left with a value of #. You can change it to whatever you like by altering the # to any URL.[/size:1p290i0q]

[pmaine]

What file do I add the CSS to?

[imported_Ryan]

Placing it at the end of the CSS box in the plugins admin page should work.

If you have any trouble, just let me know.

[pmaine]

Hi Ryan

I had to change:
[code:2feb08x1]<li><a href="http://www.aonepromos.com/product-search/" title="Product Search">Product Search</a></li>[/code:2feb08x1]

To:
[code:2feb08x1]<li><a href="#" title="Product Search"><em>Product Search</em></a></li>[/code:2feb08x1]

in order to get the Product Search to display how you intended.

I had to add the em tags.

Thank You

[pmaine]

The post software removed the html code I added from my prior post.

I just had to add the em tags.

[imported_Ryan]

Woops! Sorry about that. My demo had this, so I’m not sure why I didn’t have the <em> tags in the code I provided you. Apologies for the error:

[code:3f1c74x5]<li><a href="#" title="Product Search"><em>Product Search</em></a></li>[/code:3f1c74x5]

[size=1:3f1c74x5]BTW, you can use either HTML or bbCode CODE tags in here to format the code in your posts. I’ve done this to your post above.[/size:3f1c74x5]

[Author]

Posts