I have activated the extended menu via the Screen Options and in my menu item I have specified a class based on the css code added to the screeen.css file.
For example in the "Home" menu item I have specified a class of "red", and in the css I have added the following code.
.red { color: #FF0000}
Unfortunately this is not transposing to the template and I am not sure what I am doing wrong.
Checking this with firebug I notice the class is being added, however the color change is not appearing.
<li id="menu-item-154" class="red menu-item menu-item-type-post_type menu-item-
object-page current-menu-item page_item page-item-148 current_page_item menu-
item-154"> Home
Can anyone offer some suggestions to make this work?
The color might be specified in one of the other classes as well.
You can try to remove that or you can try to force the color via the CSS important attribute.
Try:
.red { color: #FF0000 !important;}
Related
I've noticed when I add a Header CSS class in the web part properties, this value is added to the span and it's parent div for the header. Is this intentional? and what's the easiest way to 'fix' this. Ideally i think the class should only be applied to the wrapper tag on the header copy.
Inspecting the HTML as you mentioned both the Div and the Span have your Header Class and you can tell by the generated IDs that Kentico have used asp:Panel and asp:Label controls.
Also it's worth noting that if you omit the Collapsed and Expanded text there is no Span.
I suspect that Kentico have made a concious decision to set the CssClass property on both Controls so that your class applies directly to the text in the Span. However this could have a negative side affect of applying your class to both Elements with CSS properties such as Padding and Margins.
The 'fix' for now would be to handle this in your CSS. Eg.
Div.yourClass { padding: 5px; background-color: #eee;}
Span.yourClass { color: #333;}
I have a pretty simple horizontal menu that has a solid background with colored links. How do I change the color of the link when I'm at the targeted page?
I tried this #nice-menu-1 li a:active
but that only affects the color for a moment when I click on it. I want the color on that item of the menu to stay changed while I am on that page.
thanks
Elements are "active in the definition of the :active pseudo class when that element is being clicked or tapped. So what you describe above is expected behavior.
You'll need to:
Set a class on the link that corresponds to the current page
Target that class with CSS
Luckily, Nice Menus and Drupal handle #1 for you by adding an .active class to the <a> tag and an .active-trail class to the parent <li> tag.
So you can target those in CSS like this:
#nice-menu-1 li.active-trail a,
#nice-menu-1 li a.active { color: #0f0;}
I would like to put a custom icon in a p:menuButton, is this possible?
Yest it is possible. All you need to do is to override primefaces css classes generated for the p:menuButton.
Approach:
In the rendered web page you can right click on the generated p:menuButton and -> inspect element. There you can inspect all of the related css classes.
You can try to experiment with them (which I would advice, if you have time) for better understanding of css selectors and so on ...
The .ui-menubutton .ui-state-default .ui-icon are the classes that you need.
So now when you know which css classes are related to the icon you can override them :
Add .ui-menubutton .ui-state-default .ui-icon rule to your stylesheet (I assume you have one and it is sucesfully imported and working. If not check here.)
yourStyles.css :
.ui-menubutton .ui-state-default .ui-icon {
background: orange; /** insert your background image **/
}
This will override icons of all p:menuButtons used in your project. If you want to reduce it to some particular p:menuButton then add its ID to the style definition.
#menubID.ui-menubutton .ui-state-default .ui-icon {
background: orange; /** insert your background image **/
}
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;
Is there a way to change the default unsorted icon for a rich:column?
I am aware that you can add sortIcon="/images/myPic.png", but i don't want to have to add that for every single column.
I tried adding an attribute selector to my CSS file to "hide" the image:
img[src="/app/a4j/g/3_3_0.GAorg.richfaces.renderkit.html.iconimages.DataTableIconSortNone/DATB/eAFjYGD4!!8!AAYAAv4_"]
{
width: 0px;
}
That works for Firefox, but IE doesn't honor it.
Any ideas? Thanks in advance.
Use the sortIcon attribute of the rich:column tag to point to your own image as in:
<rich:column sortIcon="img/defaultIcon.png">...</rich:column>
According to the RichFaces documentation:
You can customize the sorting's icon
element using "rich-sort-icon" class
So I'd create a class in your css file that references the icon you'd like to use.
RichFaces rich:column documentation