I'm making a website for myself (for my jewelry business :) ), for the first time. I can't figure out why css is applyed on one page but not on the other, code for getting css is in both html files the same <link rel="stylesheet" href="shizoid.css"> and they are sharing the same css file.
http://imgur.com/UP3Liae
http://imgur.com/aaGZEa1
You can see on the photos above, for example, in html is tag:
<h1>Extravagant, Unique, Handmade Jewelry and Crafts</h1>
and in css the moderation for it is:
h1 {
background-color: #a018ba;
border-radius: 15px;
font-family: Garamond;
font-size: 40px;
text-align: center;
margin-bottom: 0px;
}
On one page this is working, and on the other isn't. It is like thas from yesterday, it was ok before. I tried to view it both in Firefox and Chrome and on two different computers. I'm looking but I can't see, please help. :)
I have found that it is generally better to apply styles such as borders and backgrounds to a div and then put the h1 into it. For example, your CSS would look something like:
#title-box { width: 800px; margin: 0 auto; background-color: #a018ba; border-radius: 15px; text-align: center; }
h1 { font-family: Garamond; font-size: 40px; }
And your HTML would look like:
<div id="title-box"><h1>Extravagant, Unique, Handmade Jewelry and Crafts</h1></div>
From the photos you posted, I would think that perhaps there is some error elsewhere in your code, such as a without a corresponding that is causing the CSS to not be applied.
Without further information on your website it is hard to determine the actual problem, my first guess is that your second webpage is located in a folder and you haven't updated your CSS.
<link rel="stylesheet" href="../shizoid.css">
If your webpage is on a different folder you can use this href to access the previous directory.
Something is wrong in your idea .It is not css related problem.
Your images are difference. You can see just drag each image and move each image in the browser.You can see that each image has difference.Your whole site is just an image. There is no such kind of tags like you mention <h1>Extravagant, Unique, Handmade Jewelry and Crafts</h1> in your whole html code .Just I posted an image check it either save it in your local drive or drag and drop each image in the new tab browser.
Hope the answer.
I would place the CSS (if it is site wide), in a folder called CSS in your root folder. Then you can simply call the script like this:
<link rel="stylesheet" href="/css/shizoid.css">
From any page...
The initial '/' takes you back to the root of your site.
Related
i've read some post here where the main problem when images are not showing on Github pages is because it is case sensitive. ive been dealing with the same problem of images not showing but in this case i dont see the mistake.
.header--button span{
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url('/assets/icons/down-arrow.svg');
this is the way i've placed most of the images but still ican find where am i mistaking?
thisis the link to my repo
https://github.com/AlejandroCaputo/Batatabit_CryptoProject
this is the link to my github page
https://alejandrocaputo.github.io/Batatabit_CryptoProject/index.html
what am i missing ?
The cause of the problem of icon images not being shown is due to the 'reference path' of the images.
For example, the image named 'down-arrow.svg' is
actually located at
/Batatabit_CryptoProject/assets/icons/down-arrow.svg,
but is being referred as:
/assets/icons/down-arrow.svg
The problem can be fixed in 2 ways:
Refer to the image with its actual full path,
I.E., by using /Batatabit_CryptoProject/assets/icons/down-arrow.svg
Refer to the image using a relative path, I.E. by removing the leading / from the image reference.
Looks like your path was incorrect. Remove the / before assets
.header--button span{
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url('assets/icons/down-arrow.svg');
I'm sure if this gonna work, but I think you could try relative paths instead of absolute ones. For example in your case, change the following
.header--button span {
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url('./assets/icons/down-arrow.svg');
}
I hope your problem solved. But in next time if you can't figure how to solve that problem! just copy image/icon address from your github repo. Open images from your repo and copy the address from it and then paste the link in your imge src. Then it will work.
like your Icon link of git repo is : https://raw.githubusercontent.com/AlejandroCaputo/Batatabit_CryptoProject/069113465c3018bc1b4835cfaa2f658c5be68f0c/assets/icons/batata.svg
you have to post this link into your code icon src option.
This could be due to the following any or all reasons;
github is case sensitive so make sure that following are not same,
images.jpg != Images.jpg != images.JPG
The path directory needs to be checked, down-arrow.svg is actually to be located at /Batatabit_CryptoProject/assets/icons/down-arrow.svg
OR
/assets/icons/down-arrow.svg
Hope this would be helpful.
The image doesn't come up on the stylesheet, I've tried so many different things (changing to background
.vegeta {
height: 300px;
width: 300px;
padding: 10px;
background: url("images/vegeta.jpg");
}
However when I put it in the tags on the html page the image shows. The stylesheet is definitely being called by the html document because the other changes show on the page, its just the image that isn't showing up.
Any help would be appreciated, thank you.
First of all you should check all the directory location and spelling, these are the basic problems which we don't notice many time.
Use can use background-image instead of just background because CSS is updated, maybe this can help.
I hope this may help you! Otherwise you can tell me again with all the directory properly.
I just started coding, don't judge me if I say stupid things. I'm trying to make a costume cursor for my website but it doesn't work in any way. I've even set the image size, which is 32x32 pixels. This is the picture I tried to use
I doesn't work and not just with this image: I even tried with other ones, png and svg.
I used both "pointer" and "auto" but nothing.
Not working on Safari and not working on Chrome.
Can someone help me please?
Thank you so much!
My code is
body{background-color: #F3F1EB; cursor: url("plane.png"), pointer;}
Your CSS is fine therefore I can only imagine it is one of the following problems:
The plane.png image is not in the same folder as your .html file
The plane.png image is larger than 32x32 pixels
You have not enclosed your CSS in <style></style> tags
You don't have any content within your <body> tag therefore the CSS isn't trigggering
This is tested and works:
<html>
<style>
html {
background-color: #F3F1EB;
cursor: url('plane.png'), pointer;
}
</style>
<body>
//Your page contents here
</body>
</html>
Note: I used the HTML selector for test purposes.
Final point - changing the cursor to a custom image is bad practice for a number of reasons. Mainly, it negatively affects the UX of a site.
Please check if the picture is located in the right folder. I use the full path of the picture you gave, it is working.
body{
background-color: #F3F1EB;
cursor: url("https://i.stack.imgur.com/KDrS2.png"), pointer;
}
<h1>test</h1>
Solution Here !!! Do it at the CSS level:
* {
cursor: url("https://i.stack.imgur.com/KDrS2.png"), pointer;
}
I am using Squarespace as my website builder. I have added a search icon above my blog feed https://www.livingwithphotography.co.uk/learn/ however for some reason the search box also appears on each blog post as well. This is what I don't want, instead I just want it to be shown on this page https://www.livingwithphotography.co.uk/learn/.
In order to code search icon I added this code in the site header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
I then added this css code
.myTitle {
width: 100px;
padding: 10px;
border: 1px solid grey;
margin: 40px;
font-size: 22px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Lastly I then added this code to the PAGE HEADER CODE INJECTION
<div class="myTitle"><img src="https://livingwithphotography.squarespace.com/s/Screen-Shot-2015-06-01-at-120646.png" alt="search icon" style="width:20px"> <a href="/search?q=&f_collectionId=5568d109e4b0cb923356090b">Search</div>
<script>
$(document).ready(function() {
$(".myTitle").prependTo("#content");
});
</script>
I hope there is a way, thanks for your help :)
This is a little hacky, but it should work. Wrap the code where you prepend the div in this if.
$(document).ready(function() {
if(window.location.pathname == "/learn") {
$(".myTitle").prependTo("#content");
}
});
Lawrence,
In your CMS (SQ), the type of mod you're wanting here is actually best done in 'developer' mode. Essentially, there's only one collection-ID assigned to the blog itself, which is why when you inject to the main page/content area, it appears across the board as you've noticed. The only differentiating factor is that blog overview pages have added class of "blog-list", while blog entries pages have added class "blog-items" (again, both still contained within the same collection).
So that all said, if you're trying to do this with Jquery in an existing template on a blog module specifically (and you are not toggling into developer), one way to workaround is to target the first instance of the ".entry-header" class on the blog [instead of using 'prependTo' #content].
After targeting the first instance of the entry-header, you would additionally need to also hide the display on the '.blog-items' pages as well (these are the actual entry items themselves). With this approach, your new class "myTitle" should appear only on the blog overview page (in your case: /learn/), but keep it hidden on actual article entry view.
So instead of what you have now, try instead using:
$(document).ready(function() {
$('.myTitle').insertBefore('.entry-header:first');
});
Then in Custom CSS put:
.myTitle {
font-size: 30px;
margin: 40px auto;
padding: 10px;
text-align: center;
width: 201px;
}
.blog-item .myTitle {
display: none;
}
As a note, while it's not totally "proper" form, many just put the whole shebang right into the blog module header since it's page specific and won't run globally.
In that case, you would just input all your code directly into: > Configure Blog > Advanced. Here's a screenshot example (note: shot taken directly from their UI and why the line wraps look funky):
Last note: This method does work, however, bear in mind that if you've manipulated other elements in your site as well (which I wouldn't know if you did) then those other changes could also impact.
Hope this helps.
You could use the Squarespace search block and summary block to do this without any coding:
Just create a new page.
Insert a "search" block and constrain it to only search your blog collection.
Insert a "summary" block and set it to display your existing blog.
Here is an example I set up on my site to demonstrate: http://www.figjamit.com.au/example
I am currently making a website for my college project and I want to make it as good as possible. I basically want to have several HTML pages for my website which I have setup but I want to use only the one CSS page. So basically if I edit one page, for example my second page, how do I change the look of it without editing any of the CSS for my first page. I have tried several things but I honestly have no idea.
Any help is appreciated and thank you in advance.
You cannot just change the layout of each page in CSS, CSS is not aware of what the page you are at.
Either do you change the layout by changing the whole CSS file. Or you try to put the CSS special functions for that page inside the page elements.
Otherwise you can't do that!
For example:
You can create a single CSS file and link it as:
<link rel="stylesheet" href="site.css" type="text/css">
Then in each page, where you want the style to be different you can change the style inline:
<element style="property: value; property_2: value_2;"></element>
Like this!
How about adding a class to the body tag on the second page, then specifying the style that are just for that page by using the class.
Page one:
<body>
<p>This page is boring</p>
</body>
Page two:
<body class="page-two">
<p>That's a mighty fine body</p>
</body>
Then your CSS could be
p {
background: white;
}
.page-two p {
background: red;
}
If you have a lot of extra CSS to apply to the second page, then you might consider using LESS or something similar to make your life easier.
Your best method is to have an app.css file that has global settings like height, width... and then have specific page files index.css, portfolio.css.. that have specific styles like colors.
You can specify your button general style in your app.css, and then more specific styles in each page css file.
app.css:
button{
height: 30px;
width: 150px;
border: 1px solid purple;
color: purple;
}
index.css:
button{
border: 1px solid black;
color: black;
}
Add the app.css to each html file, and then only the specific page css file to each html file. This will make it easy to expand in the future.
You need to create a template for your HTML pages and then link an external style sheet in your <head> section of each page like this:
<link rel="stylesheet" href="mystyle.css" type="text/css">
Then for any special cases that are not part of the template, you can link additional style sheets. Just a side note, embedding styles in elements directly is harder to maintain than linking multiple CSS files.
If you are allowed to use JavaScript, you might like to use a JavaScript template engine like Handlebar.js.
The beauty of template engines is that you can define sections and create dynamic HTML. This may be more complex than what you're wanting here, but it is very cool.
A large list of template engines can be found here: http://garann.github.io/template-chooser/