Claudia Posted October 10, 2023 Share Posted October 10, 2023 I have tried for days to do this but can’t figure out how. I have my vertical menu working but I don’t know how to put the >> (or sideways triangle) on the main category when it has children. Also, if I want my children styled different than the parent how do I do that. Here is my code. Thanks for any help! Skin/element.navigation_tree <li class="has-sub-cbd"> <a class="vm-box-link-cbd" href="{$BRANCH.url}" title="{$BRANCH.name}">{$BRANCH.name}</a> {if isset($BRANCH.children)} <ul class="vnb-sub-cbd"> <!-- <li itemprop="name" class="vnb-sub-title-cbd">{$BRANCH.name}</li> --> {$BRANCH.children} </ul> {/if} </li> I commented out <!-- <li itemprop="name" class="vnb-sub-title-cbd">{$BRANCH.name}</li> --> because I don’t want the main category name showing with the children. Skin/box.navigation {if $CATEGORIES} {$CATEGORIES} {else} <div id="vm-container"> <ul itemscope itemtype="http://www.schema.org/SiteNavigationElement" class="vm-top"> <li itemprop="name"><a class="vm-box-link-cbd" itemprop="url" href="{$ROOT_PATH}" title="{$LANG.common.home}"><svg class="icon"><use xlink:href="#icon-home"></use></svg> Home</a></li> <li> <a href="/listed-only-on-ebay" title="Listed only on eBay" class="vm-ebay-txt">Listed only on eBay</a></li> <li> <a href="/listed-only-on-etsy" title="Listed only on Etsy" class="vm-etsy-txt">Listed only on Etsy</a></li> {$NAVIGATION_TREE} </ul> </div> {/if} Quote Link to comment Share on other sites More sharing options...
bsmither Posted October 11, 2023 Share Posted October 11, 2023 Looking at this.... Quote Link to comment Share on other sites More sharing options...
bsmither Posted October 11, 2023 Share Posted October 11, 2023 Did you get something working? Quote Link to comment Share on other sites More sharing options...
Claudia Posted October 11, 2023 Author Share Posted October 11, 2023 Kinda, been working on it, again, all day .... still some stuff I can't figure out. For instance: where do I find the icons (>) How can I hide the children from small display. May have more questions My new tree code: <li {if isset($BRANCH.children)}class="has-sub-cbd"{/if}> <a href="{$BRANCH.url}" title="{$BRANCH.name}" class="vm-box-link-cbd">{$BRANCH.name} {if isset($BRANCH.children)}<svg class="icon icon-x1 has-sub-arrow-cbd"><use xlink:href="#icon-angle-right"></use></svg>{/if}</a> {if isset($BRANCH.children)} <ul class="vnb-sub-cbd"> <li itemprop="name" class="vnb-sub-title">{$BRANCH.name}</li> {$BRANCH.children} </ul> {/if} </li> icon-x1 I created this {$BRANCH.children} How can I get it it's own styling Quote Link to comment Share on other sites More sharing options...
bsmither Posted October 11, 2023 Share Posted October 11, 2023 For the right-angle, there is no separate icon image file, per se. What is in the code is a symbol from the "icon-sprites.svg" file, within which there are only about two dozen symbols. The <svg> tag has been given the class 'has-sub-arrow-cbd', which this CSS rule simply positions the symbol. I am not sure how you are having a problem with small displays. I ask that you describe what you see on a small screen. I see a 'hamburger' menu icon at the top, next to the shopping cart and search icons. Clicking the menu icon causes a slide out showing the top level categories. No hovering will have sub-categories appear. Quote Link to comment Share on other sites More sharing options...
Claudia Posted October 11, 2023 Author Share Posted October 11, 2023 I may want to change the > to a side triangle. I got this error when I tried to open the icon-sprites.svg" file. This page contains the following errors: error on line 1 at column 1: Document is empty Below is a rendering of the page up to the first error. Any idea about this: {$BRANCH.children} How can I get it it's own styling Do I put it in a <div> or <span> <div class=??> {$BRANCH.children} </div> Quote Link to comment Share on other sites More sharing options...
bsmither Posted October 11, 2023 Share Posted October 11, 2023 For styling children, find the current CSS rule '.vnb-sub-cbd'. Note the current background and border styles. This affects the overall list group. These stylings can be changed. Find the current CSS rule 'a.vm-box-link-cbd'. This affects each individual list item. Create a new CSS rule: .vnb-sub-cbd a.vm-box-link-cbd { } The stylings here affect only the sub list items. The "icon-sprites.svg" file resembles an XML file. Because this file is "included" into a Smarty template (as opposed to having the browser fetch it as a page resource, like an image file), the CubeCart programmer's took the opportunity to add some Smarty comment tags -- which invalidates the strict structure of a SVG file. Therefore, do not try to view this file in a web browser. Quote Link to comment Share on other sites More sharing options...
Claudia Posted October 12, 2023 Author Share Posted October 12, 2023 I see what you mean about the icon-sprites.svg" file. Can a person add to this file? .vnb-sub-cbd a.vm-box-link-cbd { } worked but what if I wanted to style one sub differently than the others. Like cat ID 40 Promise I'll try not to ask anything else Can I move the sub box up a little so it's in the middle of the parent instead at the bottom Quote Link to comment Share on other sites More sharing options...
bsmither Posted October 12, 2023 Share Posted October 12, 2023 Yes. I am currently trying to find a SVG symbol script for a right-triangle. Interesting. One can try to add a style attribute with the value coming from a detail of the category. Do you still use the Meta-Keywords detail on the Search Engines tab? The programmers took out the text entry field for entering keywords, but the database column is still there. As such: <a style="background-color:{$category.seo_meta_keywords};"> where for this category, 'seo_meta_keywords' would be green or #aacc99. (Keep all the other stuff in the code, just add a dedicated style attribute.) Quote Link to comment Share on other sites More sharing options...
bsmither Posted October 12, 2023 Share Posted October 12, 2023 Find: <ul class="vm-top"> For all the <li> that is a direct child, change to: <li style="position:relative;"> These <li> tags may also have the attribute, class="has-sub-cbd" but I cannot find a CSS rule with that name. Find the CSS rule .vnb-sub-cbd, and make sure it has position: absolute; Add this to the rule: top: 15px; Quote Link to comment Share on other sites More sharing options...
Claudia Posted October 12, 2023 Author Share Posted October 12, 2023 {if isset($BRANCH.children)} <ul class="vnb-sub-cbd"> <li itemprop="name" class="vnb-sub-title">{$BRANCH.name}</li> {$BRANCH.children} </ul> {/if} There is no <li> for {$BRANCH.children} There is no ccs rule for has-sub-cbd . It's in the script $('.vnb-sub-cbd').hide(); $('.has-sub-cbd').hover(function(){ $(this).children('.vnb-sub-cbd').fadeToggle(200); }); Would something like this work for individual child styling? I know it's not right <li {if isset($BRANCH.children)}class="has-sub-cbd"{/if}> <a href="{$BRANCH.url}" title="{$BRANCH.name}"{if $VNB_CBD_BRANCH.cat_id == '40'class="pad-bottom" {else} class="vm-box-link-cbd">{$BRANCH.name} {if isset($BRANCH.children)}<svg class="icon icon-x1 has-sub-arrow-cbd"><use xlink:href="#icon-angle-right"></use></svg>{/if}</a> {if isset($BRANCH.children)} <ul class="vnb-sub-cbd"> <li itemprop="name" class="vnb-sub-title">{$BRANCH.name}</li> {$BRANCH.children} </ul> {/if} </li> Quote Link to comment Share on other sites More sharing options...
bsmither Posted October 12, 2023 Share Posted October 12, 2023 Find this: <li {if isset($BRANCH.children)}class="has-sub-cbd"{/if}> Change to: <li {if isset($BRANCH.children)}class="has-sub-cbd"{/if} style="position: relative;"> The following will certainly affect cat_id=40. What happens when you want special styling for a dozen more? <a href="{$BRANCH.url}" title="{$BRANCH.name}" {if $VNB_CBD_BRANCH.cat_id == '40'} class="pad-bottom" {else} class="vm-box-link-cbd" {/if} > {$BRANCH.name} {if isset($BRANCH.children)} <svg class="icon icon-x1 has-sub-arrow-cbd"><use xlink:href="#icon-angle-right"></use></svg> {/if} </a> Quote Link to comment Share on other sites More sharing options...
Claudia Posted October 12, 2023 Author Share Posted October 12, 2023 In my bottles and jars category I just wanted to put a solid border under the other soft drink bottles to separate the soda bottle from other bottles. I doubt I'd use it again. Do I put the > above {$BRANCH.name} Thanks for all your help on this Brian. I really appreciate it. Quote Link to comment Share on other sites More sharing options...
bsmither Posted October 12, 2023 Share Posted October 12, 2023 The greater-than symbol is the closing angle of the first part of the <a> tag. Everything after that, up to the second half of the <a> tag, </a>, is the "friendly-text" seen as the link. It will become apparent when you collapse the multiple lines into one line, if you so choose. Quote Link to comment Share on other sites More sharing options...
bsmither Posted October 12, 2023 Share Posted October 12, 2023 Using a programmer's text editor, open the file icon-sprites.svg. Find: <svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> Add after: <symbol id="icon-play" viewBox="0 0 384 512"> <path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/> </symbol> Save. In the template BRANCH code: Find: <use xlink:href="#icon-angle-right"></use> Replace with: <use xlink:href="#icon-play"></use> Quote Link to comment Share on other sites More sharing options...
Claudia Posted October 12, 2023 Author Share Posted October 12, 2023 You are a wonderful human being!!!! Where did you find this? Quote Link to comment Share on other sites More sharing options...
bsmither Posted October 12, 2023 Share Posted October 12, 2023 https://github.com/FortAwesome/Font-Awesome/tree/master/svgs/solid Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.