I'm working on a WP template. The style.css file loads successfully. But the styling is not applied to many of the elements. You can see it in http://madihaa.mv/v1/
Take a look at child <p> in <div class="home-second-row">.
In line 758 of style.css file the following can be found
.home-second-row p {
width: 225px;
height: 215px;
background: rgb(112, 184, 0);
border-radius: 8px;
margin-right: 10px;
text-align: left;
padding: 20px;
float: left;
color: #ffffff;
font-size: 1.3em;
line-height: 1.6em;
overflow: hidden;
}
But it is not applied to it.
There is an issue with your CSS file. Look at line 742, you haven't closed the declaration with }. This is stopping the other declarations afterwards from working.
EDIT
Your CSS currently:
.navigation-main .menu-item .sub-menu li{
padding: 5px 10px;
/* site-main */
.site-main{
margin-top: 60px;
}
^ That is the issue
I've used http://jigsaw.w3.org/css-validator/validator (for http://madihaa.mv/v1/wp-content/themes/madihaastyle/style.css?ver=3.5.1 ) to validate your CSS and there are a few errors with the comments, also found the unclosed decleration already mentioned.
Hope this helps
Related
I'm making a blog and I am using a free template to manage my fron-end part, but now I want to add one class called code_block. Every time I write an article and I want to add a
<p class="code_block"> some code</p>
and the code piece to be displayed in a similiar to how this last code is displayed here in stackoverflow.
I went to the END CSS file entered:
.code_block{
color: #933 !important;
border: 5px solid red;
}
didn't work, tried adding the css directly in the html, didn't work, tried adding manualy the css while in chromium web tool, didn't work what is happening ?!
source: https://github.com/martin-varbanov96/summer-2016/tree/master/Pitonia/Django/mysql_blog/blog
EDIT:
made it more specific:
.ar
ticle ul li p .code_block{
color: #933 !important;
border: 5px solid red;
}
Still not working I think priority is not the problem here.
ID has got more priority. Remove the color from here. Or you can override.
#body.home .body div p {
color: #ffffff;
display: block;
font-family: Arial;
font-size: 18px;
font-weight: normal;
line-height: 24px;
margin: 0 auto;
padding: 0;
text-align: center;
width: 780px;
}
You can override it like this...
#body.home .body div p.code_block{
color: #933;
border: 5px solid red;
}
I have tag me box to add the tag.
http://jsfiddle.net/hailwood/u8zj5/
I was trying to change it's looks using css.
I wanted to create tags and box to look like in this code:
http://jsfiddle.net/hAz5A/20/
I added the css in first but does not make change. Can any css guys help me out?
Just add the css from the second fiddle into the first fiddle
Note: if you want to remove the 'x' - delete tag (for some reason) then add display: none to your tagit-close class
FIDDLE
FIDDLE without delete button
ul.tagit.ui-widget li.tagit-choice {
display: block;
float: left;
position: relative;
line-height: inherit;
border-radius: 6px;
background-color: #EFEFEF;
border: 1px solid #DDD;
padding: 5px 15px 5px 5px;
margin-right: 10px;
color: #08c;
text-decoration: none;
}
ul.tagit.ui-widget li.tagit-choice a.tagit-close {
cursor: pointer;
position: absolute;
right: 5px;
top: 50%;
margin-top: -8px;
}
I can't for the life of me figure out why this nested sass is not working. Here's my html:
%h1 Office Listing
#office-holder
.listing-stats··
#address·
=#office_listing.address
.listing-stats-2
#rent
%span.special2 Rent:·
$#{#office_listing.rent}/month
#size
%span.special2 Space:·
#{#office_listing.size} sq. feet
This is all within a div that namespaces the html page, which has two ids -- #office_listing and #show. I'm using rails, so I'm using the namespaces to neatly separate the views for my css. Here's the CSS that isn't working:
#office_listing#show {
#address {
width: 100%;
font-size: 50px;
background-color: #A0183C;
height: 100px;
text-align: center;
margin: auto;
font-size: 30px;
padding-top: 35px;
color: white;
}
}
Yet the CSS for that isn't displaying. The CSS seems to be compiling fine, however. When I inspect the compiled stylesheets, they look like this:
#office_listings#show #address {
width: 100%;
font-size: 50px;
background-color: #A0183C;
height: 100px;
text-align: center;
margin: auto;
font-size: 30px;
padding-top: 35px;
color: white; }
Which seems like it should target the appropriate HTML element. What am I missing?
Can you have double ids? #office_listings#show implies that you have two ids on the same element. That's against convention and my guess is that it just won't match. Make show a class instead and have #office_listings.show #address instead
I have this HTML which is generated by MVC3 Razor Engine:
<div class="editor-field">
<div id="autoComplete">
#Html.EditorFor(model => Model.group_name, new { ID = "group_name" })
#Html.ValidationMessageFor(model => Model.group_name)
</div>
</div>
And my custom CSS I am writing for my autocomplete functionality:
#group_name input[type='text'], input[type='password']
{
padding: 0px;
border: 1px solid black;
background-color: white;
overflow: hidden;
z-index: 99999;
}
#group_name input[type='text'], input[type='password'] ul
{
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
#group_name input[type='text'], input[type='password'] li
{
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block; /* if width will be 100% horizontal scrollbar will apear when scroll mode will be used */ /*width: 100%;*/
font: menu;
font-size: 12px; /* it is very important, if line-height not setted or setted in relative units scroll will be broken in firefox */
line-height: 16px;
overflow: hidden;
}
But it is being overrided by the site.css which comes by default with MVC 3 solution which is this:
input[type="text"], input[type="password"]
{
border: 1px solid #ccc;
padding: 2px;
font-size: 1.2em;
color: #444;
width: 200px;
}
Does anyone know what CSS I have to write to target my div and input html? Thanks.
This is because of the CSS Specificity.
You will need to make your rules more specific to override the site.css styles.
Alternatively, just override your site.css styles in the file itself. Site.css isn't like a library of styles which shouldn't be overriden. It's just a start template which you can edit/delete.
I ended up using firebug to look at the HTML as it changes. IE has its own javascript debugging options but being able to see the li render in real time and looking at its tag helped me write my css.
http://lesscss.org/
I am having the same issue. I changed the display to inline, but doesn't seem to work. Could anyone please tell me as to what I am doing wrong?
ul{
width:100%;
padding: 0;
margin: 0;
li{
list-style-type: none;
float: left;
padding-left: 10px;
display: inline;
white-space: nowrap;
a{
text-decoration: none;
font-size: 16px;
letter-spacing: -1px;
color: #darkGrey;
padding-right: 6px;
&:hover{
color: #mainColor;
}
}
}
i think you are using LESS CSS or alike.
Try display block instead of inline.
li{
display: block;
}
These 2 comments apply to both LESS CSS or regular CSS
You can't declare a:hover until you declare a:link and a:visited.
You don't need both display:inline and float:left. Float is applying to block level elements, but with display:inline, you are making the <li> an inline element.
original answer deleted due to disambiguation over css/less-css but I decided to leave the questions due to some good comments.
Demo : http://plugins.amiwithyou.com/lesscss/demo.htm
As per the documentation, you need to
Link your .less stylesheets with the rel set to “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less">
Then download less.js from the top of the page, and include it in the element of your page, like so:
<script src="less.js" type="text/javascript"></script>
Make sure you include your stylesheets before the script.
And then add the following in your styles.less file
#darkGrey:#777;
#mainColor:#333;
ul{
width:100%;
padding: 0;
margin: 0;
li{
list-style-type: none;
padding-left: 10px;
display: inline;
white-space: nowrap;
a{
text-decoration: none;
font-size: 16px;
letter-spacing: -1px;
color: #darkGrey;
padding-right: 6px;
&:hover{
color: #mainColor;
}
}
}
}
Please note that,
I have removed float:left
and
added "}" at the end