This is my site. "www.silenttunes.net". I'm able to customize the CSS of all the elements on my page, except for one. "View all events". I do not know why. Can someone please help. Below I've mentioned all the combinations I've tried.
#aside p.tribe-events-widget-link a{
font-size:12px;
font-weight:100;
}
p.tribe-events-widget-link a{
font-size:12px;
font-weight:100;
}
.tribe-events-widget-link a{
font-size:12px;
font-weight:100;
}
.tribe-events-widget-link {
font-size:12px;
font-weight:100;
}
When inspecting your document with Chrome Developer Tools we see the following rules applied on your document.
.tribe-events-adv-list-widget .tribe-events-widget-link a,
.tribe-events-back a,
.tribe-events-list-widget .tribe-events-widget-link a,
ul.tribe-events-sub-nav a {
font-size: 15px;
font-weight: 700;
}
Solution: Add a more specific CSS rule like this:
aside.tribe-events-list-widget .tribe-events-widget-link a {
font-size: 12px;
font-weight:100;
}
Note: Adding !important behind a CSS rule also increases specifity. But it's suggested using this method only if there is no other possibility
tribe-events-list-widget .tribe-events-widget-link a {
font-size: 12px !important;
font-weight:100 !important;
}
Related
I am learning SASS and trying out some examples. I have some problem understanding Selector Sequence and why SASS merges them.
In a real world scenario the output can have unwanted css. For eg:-
a{
color: #0086B3;
&:hover{
text-decoration: none;
}
}
#footer a{
color: #a61717;
}
.head-links{
#extend a;
font-weight: bold;
}
This block of code complies to :-
a, .head-links {
color: #0086B3;
}
a:hover, .head-links:hover {
text-decoration: none;
}
#footer a, #footer .head-links {
color: #a61717;
}
.head-links {
font-weight: bold;
}
The problem is that
#footer .head-links
might never be used. So what is the point of merging selector sequence if it is not required.
How can I avoid this.How can I make it extend only :-
a{
color: #0086B3;
&:hover{
text-decoration: none;
}
}
Would that require me using a class instead...
because you are extending the element a here:
#extend a;
if you remove it, then the SASS won't "merge" them.
you have footer a and when extending the a in .head-links it will add #footer .head-links to the already existing rule #footer a
Which means it will extend to ANY a in the CSS, not just the selector a alone
UPDATE
How can I avoid this.How can I make it extend only :-
a{
color: #0086B3;
&:hover{
text-decoration: none;
}
}
Would that require me using a class instead...
yes you would need to use a class or an ID for that.
something like this:
.uniqueclass{
color: #0086B3;
&:hover{
text-decoration: none;
}
}
here is a SASS demo
http://studioadesigncollective.com/smoovesalsero/
Heres' the CSS for the button - there's nothing else in the rest of the css that refers to this button.
.shortcode_button {
display:inline-block;
margin:0 10px 10px 0;
text-decoration:none;
font-family: 'Open Sans', sans-serif;
border:2px #555555 solid;
border-radius:5px;
-webkit-border-radius:5px;
transition: all 400ms;
-webkit-transition: all 400ms;
line-height:20px;
font-size:14px;
padding:10px 21px;
font-weight:700;
text-transform:uppercase;
vertical-align:top;
text-align:center;
}
.shortcode_button.btn_type1 {
color:#555555;
background:#fff;
}
.shortcode_button.btn_type1:hover {
color:#ffffff;
border-color:#aa0935;
background:#aa0935;
}
.promo_text_block .shortcode_button {
padding:16px 25px;
margin-bottom:31px;
}
Seems like there is:
The question you might be asking is why the selector with the yellow background-color is trumping your own selector with the red background-color. The answer is selector specificity. Since the selector in the plugins.css file is looking for three classes, and yours only looks for two, the former wins, or gets to apply its style.
How to fix it? If possible, remove the offending style, or change the naming of your class to something the offending style won't be applied to, such as button_yellow.
Hope this helps!
I'm using one of those sample layouts in Dreamweaver CS5, and when I change the font type the hover effect no longer works. Where do I add the cufon coding?
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #ADB96E;
color: #FFF;
}
.container .sidebar1 .nav li a {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 14px;
color: #000;
}
It may be better to use something like Google web fonts, so you can call them using a <link> instead of cufon.
Here's a fiddle, can you tell me if this is what you are looking for?
I have the following CSS that is being inherited (the original CSS):
h1 {
font-size:30px;
line-height:36px;
}
h1 small {
font-size:18px;
}
I have a class whereby i want to override the h1 property like so:
.logo h1 {
font-family: "Euphemia UCAS";
font-size: 200px !important;
font-weight: normal;
color: #222222;
}
How can I do this without modifying the original CSS? The !important value did not help.
link: https://dl.dropbox.com/u/3417415/Storify/mockups/screen1.html
You are applying your CSS selector incorrectly.
Your .logo class is ON the header tag itself, from what I can see in your code.
Your CSS should instead be:
h1.logo {
font-family: "Euphemia UCAS";
font-size: 200px !important;
font-weight: normal;
color: #222222;
}
Just double check where this class is exactly being applied.
Also, just checked your HTML again and it looks like this:
<h3 class="logo">Storify</h3>
So your CSS should really be:
h3.logo {
font-family: "Euphemia UCAS";
font-size: 200px !important;
font-weight: normal;
color: #222222;
}
Or am I misunderstanding you at all?
You can use a script element in your html.
Within the script Add an event handler via
addEventListener('load', function () {
// Change your css properties here.
});
This way you are sure no inheritance of css styles can occur.
I have some css that wasn't written by me and I am trying to understand how to properly edit it.
On my home page http://www.comehike.com I have a list of hikes and groups. Their titles are wrapped in tags, but because they have styling for the tags, the tags are ignored by the system.
Here is the styling for those spots:
.content .chapter_text {
margin-bottom: 0em;
padding: 0.5em;
line-height: 1.4em;
}
.content .chapter_text li{
list-style-image: url("http://www.comehike.com/img/ui/circle.png");
margin-left:20px;
}
.content .chapter_text li a{
color: #7e9940;
text-decoration: none;
}
.content .chapter_text a:hover{
color: #3f6b30;
}
To make the tag work, should I just add something like
.content .chapter_text h3
{
What goes here????
}
Thanks!
Yes. You should/could add that. That will locate the h3 tags that have .chapter_text and .content as parents.
I would think that trying it out yourself would of made a faster answer.
It seems your reset-min.css has set the following properties for all the headers:
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight:normal;
}
What you want to do as #Phil seconded is to explicitly style the h3 tags as you pointed out and set the font-size to 120% or something different (or absolute values) and that should solve the problem. I just reset it "on the fly" in chrome's debugger and it seemed to do the trick :)