I have the below code that's part of a php script. The brackets work correctly i.e if I change it to h1 heading it shows heading 1 but when I try to use a class for style it does not. What am I doing wrong?
<p class="indexletters">-<a name="'.substr($row['name'],0,1).'">'.substr
($row['name'],0,1).'-</p>
And this is the css
p.indexletters {
color:#00A383;letter-spacing:1px;font-family: PosterBodoni; font-size:
50px; margin: 0;
padding: 0;
border: 0;
outline: 0;"
Thank you
You're ending with " CSS should look like this:
p.indexletters{
color:#00A383;
letter-spacing:1px;
font-family: PosterBodoni;
font-size: 50px;
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
Related
Recently started to work with Prettier in VSC and so far so good; the only issue I found is the "diagram" of the ID. How can I adjust the format?. My Prettier: Print Width's value is 120, so is not that.
Exp. (Prettier on)
#mail_user,
#pass_user,
#name_user,
#cardValid {
font-size: 55px;
padding: 20px 14px;
border: 0;
border-radius: 20px;
margin-bottom: 90px;
}
I'm looking something like:
#mail_user, #pass_user, #name_user, #cardValid {
font-size: 55px;
padding: 20px 14px;
border: 0;
border-radius: 20px;
margin-bottom: 90px;
}
Few lines and just simply like it more. Thx in advance.
I am using jqueryInputToken and acts-as-taggable-on gem. I was able to make the back-end work. However, as part of using the jqueryTokenInput plugin, my text_area became so slim and looks more like a tiny text_field.
Here is a picture of what my text_area looks like as a result of the jQueryInput plugin without hovering:
And when you hover the "X" sign to delete the tag apears like in the picture below:
I want to modify the css so that the text_area becomes big and the token looks exactly like below:
How should I modify the css below to reach my desired look for the text_field and tokens ?
Here is the css:
/* Example tokeninput style #2: Mac Style */
fieldset.token-input-mac {
position: relative;
padding: 0;
margin: 5px 0;
background: #fff;
width: 400px;
border: 1px solid #A4BDEC;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
fieldset.token-input-mac.token-input-dropdown-mac {
border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
}
ul.token-input-list-mac {
position: relative;
overflow: hidden;
height: auto !important;
cursor: text;
font-size: 12px;
min-height: 1px;
z-index: 999;
margin: 0;
padding: 0;
background: transparent;
}
ul.token-input-list-mac.error {
border: 1px solid #C52020;
}
ul.token-input-list-mac li {
list-style-type: none;
}
li.token-input-token-mac p {
display: inline;
padding: 0;
margin: 0;
}
li.token-input-token-mac span {
color: #231C34;
margin-left: 5px;
font-weight: bold;
cursor: pointer;
}
/* TOKENS */
li.token-input-token-mac {
position: relative;
display: inline-block;
width: auto !important;
font-size: 8pt;
line-height: 12pt;
margin: 0px 3px 3px 0px;
padding: 4px 10px;
background: none;
background-color: #0F004E;
color: #fefefe;
cursor: default;
float: left;
font-weight: bold;
}
li.token-input-highlighted-token-mac {
background-color: #231C34;
color: #fefefe;
font-weight: bold;
}
li.token-input-selected-token-mac {
background-color: #231C34;
color: #fefefe;
font-weight: bold;
}
li.token-input-highlighted-token-mac span.token-input-delete-token-mac {
color: #fefefe;
font-weight: bold;
}
li.token-input-selected-token-mac span.token-input-delete-token-mac {
color: #fefefe;
font-weight: bold;
}
li.token-input-input-token-mac {
border: none;
background: transparent;
float: left;
padding: 0;
margin: 0;
}
li.token-input-input-token-mac input {
width: 100px;
padding: 3px;
margin: 0;
}
div.token-input-dropdown-mac {
position: absolute;
border-top: none;
left: -1px;
right: -1px;
background-color: #fefefe;
overflow: hidden;
cursor: default;
font-size: 10pt;
}
div.token-input-dropdown-mac p {
font-size: 8pt;
margin: 0;
padding: 0 10px;
color: #fff;
}
div.token-input-dropdown-mac h3.token-input-dropdown-category-mac {
font-size: 10pt;
font-weight: bold;
border: none;
padding: 0 5px;
margin: 0;
}
div.token-input-dropdown-mac ul {
margin: 0;
padding: 0;
}
div.token-input-dropdown-mac ul li {
list-style-type: none;
cursor: pointer;
background: none;
background-color: #fefefe;
margin: 0;
padding: 0 0 0 10px;
color: #999;
text-transform: uppercase;
}
div.token-input-dropdown-mac ul li.token-input-dropdown-item-mac span.token-input-dropdown-item-description-mac {
float: right;
font-size: 8pt;
font-style: italic;
padding: 0 10px 0 0;
color: #999;
text-transform: uppercase;;
}
div.token-input-dropdown-mac ul li strong {
font-weight: bold;
text-decoration: underline;
color: #999;
text-transform: uppercase;
}
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd {
background: #0F004E;
color: #bb8322; //Official Red
text-transform: uppercase;
font-weight: bold;
}
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac:hover,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd:hover,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac:focus,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd:focus {
color: #fff;
}
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac span.token-input-dropdown-item-description-mac,
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd span.token-input-dropdown-item-description-mac {
color: #fff;
}
I have been trying to do something like this and have at least a rough version of something working, so I'll put this here in case it's useful. I used the Facebook theme - it looks like you used a different theme. I mention that because this influences things like class names in my answer. Also I think that Facebook might be more of what you're after (see the cosmetic stuff below).
I'll split this into two parts: a structural part first, and then a cosmetic part.
Structure
Part of my problem was due to the fact that the token input code replaces your HTML with some of its own. I wrote this HTML
<div id="searchBar">
<input type="text" id="bigTextInput" />
</div>
and the combination of the insert-token-input-here call:
$("#bigTextInput").tokenInput(token_url, {
theme: 'facebook',...
and the user entering a couple of things, made it look like this (with my comments):
<div id="searchBar">
<ul class="token-input-list-facebook">
<li class="token-input-token-facebook"> <!-- one of these per user input -->
<p>first thing the user entered
<span class="token-input-delete-token-facebook">X</span></p></li>
<li class="token-input-token-facebook">
<p>second thing the user entered
<span class="token-input-delete-token-facebook">X</span></p></li>
<li class="token-input-input-token-facebook"> <!-- 1 on the end for entering the next selection -->
<input id="token-input-Y"> <!-- Y = whatever Id you gave to the original input (bigTextInput in my case) -->
</li>
</ul>
<input id=Y display:none /> <!-- the thing you created, but then is hidden and replaced by the ul etc. -->
</div>
The input I created has been hidden away, and in its place there's now a ul, with an li per thing the user entered and an extra li for the user to add more things.
To change the height successfully I had to set the height I wanted on the ul:
$("ul.token-input-list-facebook").height(newHeight + "px");
Bonus structure stuff - auto-resizing
I started with just a large box, but this didn't look good if the user had entered only a small amount of stuff. So I thought I'd try to make it start small (a single line high) and then grow on demand.
To do this I made sure that the ul wouldn't create scrollbars:
ul.token-input-list-facebook {
overflow-x: hidden;
overflow-y: hidden;
}
and then if the content overflowed, I would re-size things. I checked for overflow by adding a handler to the add and delete events of the token input:
$("#bigTextInput").tokenInput(token_url, {
theme: 'facebook',
onAdd: function(){
growSearchBoxSizes();
},
onDelete: function(){
shrinkSearchBoxSizes();
}
});
The best way I found to detect overflow in growSearchBoxSizes was to compare the offsetHeight and scrollHeight properties of the enclosing div:
var heightA = parseFloat($("#searchBar")[0].offsetHeight);
var heightB = parseFloat($("#searchBar")[0].scrollHeight);
I suggest you write these to console.log, experiment with what they show when the input does and doesn't overflow, and have code to add 1 line's height when they show you that there is overflow.
I couldn't come up with a good way to detect when it was time to shrink (e.g. after the user had deleted a line's worth of stuff), so in the delete handler I shrink the box down to its starting size and then grow it back up to whatever height is needed, i.e. until there is no overflow. (A hack, but it seems to work.)
Actually, I was already using a handler for the add and delete events because of wanting to prevent what the user had already entered from showing up in the auto-completion list for later inputs, which you might want to also consider.
Cosmetic
The reason why I suggested that you might want to switch to the Facebook theme is that it has the X present all the time as you want. The colours and shapes aren't as you want them, but I hope that this should be a matter of just defining overrides in your CSS as appropriate.
I recently message boxes that style a message given during a php statement, and they style the message.
This is my php code.
mysql_query("UPDATE account SET is_active=1, activation_code='' WHERE activation_code='$code'");
$message_good = '<div class="register_thankyou"><p>Success! Your account has been activated. You may now log in.</p></div>';
} else {
$message_good = '<div class="register_error"><p>Account has already been activated, or you have an invalid activation code.</p></div>';
}
For some reason, it loads the style register_thankyou but not for register_error.
Both styles have this css setup.
/* ACTIVATION MESSAGES */
.register_thankyou {
background-color: #e3f6da;
border: 1px solid #3b7008;
padding: 20px;
}
.register_thankyou h3 {
font-size: 20px;
font-weight: normal;
margin: 0 0 10px;
padding: 0;
}
.register_thankyou p {
margin: 0;
padding: 0;
}
.register_error {
background-color: #f8e5e4;
border: 1px solid #c41100;
padding: 20px;
}
.register_error h3 {
font-size: 20px;
font-weight: normal;
margin: 0 0 10px;
padding: 0;
}
.register_error p {
margin: 0;
padding: 0;
}
All thats different is the background and border color
Can someone explain to me why one style is being applied and the other isnt?
Thank you:
error:
it works on here tho: http://jsfiddle.net/q8ozgfmu/
As i alarmed alien said, check in the Browser's inspector. The style might be getting overridden. Or the other reason could be that the updated style.css may not have loaded in the browser. Try clearing the cache and load the page again.
Ck-editor works itself good, after i save editet text from ckeditor to database, and then i load it to page. Generated html is unformated, is there any aditional ckeditor js functions that have to be applied to target area, or is there any detault class needed to be added to text container ?
I checked ck-editor css files but there is no specific class, like when you check "contents.css" in ckeditor files and there is "img.left{border: 1px solid #ccc; .." thats pretty creepy since there is no specific class, it would work in plain iframe but if i show text from ckeditor in more complex page i have to rewrite css like ".wysiwyg img.left" and then reset all css by modified reset.css for .wysiwyg class, and its pretty hard to reset everything, isnt there some other way that i just missed badly in ck-editor documentation? since all i see in there are only examples in actual editor, not how to style generated text itself.
If you just want the HTML authored in CKEditor to look the same inside your page, first you must insert it inside a div element with a custom class, for example, "my-container".
Then you have to include contents.css in your page. Here you have to alternatives: 1) use Scoped Stylesheets or 2) modify contents.css, scoping each rule.
1. Using Scoped Stylesheets
In this case you should use Scoped Stylesheets and JQuery Scoped CSS plugin (due to current lack of browser support).
Your HTML code would look like this:
<div class="my-container">
<style scoped>
#import "ckeditor/contents.css";
</style>
<!-- Your HTML goes here -->
</div>
2. Scoping each rule inside contents.css
In this case you must link to a modified copy of CKEditor's contents.css file. Each of the rule's selector must be scoped to "my-container" class, so it doesn't affect the rest of the page. Example contents.css file:
.my-container
{
/* Font */
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
font-size: 12px;
/* Text color */
color: #333;
/* Remove the background color to make it transparent */
background-color: #fff;
margin: 20px;
}
.my-container .cke_editable
{
font-size: 13px;
line-height: 1.6em;
}
.my-container blockquote
{
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
}
.my-container .cke_contents_ltr blockquote
{
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}
.my-container .cke_contents_rtl blockquote
{
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
.my-container a
{
color: #0782C1;
}
.my-container ol,.my-container ul,.my-container dl
{
/* IE7: reset rtl list margin. (#7334) */
*margin-right: 0px;
/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
padding: 0 40px;
}
.my-container h1,.my-container h2,.my-container h3,.my-container h4,.my-container h5,.my-container h6
{
font-weight: normal;
line-height: 1.2em;
}
.my-container hr
{
border: 0px;
border-top: 1px solid #ccc;
}
.my-container img.right
{
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
.my-container img.left
{
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
.my-container pre
{
white-space: pre-wrap; /* CSS 2.1 */
word-wrap: break-word; /* IE7 */
}
.my-container .marker
{
background-color: Yellow;
}
.my-container span[lang]
{
font-style: italic;
}
.my-container figure
{
text-align: center;
border: solid 1px #ccc;
border-radius: 2px;
background: rgba(0,0,0,0.05);
padding: 10px;
margin: 10px 20px;
display: block; /* For IE8 */
}
.my-container figure figcaption
{
text-align: center;
display: block; /* For IE8 */
}
I've read about postion:absolute problems and tried almost every possible solution. Including positioning divs relatively, wrapping them in a relatively positioned parent etc etc, but it didn`t help.
I'm drawing a table and after that im putting divs in it in a specified place. Table (grid) prints fine but places where divs should be are printed in slightly different color and divs aren`t there. In chrome it prints ok. Has anyone managed to find a solution yet? Maybe I'm doing something else wrong?
My css:
body
{
margin: 0px;
padding: 0px;
font-family: Verdana;
-moz-user-select: none;
}
.grid
{
height: 100%;
border: 1px solid;
border-collapse: collapse;
}
.grid tr
{
text-align:center;
border-bottom: 1px dashed;
cursor: cursor;
}
.grid td.hourCell
{
width: 100px;
vertical-align:top;
font-size: 10px;
font-weight: 500;
height: 60px;
}
.grid th.hourCell
{
width: 100px;
}
.grid th
{
font-weight: bold;
height: 20px;
width: 200px;
font-size: 12px;
font-weight: 500;
font-family: Verdana;
border-right: 1px solid;
background-repeat: repeat;
cursor: cursor;
}
.grid td
{
height: 30px;
width: 200px;
vertical-align: top;
}
.div_which_doesnt_print
{
padding: 0px;
margin: 0px;
width: 200px;
font-size: 10px;
font-family: Verdana;
height: 0px;
position: absolute;
border-style: solid;
border-width: thin;
overflow: hidden;
opacity:0.7;
z-index: 3;
}
Every help would be greatly appreciated! Even reassuring me that solution is still unavaible.
EDIT: It looks like it was an issue with opacity. Setting
#media print
{
.div_which_doesnt_print
{
opacity:1;
}
}
Fixed the issue with visibility. They still display sometimes in wrong places, but that`s a different issue.
It looks like it was an issue with opacity. Setting
#media print
{
.div_which_doesnt_print
{
opacity:1;
}
}
Fixed the issue with visibility. They still display sometimes in wrong places, but that`s a different issue.
If you are Inserting the Divisions Inside the Table Cells, then just give the Cell TD/TR position to relative and then give absolute positioning to the div inside it.
This was working fine for me in few projects.
I hope this helps.