Global changes from the Settings > Code page

RapidWeaver Classic
1

Hi,

I’m trying to do some changes to the CSS code in a site based on the Voyager theme coming as standard with RapidWeaver.

I can’t see these changes applied. If I paste the code in the page’s Inspector > HTML > CSS page, the changes are applied to the page. If I enter it in the global Settings > Code > CSS page, they are not propagated to the whole site.

I told RW to use consolidated CSS files: does this make a difference?

The particular code snippet I’ve issues with are one to change the height of the banner:

#banner { height: 126px; }

What am I doing wrong? Am I really supposed to paste the code to all and each page?

(I know, I should create my own layout with Foundry or Foundation; but I also know that I would never be able to make myself a theme that would be satisfying, so at the moment I would prefer to stay with RW+Stacks and a customized theme).

Paolo

2

Ok, here is what I did. The ‘consolidated.css’ files generated by RW contain both the theme’s height value, and my custom ones. The web browser reads the theme’s value, and uses that.

I can therefore export the web site on a local drive, manually edit the .css files, upload them to the host, and everything works as I would like.

Not as clean and easy as letting RW do it automatically, but not a major hassle. All considered, the .css file will not change, and I should only have it ready for upload it from time to time.

Paolo

3

I added #banner { height: 126px; } to the CSS area in the project settings. And switched to the voyager theme. It did exactly as expected and make the banner 126px tall. I went one further and added 5px red border around the banner just to make sure it applied. When I previewed there was a bug ugly red border there.

#banner {
	height: 126px;
	border:5px solid red;
}

I tried it with and without CSS consolidation on. Both worked as expected.

My guess is that perhaps you made a typo in the CSS. An extra space, or a missing semicolon can spoil the whole party. :stuck_out_tongue_closed_eyes:

Or perhaps you are doing something else on this page further down – adding some code in the page’s CSS area. Additions to the page will appear further down – so will override the theme defaults and the site settings.

But I think the point is: you had the right idea. It should be possible (and pretty easy) to override any CSS in the theme by adding your own styles to the CSS area just as you’ve done.

The devil is in the details, though – start with something simple. Try just copying and pasting the code I’ve put in here. See if you too get the ugly red border. If that works (and it really should) then add your own styles a bit at a time until the problem occurs again. Then you know that the culprit is in the last bit you added.

Isaiah

4

Isaiah, thank you very much for your answer and hints.

I have probably found the reason of the CSS modification not being considered. What I did was to place a series of possible, but inactive, lines at the end of the global CSS pane, with each line starting with the commenting /*.

No closing tag, since RW shows each these lines without the commenting tag as “active” (and shown in ordinary colors, not in green as the comments). For example:

/* .hero { display: none; }
/* .content { text-align: justify; }
/* .sidebar { display: inline-block; }
#banner { height: 126px; }
/* #slogan { display: none; }

When uploaded, in Safari the untagged line between the commenting lines was shown as comments (green).

What I did was to collect all the “parked” commenting lines inside a block with opening and closing tags, and each active line out of the block.

#banner { height: 126px; }
 /* 
.hero { display: none; }
.content { text-align: justify; }
.sidebar { display: inline-block; }
#slogan { display: none; }
*/

As a result, it works. Safari (and I guess the other browsers) sees the modifed CSS and uses it.

Paolo

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.