You are here: Forum Home / RapidWeaver User Forum / HTML, CSS, and Design Help / Thread
Hi,
I have a design created in photoshop and it’s ready to be translated into a web page via rapidweaver.
Here is a link to the design:
http://www.downwithdesign.com/a_little_fx.html
I have communicated with a very knowledgeable member of the rapidweaver community who recommended that I start with this theme
http://www.realmacsoftware.com/rapidweaver/themepacks/previews/blogblocks/index.html
and I need to adjust the width, sizing and styling via CSS code. He also told me that because I have potentially a couple of links in the header graphic plus a little text, unless I find a theme that includes these, they could be handled with a little custom xHTML code.
In terms of my rapidweaver expertise I am still a novice but have been working through rapidweaver classroom to get my head around the software.
Anyways, what I am looking for is any assistance in terms of how I get started with the CSS and xHTML as this is pretty unfamiliar territory to me.
Thanks
Elli
I think that your guru recommended Blocksbox, NOT blogsbox. Blocksbox is essentially a blank canvas you lay out any way you choose. There is no navigation… it’s a blank page! Your layout is not all that dissimilar to a number of existing themes. I chose one from my collection , catalyst, and in about 10 minutes made this:

That is actually your graphic in the header image location. That is your graphic in the theme’s logo field. A pretty close match, I’d say. This theme allows a 350 px tall graphic. I’m not well versed in adding the linkover the header image but I’m betting somebody here can help with that.
Hope this helps,
Brian
Come on over to my Stacks Store, El Stacko.... or else!
Get some of the coolest, most eye-catching stacks available.
Add the “wow-factor” your site deserves!
BannerZest implementation tutorials! > > > Click me! Click me!
Nope, it was Blog Blocks alright
, though to be fair I also mentioned that many additional horizontal nav themes (such as Catalyst) could be adjusted to this sort of layout, coupled with a triple column snippet.
I’m not a big user of BlocksBox/Blocks (I’d always look to modifying a theme for this sort of thing) though it may very well be the simplest approach for someone unfamiliar with HTML/CSS. ![]()
Best
John
I think that your guru recommended Blocksbox, NOT blogsbox. Blocksbox is essentially a blank canvas you lay out any way you choose. There is no navigation… it’s a blank page! Your layout is not all that dissimilar to a number of existing themes. I chose one from my collection , catalyst, and in about 10 minutes made this:
That is actually your graphic in the header image location. That is your graphic in the theme’s logo field. A pretty close match, I’d say. This theme allows a 350 px tall graphic. I’m not well versed in adding the linkover the header image but I’m betting somebody here can help with that.
Hope this helps,
Brian
Hi Brian,
This looks great and is extremely close to what I am trying to do. In order to get everything exactly the same, for example the bold line underneath the Home link does this require customization in the HTML or do I just need to find a theme that has that style?
I will start searching on ways to add the link to the header,
Thanks,
Elli
Nope, it was Blog Blocks alright
, though to be fair I also mentioned that many additional horizontal nav themes (such as Catalyst) could be adjusted to this sort of layout, coupled with a triple column snippet.
I’m not a big user of BlocksBox/Blocks (I’d always look to modifying a theme for this sort of thing) though it may very well be the simplest approach for someone unfamiliar with HTML/CSS.
Best
John
Hi John,
Had I known it was you I’d have quietly retreated back under my rock.
The names were just so close and his layout a bit unusual that I thought somebody was promoting BlocksBox. Like you, I’m not a frequent user of either Blocks or Blocksbox although I know some people rely on them quite heavily.
@Elli,
First, you are a very thorough person to have created a mock-up of what you want your site to look like. :D I was easily able to add a thin underline to the current page but the thicker one you’ve asked about is beyond me. I’m sure someone here can help you out though
Brian
Come on over to my Stacks Store, El Stacko.... or else!
Get some of the coolest, most eye-catching stacks available.
Add the “wow-factor” your site deserves!
BannerZest implementation tutorials! > > > Click me! Click me!
How do you install a specific font in rw. I have a font I used in the design and don’t know how to include it in the text…
Any assistance would be great,
Let me know if you need more info!
What font are you wanting to add?? There are fonts that are considered websafe. You might want to do a search for web safe fonts in the forum and read up a bit. If you design with a font that is not widely accessible, the site will look great to you on your mac but will look different to others who may not have the font installed.
Brian
Come on over to my Stacks Store, El Stacko.... or else!
Get some of the coolest, most eye-catching stacks available.
Add the “wow-factor” your site deserves!
BannerZest implementation tutorials! > > > Click me! Click me!
Could you perhaps use the block kit theme or blocks box(not sure about this one) with extraContent to create those 3 columns on the bottom?
just a thought..
How do you install a specific font in rw. I have a font I used in the design and don’t know how to include it in the text…
Any assistance would be great,
Let me know if you need more info!
You don’t need to install it in RW. You reference it in one of a number of possible ways. However, adding it will not enable somebody without the font to see it. For a standard theme, the main content area can be altered like this in the Page Inspector > Header > CSS field:
#content{
font-family:"marker felt";
}
substitute your font name for the one I’ve included. Font names that are one word such as arial, geneva, etc do not go inside quotes. font names with two or more words, such as the one I added, marker felt, need to be in quotes.
Brian
Come on over to my Stacks Store, El Stacko.... or else!
Get some of the coolest, most eye-catching stacks available.
Add the “wow-factor” your site deserves!
BannerZest implementation tutorials! > > > Click me! Click me!