I'm trying to modify the css style of the word (button) "All" in Post Grid filter of Wordpress plugin Visual Composer...I'm able to do it for all the words of filtered categories but not for the specified one "All"...Firebug show me that style: <span data-vc-grid-filter-value="*">All</span> where I suppose the symbol * define all the words of categories...Anyone knows how can I modify that style?
Without example code it is always hard to answer.
Maybe this helps:
span[data-vc-grid-filter-value]:first-child {
font-weight: 700; /* just an example adjustment */
}
I assumed that "All" is the first element in a series of elements. If this selector does not work, try to go more specific (e.g. li > span[data-vc-grid-filter-value]).
If you can provide a sample of the page, where this element is located, and the corresponding CSS, then the answer may be more helpful.
Related
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 would like to change the colour of comments in the Atom editor. From a bit of googling, I found I can put the following in my .atom/styles.less file:
atom-text-editor::shadow .comment {
color: #ffffaa;
}
That's great - now I have bright yellow comments that demand to be noticed rather than fading into the background. The trouble is that it now looks like the below
As you can see, the text colour of the comments has changed, but the comment delimiters and links within comments remain in the default almost-invisible-grey, which looks a bit silly.
My questions are (1) how can I change the colour of these items, and more importantly (2) where can I look up how to change the colour of these items?
Please note that I am not a web programmer and know nothing of CSS or any related technologies. I am therefore looking for a fairly step-by-step solution, in contrast to solutions found, for example, in the answers to this question, which assume a substantial amount of background in the inner workings of this stuff.
Using 1.14.4:
// This styles comment text
atom-text-editor .syntax--comment {
color: #53FFA1;
}
// This styles comment punctuation (i.e. //, and /*...*/)
.syntax--punctuation.syntax--definition.syntax--comment {
color: #008C3F;
}
To find out the CSS classes of any element you want to style, follow these steps in the editor:
Use your cursor to highlight the element you want to inspect. I'm following your example of a double slash (i.e. a comment) here.
Press Ctrl+Alt+Shift+P (or Cmd+Alt+P on OS X). A pop-up will tell you all classes of that element. Usually, it's the last line of that notification that is of interest for us. For //, it is comment.line.double-slash.js.
Disregard the last dot and everything following it, since keeping it would apply your changes to a specific file type only (js in this case). Now prepend a dot. The remaining string is the element we want to style: .comment.line.double-slash.
Open the .atom/styles.less by opening the command pallette (Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on OSX) and searching for "Application: Open Your Stylesheet".
Append these lines to .atom/styles.less, if not already present:
atom-text-editor::shadow {
// custom comment styling goes here
}
Inside the brackets you can place CSS/LESS code for any element you want to customize.
atom-text-editor::shadow {
.comment.line.double-slash {
color: #ffffaa;
}
}
Additional advice: you can enumerate element identifiers as a comma-and-space-separated list, if the same changes should apply to them. So if you want to make links the same color as comments, there are two possibilities:
.comment.line.double-slash {
color: #ffffaa;
}
.markup.underline.link.hyperlink { // I removed the '.https' to apply this to all protocols
color: #ffffaa;
}
or
.comment.line.double-slash, .markup.underline.link.hyperlink {
color: #ffffaa;
}
With long class names as they are used here, I'd prefer the first option for readability. But that's up to your choice.
The syntax is changed in 1.14.
Now, you need to use this for changing the comment color
atom-text-editor .syntax--comment {
color: #228B22;
}
An update to #Hexaholic's now out-dated answer:
Find the CSS class of the element you want to style
Launch the Developer Tools window using Ctrl+Shift+i (Windows; command: window:toggle-dev-tools)
Activate the Element Inspector (Ctrl+Shift+C from within the developer tools window, or click the cursor icon)
Hover over the element you wish to style
Identify the appropriate style name: each style name begins with a dot and proceeds to the next dot. This example applies the styles .syntax--comment, .syntax--block and .syntax--bibtex.
Apply custom CSS
Open the custom stylesheet .atom/styles.less ("Application: Open Your Stylesheet" in the command finder (Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P, OSX)
Enter the appropriate CSS. For example, to colour all comments:
atom-text-editor .syntax--comment {
color: #ffffaa;
}
Or to colour all comments also tagged as bibtex:
atom-text-editor .syntax--comment.syntax--bibtex {
color: #ffffaa;
}
As usual with CSS, more specific comments (as the latter) will override more general classes (as the former).
Further reading
Atom's guide to Further Customization
I have been trying to conditionally remove the menu arrow at the end of a Select box in my current project which uses gwt-bootstrap3.
I have tried the following options:
<select:Select ui:field="fieldName" name="fieldName" b:id="fieldName" showMenuArrow="false">
<select:Option ui:field="option1" text="option1Text"/>
</select:Select>
I have also tried via the api, using
fieldName.setShowMenuArrow(false);
I am mainly looking to disable this menu arrow when I would like to indicate that this selector is disabled and that options are not available for select dropdown.
On inspecting element via the browser:I noticed that within the div for the select box there are other divs/spans and one nested as a child of the main selector div specifically with the
<span class="caret"></span>
On removing this class name I could make the menuArrow disappear.
However accessing the specific span tag with this caret class using a querySelector and then making sure this is the right one (from the entire page which has other such selectors too) seems a slight challenge and unwieldy.
Here's a snippet from the inspectElement on chrome.
inspecting the Select element and the span with caret
This seems like a bug in the menuArrow handling for the Selector and if it is indeed one, can anyone suggest a workaround until fixed?. Appreciate your suggestions/answers. Thanks!
The setShowMenuArrow method is for something else: it turns on/off this arrow:
If you want to hide caret on all disabled Select boxes you could try with css:
.bootstrap-select.disabled .caret {
display: none;
}
If you want to hide it only some of them, first add new class name, for example no-caret-on-disabled and use this:
.bootstrap-select.disabled.no-caret-on-disabled .caret {
display: none;
}
Basically what I'm trying to do is copy this style (from a word doc) but using rst.
I was thinking I might need a custom directive which I can can include the header and style the internal checkboxes.
Ideally I would like to be able to do something like:
.. handson::
The title
- Check one
- Check two
The bulltet items inside the handson block would be styled as checkboxs but the rest of the document would just have normal bullet points.
I had a look at the custom directive stuff but I'm not sure if that would be the best way to tackle this. I'm also using rst2pdf if that has any impact on the results.
If you don't want to go down the route of creating a custom directive, you could use a normal admonition block and "fake" the check boxes. Your markup could be standard reStructuredText:
.. admonition:: The title
- Check one
- Check two
You can then include some custom CSS markup within your reStructuredText file to target list items in admonitions:
.. raw:: html
<style>
.admonition ul { list-style-type: none; }
.admonition li:before { content: "\2610"; }
</style>
Here the CSS targets any list item element which is a child of any element with the class "admonition" and replaces the list item bullet points with simulated check boxes using the Unicode Ballot box character, ☐.
Docutils applies an additional class to generic admonitions which is a concatenation of "admonition" and the admonition title. So in the above example we could be more specific with the element we target with the CSS rule:
.admonition-the-title ul { /* ... */ }
This could be used to target a single admonition within your document.
Credit goes to these two answers to the SO question How to create a checklist in reStructuredText (reST)?
Obviously the above targets HTML output. However, I have not used rst2pdf, so can't comment on how the above needs to be modified to work with this program. Hopefully someone else will provide an answer to this. As far as I know, rst2pdf does support a cascading stylesheet mechanism, so it should be straightforward (for someone who knows rst2pdf style sheet syntax) to add an additional .. raw:: pdf role and to modify the above list styles.
I've got a tr:table that I need to style using CSS. All the normal style functions of a table are working, but row banding and row selection aren't coming up. When I view the rendered source, I'm not seeing a difference in the rows for an id or class to grab on to, and the official documentation doesn't have any attributes for declaring a style class for either. Is this possible and if so what do I need to do to get my CSS to grab onto it?
<tr:table id="myTable" value="#{tableValues}" rowBandingInterval="1">
<tr:column>
##Stuff##
</tr:column>
<tr:column>
##Stuff##
</tr:column>
<tr:column>
##Stuff##
</tr:column>
</tr:table>
Edit
Let me try to clairfy what's happening.
First, using the declaration above tells jsf to generate a table, and the attribute rowBandingInterval tells it to give each row alternating colors (If it was set to 2, then it would do 2 rows one color, 2 rows another, 2 rows the original, etc.)
Once the page gets rendered into standard html, trinidad (and jsf) apply their own classes and IDs to the html. My normal procedure is to look at the rendered html, find the class that it is appling and add CSS rules for it. However in this case, no additional styles are added (nothing in the rendered html denotes one row to be different from another).
So the question is, how do I tell trinidad to either give alternating rows and the user selected row different classes/IDs for me to grab on to with CSS?
Edit 2
Just to keep anybody paying attention posted, there are no changes to the actual td elements either
Edit 3
After having switched all the attributes around and then stripping all the code down to it's bare bones, I found the row banding attribute. Trinidad classes are rather convluted, and unless you reformat the code and pull out all the noise you won't see it. Trinidad adds the class .af_column_cell-text-band to the banded rows, where as the normal rows have just .af_column_cell-text. So that's half the problem solved. I still need to know the selector for a user selected row, for which I'll happily give all the marbles to anybody that can give me an answer to just that.
This is not directly answering your question, but why not use the CSS3 pseudo-class nth-child to achieve this effect ? For instance :
tr:nth-child(2n)
{
background-color:red;
}
There is a nice and simple jquery code to do the row highlighting located here.
The jQuery is as follows
<script type="text/javascript">
$(document).ready(function(){
$(".stripeMe tr")
.mouseover(function() { $(this).addClass("over");})
.mouseout(function() { $(this).removeClass("over");
});
$(".stripeMe tr:even").addClass("alt");
});
</script>
Then a bit of css
tr.alt td { background: #ecf6fc; }
tr.over td { background: #bcd4ec; }
btw I took all that code from the following site where you can also view the demo.
I made something wrong during the registration process, so this is a new answer instead of a comment.
To deal with the trinidad-skinning topic you need to do the following:
In your web.xml you need to set this parameter to true while developping:
<context-param>
<param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
<param-value>true</param-value></context-param>
Get firebug for your firefox. With that add-on you can determine which trinidad-selector is used on a component.
There is no selector for a user selected row. I did it this way:
Give your object something like a "highlight property", which you change if it is the selected one.
<tr:column sortProperty="nr" sortable="true" defaultSortOrder="ascending" headerText="Nr" inlineStyle="#{object.tablerowhighlight}text-align:right;"><tr:outputText value="#{object.nr}"/></tr:column>
Do that for all columns of your table and you are done.
put these selectors in your trinidadskin.css-file(smSkin.css in my case):
.AFTableCellDataBackgroundColor:alias
{
background-color: #F5F5DC;
}
.AFTableCellDataBandedBackgroundColor:alias
{
background-color: #FFFFFF;
}
Configuration of trinidad-skins.xml
<skin>
<id>
sm.desktop
</id>
<family>
sm
</family>
<render-kit-id>
org.apache.myfaces.trinidad.desktop
</render-kit-id>
<style-sheet-name>
skins/sm/smSkin.css
</style-sheet-name>
</skin>
I will refer you to the trinidad documentation.
http://myfaces.apache.org/trinidad/trinidad-api/tagdoc/tr_table.html
In their example they declare the banding as row banding="row" I would assume the reason you do not get anything is that you have not declared if it is row or column banding.