I am currently creating a Sphinx document using the sphinx_rtd_theme. I would like to know how to change the color of visited links.
So far, I have only found possibilities using the classic theme (using html_theme_options in conf.py file). I however need to use
sphinx_rtd_theme.
I guess there are possibilities using a local css file (in _static). For instance, I already use a css file to specify the theme color:
.wy-side-nav-search, .wy-nav-top {
background: #0b750a;
}
Any hints?
Solved, quite easy (...). I just had to add this in my css file:
a:visited {
color: blue;
}
I'm creating a tree to select a folder for a file destination so it only supports single selection. The expanders are hidden and I have + or - on the folder icons. Clicking on the folder icon with will expand or collapse the tree. The folder icon as well as the title changes (color) to indicate which folder is selected.
I used custom icons because i had different types of folders.
It works for collapsed selected or collapsed unselected. It works for expanded selected, but I can't get the stylesheet to work for a selected, expanded folder.
The following displays the expanded folder icon with a - sign when unselected
span.fancytree-expanded > span.fancytree-custom-icon.FolderWithChildren {
background-image: url("FolderMinus.png");
}
However I can't figure out the syntax for a selected/expanded folder. I've tried many variation but nothing works. For example;
span.fancytree-expanded > span.fancytree-selected span.fancytree-custom-icon.FolderWithChildren {
background-image: url("FolderMinusSelected.png");
}
Thanks for any help.
Try this
span.fancytree-expanded.fancytree-selected > span.fancytree-custom-icon.FolderWithChildren {
background-image: url("FolderMinusSelected.png");
}
I have a menu called XYZ-spanish and created another one called XYZ-english. I want to apply the same CSS style to my new menu but it conditional based on the Joomla menu type name. The css it applies is in /web/templates/templatename/css/custom.css, but I have yet to find how it ties it to the menu-type name.
I have grepped through the whole directory tree with grep -r 'XYZ-spanish' * and grep -r '.scrolltojsmenurightcustom' * which is the class name is applies to the menu. However I have checked the modules and none of them have any classes applied to them. The only clue I have that is I change the menu type name the styling gets removed. I'm going bananas looking for how it's applying it? Where should I look?
I have also searched through the database looking for both words and have yet to locate anything significant.
The only thing listed in the custom css is:
.scrolltojsmenurightcustom {
color: #ff5c00 !important;
padding-top: 0em !important;
line-height: 0px;
}
This depends on which menu system are you using, is your menu an extension? or part of your template?
Also you can use a tool like Firebug or similar to inspect the source code of your page in your browser.
A tool like this will give you information about the selectors and the path where they are located, the line number and the name of the file that contains this selectors. Once you have this information you can add or change the values of the CSS.
I am trying to change the icon for read-only files in "Places". I want to see a lock icon for read-only files, such as tab icons.
How should I approach this?
Use a custom stylesheet with something like this:
#lockedimage: url('chrome://komodo/skin/images/locked-file_icon.png');
tab[widget="openfilesViewbox"]
{
.tab-icon[alt="Places"]
{
list-style-image: #lockedimage !important;
}
}
References
Customizing Komodo using userChrome.css
Komodo File Locations
Komodo Image Repository
Komodo Icon Stylesheet
Komodo Icon Variables
I want to replace the HTML Editor styles in the HTML Style dropdown on the editor ribbon with styles of my own creation. According to this MSDN article http://msdn.microsoft.com/en-gb/library/ms551040.aspx as soon as I start putting classes that begin with the pattern ms-rteCustom-XXXX(XXXX being a custom name) into CSS that's loaded in the page, the existing styles should be replaced. I would expect this to leave only my styles in the drop-down, however I can see all of the original Sharepoint styles, and then my styles.
Am I missing something in the documentation, or is it lying to me? As far as I can tell, the original styles come from the corev4.css that's also loaded by the master page, however as my CSS is loaded later, it seems like any styles already in the drop down should be cleared.
Here is one of the new/custom styles in the CSS I'm using;
H3.ms-rteElement-H3CompanyName
{
-ms-name:"Heading 3";
}
.ms-rteElement-H3CompanyName
{
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #000000;
}
The best way to remove the styles, assuming this is a publishing page, is to modify the control within your page layout.
<PublishingWebControls:RichHtmlField FieldName="PublishingPageContent" HasInitialFocus="True" MinimumEditHeight="400px" runat="server" PrefixStyleSheet="customPrefix"/>
By declaring a new PrefixStyleSheet it will remove all of the default styles so that you can only provide your own.
Rather than JavaScript, you can also use css to hide Markup Styles.
For example, this is how to hide Heading 1s.
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles #ElementWithStyle0-Menu,
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles #ElementWithStyle4-Menu
{display:none;}
I'm not sure where you've read that "as soon as custom styles are added, old ones are removed". The way I read the documentation, it correlates to my experience with this - that the custom styles are just added to the bottom of the dropdown list.
What you could do though, is to override the built-in ones with your custom style as well. Just use the exact same name as the OOTB styles and enter your own styles in the CSS file. Example: to override the style "Callout 1", add a rule for .ms-rteElement-Callout1 in your CSS and add your own styling there.
Another option is to write a JavaScript function and attach it to the ribbon resized event using
SP.UI.Workspace.add_resized(your_javascript_function_name);
Inside your function, you can use a jQuery statement to remove all (or the first X) elements from the dropdown list in the ribbon control.
It looks like the only way to remove elements from the Markup Style drop down list is to modify files in the main Sharepoint hive. A reset of IIS is probably a good idea after these changes, then ctrl-F5 to fully refresh what the browser is seeing.
This is not normally recommended as these files may change as part of a Sharepoint upgrade, however it seems to be the only way that reliably works.
To remove unwanted elements from the Markup Style dropdown, remove all CSS rules that affect classes named in this pattern .ms-rteElement-XXXX . Our own styles for use in this menu are added in one of our own style sheets.
There are four files that need to be modified, two copies of Controls.css and two copies of Corev4.css.
They are located as follows;
Controls.css
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\FEATURES\PublishingLayouts\en-us\Controls.css
COREV4.CSS
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\COREV4.CSS
CONTROLS.CSS
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\CONTROLS.CSS
COREV4.CSS
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\Themable\COREV4.CSS
I would add your CSS to the alternate CSS option under Look and Feel in your site settings. If you dont see the option, turn on publishing options.
Then add the CSS you want. It gets loaded last and to make sure, you can add !important to the styles.
Look here for more details... Half way down the page.
Sharepoint 2010 Themes and Alternate CSS for overriding Core
EDIT FOR COMMENT BELOW:
$('a#Ribbon.EditingTools.CPEditTab.Markup.ElementWithStyle-Large').click(function(){
$('a#ElementWithStyle3-Menu').parent().hide();
});
I finally got this to work using purely Javascript. What I did is register a PageComponent and then add a handler for the appropriate command (In the case of Markup Styles, the command is called 'ElementWithStyleOptionsOpen').
Here is the MSDN documentation about how to develop PageComponents: http://msdn.microsoft.com/en-us/library/ff407303.aspx#Y300
In my custom PageComponent class I registered 'ElementWithStyleOptionsOpen' as a GlobalCommand:
getGlobalCommands: function () {
return ['ElementWithStyleOptionsOpen'];
}
...And also added it to canHandleCommand:
canHandleCommand: function (commandId) {
if (commandId === 'ElementWithStyleOptionsOpen') {
return true;
}
else {
return false;
}
Finally my HandleCommand looks like this:
handleCommand: function (commandId, properties, sequence) {
if(commandId=='ElementWithStyleOptionsOpen') {
//Remove styles that have the word Colored
jQuery('li.ms-cui-menusection-items:contains("Colored")').remove();
}
}