This is my first post and I have found many solutions on this website, but this is the first time I could not research and find the issue.
I am having a terrible time trying to change the colors of this webpage I am designing for my new business. I am unable to change any of the colors in the style sheet. For example I am trying to change the color of where it says Mr Fix All on the main page from #fff to #FF4500, after inspecting the elements I have tracked the style back to class="carousel-title" so in my layout.css I goto the Carousel-title and changed it from #fff to #ff4500 and nothing happens.
I have gone as far as changing the code for the color white to FF4500 and remove all #fff from the entire document and the color still wont change.
After some research of this issue I saw other people had anchors that "over ride" the colors, but there are not anchors, this is just a heading so I cannot find out where this color is calling from.
I even looked at the Div tag above carousel-center which has no color tags at all. I haven't been able to change a single color on this website so I am very confused!
Any assistance would be great, this is the only thing stopping me from completing this page, I cannot read half the words because they are all white.... or very light grey. I want to make all the words either FF4500 or darker gray like the heading is at the top.
http://www.mrfixalltampa.com
lol I suck I cannot figure out how to put the code this website is throwing syntax errors I cannot believe it!
You have the right idea to change the color for the carousel-title class in your example.
As a standard practice don't edit the layout.css or other plugin files. Instead, you should create another custom CSS file.
So, for your example to change the carousel title "Mr. Fix All" color, you could create a custom.css file having your style overrides like below
.carousel-title {
color:#FF4500
}
and add it to your index.html as the last stylesheet included, as shown below
<link href="css/animate.css" rel="stylesheet">
<link href="vendor/swiper/css/swiper.min.css" rel="stylesheet" type="text/css"/>
<link href="css/layout.min.css" rel="stylesheet" type="text/css"/>
<!-- Custom Stylesheet -->
<link href="css/custom.css" rel="stylesheet" type="text/css"/>
Related
I am excited to complete this project, i'm getting close but need help.
I want the width on the download now button equal the width of the book?
http://www.orcaaccounting.com/freeStuff.html |
Then make the image size be mobile friendly. Right now the page isn't mobile friendly.
Any other pointers are greatly appreciated.
Here is a url to my source code.
I couldn't figure out how to insert the code here.
If these are fixed images (i.e. they will not change), then all you need to do is manually set the width of the download button to be the same as the width of the book's image:
<img src="downloadnowOrange.png" style="width:182px">
Note that the above is considered bad code, but it works perfectly and since the rest of your site uses that same style, we'll leave it like that.
How did I discover the correct width for the button? If you are using Google Chrome browser, you can right-click on the book image and choose "Inspect Element". This opens Chrome's "DevTools" window and shows you the underlying HTML. If you hover over the img src, Chrome will display the image and the width/height sizes.
A few points:
You are using inline styling. This means that you have style attributes on each div/etc that style the element. For many reasons, this is not optimal. It is pretty easy to fix this. Give each DIV a unique className, and create a style tag in the document's head with the styles, like this:
Inline-styling (Bad):
<div style="width:50px;height:80px;background:red;">
<img src="healthyCooking.png" style="border:1px solid green;"/>
</div>
Using a style tag:
<head>
<style>
.redDiv{width:50px;height:80px;background:red;}
.cookImg{border:1px solid green;}
</style>
</head>
<body>
<div class="redDiv">
<img src="cookingBooking.png" class="cookImg" />
</div>
That's what people mean by inline styling. Try not to do it. Use the 2nd method, or, better yet, use an external style sheet. To turn the style tag example into an external style sheet, you just move the lines between the <style> and </style> tags - exactly as they are into an external text file (for e.g. mystyle.css), then the head becomes:
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css" >
</head>
The file mystyle.css looks like this:
.redDiv{width:50px;height:80px;background:red;}
.cookImg{border:1px solid green;}
I read an article online for tips using CSS and one of the pointers was:
Use a master stylesheet. “One of the most common mistakes I see
beginners and intermediates fall victim to when it comes to CSS is not
removing the default browser styling. This leads to inconsistencies in
the appearance of your design across browsers, and ultimately leaves a
lot of designers blaming the browser. It is a misplaced blame, of
course. Before you do anything else when coding a website, you should
reset the styling.”
Could anyone point me to any tutorials (or even help on here) as to how I can setup a Master CSS Page for my website, and also how I can call classes from the Master CSS Page to objects in my webpages.
For example if I set some styles in my Master CSS page,
I could set class on a div to class="main-header-blue" and it would call that style from my Master CSS Page and apply it to my div (and I could call this class from any of my web page)
Any help or advice is appreciated. Thank you in advance.
I think what you're looking for is Normalize.css. By including this asset prior to your own custom styles, it will help to remove browser inconsistencies with things like margins and padding on the document.
Otherwise, just style as you would normally and you should just be fine. Let me know if you have any other questions!
I hope my interpretation is your answer:
CSS is applying styles from a top-down perspective. This means, if you insert two stylesheets, the top one is applied first and then the second one overrides the first stylesheet
That means that:
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="mystyle2.css"> // this one overrides the first
That applies to styles too:
div {
background-color:green;
}
div {
background-color:red;
}
// the background color is red.
That could mean that the first stylesheet is the master stylesheet. That one is containing the 'master styles' and the second one is for 'overriding the defaults'. This is useful when you import a stylesheet from 3rth parties (e.g. Bootstrap).
A second interpretation is SASS. Within SASS you can create a master stylesheet containing the variables that will be applied in the other stylesheets. So, in the master stylesheet you say this:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
Then in your other stylesheets you use those:
body {
font: 100% $font-stack;
color: $primary-color;
}
The basic way of setting a "master" stylesheet is the following:
Assume you have a folder structure like this:
webpage (folder)
css (folder)
style.css (file)
index.html (file)
Lets say you have a file called index.html at the root of your project folder. You need to include/reference the stylesheet (style.css) in the index.html like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="mydiv">Your content</div>
</body>
</html>
Then you can have this in your style.css file:
.mydiv {
width: 300px;
height: 300px;
background-color: red;
}
This will make the <div>inside the <body>to have a width and height of 300 pixels and a background-color of red. And you can call this style anywhere inside the webpage by giving a <div> the class mydiv.
That is it simply put.
I'm currently fourteen years, and I've been trying to learn HTML and CSS over the past month. I've gotten the hang of things and tried to make my own website. I am a huge fan of League of Legends, so I decided to make it about that. Everything is coming along beautifully, but I've encountered a problem with the CSS. I'm using an internal style sheet. For some odd reason, the first syntax isn't working. Everything else functions properly.
This is the link to my website
(Right click and press view page source to look at code)
According to css code, all listed items should be the color #0000CD. However, nothing is happening. Can someone tell me what I did wrong and how to fix it?
In the <style> node remove the HTML comment : <!---Begin CSS--->
It breaks your CSS. A real CSS comment is like this : /* I am a comment */
Remove those comments <!---Begin CSS---> <!---End CSS---> , and use the comments (/*Begin CSS*/) before <style> and after </style> (/*End CSS*/).
You made an html comment in your css. <!---Begin CSS---> should say this instead /* Begin CSS */
Besides that you shouldn't have your css in your html file. Instead in between your <head> and </head> have this <link rel="stylesheet" href="css/example.css"> where example.css is your css file.
What would the HTML code be to set this url as my background...?
http://fin6.com/wp-content/uploads/2013/08/6c16724dd8d4aef072e62caeb164ff372.jpg
I am using Lead System Network.com' creation wizard trying to set a background as a landing page.
You could either add the background attribute to your body tag.
<body background="IMAGENAME.jpg">
Or you can add a CSS rule for the body element like
body {
background-image:url('IMAGENAME.jpg');
}
and include the CSS in the HTML header
<link rel="stylesheet" type="text/css" href="theme.css">
you can do it with css as the example of a friend or html shape but I do not recommend it because it is obsolete.
working with css, remember that all images you use for the web must be in the root folder of your project or it will not work.
I am actually making a small website for my company, but i'm not good into HTML.
I am placing an image in background.
But i want some think special.
When someone is reading the site and go down, the image doesn't move.
But when we hit the end of this image's background, the image's background follow the user to the down.
I know the code for making it fixe, and making it following.
But i don't know how to
IMG go Fixe;
IF (End of IMG) {IMG go Follow;}.
If I understand your question correctly, you want a background of an image that has text over it and scrolls/moves with the page when the user scrolls down. If this is what you are asking, and please correct me if I am wrong, then some CSS will do the trick!
Since you are new to HTML, I will assume that you don't know CSS but you know HTML. So create a new file called 'stylesheet.css' inside of the same folder as your webpage. Between the head tags in your HTML, add the following line of code:
<link rel="stylesheet" type="text/css" href="stylesheet.css">
Now, in your HTML body, put the image inside and give it an id of "background". Do this by writing:
<div id="background">
<code for image>
</div>
Now open your .css file and add the following code:
#background{
opacity: 0.7;
position:fixed;
}
The opacity property makes sure people can see the text in front of it, and the position property anchors it to a position on the browser window.
For future reference, W3Schools.com is a great site for beginner web programmers.
Hope I helped, Justin