Duplicating a demo theme/site


(Chris Porter) #1

Hi,
Im still a babe in the wood using RW, but have made my ecomerce site detectorid.com.

Now Im ready to make it over with a new theme, Highlight. It came with a demo site that I really like.

Point is I can’t seem to match the homepage, is there detailed instructions ( for this demo) of what stack/plug etc is used where?
Thanks for a great community and the best Mac app to build sites!

Chris


(Peter Danckwerts) #2

Just look at the demo in edit mode and you should be able to see eactly how it is constructed.


(Elliot Jackson) #3

Hi @Chris,

I made the Highlight theme. The homepage in the demo builds on the Blog plugin native in RW. If you check out the home page in the demo theme you’ll notice that the “Body” section has the contents of the single page the item on the home page links to and the “Summary” tab contains only an image. The image in the summary tab is what’s shown on the homepage, the title shown is the title of the post and the categories. An explanation with screenshots might be more helpful:

i.e. http://realmacsoftware.com/themes/highlight/files/home-made-bread.html


You can add content to the section at the bottom by modifying the contents of the sidebar area in the page inspector:


I hope that clears things up for you :smile:

Cheers,
—Elliot


(Chris Porter) #4

Thank you for the reply Elliot!

I get what you’re saying perhaps… Modify a copy the demo with my content?

Also it came to me to look at the icons on the left side to “see” what plug/stack was used.

Very helpful reply!

Thank you!
Chris


(Elliot Jackson) #5

Hi @Chris,

Also it came to me to look at the icons on the left side to “see” what plug/stack was used.

The icons are already built into the theme. If you check out the docs page you’ll see a brief explanation on how to use them under the “Elements” section at the bottom.

Simply put:

  1. Go to this page and search for the icon you want.
  2. Click on said icon and you’ll find a page with a few different sizes of the icon and a code underneath that. Example: http://fortawesome.github.io/Font-Awesome/icon/shopping-basket/
  3. Copy the code (in this case <i class="fa fa-shopping-basket"></i> and paste it where you want it to be. The theme will take care of the rest (colouring, size etc.)

The only thing to note is: make sure the straight quotes " don’t get auto-changed to curly quotes: or . They shouldn’t though.

Hope that helps.

Cheers,
—Elliot


(Chris Porter) #6

Thank you,
That resource will be handy!

I was referring to these icons tho.

Regards
Chris


(Chris Porter) #7

Thanks for the Reply!


(Elliot Jackson) #8

@Chris,

Ah, my mistake. The demo site only uses plugins built into RapidWeaver :smile:

—Elliot