CSS what is the meaning of this code snippet? UPDATED - css

UPDATE
In my style sheet I have a conflict with these snippets. If I keep this one
<style type="text/css">
::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
then, the gradient effect of the one below works, but the header banner is displaced towards the right. If I remove that, the header banner positions itself correctly, but the gradient effect of the code below does not work :/
body {
background-image:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
a {
UPDATE II
These 3 lines
::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
have a huge impact on the rest of the page
They make this code:
body {
background-image:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
be effective. If I remove those 3 lines, the gradient effect will not take effect and the font letters will not be of that family but the standard times roman. However, the negative effect is, like I said, that it displaces to the right a banner that I have as header
I have one header page, one controller and one view and the style sheet to which I have a link in the View

Like the others have said the code doesn't affect the positioning of the elements. Only way that it can affect the header would be if that piece of code is not treated as css at all. Check if the code is in the correct style tags.

The moz is for Firefox and as stated already its for styling. Are you using IE? as if so Id suggest trying alternate browser as well as IE has issues with the double colon which is for css3(no suprise there). have a look here
as I used this when I first came across these and it described them well.

That code shouldn't affect what you're doing. It is code that will change the background colour and text colour of text when it is selected by the user using their mouse.
Could you give us an example link of this happening with it commented out, please?
EDIT
What is the center: attribute supposed to be doing? It isn't valid CSS...

Related

override primefaces theme - datatable with multiple colored rows

How to override theme css?
I have problem to override css on the datatable level (.ui-datatable, ..), therefore theme css.
I override css on the theme level with:
.ui-widget, .ui-widget {
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.ui-widget-content {
color: #000;
padding: 3px;
text-align: left;
border: 1px #4682B4 solid;
}
But I need colored lines according of values in table rows... (rowStyleClass="#{id.rowStyleRide}")
I try write class, but it doesnt work.. it seems i dont have access to row css
.oddRow .ui-datatable-odd{
background-color: white;
}
.evenRow .ui-datatable-even{
background-color: black ;
}
.lightGgreenRow .ui-datatable-odd,.ui-datatable-even{
background-color: green;
}
.lightRedRow .ui-datatable-odd,.ui-datatable-even {
background-color: red;
}
.lightYellowRow .ui-datatable-odd,.ui-datatable-even {
background-color: yellow;
}
Anyone try to do something like this? Thanks for any ideas
The phrasing of your question is a little unclear: I'm assuming you mean the first set of CSS is yours and the second is the existing CSS?
In that case, the problem is being caused by the !important. !important causes that CSS rule to override any CSS rule that comes before or after it.
The only way to override CSS with !important is to put your CSS after it, also marked with !important.
http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

How do I insert a repeating, tiled image into the background of a WordPress page or post (not page background)?

I have been fiddling with my Pytheas theme again. This time, I am trying to insert a 2-color gif (suitable for tiling) onto the backgrounds of my pages and posts. Note that I do not mean the background of the whole page. That is, and should remain, black. The site/sample-post in question is here.
I have investigated as extensively as I can given my coding deficiencies. Currently, I've been editing the styles.css file. I replaced this default code:
/* Body & Main
================================================== */
body { background: #eee url("images/main-bg.png") repeat; nowhitespace: afterproperty; font: 12px/1.8 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body a { color: #f15a23 } /*main link color*/
body a:hover { text-decoration: none; color: #000 }
with this revised code, which I cobbled together with my hazy understanding of CSS.
body {
background: url("http://longgame.org/wp-content/uploads/grid-paper-2color-start.gif") repeat; nowhitespace: afterproperty;
background-repeat: repeat;
background-color:rgba(255,255,255,0.0);
font: 12px/1.8 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
My thinking was that I needed that rgba bit to ensure that the color is transparent (in case the texture was 'behind' it). I don't know. I was throwing darts. Maybe it's in the wrong place. Maybe it's just flat out wrong. :)
I turn to you more qualified folks to help me out. Thanks in advance for any guidance you can offer.
Rather than setting the CSS of your body element, try setting it on #main-content
Also, you only need the first line to achieve the effect you want:
#main-content {
background: url("http://longgame.org/wp-content/uploads/grid-paper-2color-start.gif") repeat;
}
If you don't want the background of the whole page to be affected, but only the background of the WordPress page/post, you shouldn't be adjusting the background properly of the body element in your CSS, which would affect the entire HTML page, but rather of the element for which you want to apply the background, probably #main-content.
Try setting that background property on #main-content near line 24 of your CSS file instead, e.g.
#main-content {
background: url("http://longgame.org/wp-content/uploads/grid-paper-2color-start.gif") repeat;
}

How do I create a white background for my text area (change it from a different colour)?

My website - http://www.automated-stores.com has the strange feature of a blue-ish background for text areas, seen more specifically here: http://www.automated-stores.com/vending-machines-business-electronics-cosmetics-perfume
I didn't code the website, but I suppose that to change this it would have to be in the stylesheet.css, does anyone know what code to enter/change?
I thought it would be this:
input,textarea,select {
padding: 1px;
border: solid 1px #000000;
font-size: 10pt;
color:#000000;
background-color:#ffffff;
}
(the colours were different before) but I have changed it several times with no effect.
I looked through your source code and you need to find your style.css under your root and change this:
input,textarea,select {
padding: 1px;
border: solid 1px #5c8593;
font-size: 10pt;
color:#42484d;
background-color:#224f5f;
}
to this:
background-color:#ffffff;
Remember this will affect everything with the class of input, textarea, select. I used the chrome inspect and firebug lite tool to verify this and it worked. If you only want to effect text areas bg color do this:
input,select {
padding: 1px;
border: solid 1px #5c8593;
font-size: 10pt;
color:#42484d;
background-color:#224f5f;
}
textarea {
padding: 1px;
border: solid 1px #5c8593;
font-size: 10pt;
color:#42484d;
background-color:#ffffff;
}
The code in the question does it, provided that you insert it e.g. in a style element after the tag <link rel="stylesheet" href="style.css" type="text/css" />. The external style sheet sets the background color etc. in a simple manner, which can easily be overridden, provided that you place your code after that link tag.
If this does not appear to work, check, in a browser, the HTML source code of the page. It is possible that the server software does some modifications to your code or that your browser has got an old version of the page (Ctrl+F5 should help then).
your <textarea> have attribute <... class="textarea"... You could add this to your stylesheet
.textarea {
background-color: #FFFFFF;
}
The specific rules changing the color of the textarea on the page you gave (the second link) is in style.css line 44:
input, textarea, select {
background-color: #224F5F; // This is the blue background
border: 1px solid #5C8593;
color: #42484D;
font-size: 10pt;
padding: 1px;
}
If it is just textareas that you want to style but dont want to touch the formatting you can do one of two things:
Option 1
Keep CSS as it is and add this underneath:
textarea {
background-color:#FFFFFF !important;
}
I dont like doing this as it makes the CSS to rigid and lots of !important declarations makes managing the style very difficult.
Option 2
Change line 44 styling to:
input, textarea, select {
border: 1px solid #5C8593;
color: #42484D;
font-size: 10pt;
padding: 1px;
}
textarea {
background-color: #FFFFFF;
}
input, select {
background-color: #224F5F;
}
I'd recommend simply targeting the textareas and changing their background colour and giving them a border.
textarea {
background-color:#FFF;
border:1px solid #224f5f;
color:#000;
}

CSS is not working for links

I can not figure out why the below css will not do what it appears to do, if anyone can explain why or help show what I am doing wrong, would greatly appreciate.
<style>
.button-blue a:link{
text-decoration: underline overline; color: red!;
background: #55a4f2!;
padding: 12px 24px!;
-webkit-border-radius: 6px!;
-moz-border-radius: 6px!;
border-radius: 6px!;
color: white!;
font-size: 16px!;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif!;
text-decoration: none!;
vertical-align: middle!;
font-weight:bold!;
}
.button-blue a:hover {
background: #1071d1;
color: #fff;
}
.button-blue a:active {
background: #3e779d;
}
</style>
<div class="button-blue">
Post Comment
</div>
<span class="button-blue">
Post Comment
</span>
http://jsbin.com/etijiz
It doesn't do what you expect it to do because you have syntax errors. You appear to have used ! instead of !important. If you remove the exclamation marks it will look a little more like you expected it to.
Generally it is a bad idea to use !important and if you find yourself using it you probably need to refactor something. It would be a good idea to learn more about how CSS selector specificity works.
Basically it's because you're applying the style to the span/div and not the anchor and a span/div doesn't have an a.hover etc etc.
A quick test by removing the .blue-button from each of the a: style definitions shows it working more correctly.
Here's the fiddle I set up based on your sample.
http://jsfiddle.net/tS9vt/
Added a comment with a new link showing better behaviour without the exclamation marks.
Edit: here's that link http://jsfiddle.net/LuaAv/

How to size this text with css?

I am having some trouble with a font size with CSS. Below you see I have .post I have < pre > tags that are nested inside of the post class so should the css I have for the pre tags work below? It is not working but I can't figure out why? The text inside my pre tags end up being 15px instead of 12px
.post {
width: 100%;
clear: both;
padding: 10px 0;
border-bottom: #CBCBCB 1px solid;
background: url(images/post_element.gif) no-repeat 126px 21px;
font-family: arial;
font-size: 15px;
}
.post pre{
font-size: 12px;
}
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
.post pre{
font-size: 12px !important;
}
Should work, but to answer your questing we need to view all html + css because it really depends...
In a vacuum, that code should work. However, base tag styling can vary browser-to-browser and <pre> tends to be a bit of an odd one. My first thought is that some other style is overriding it.
Have you used Firebug (or some other developer console) to take a look at the styles being applied and the computed style for the element? That should put you on the right track.
This was a weird issue, I had to end up changing the class and font size for all the other text, everything except the pre tags to get it to finally quit resizing after page load from my JS syntax highlighter

Resources