I'm trying to change the color of the dropdown arrow in the Sharepoint 2010 Welcome control, that looks like this:
<wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false">
I've found the classes to color everything else, but can't change the little down arrow. How do I do this?
Change 14\TEMPLATE\CONTROLTEMPLATES\Welcome.ascx. Add ArrowImageUrl attribute to SharePoint:PersonalActions control (or equivalent).
Jesse
Jester Software Inc.
you can do so with the help of css by hiding the arrow in the img-tag and showing your arrow-image as background-image in the span-tag (which surrounds the img-tag):
/* Your arrow as background-image */
DIV > SPAN > SPAN.s4-clust.ms-viewselector-arrow
{
background-image:url('your_arrow_url.gif');
}
/* Hide original arrow-image */
DIV > SPAN > SPAN.s4-clust.ms-viewselector-arrow > IMG
{
visibility:hidden;
}
You have to use the path mentioned above so your breadcrumb arrows won't be affected.
Related
I am using inline CKEditor in my page. I want to make it fixed on the top of the contenteditable div. Currently it is floating whenever i scroll the page. How to make the toolbar position fixed at the top?
Use the combination of inline editor and the Shared Space plugin. Check the Inline Editor with Shared Toolbar and Bottom Bar demo on the CKEditor SDK page for an example. Note that you can view and download the source code of each SDK example - just scroll down to "Get Sample Source Code" and grab what you need.
<div id="toolbarLocation></div>
<div id="editor" contenteditable="true"></div>
<script>
CKEDITOR.disableAutoInline = true;
CKEDITOR.replace( 'editor', {
sharedSpaces: {
top: 'toolbarLocation'
}
} );
</script>
By default, nodes added to the Place Bar on the Application Layout Control are displayed on the right hand side of the Place Bar. Is it possible to instead display the nodes on the left hand side of the Place Bar?
Do not change the default cssfiles on the server. Create a new theme extending your oneuiv2 default theme and styles. Then add a custom.css for your application where you overwrite what you want to change in the default css:
Theme:
<theme extends="oneuiv2.1">
<resource>
<content-type>text/css</content-type>
<href>custom.css</href>
</resource>
</theme>
custom.css:
.lotusPlaceBar .lotusBtnContainer {
float: left;
}
This will give you a better overview and lets you customize oneuiv2 for your needs
You can modify the CSS classes used by Application Layout control to move the place bar buttons left.
.lotusPlaceBar .lotusBtnContainer {
float: left;
}
Take help of Google Developer Tools to inspect Application Layout control and find out more of its CSS classes.
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 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;}
I am using Magento CE v1.5. Modern theme. I would like to display Search bar on the right hand side in the Navigation bar. Basically category menus on the left and search function on the right on a horizontal menu.
I have replaced top.bar with top.menu in catalogsearch.xml. The search function displays on the right with the following CSS
.form-search { margin:3px auto; float:right; position:absolute; right:20px; top:70px; }
I am just wondering do I need to do anything to top.phtml file because many other tutorials suggest you need to add
getChildHtml('topSearch') ?>
My search displays without the above code in the top.phtml file.
Please suggest the correct way to go about achieveing search in the navigation bar in CE v1.5. Thank you.
If, getChildHtml() not loaded in a template that you work on, you can't show the block that you want. Try the following snippet :
<?php echo $this->getLayout()->getBlock('top.search')->toHtml() ?>