Is it possible to apply style attribute or class to link in textile? I've tried to find a reference, but found nothing.
"{color:red}This is a testlink":http://www.google.com
or
"(myclass)This is a testlink":http://www.google.com
Related
When I define a code for a class within the custom CSS of a post this is working however if I define the same code globally under my theme options-> Custom CSS this is not working.
.learndash-wrapper .ld-table-list a.ld-table-list-item-preview {
color: #13fff8;
}.
Therefore I have to go post by post adding this code to get the proper font color... and I would like to have it globally working.
Any idea why this happened?
First, check whether you have a typo or not. After verifying that you have entered class name properly. You can try out as,
.your-class-name{
color : #ffffff !important;
}
!important has the superpower to override previous CSS class and it's properties.
There are guidelines and defined the precedence of different CSS stylings.
Checkout,
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Ask in the comment if required a more specific answer.
Check with the order of the css files loaded. If you have declared multiple css for same element latest class css will be applied. Along with that check the specificity of the css selectors. The selector with higher specificity will be affect the style.
I'm trying to change the class name of my header when I hover over it. The class name when NOT hovering is ".l-header.pos_fixed.bg_transparent.shadow_wide", but I'd like to rename it when hovering to ".l-header.pos_fixed.bg_solid.shadow_wide".
Is this possible?
EDIT: Maybe a bit more background information: I want to change the header of https://pinkypromise.pictures to the header of, for example, https://pinkypromise.pictures/contact when hovering on the home page.
To answer your question, yes, it is possible to change class names based on events (hover, in this case), but you will need javascript for that. You can't achieve this with pure css.
As others have mentioned, it is usually a better approach to have a css rule with the :hover pseudo-class. But also be aware that you might have problems with the intended result in touch devices.
A good source of information for these rules is Mozilla Developer Network. Please have a look at the full documentation for :hover's pseudo class on MDN.
Sorry I thought only the logo should change.
I see you site is using jQuery.
When I enter this in the console it seems to work fine:
jQuery('.l-header.pos_fixed.bg_transparent.shadow_wide').mouseenter(function() {
jQuery(this).removeClass('bg_transparent').addClass('bg_solid');
}).mouseleave(function() {
jQuery(this).addClass('bg_transparent').removeClass('bg_solid');
});
You don't need to change the class name on hover, just specify the styles that you want to apply when you hover:
header:hover {
// place the styles that make the background solid here
}
Let's say I have a class called TextEditor which extends TextArea, so what's the right selector for this? Selector like .text-editor didn't help.
Well, actually .text-area works fine, but that's no the solution.
CSS isn't aware of the Java classes that you have created. Manually add a CSS class and use that to style it. E.g. class="TextEditor" then style it with .TextEditor
You may define your own selector that customizes the default .text-area selector. And set the id of your custom class with this selector. See the "Changing the table column header style : Customzing" section of this answer.
I'm struggling with a property that is defined in 3 stylesheets:
Joomla.css
My Site's Template.css
Content extension using K2.css
The problem is that I need to align a toolbar to the right. The property text-align is correctly defined in the K2.css but is ignored and rather the one in the joomla.css is loaded.
I attached a screen shot that shows the issue.
Any idea what am i doing wrong and how could I override this property just for one container?
Thanks in advance.
Eyal
For such special cases I used to define an style with !important and use it where ever I have to override.
CSS
.text-align_right {
text-align: right !important;
}
HTML
<div class="itemToolbar text-align_right">
..
Also, if you view the source of the page, you'll see the order in which the style sheets get added. Evidently joomla.css is further down the source than k2.css
If there are a large number of these cases, you might like to edit your template html and put joomla.css right at the start of the head section. If that is added dynamically, though, look at the nonumber extension 'Rereplacer' which should be able to switch the order around with a bit of work.
Add your css rule to the bottom of K2.css
When you create the menu in your module manager, assign it a class. Then you can set the style for that class in your template.css file.
Best,
Cynthia
A question about CSS.
I am working on some dated code. This code has its own css rules which are linked to some 'css manager'... now I want to use jQuery UI with its nice and cute dialogues etc.
Now my question is:
I have a css rule say...
#menu-bar{something}
jQuery UI is using rules like:
.ui-dialog-titlebar{something2}
Can I (without modifying jQueryUI stylesheets) do something akin to :
.ui-dialog-titlebar = #menu-bar?
So .ui-dialog-titlebar will be overwritten with {something} from #menu-bar?
Thanks in advance.
PS. Let me add that I can not simply do
.ui-dialog-titlebar {something}
becasue {something} is changing depending on the 'style manager' used.
I don't think a css rule can inherit from another one, definitely not CSS 2 or CSS 3. What you can do is to add multiple css classes to the elements. In your case, you could simply add the ID to the dialog element:
<div id="menu-bar" title="dialog">...</div>
or add it programmically:
$('.dialog').dialog(...).attr('id', 'menu-bar');
Note though, #menu-bar should really be a class rather than an ID, if you want multiple elements to have the style.