I've been trying to customize one the menu item on the joomla template i've currently use.
Some of the menu I've used before normally display item ID when you view the source code but my template doesn't display any at all. Anyhow I created the css code below hoping this will meet my goal but it didn't work. What I'm trying to accomplish is make the APPLY NOW an item #30 on my administrative main menu panel column turn the background into RED before any hover or any activities. You could view my temp link at getvms.net/home
I really appreciate if you could help me.
Thank you!
code:
#s5_nav li {
display:block;
list-style:none;
position:relative;
float:left;
border-right:solid 1px #B6B5B5;
height:45px;
padding-left:10px;
padding-right:10px;
padding-top:9px;
padding-bottom:0px;
overflow:hidden;
}
#s5_nav li.item#30, {
display:block;
list-style:none;
position:relative;
float:left;
border-right:solid 1px #B6B5B5;
height:45px;
padding-left:10px;
padding-right:10px;
padding-top:9px;
padding-bottom:0px;
overflow:hidden;
background:red;
you are on right direction giving style to one item in a fine way but you have one mistake
#s5_nav li.item#30, {
display:block;
you should remove , at the end of the item#30 and you should use like this
#s5_nav li.item#30{
display:block;
hop it will help you.
The following may work for you if you are using Joomla! 1.6 or 1.7:
You can apply a custom CSS class to a specific menu item through the Menu Manager in Joomla!. Once you have done so, you can apply a style to that class in your style sheet.
To do so, simply open the desired Menu Item in your Menu Manager, and in the right hand column click "Link Type Options" to open that panel. The "Link Style CSS" field allows you to specify the name of a CSS class you would like to be applied to that Menu Item. This will allow you to apply styles to just that single menu item.
try with:
#s5_nav li.item30{
display:block;
list-style:none;
Related
The content of my webpage is going behind the side menu I have positioned to the left.I want the menu to be fixed however whenever I do so the content hides behind the menu to the left. Any help would be much appreciated. (Apologies for formatting, new to the site.)
.menu {
padding-top: 150px;
height: 100%;
width: 170px;
background-color: white;
float: left;
display: table;
position: fixed;
}
Fixed elements are no longer within the page flow, they act in the same way as an absolute positioned element. Chris Coyier has a really good explanation about the differences in positioning http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
In order for your body content to stop flowing behind the fixed property, you need to create a container (if one does not exist yet) that all of the body content resides in, except of course the nav/menu bar. You then apply a padding-left to the main body content equal so the width of the fixed element so that the main body content is always padded away from the left of the browser.
Fixed elements don't affect the flow and positioning of elements and position:relative on a parent container has no affect on a fixed element.
I am trying to put two Nivo sliders on one page. Some of the attributes are different. So I have simply created two scripts for these attributes, "slider" and "slider2". That's no problem.
However, I want to make the title style a little different for the second slider. I noticed that the text style of the slide title is controlled by this style:
.nivo-caption p {
padding:8px;
margin:0;
color: #000;
font-size: 16px;
}
However, I don't see that css style called within my html. (When I look at the web page source code I see it but not when I'm actually looking at the code file itself.)
I'd love to simply create a new style for my second slider, something like:
.nivo-caption2 p {
margin:0;
color: #000;
font-size: 12px;
}
But I need to know how to actually call that within my html. Can anyone help? Thanks.
Actually, I figured it out. Since I have ids of "slide" and "slide2" for each slide show, I simply appended that to my new style and that worked.
I am trying to put a line-height to properly align all menu items in a wordpress menu. My problem is that it works with menus that do not have an image or description, if it does have a image or description it does not align vertically with the line-height property.
Here's what I have for the menu items working:
.menu-dropdown a.level1 > span, .menu-dropdown span.level1 > span {
height: 50px;
line-height: 50px;
padding: 0 10px;
}
Now when I use Firebuf to try and fix the problem, there is a class showing a little diferent, which is "level1 parent". Even with Firebug I cannot fix this. I´m working on localhost, so can't give a link for the problem, but if it's necessary I'll put it online.
Here´s the link, you can see the problem in main menu at the top:
http://ricardo.dyndns-at-work.com:8888/yootheme/
I've been searching and searching for an answer to this problem and cannot found a solution.
I have added some custom styles to the CKEditor that add a margin-left to the selected text. The problem is that this causes the style previews to move to the right in the styles list. So much so, that they go off the right side of the dropdown. I don't quite have enough rep to post a screenshot unfortunately.
I would just like the styles in the list to have no preview at all if possible.
I have tried to add .cke_panel_listItem p {margin-left: 0px !important;} to my global.css and to the editor.css. I cannot override the inline style no matter what I do.
Any suggestions? Thanks in advance!
I was able to do this using the contentsCss config property. So:
CKEDITOR.editorConfig = function( config ) {
config.contentsCss = 'wysiwyg.css';
}
then in wysiwyg.css put your CSS code:
.cke_panel_listItem p {
margin-left: 0px !important;
}
I'm trying to make a horizontal, "category" main menu and a vertical submenu, separated from the main one. When I select a category its main page is displayed. But when I select another page from the submenu, that is supposed to be from the same category, then the "category" item from main menu stops being highlighted. All the menus are defined as a "stand-alone" modules and I'm using Joomla 1.6.3.
Any type of highlighting or effect is based upon CSS classes which are assigned in the creation of the menu via XML. If you have each menu as separate instead of one large hierarchy you may run into problems. Your menu structure should be made in one module using hierarchy.
If we look at the Joomla 1.6 demo page at: hhttp://demo16.cloudaccess.net/index.php/using-joomla/extensions We can see that "Using Joomla!" is the parent and "Using Extensions is the child". Let's look at the CSS classes assigned to the for each of those links
Using Joomla - class="active deeper parent"
Using Extensions - class="current active deeper parent"
You can then control formatting using CSS Javascript based upon the hierarchy like
li.parent li.current { CSS here } //do things based on the current
li.active li.active { css here } // add an .active for each level down the hierarchy, for example to affect 3 ways in, require three li.actives in the hierarchical-selector
For example here are some the CSS rules being used on that page:
ul.menu li.active a:link, ul.menu li.active a:visited {
color: #333333;
}
ul.menu li.active ul li.active a:link, ul.menu li.active ul li.active a:visited {
border-bottom-color: #ffffff;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: currentColor;
border-left-style: none;
border-left-width: 0px;
border-right-color: currentColor;
border-right-style: none;
border-right-width: 0px;
border-top-color: currentColor;
border-top-style: none;
border-top-width: 0px;
color: #333333;
}
If you are not using one large menu for everything, then the parent items will not have the correct CSS classes added and you will have to do more complex javascript.
What I didn't know at the time was that I should set each item in the top menu as a Menu Item Alias. This allowed me to keep the item highlighted when items were selected from the submenu.
According to Joomla documentation http://docs.joomla.org/Help16:Menus_Menu_Item_Manager_Edit#Menu_Item_Alias:
"This Menu Item Type creates a Link to an existing Menu Item. It allows
you to have identical Menu Items on two or more different Menus
without duplicating the settings. So, for example, if you change a
parameter of a Menu Item that has an Alias linked to it, the Alias
will automatically acquire the same change."
For those who, like me before, are struggling with the idea of Joomla menus - the main menu in such configuration sits in a "Module Menu" with Start and End Level set to 1 (Basic Options), and the submenu sits in a different "Module", but carries the same menu, buts starts from Level 2.