Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I was flowing the ROR tutorials about compiling CSS to Sass, but i couldn't fix with the problem, it's very mysterious , i have done some research , it's all unrelated. Thank you very much.
Invalid CSS after " }": expected selector or at-rule, was "}"
(in `/Users/snailwalker/rails_projects/sample_app/app/assets/stylesheets/custom.css.scss:82)`
Extracted source (around line #5):
2
3
4
5
6
7
8
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag "application", media: "all",
"data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
Css file .
#import "bootstrap";
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #999;
}
p{
font-size: 1.1em; line-height: 1.7em;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
line-height: 1;
&:hover {
color: #fff;
text-decoration: none;
}
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid #eaeaea;
color: #999;
}
footer a {
color: #555;
&:hover {
color: #222;
}
}
footer small {
float: left;
}
footer ul {
float: right;
list-style: none;
}
footer ul li {
float: left;
margin-left: 10px;
}
}
}
You have two '}' at the end of the file that you don't need. The correct file would be:
#import "bootstrap";
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #999;
}
p{
font-size: 1.1em; line-height: 1.7em;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
line-height: 1;
&:hover {
color: #fff;
text-decoration: none;
}
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid #eaeaea;
color: #999;
}
footer a {
color: #555;
&:hover {
color: #222;
}
}
footer small {
float: left;
}
footer ul {
float: right;
list-style: none;
}
footer ul li {
float: left;
margin-left: 10px;
}
Related
I have a Jekyll blog with GitHub pages and have an issue where images embedded in blog posts don't have any padding, meaning the text is too close to the image:
I'd like to specify the padding in the style.scss file so it's applied to all images in blog posts in the future. Where should I add a padding argument? Thank you!
---
---
//
// IMPORTS
//
#import "reset";
#import "variables";
// Syntax highlighting #import is at the bottom of this file
/**************/
/* BASE RULES */
/**************/
html {
font-size: 100%;
}
body {
background: $white;
font: 16px/1.4 $helvetica;
color: $darkGray;
}
.container {
margin: 0 auto;
max-width: 740px;
padding: 0 10px;
width: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-family: $helveticaNeue;
color: $darkerGray;
font-weight: bold;
line-height: 1.7;
margin: 1em 0 15px;
padding: 0;
#include mobile {
line-height: 1.4;
}
}
h1 {
font-size: 30px;
a {
color: inherit;
}
}
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 18px;
color: $gray;
}
p {
margin: 15px 0;
text-align: justify;
}
a {
color: $blue;
text-decoration: none;
cursor: pointer;
&:hover, &:active {
color: $blue;
}
}
ul, ol {
margin: 15px 0;
padding-left: 30px;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
ol ul, ul ol, ul ul, ol ol {
margin: 0;
}
ul ul, ol ul {
list-style-type: circle;
}
em, i {
font-style: italic;
}
strong, b {
font-weight: bold;
}
img {
max-width: 100%;
}
// Fixes images in popup boxes from Google Translate
.gmnoprint img {
max-width: none;
}
.date {
font-style: italic;
color: $gray;
}
// Specify the color of the selection
::-moz-selection {
color: $black;
background: $lightGray;
}
::selection {
color: $black;
background: $lightGray;
}
// Nicolas Gallagher's micro clearfix hack
// http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/*********************/
/* LAYOUT / SECTIONS */
/*********************/
//
// .masthead
//
.wrapper-masthead {
margin-bottom: 50px;
}
.masthead {
padding: 20px 0;
border-bottom: 1px solid $lightGray;
#include mobile {
text-align: center;
}
}
.site-avatar {
float: left;
width: 70px;
height: 70px;
margin-right: 15px;
#include mobile {
float: none;
display: block;
margin: 0 auto;
}
img {
border-radius: 5px;
}
}
.site-info {
float: left;
#include mobile {
float: none;
display: block;
margin: 0 auto;
}
}
.site-name {
margin: 0;
color: $darkGray;
cursor: pointer;
font-family: $helveticaNeue;
font-weight: 300;
font-size: 28px;
letter-spacing: 1px;
}
.site-description {
margin: -5px 0 0 0;
color: $gray;
font-size: 16px;
#include mobile {
margin: 3px 0;
}
}
nav {
float: right;
margin-top: 23px; // #TODO: Vertically middle align
font-family: $helveticaNeue;
font-size: 18px;
#include mobile {
float: none;
margin-top: 9px;
display: block;
font-size: 16px;
}
a {
margin-left: 20px;
color: $darkGray;
text-align: right;
font-weight: 300;
letter-spacing: 1px;
#include mobile {
margin: 0 10px;
color: $blue;
}
}
}
//
// .main
//
.posts > .post {
padding-bottom: 2em;
border-bottom: 1px solid $lightGray;
}
.posts > .post:last-child {
padding-bottom: 1em;
border-bottom: none;
}
.post {
blockquote {
margin: 1.8em .8em;
border-left: 2px solid $gray;
padding: 0.1em 1em;
color: $gray;
font-size: 22px;
font-style: italic;
}
.comments {
margin-top: 10px;
}
.read-more {
text-transform: uppercase;
font-size: 15px;
}
}
.wrapper-footer {
margin-top: 50px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background-color: $lightGray;
}
footer {
padding: 20px 0;
text-align: center;
}
// Settled on moving the import of syntax highlighting to the bottom of the CSS
// ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
#import "highlights";
#import "svg-icons";
I would modify your img tag in your style.scss...
change this...
img {
max-width: 100%;
}
to this...
img {
max-width: 100%;
padding: 5px;
}
if the image has it's own DIV use this...
.imageDiv img {
padding: 5px;
}
Im working my way through Michael Hartls Ruby on Rails tutorial and have run into a snag in while trying to get my style to match that of the tutorial. For whatever reason the changes that should be applied to the text in h1 under sidebar aren't going through and I cant find where the error in my code is.
This is his styling:
And this is mine:
This is the code in question.
#import "bootstrap-sprockets";
#import "bootstrap";
/* mixins, variables, etc. */
$gray-medium-light: #eaeaea;
#mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* universal */
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: $gray-light;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: white;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
&:hover {
color: white;
text-decoration: none;
}
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid $gray-medium-light;
color: $gray-light;
a {
color: $gray;
&:hover {
color: $gray-darker;
}
}
small {
float: left;
}
ul {
float: right;
list-style: none;
li {
float: left;
margin-left: 15px;
}
}
}
/* miscellaneous */
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
#include box_sizing;
}
/* sidebar */
aside {
section.user_info {
margin-top: 20px;
}
section {
padding: 10px 0;
margin-top: 20px;
&:first-child {
border: 0;
padding-top: 0;
}
span {
display: block;
margin-bottom: 3px;
line-height: 1;
}
h1 {
font-size: 1.4em;
text-align: left;
letter-spacing: -1px;
margin-bottom: 3px;
margin-top: 0px;
}
}
}
.gravatar {
float: left;
margin-right: 10px;
}
.gravatar_edit {
margin-top: 15px;
}
I'm following Ruby On Rails Tutorial by Michael Hartl and I think there is something wrong with my styles.
First, I get this instead of this
As you see, there is smth wrong with title style and debug box style
Then, in signup page I get this instead of this
My style file (custom.css.scss):
#import "bootstrap";
/* variables */
$paddingTopBody: 60px;
$marginBottomH1: 10px;
$grayMediumLight: #eaeaea;
#mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: $paddingTopBody;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: $marginBottomH1;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: $grayLight;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: white;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
line-height: 1;
&:hover {
color: white;
text-decoration: none;
}
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid $grayMediumLight;
color: $grayLight;
a {
color: $gray;
&:hover {
color: $grayDarker;
}
}
small {
float: left;
}
ul {
float: right;
list-style: none;
li {
float: left;
margin-left: 10px;
}
}
/* miscellaneous */
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
#include box_sizing;
}
/* sidebar */
aside {
section.user_info {
margin-top: 20px;
}
section {
padding: 10px 0;
margin-top: 20px;
&:first-child {
border: 0;
padding-top: 0;
}
span {
display: block;
margin-bottom: 3px;
line-height: 1;
}
h1 {
font-size: 1.4em;
text-align: left;
letter-spacing: -1px;
margin-bottom: 3px;
margin-top: 0px;
}
}
}
.gravatar {
float: left;
margin-right: 10px;
}
.gravatar_edit {
margin-top: 15px;
}
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
#include box_sizing;
}
input {
height: auto !important;
}
#error_explanation {
color: #f00;
ul {
list-style: none;
margin: 0 0 18px 0;
}
}
.field_with_errors {
#extend .control-group;
#extend .error;
}
}
Any ideas where the error could be?
I don't know about Michael's book, but as your screenshot, you might be omitted 'css reset'
edit: I find out sample app's github from that book, you can compare style file directly.
Finally I've found the error. I forgot } after footer so everything after footer was under its tag. Thanks #Leqna for answer
I have built a Ruby on Rails site based off the RailsTutorial. I'm trying to change a few colors, but I can't figure it out.
I would like to change the background color [body of page] and the color of the menu text. Where can I do this?
my current custom.css.scss:
#import "bootstrap";
/* mixins, variables, etc. */
$grayMediumLight: #eaeaea;
#mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
table td {
padding:0px 25px 0px 0px;
}
table th {
text-align: left;
padding:0px 25px 0px 0px;
}
/* bootstrap */
.navbar-inner {
background-color: white; /* background color will be black for all browsers */
background-image: none;
background-repeat: no-repeat;
filter: none;
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: $grayLight;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
p2 {
font-size: 1.1em;
line-height:1.7em;
font-weight: bold;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: black;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
line-height: 1;
&:hover {
color: white;
text-decoration: none;
background-color: black;
}
}
...
thanks
Bootstrap has a lot of customization by default. You can find all the options here http://getbootstrap.com/customize/
Just use sass variables instead of less.
$body-bg: #fff;
$navbar-default-color: #000;
$navbar-default-link-color: #000;
and so on… You will get what you want
to change color of navbar
.navbar {
background-color: red;
}
to change navbar nav links color
.navbar-nav > li > a {
color: blue;
}
try
div.navbar{
background: red;
color:#fff
}
Change the colors to your needs.
I'm learning rails. I have this problem and I hope you can help me.
HTTP answer code is 500 ... I am learning from a rails tutorial...
Site crashes after adding the style - /* sidebar */
This is my custome.css.scss:
#import "bootstrap";
/* mixins, variables, etc. */
$grayMediumLight: #eaeaea;
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.7em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: $grayLight;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: white;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
line-height: 1;
&:hover {
color: white;
text-decoration: none;
}
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid $grayMediumLight;
color: $grayLight;
a {
color: $gray;
&:hover {
color: $grayDarker;
}
}
small {
float: left;
}
ul {
float: right;
list-style: none;
li {
float: left;
margin-left: 10px;
}
}
}
/* sidebar */
aside {
section {
padding: 10px 0;
border-top: 1px solid $grayLighter;
&:first-child {
border: 0;
padding-top: 0;
}
span {
display: block;
margin-bottom: 3px;
line-height: 1;
}
h1 {
font-size: 1.4em;
text-align: left;
letter-spacing: -1px;
margin-bottom: 3px;
margin-top: 0px;
}
}
}
.gravatar {
float: left;
margin-right: 10px;
}
and why the site falls due to renaming the comments? it the syntax language "SASS"?
other files https://gist.github.com/phantomass/7356307
The issue here may be the way you are using SASS comments and are having an issue with the compiled code.
I am not sure of your rails setup but I would take a look at the Rails asset preprocessing section
If you provide more information on your rails app I will try my best to resolve the issue.