I am trying to indent 3rd level menu items on sub-pages in a Joomla! 1.5 install. Can anyone throw me any tips for making this possible?
If you look on this page, you'll see that the page you're on, in the left menu, is vertically inline with all the other page links in the menu. Since this is a sub-page of Hanson History, I would like Hanson Team to be indented a few pixels, so the user see's it's a sub-page of that menu item.
http://hanson.betabing.com/about-us/hanson-history/hanson-team
Thanks for looking,
Bill
Use CSS to target the second level unordered list
#content-left-interior ul.menu li ul li a span { padding-left:10px; }
add this in template.css under templates/hanson/css
#content-left-interior li li {
padding-left: 46px;
}
Related
<div style="color: rgba(0, 0, 0, 0.87); height: 56px; line-height: 56px; overflow: hidden; opacity: 1; position: relative; padding-left: 24px; padding-right: 56px; text-overflow: ellipsis; top: 0px; white-space: nowrap;">Never</div>
With the HTML listed I am trying to access the dropdown list example on the www.material-UI.com website. I have tried both of the following:
b.div(:text => "Never").click
b.span(:text => "Never").click
But it does not click on the component to open up the rest of the menu. this is my first week using Watir and I need to use it to automate a web app built using React.js and Material-UI. I have been successful with text boxes and scrolling and even clicking on images but menus and lists are proving problematic.
I'm going off of #orde's suggestion that the page in question is http://www.material-ui.com/#/components/dropdown-menu. The solution below worked for me on that page.
To open the entire menu in the "Simple example" section, you can click the button:
b.div(:text, 'Never').parent.button.click
But I'm not sure what issue you were having. Was it that the menu simply wouldn't open, or that you couldn't open the correct menu because there are multiple menus on the page with "Never" in the contents?
If the problem is the latter, then you can specify which part of the page you want to be in by honing in on the section heading. It's a bit more verbose, but
b.span(:text, 'Open Immediate example').parent.parent.parent.parent.parent.buttons[1].click
opens the second "Never" menu on the screen. (Five parents above the "Open Immediate example" text gets you to the entire div, and the second button--which has an index of 1--is the drop-down you want. Changing the text to "Simple example" will open the same menu as my first code sample above.)
The issue is that what you want is nested in multiple text nodes, in this case div tags. So getting an ElementCollection gets both the parent and the child div.
So you can do:
browser.div(text: 'Never').child.click
or
browser.div(text: 'Never', index: 1).click
I want to set icon in sidebar of joomla component backend
JHtmlSidebar::addEntry(JText::_('USERS'),'index.php?option=com_users&view=users',$vName == 'users') is used to create this sidebar
My initial answer was for the menu, see below.
For the sidebar, the easiest answer is probably just adding custom css to the admin-theme. By default there are no classes on the sidebar menu items, but you can use the href-tag with attribute-selectors in css, like this:
/* For each item in the sidebar: */
a[href*="yourview"]{
display: block;
padding: 0 0 0 20px;
background: transparent url(link/to/img.png) 0 0 no-repeat;
}
It is also possible to override the sidebar output by copying the file /layouts/joomla/sidebars/submenu.php to the folder html/layouts/joomla/sidebars/submenu.php, and edit this file to display like you want it. More info is found here.
For the menu: It seems like you can add this to the definition of the administration menu in /administrator/components/com_componentname/componentname.xml, like this:
<administration>
<menu img="link/to/icon.png" >COM_COMPONENTNAME</menu>
<submenu>
<menu link="option=com_componentname&view=aview" view="aview"
img="link/to/other-icon.png" alt="Componentname/Aview">
COM_COMPONENTNAME_TITLE_AVIEW
</menu>
</submenu>
</administration>
If you actually want to hide the texts (not sure if I understood you right), you'll need to add some css to the backend theme, or to your component, to accomplish this. If you need to modify the backup theme, it's probably best to make a copy of the isis-theme, so your changes are not overwritten by joomla updates.
Finally I got Answer of this question
Answer
JHtmlSidebar::addEntry('<span class="dashboard-submenuicon"></span>'.
JText::_('Dashboard'),
'index.php?option=com_mycomponent&view=dashboard',
$vName == 'dashboard'
);
We can write css code like
.dashboard-submenuicon{
background-image:url('your_image_url');
background-repeat: no-repeat;
display: inline-block;
height: 22px;
vertical-align: middle;
width: 22px;
margin-right:5px;
}
You need to be sure to include the CSS for the icon you want to add. If you inspect your links there should be an associated class. Create your component CSS to include the background-image you want to use.
The answer related to the admin menu is for Joomla 2.5 and is related to admin main top menu items, not sidebar items.
I set the Home menu item to show all the featured articles of all categories in my homepage, and everything is working fine.
Now I want to set an offset for those articles to show them starting from the fifth article and not the first, is that possible with no hack on the core?
Thank you.
I apply a custom CSS class to the module, then do something like this:
.home-latest-news ul > li:nth-child(1),
.home-latest-news ul > li:nth-child(2),
.home-latest-news ul > li:nth-child(3),
.home-latest-news ul > li:nth-child(4),
.home-latest-news ul > li:nth-child(5) {
display: none;
}
It doesn't offer the non-programmer usability or SEO features that a module would, but it's very simple.
I'd rather do like this... Setting 4 Leading articles (as also suggested) then use jQuery to .remove() those Leading articles! Thank you.
So i am new to magento and web development and i am in the middle of putting together my own site which is here theshirt.org i am trying to change the look of this vertical navigation menu which i made following the instructions on this wiki
Creating a vertical navigation
I am trying to change a few things on this navigation but i just have no clue where to start.
As i have changed the size of my main and left sidebar, the nav menu is too big so will i will need to change the size of the nav menu to 150px
the nav menu only appears on the home page. I need it to appear of every page
When i hover over the navigation categories i would like the menu items to change colour.
now how would i go about doing this?
Thanks again guys for your help. I would not have been able todo any of my store without the help of this site!
Jon
1°) Look at http://theshirt.org/skin/frontend/default/footprint/css/widgets.css and edit width:200px to width:130px around line 155
#nav_vert li {
background-color: #F6F6F6;
border-bottom: thin solid #CCCCCC;
list-style: none outside none;
position: relative;
text-align: left;
width: 130px;
}
2°) You must have missed the first step of your tutorial :
<reference name="left">
<block type="catalog/navigation" name="catalog.leftnav" after="currency" template="catalog/navigation/left.phtml"/>
</reference>
move this in the <default> section
it will show the menu in all page with a left column.
3°) Just do some CSS here to look at the :hover pseudo-element
Basically in the same css than for 1°) (widget.css) look at line 202 and replace #nav_vert a:hover by #nav_vert span:hover to have your text grey on mouse over. Then you can play with color, or background-color or whatever you want ;)
Edit.:
To transform a page to a 2 columns with left bar, edit your xml layout files to change the template of the <reference name="head"> on page you want.
For CMS page you can set this directly through a menu when creating the page.
I have problem with tooltips on my magento website, I need to have one tooltip on product page which will show a HTML UL List. I tried some plugins I found but had problems with JQuery as it was disabling other prototype pop up I have on product page.
Im really a newbie at All the types of javascript and hope you experts can help me with this please.
My trigger id for tooltips is #why-to-buy
and the tooltip class in CSS is .why-to-buy-tooltip
can anyone suggest me a prototype or scriptaculous driven simple tooltip which can show HTML please?
Any help is more than welcome.
Thanks in advance.
Typically this can be done in just CSS. To start with there needs to be an anchor;
<a id="why-to-buy" href="#" onclick="return false;">
Why To Buy?
<ul class="why-to-buy-tooltip">
<li>Reason #1</li>
<li>Reason #2</li>
</ul>
</a>
The onclick is to prevent it working as a hyperlink. An anchor is necessary for older IEs to respect the following hover;
#why-to-buy {
position: relative;
}
#why-to-buy .why-to-buy-tooltip {
display: none;
position: absolute;
width: 200px;
height: 200px;
z-index: 100;
}
#why-to-buy:hover .why-to-buy-tooltip, #why-to-buy:active .why-to-buy-tooltip {
display: block;
}
If you need more info search for and read about "CSS popups". A nice touch is to add some CSS3 transitions - old browsers just ignore them and continue to work as normal.
This type of popup is limited because it is inside an anchor, and anchors cannot contain anchors. If the #why-to-buy element is of another type, such as a DIV, then IE doesn't pick up the :hover pseudoclass. For this special case a bit of JavaScript is needed after all.
$('why-to-buy').observe('mouseenter', function() {
this.addClassName('over');
}).observe('mouseleave', function() {
this.removeClassName('over');
});
Update the last stylesheet rule to include #why-to-buy.over .why-to-buy-tooltip. The bit of JavaScript is rarely needed and can go in /skin/frontend/base/default/js/ie6.js. Or you could encourage browser upgrades and choose not to support old IE at all.
A quick Google searched returned this one, and shows to support HTML:
http://www.nickstakenburg.com/projects/prototip/
It's prototype based so should work well with Magento.