Hi I try to edit the css of wordpress themes but I get stuck when I saw this DIV Style.
<li id="text-3" class="widget sbg_widget Phubadee widget_text">
<h2 class="widgettitle sbg_title">Title Header</h2>
How Can I make the CSS When I want the : Title Header : font-size: 1.6em;
Thank you so much.
h2.widgettitle.sbg_title { font-size:1.6em }
Explanation:
. is a class selector in css, your h2 has class widgettitle and sbg_title, so we would like to select those two by using ..
Note that there can't be any space between widgettitle and the next ., having space means entirely different thing, which is selecting any descendant of widgettitle that has class sbg_title
There are alot of way you can do it. Any of these will work, and there are more ways to do it!
li.widget h2 { font-size:1.6em }
li.sbg_widget h2 { font-size:1.6em }
h2 { font-size:1.6em }
h2.widgettitle { font-size:1.6em }
h2.sbg_title { font-size:1.6em }
.widgettitle { font-size:1.6em }
.sbg_title { font-size:1.6em }
li h2 { font-size:1.6em }
li>h2 { font-size:1.6em }
li#text-3 h2 { font-size:1.6em }
li#text-3 h2.widgettitle { font-size:1.6em }
li#text-3 h2.sbg_title { font-size:1.6em }
If you want to learn about CSS selectors, Sitepoint has a good breakdown of what they are and how they work
There is more way to do that.If you want you can add this to you css
h2.widgettitle {font-size:1.6em;}
or if you want to be more specific
h2.widgettitle .sbg_tittle
You can select that item in many ways, try for example
li#text-3 h2.sbg_title {
font-size: 1.6em;
}
Option 1:
.widgettitle.sbg_title {font-size:1.6em;}
Option 2:
.sbg_title {font-size:1.6em;}
Option 3:
.widgettitle {font-size:1.6em;}
Related
I need to select the body element when it has a class beginning with post-type- but not select it when there's also a class beginning with taxonomy-. Does anyone know how to get this to work?
body[class^="post-type-"],
body[class*=" post-type-"] {
&:not([class^="taxonomy-"]),
&:not([class*=" taxonomy-"]) {
.widefat {
.check-column {
display: none;
}
}
}
}
EDIT: 0stone0's answer below helped me realize the CSS it was outputting was completely wrong, so this new approach is working well:
body[class^="post-type-"]:not([class^="taxonomy-"]):not([class*=" taxonomy-"]),
body[class*=" post-type-"]:not([class^="taxonomy-"]):not([class*=" taxonomy-"]) {
.widefat {
.check-column {
display: none;
}
}
}
div[class*='post-type-']:not([class*="taxonomy-"])
This pure CSS should target the desired element
Select classes that contain post-type-, but not() containing taxonomy-
div[class*='post-type-']:not([class*="taxonomy-"]) {
border: 1px solid red;
}
<div class='post-type-something'>post-type-something</div>
<div class='post-type-something taxonomy-foobar'>post-type-something taxonomy-foobar</div>
<div class='taxonomy-foobar post-type-something'>taxonomy-foobar post-type-something</div>
Note: Demo uses <div> instead of <body> and applies a border when targeted
A quick question to which the answer is probably "NO", but I'm new to CSS variables so I'm not sure.
If I want to define color and later be able to add alpha channel to it, is my only option with CSS variables would be to define it as 3 numbers for RGB channels:
--color: 12 12 12
And later use it ALWAYS with rgb or rgba?
color: rgb(var(--color));
background: rgba(var(--color), .5);
There is really no way to define an actual color and later add alpha to it using only CSS variables? Probably my best bet would be to define 2 vars:
--color-rgb and --color: rgb(var(--color-rgb))
You are almost good, you simply need to pay attention to the syntax:
:root {
--c:255,0 ,0;
--o:0.5;
}
html {
background:rgba(var(--c),var(--o));
}
body {
background:rgb(var(--c));
height:100px;
}
.box {
--c:12,12,12;
--o:0.7;
background:rgba(var(--c),var(--o));
color:#fff;
}
<div class="box">
some content
</div>
You can also define each channel alone:
:root {
--r:255;
--g:0;
--b:0;
--c:var(--r),var(--g) ,var(--b);
--o:0.5;
}
html {
background:rgba(var(--c),var(--o));
}
body {
background:rgb(var(--c));
height:100px;
}
.box {
--c:12,12,12;
--o:0.7;
background:rgba(var(--c),var(--o));
color:#fff;
}
<div class="box">
some content
</div>
I need to display ex: $300.00, but I need the dollar sign to be displayed smaller than the number so its going to look like a trademark, but not that small.
Is there a CSS function that does that?
Thank you in advance.
Could be something like this?
HTML:
<span class="dollar">300.00</span>
CSS:
.dollar:before {
content: '$';
font-size: somethingSmaller;
}
See this fiddle and let me know if this helps.
But only if not empty!
.currency:not(:empty):before {
top: 0;
content: "$";
}
<span class="currency">10.5</span><br />
<span class="currency"></span><br />
<span class="currency">42</span><br />
Use a <span> element to style in-line text:
HTML:
<span class="currency">$</span>
<span class="price">300</span>
CSS:
.currency{
font-size:.5em;
vertical-align:text-top; /* resembling more the tm symbol you mentioned */
}
A fiddle for convenience...
The difference from lante's answer is that this will work in much older browsers as well. For more info, see the support for :before and :after pseudo elements.
Use the :before pseudo selector
.amount:before {
content: "$";
font-size:.9em;
}
A very simple way to do this would be :
HTML :
<div class="text">
<span class="dollar">$</span>300
</div>
CSS :
.text {
font-size: 18px;
}
.dollar {
font-size:15px;
}
See here->http://jsfiddle.net/xMKsH/
However, if you understand pseudo-selectors well, you would be better off using this:
HTML:
<div class="text">300</div>
CSS:
.text {
font-size: 18px;
}
.dollar:before {
content:'$';
font-size:15px;
}
See here->http://jsfiddle.net/xMKsH/1/
Hope this helps!!
If you really must do this, use
<small>$</small>300.00
and, if desired, set the size of small in CSS, e.g.
small { font-size: 75% }
How to make conditions in a CSS stylesheet?
Here I got a stylesheet.. But if the div.menu_active is added on an element the class has to behave like its hovered? How can you do that?
Or is there an even better way to contruct the stylesheet for this solution?
<div class="menu">menu</div>
<div class="menu menu_active">menu</div> // has to behave like menu:hover
<div class="menu_green">menu</div>
<div class="menu_green menu_active">menu</div> // has to behave like menu_green:hover
div.menu {
background:url('menu_opacity50.png');
}
div.menu_green {
background:url('menu_green_opacity50.png');
}
div.menu_active {
}
div.menu:hover {
background:url('menu_opacity100.png');
}
div.menu_green:hover {
background:url('menu_green_opacity100.png');
}
If I understand correctly, this is what you need:
div.menu:hover, .menu.menu_active {
background:url('menu_opacity100.png');
}
div.menu_green:hover, .menu_green.menu_active {
background:url('menu_green_opacity100.png');
}
.menu.menu_active will select elements that have both of the listed classes, such as <div class="menu menu_active">.
I think you might mean this:
div.menu.menu_active,
div.menu:hover {
background:url('menu_opacity100.png');
}
div.menu_green.menu_active,
div.menu_green:hover {
background:url('menu_green_opacity100.png');
}
You might want to do this
div.menu {
background:url('menu_opacity50.png');
}
div.menu_green {
background:url('menu_green_opacity50.png');
}
div.menu.menu_active {
background:url('menu_opacity100.png');
}
div.menu_green.menu_active {
background:url('menu_green_opacity100.png');
}
Overlay the hover element exactly over normal state and hide it (display:none) then use JS/jQuery to toggle the display.
I have the following CSS to show a whole event as "completed".
.afc-completed,
.fc-agenda .afc-completed .fc-event-time,
.afc-completed a {
color: yellow; /* text color */
background-color: #6C3; /* default BACKGROUND color #36c */
text-decoration: line-through;
}
How do I write a CSS for only changing the fc-event-title only?
I saw my class afc-completed is added to the <div> element, but I don't find a solution to just change the title (fc-event-title) or the time.
Any help here?
Günter
#wsanville & #Thomas
I think that's not that simple, sorry.
Just defining what wsanville said will change for all events. The point is to change only for "completed" events.
For that I have
if (newEvent.completed != null) {
newEvent.className = "afc-completed";
}
But that's going to the div and not to title only.
I think I need to add a class directly to/or instead of the '.fc-event-title' for just only those selected/completed events, and only to the title.
Here is a typical div:
<div style="position: absolute; z-index: 8; left: 144px; width: 135px; top: 40px;"
class="fc-event fc-event-hori fc-corner-left fc-corner-right afc-completed ">
<a><span class="fc-event-time">15:15 - 16:15<br></span>
<span class="fc-event-title">Fri Dille</span>
</a>
<div class="ui-resizable-handle ui-resizable-e" unselectable="on"
style="-moz-user-select: none;">
</div>
</div>
But the newEvent.className doesn't work like that!
Is there another possibility?
And I need more modifications to the event presentation, like additional icons or text with italic ... and different combinations of those 'options'.
Thanks for your help.
Günter
OK, here is a working solution to solve for "important" and "completed" attributes of the event:
newEvent.className = ((newEvent.completed != null)? "afc-completed " : "")
+ ((newEvent.priority != null) ? "afc-important " : "");
and
.afc-completed .fc-event-title {
color: yellow;
background-color: #A6B5BC; /* grey */
text-decoration: line-through;
}
.afc-important .fc-event-title {
color: #C00 !important;
font-weight: bold !important;
}
Thanks for helping ;)
If you post some of your markup, I can give a better answer, but in the general case, you will need to add an additional rule to your stylesheet that applies to elements with the fc-event-title class. Something like this:
.fc-event-title
{
color: #ff0000; /* change the color values to something more appropriate */
background-color: #00ff00;
text-decoration: line-through;
}