Beginners Problems

Classic General
1

Hi,

I’ve just made the transition from Dreamweaver CC to RapidWeaver and have installed Stacks2 and Foundation and am having massive (to me anyway) problems.
The theme I’m using is Foundation.
In Dreamweaver it was a simple exercise in creating / modifying a CSS Style Sheet, but cannot for the life of me find how to do this (if indeed it is possible). After a great deal of trawling, I have managed to change an h5 header’s colour - Inspector > Meta Tags & HTML code > CSS.
What I’d like to do is change text sizes and styles within various sections of a page; one section in 10 pt, another section in 12 pt bold, another section in 11 pt, blue. In Dreamweaver, all I needed to do was having imported the appropriate style sheet was add some text on the page I was working on, highlight it and then select the style I’d like to apply for example “body text” would set the font size to 11, the colour to green and that would be it. As below:

.green_phone_number {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #17A317;
font-size: 12pt;
text-align: right;
}
.bodytext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
color: #525359;
font-weight: normal;
text-align: justify;
background-color: #FFFFFF;
}
.green_heading {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15pt;
color: #17A317;
text-align: left;

This was so easy in Dreamweaver. How can I achieve the same in Rapidweaver?
Lots of sites say edit RapidWeaver’s CSS file, but I cannot find it. Others say open the page in Safari and use developers tools to see the appropriate section and make the changes from there. What section? What changes?
I there anyone out there who can help or point me in the right direction?

2

If you go into Site-wide Code, then everything that is put here get added to every page.

In the Page Inspector, there are the CSS and Javascript tabs. The content added to those will be added to just that page.

Another option is that you could manage your own text CSS file and then simple add a tag to it inside the Head (site-wide or local). Hope that this helps.

I tried uploading a screenshot of the site-wide code area. It was not working so here is a link to one… http://jwurl.net/1TM79z0

3

Hi Joe,

Thanks for the suggestions, I’ve added the code below into the Site Wide Code area under CSS:

.Heading {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #008000;
text-align: left;
}
.phone {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
}
.green {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #17A317;
font-size: 12pt;
text-align: left;
font-weight: normal;
}
.green_phone_number {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #17A317;
font-size: 12pt;
text-align: right;
}
.bodytext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
color: #525359;
font-weight: normal;
text-align: justify;
background-color: #FFFFFF;
}
.green_heading {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15pt;
color: #17A317;
text-align: left;
}
.red {
color: #F00;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
}
.centred_body_text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
text-align: center;
}
.footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #525359;
}
.white_heading {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18pt;
color: #fff;
text-align: left;
}
.blue_heading {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15pt;
color: #26A2DC;
text-align: left;
font-weight: normal;
}
.blue {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #26A2DC;
font-size: 12pt;
text-align: left;
font-weight: normal;

You mention add a tag to it inside the Head (site-wide or local), where do I find that and how / what do I add?

Sorry to be a pain or am I being thick, but this is doing my head in.

4

You can reference a css file like this…

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

However, you will need to upload that file to the server your self and configure the proper path/url to that file.

5

Or you could just manage the CSS inside a text file on your machine and paste it into the Site-wide CSS whenever you have changes.

6

OK, I have it kind of sussed now and it sort of works. Styles added to Tools > Code. This added to a text box -

Here’s my text

Is there an easier way to do this as it does seem to be a very convoluted way of doing things (or is it just me?)
I have about 8 sites to "transfer across to RapidWeaver, one of which is about 70 pages in total. Each page of this big site, which I worked on virtually every week for the past five years in Dreamweaver has numerous headings, sub headings in different sized / coloured text and different coloured body text.
All I had to do in Dreamweaver was to highlight the appropriate text and then select the appropriate style from the drop down list - CSS or HTML.
I am trying to make the break from Dreamweaver to RapidWeaver, but all the extra coding I need to do is going to take an age - time is money as they say.
I’m not too sure what you mean about how I go about managing the CSS inside a text file on my machine and pasting into the Site-wide CSS - sorry.
7

Is there an easier way to do it?

Highlight the text in Edit mode then right click and go Font> and you can change the font type, font colour, font size etc etc. From your description it sounds like that is all you need.

EDIT - I don’t have Foundation and don’t use stacks but would have thought this basic process would be the same with all the new fangled add ons.

8

Thank you Jbyfield,

I think you could be right, unless someone else says otherwise :smile: I did find this out the other day, but was unsure whether it was the “right way” to do it.

9

Ok, I’ve bitten the bullet and just used the “styles”, which come with Foundation. Anything for an easy life.

I uploaded my site and then deleted the site after finding that the URL’s are a bit weird. Instead of displaying www.mywebsite.com/news for example, it’s showing as www.mywebsite.com/page2/news

Any ideas what I’ve done wrong.

Possibly scrub round the bit above, I think I’ve got it sorted.

When I looked in Inspector > General Settings, the folders were showing as Page2, Page7 etc. I just renamed them all to root and it seems to look / work OK when I export the site. I’ve not had the courage to upload it yet though :smile: