Design + Coding > Custom CSS for a desperate business starter!

Hi All,

Any help will be much appreciated.

I am a fast learning SQ / website building novice and can follow instruction (generally!)

I am using Dreamweaver to generate HTML which I am then pasting into SQ but can't get my head around CSS styles.

Basically, I create a new style sheet in dreamweaver which I then need to put into SQ across the whole site.

Dreamweaver creates the following:

In the HTML at the top

<link href="/storage/linksDW.css" rel="stylesheet" type="text/css" />

Where the style is applied

<p>Prices from £500* <span class="Links"><span class=".linksDW">(...tell me more!)</span></span></p></td>

On the CSS sheet

.linksDW {
font-size: 10px;
}

Can someone point me in the direction of how I amend this for Squarespace. So far i have:

- entered a new custom CSS element - .linksDW
- entered the style sheet in custom CSS under #linksDW (the display name)
- tried to upload the CSS (which won't upload - so i think herein lies the issue

Any help much appreciated,

Thanks,

Mark

11.6.2009 | Registered CommenterMark Williamson

If I am reading this correctly you're using both and external stylesheet and the custom CSS section? In the custom CSS section, any changes you make here will reflect on all pages (if this helps). Also, I'm not sure if this is an issue but something I noticed:

-entered a new custom CSS element - .linksDW <--this is a class
- entered the style sheet in custom CSS under #linksDW (the display name) <-- this is an ID

If your code has a class applied to it and your CSS markup has it as an ID then it will not work as intended. I hope this helps.

11.6.2009 | Registered CommenterJoshua R

Thanks for the reply. May have just realised something that makes it clearer.

- I have a linksDW.css file that is created by Dreamweaver. Hence creating the link I take it this is the external sheet?
- How do I get this into Squarespace? When I try to upload it I get an error, however, I have noticed in the source for this page that it is possible to refer to an external stylesheet.

From this page:

<link id="primaryStylesheet" rel="stylesheet" type="text/css" href="/display/common.css?styleId=294627&RK=1257270389070&CE=20"/>

Apologies if this is confusing. I literally dived head first into website building 4 days ago when I started a business and I do appreciate the help from folks who have studied long and hard!

11.6.2009 | Registered CommenterMark Williamson

This is how I do my CSS. I put all of my CSS in the custom CSS section:

Appearance Editor > Custom CSS >

If I want to keep certain things seperate I use comments to divide my sections like this:

/*Section name here*/

So what I'm getting at is I would put the CSS code from DW into the custom section in SQS unless you're wanting to use stylesheets to override certain pages. Hopefully we'll get you 'squared' away soon :)

11.6.2009 | Registered CommenterJoshua R

Thanks again Josh! Luckily for my sanity I am now away for the weekend and won't have a chance to fight with my CSS until Monday! At which point I intend to own it!

11.7.2009 | Registered CommenterMark Williamson

The period before linksDW is redundant. So is the additional span/class Links. In the html you just use the class name or ID name --no periods. The CSS uses the shorthand -period- for class and "#" for ID.

So...
<p>Prices from £500* <span class="Links"><span class=".linksDW">(...tell me more!)</span></span></p></td>
Becomes...
<p>Prices from £500* <span class="linksDW">(...tell me more!)</span></p></td> (removed that extra span close tag too)

Then put the rule in the Custom CSS area, it will amend the /display/common.css that is already being attached to all your pages. Don't bother with uploading and trying to link to a separate style sheet.

.linksDW {
font-size: 10px;
}

Amazing the havoc one extra period can cause.

11.7.2009 | Unregistered CommenterCorey