CSS
.title{
margin-top: 200px; // does not work!
margin-left: 20px;
font-weight: bold;
color: $green;
font-size: 2.5em;
}
.title:hover{
background-color: transparent;
}
.title:visited{
color: $green;
}
rails / html.erb
<body>
.....
<%if current_page?(login_path) or request.path == "/signup"%>
<%= link_to "TITLE", "#", class: "title"%>
<%= yield %>
<% else %>
.....
</body>
My title CSS use to work but now it does not. Right my title is always stick to the top of the screen no matter what.I've tried margin-top and padding-top, but it refuses to move down. Margin-left, however, does work, so I am not quite sure why one aspect of margin works but the other does not.
What am I doing wrong here? And if you think the problem is not listed in the code above but rather elsewhere in my CSS, please let me know so I can maybe look into other parts of my css where the problem might be !
Just in case below is the portion where it defines the fundamental layout
/* BASIC CONFIGURATION */
body {
color: #797979;
background: $background;
font-family: 'Lato', sans-serif;
padding: 0px !important;
margin: 0px !important;
font-size:13px;
}
table{
border-collapse: separate;
border-spacing: 10px 5px;
}
td{
margin-right: 10px;
}
#main-content{
font-family: 'Lato', sans-serif;
}
ul li {
list-style: none;
}
a, a:hover, a:focus {
text-decoration: none;
outline: none;
}
a:hover{
background-color: inherit;
}
::selection {
background: #68dff0;
color: #fff;
}
::-moz-selection {
background: #68dff0;
color: #fff;
}
#container {
width: 100%;
height: 100%;
}
Your problem is right here:
body {
color: #797979;
background: $background;
font-family: 'Lato', sans-serif;
padding: 0px !important;
margin: 0px !important;
font-size:13px;
}
You have marked that you want all margins and padding to be 0 and made them !important. If you want to override that you have to make your .title element to be important for margins.
I would recommend avoiding !important as much as possible. Typically you don't need it unless you are overriding a provided CSS that defines some fields with !important.
You use percentage for padding-top. Use pixel value and it will work. Percentage in this case will only work if you have fixed height
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 want to hide border of rich:fileupload.I just need to show only browse button.Can anyone please guide me on this.
<td colspan="4">
<rich:fileUpload id="upload" fileUploadListener="#{fileUploadBean.listener}" maxFilesQuantity="#{fileUploadBean.uploadsAvailable}"
acceptedTypes="txt,ppt,jpg,doc,xls, gif, bmp,pdf" ontyperejected="alert('Only TXT,PPT,DOC,XLS JPG, GIF,PDF and BMP files are accepted');"
addControlLabel="Browse" listHeight="auto" listWidth="300px" onsizerejected="fileSizeRejected();"
immediateUpload="#{fileUploadBean.autoUpload}" allowFlash="#{fileUploadBean.useFlash}" addButtonClass="browse-button-font" >
<a4j:support event="onuploadcomplete" reRender="uploadInfo" oncomplete="setFlag();"/>
</rich:fileUpload>
</td>
Below is my CSS code:
Even I put border:none still one border is coming outside the browse button.
.rich-fileupload-button-border{
border:none !important;
}
.rich-fileupload-ico-start,.rich-fileupload-ico-stop,.rich-fileupload-ico-clear,.rich-fileupload-anc{
display: none !important;
}
.rich-fileupload-ico-add{
border: 1px solid #474747; background: #0035a9 url(images/ui-bg_highlight-hard_60_0035a9_1x100.png) 50% 50% repeat-x;
position: fixed;
margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible;
background-image: none;
}
.browse-button-font
{
font-family: Segoe UI, Arial, sans-serif; font-size: 1.0em;font-weight: bold;
color: #ffffff;
}
.rich-fileupload-toolbar-decor {
background: none;
border:none !important;
}
.rich-fileupload-list-decor{
border:none !important;
}
div div.rf-fu { border: 0px; width: 85px; !important }
div div.rf-fu-hdr { border: 0px; !important }
span span.rf-fu-btn-clr { border: 0px; !important }
span.rf-fu-btns-lft{ width: 85px; !important }
span.rf-fu-btns-rgh{ display: none; !important }
div div.rf-fu-lst { display:none; !important }
Try the CSS above, this should do the trick.
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 am developing an ASP.NET web application which in its site master (in the ContentPlaceHolder3) I put some css style which should apply to the whole website. Part from this style is the following:
.Welcome {
width:531px;
margin:5px 15px;
float:left;
padding:5px 10px;
}
.Welcome ul {
width:250px;
float: left;
margin:5px 3px;
padding:0;
list-style:none;
}
.Welcome li {
background:url(images/ul_li.gif) left no-repeat;
padding:5px 20px;
margin:0;
font: normal 12px Georgia, "Times New Roman", Times, serif; /* the original font-size was 11px. */
color:#5c5c5c;
}
Now, in one of the website pages, I want to put some content inside that ContentPlaceHolder with the following specific style:
/*body { font: 0.8em Arial, sans-serif; }*/
.tipsMenu { padding: 0; clear: both; }
.tipsMenu li { display: inline; }
.tipsMenu li a { background: #ccf; padding: 10px; float:left; border-right: 1px solid #ccf; border-bottom: none; text-decoration: none; color: #000; font-weight: bold;}
.tipsMenu li.active a { background: #eef; }
.tipsContent { float: left; clear: both; border: 1px solid #ccf; border-top: none; border-left: none; background: #eef; padding: 10px 20px 60px; width: 400px; }
EDIT:
*When I tried to do it, I got some style from the CSS file that is in the site.master page. So how can I override the style in the master page with the inline style?*
Apart from making sure the specific style is loaded after the one embedded in the site.master page, you can try a couple of things:
1. Check the css specificity of your new styles. Basically you need to make sure that the selectors used in your new styles are more specific than the ones used in the other stylesheet. In short, inline styles are more specific than ids, ids are more specific than classes and classes are more specific than html elements. e.g.:
#selector {
// High specificity
}
.selector1 .selector2 .selector3 {
// Less specificity than #selector, #selector styles applied
}
2. Add the !important clause to the styles. This overrides the specificity rules and forces the browser to use the important style. Although easier, this method isn't recommended for the sake of maintainability, among other reasons. like this:
.tipsMenu { padding: 0 !important; clear: both !important; }
.tipsMenu li { display: inline !important; }
On this page I'm trying to position quote images around the block quote but they won't sit right.
This is the CSS:
blockquote {
padding-left:10px;
color:#444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
blockquote p {
padding: 0 100px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
I want to keep the images the same size ideally. I just want to make the text stop overlapping the images. I tried specifying the width of the .blockquote as 500px but it didn't seem to make any difference.
Any ideas would be welcomed. Thanks - Tara
Two things:
In order to see the images behind
the text you should not specify a
background color for the inner paragraph; make
it transparent instead.
The specified padding is not applied due to another property (.entry p) which is more specific. You could set this blockquote padding to !important but that's generally not recommended, another option is to make this one more specific than the other (.entry p) by adding the .entry class. Be aware that only blockquotes with a parent .entry class will be selected this way. (more info about specificity)
The css:
blockquote {
padding-left: 10px;
color: #444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
.entry blockquote p {
padding: 0 100px;
background: transparent url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
Try adding this property:
.entry p {
margin: 5px 5px 5px 15px;
padding: 0px 40px 0px 0px;
line-height: 20px;
font-family: Tahoma,Georgia, Arial,century gothic,verdana, sans-serif;
font-size: 13px;
}
I managed to get the following:
Hope that helped (:
Depending on the browser support that you need, you can try it without images, using CSS:
blockquote {
padding: 0;
margin: 0;
border: 1px solid blueviolet;
}
blockquote:after,
blockquote:before {
color: #ccc;
font-size: 4em;
line-height: 0;
height: 0;
vertical-align: -0.5em;
display: inline-block;
}
blockquote:after {
content: "”";
margin-left: 0.05em;
}
blockquote:before {
content: "“";
margin-right: 0.05em;
margin-bottom: -0.5em;
}
Live example here
(Tested on Firefox and Chrome only)