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.
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 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;
}
It’s difficult for me to word this question as I do not know the correct terminology. I’m trying to make a website so that when I scroll the main content, it does not scroll off the page. I want the main content to end somewhere in the middle of the page so as not to cover my “fixed” background image. But I do not want an iframe. In other words, it'll look somewhat like an iframe, but it should be controlled by the main scroll bar.
Anyway, I hope that made sense. I'd appreciate your suggestions.
Can use two <div>s that will cover the top and bottom part so that your text will go underneath them.
+----------------+
|+--------------+|
|| top ||
|+--------------+|
| your text |
| text |
|+--------------+|
|| bottom ||
|+--------------+|
+----------------+
On the z-index, the top and bottom will be over the main layer, and they will be positioned fixed to the top-left corner and bottom-left corner.
HERE: http://jsfiddle.net/FE2Wg/3/
Are you already using background-attachment: fixed; ?
Or overflow-y: scroll; with a div?
You want to show the scroll bar in a block of your HTML, right? Try using the CSS overflow property.
Reference: www.w3schools.com/css/pr_pos_overflow.asp
Try this in your page code:
<style type="text/css">
<!--
div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}
-->
</style>
<div class="scroll">
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
</div>
Is this you are trying to do??
I want to take topSearch from the header and copy it to a content page, so I cut from header.phtml and added to 3columns.phtml:
<?php echo $this->getChildHtml('topSearch'); ?>
It doesn't work, though. Any ideas?
I found solution for change the search bar position header to top links.
go to:-
app/design/frontend/[your_theme]/default/layout/catalogsearch.xml
replace this code
reference name="header"
with this
reference name="top.menu"
Changes css according to your design.
it woks for me
.form-search
margin-left: 899px;
margin-top: 8px;
position: absolute;
add the above css
let the search box on the header itself
just using the absolute property you can play to display its position
contact me on my email for furthur help.
Thanks.
Suraj Mishra
Magento Extension Developer
msooraz#gmail.com