Manual - seyDesign
Contents
1. 02 000200004 lideshow Settings 2 0 0 2 o Site Slogan ce 424 44 44538 e wes S 2 2 27 Font Family Navigation 2 2 28 Font Family Headings 22 29 Line Height aag Sate ee AAA Rk le Theme Styles naaa ay bd ote bb da 2 3 1 Using Theme Styles 2 3 2 Making Your Own Theme Styles 2 3 3 Installing Theme Styles 3 Advanced Features 3 1 3 2 ExtraContent Vcc a Re AKA RAY ee 3 1 1 ExtraContent 1 The Place for Headers Banners and Sliders OH My 3 6 ma oe eee hs 3 1 2 ExtraContent Stack o 3 13 ExtraContent Snippet a O ds AA AR A AN 3 2 1 Basic Features of SS3 0 0 o e 3 2 2 SudeBoXx Dtacio ii ad ot Ace 3 2 3 SlideBox Snippet o 3 2 4 Std a AA E AAA o Gee 32 0 WSlideNu mi a aa Eras AL a es 32 6 SlideWH acia ca a A A 3 31 Social LINKS a dat do A E A STA A 28 3 4 FontAwesome 2 000000 ee ee 29 SA AA A E 30 3 67 BOO S AD e asira ia A A SOS RG ee eer ere D A 30 4 Customize Your Theme 30 Al AAA ye ee oe A Re EES 30 4 2 Images sip a0t4 4 a ee ee RR DAES Sy we eae 4 31 ABs o E A gh A ae ee ate ee mix aan 31 AA JavaScript 24 0 a e n GS he ee ee as ES 32 5 Updating Your Theme 32 Dil Backing ups re bd dhe 4 32 Bide UPdata stor de totem ai a ale a a athe 128 A 32 1 Introduction 1 1 Welcome to2. Tile Noise Tile Stone Tile Square Tile Vertical Tile Wood Tile Carbon Fiber Solid Tile Grid Solid Tile Noise Solid Tile Pixels Solid Tile Wood Solid Tile 2 2 13 ExtraContent 4 Options A collection of color settings for the ExtraContent 4 area Background Color Border Color Text Color Link Color 2 2 14 ExtraContent 5 Options A collection of color settings for the ExtraContent 5 area Background Color Border Color Text Color Link Color 2 2 15 ExtraContent 6 Options A collection of color and background tile options that pertain to ExtraContent 6 10 e Background Color e Border Color e Text Color e Link Color e No Tile ExtraContent 6 Tile Default e Blueprint Tile Chalk Tile e Diagonal Tile e Dotted Tile e Horizontal Tile e Linen Tile e Metal grid Tile e Noise Tile e Stone Tile e Square Tile e Vertical Tile e Wood Tile e Carbon Fiber Solid Tile Grid Solid Tile e Noise Solid Tile e Pixels Solid Tile e Wood Solid Tile 2 2 16 ExtraContent 7 Options A collection of color and background tile options that pertain to ExtraContent 7 e Background Color e Border Color e Text Color e Link Color e No Tile ExtraContent 7 Tile Default e Blueprint Tile e Chalk Tile
3. e Diagonal Tile e Dotted Tile e Horizontal Tile e Linen Tile e Metal grid Tile e Noise Tile e Stone Tile e Square Tile 11 Vertical Tile Wood Tile Carbon Fiber Solid Tile Grid Solid Tile Noise Solid Tile Pixels Solid Tile Wood Solid Tile 2 2 17 Slideshow Type The slide show type allows you to choose from Off Content or a selection of preset internal sequences Off Manual snippet Default turns off the slide show unless the SlideNum or SlideWH snippets are detected Content SlideBox stack snippet enables the use of content slides created either with the SlideBox snippet or SlideBox stack Slides 1 to 5 enables the internal slide sequence using slides X to Y Slides 6 to 10 Slides 11 to 15 Slides 16 to 20 Slides 1 to 10 Slides 11 to 20 Slides 1 to 20 2 2 18 Slideshow Timeout Slide show timeout allows you to select the duration that any given slide in the sequence will be shown for from a minimum of 4 seconds to a maximum to 20 seconds 4 seconds Default 6 seconds 8 seconds 12 seconds 16 seconds 20 seconds 2 2 19 Slideshow Effect Slide show effect allows you to choose from an assortment of transition animations that determine the how one slide will switch to the next 12 e Blind X e Blind Y e Fade Default e Grow X e Grow Y e Scroll down e Scroll left e Scroll right e Scroll up e
4. Google cursive e Titan One Google cursive e Qwigley Google cursive e Droid Sans Mono Google mono e Droid Sans Google san serif e PT Sans Google san serif e Source Sans Pro Google sans serif e Alegreya Google serif e Average Google serif e Neuton Google serif 2 2 28 Font Family Headings Sets the font family for the headings only e Theme default Headings Default e Sans serif general e Serif general e Helvetica sans serif e Lucida Grande sans serif e Fredericka the Great Google cursive e Titan One Google cursive e Qwigley Google cursive e Droid Sans Mono Google mono e Droid Sans Google san serif e PT Sans Google san serif e Source Sans Pro Google sans serif e Alegreya Google serif e Average Google serif e Neuton Google serif 2 2 29 Line Height Sets the overall line height e Small e Medium Default e Large 16 2 3 Theme Styles 2 3 1 Using Theme Styles Theme Styles are ways of grouping selected Theme Variations Themes can ship with Theme Styles built in they can be made available separately as rwstyle files and the user can create their own within RapidWeaver If you ve never used Theme Styles before they might be a little tough to find at first Open the Page Inspector View gt Show Page Inspector Click the Styles tab Click the folder icon found at the bottom of the panel Select the theme
5. header of the layout just under the title and slogan e ExtraContent3 is located between the top section and main area content and sidebar of the layout e ExtraContent4 and ExtraContent5 are attached to the top and bottom of the main area content and sidebar e ExtraContent6 is located under the main area of the layout e ExtraContent7 is located between the main area of the layout and the footer 3 1 1 ExtraContent 1 The Place for Headers Banners and Slid ers Oh My A fairly standard feature on any site is the top space above the fold if you will where the biggest imagery the most important ideas or most recent news goes This is called the site header and can be filled with all kinds of content In tre3rty adding your own simple header image is easy see Customize Your Theme gt Images in this manual but what if you want your header to say more then that We use ExtraContent 1 or SS3 for that Let s look at the theme options aimed specifically at the site header and Extra Content 1 e ExtraContent 1 Options you can choose a header image as your site header or use a color as a backdrop to your content e ExtraContent 1 Height You can specify a height if need be or use the variable height setting to allow the header height adjust to your content We know that you don t want to be locked into just one way of doing things that s why the header is so flexible and responsive to your input By using ExtraC
6. 30 2 Use the search field to find your theme 3 Right click click control click on your theme and select Reveal Contents in Finder 4 2 Images tre3rty comes with header images built in but these are just place holders for the wonderful imagery that you re capable of Changing these images is as easy as can be in one of several ways 1 Using the free application RWmultitool Lite you can simply drag and drop new images onto the existing built in images Visit to learn more 2 You can modify your theme s images by opening the theme contents in the Finder and edit them from within the theme Open the RapidWeaver Theme Drawer View gt Show Themes Start typing the theme name in the search box Right click on your theme Select Reveal Contents in Finder Navigation to the folder images gt editable_images Modify those images to suit She nr 3 You can also keep your theme intact and use custom CSS For the header pageHeader background url link to your header jpg 50 50 repeat background size cover This CSS can be applied in one of two places 1 In View gt Show Page Inspector gt Header gt CSS 2 By opening the theme s contents in Finder and editing the custom css file 43 CSS tre3rty comes with a blank custom css file for you to apply whatever custom styles you like The advantage to placing your custom code here as opposed to the Page Inspector is that the
7. Header Color e Border Color e Text Color e Link Color e Slide navigation Color e Image 3 Background e Image 4 Background e Image 5 Background e Image 6 Background e Image 7 Background e Image 8 Background Image 9 Background e Image 10 Background e Image 11 Background e Image 12 Background e Image 13 Background e Image 14 Background e Image 15 Background e Image 16 Background e Image 17 Background e Image 18 Background e Image 19 Background e Image 20 Background e Blank Background Default 2 2 10 ExtraContent 1 Height Sets the height of the header The header is located within the top portion of the site under the title and slogan Since there is padding and the possibility of content overrun these heights are only an approximation e Hidden Default e 120px e 240px e 360px e Variable 2 2 11 ExtraContent 2 Options A collection of color settings for the ExtraContent 2 area e Background Color e Border Color e Text Color e Link Color 2 2 12 ExtraContent 3 Options A collection of color and background tile options that pertain to ExtraContent 3 e Background Color e Border Color e Text Color Link Color No Tile ExtraContent 3 Tile Default Blueprint Tile Chalk Tile Diagonal Tile Dotted Tile Horizontal Tile Linen Tile Metal grid
8. On the new line add your new URL in quotations i e http seydesign com 25 d Repeat a through c for each additional link The snippet will now look like this sdSS slideLinks http www google com http www tumblr com http www twitter com http www flickr com http www facebook com http seydesign com 1 7 To remove links from the end of your sequence a Remove the last URL line i e http www facebook com b Remove the trailing comma from what is now the last URL line i e http www flickr com c Repeat a and b for each link you wish to remove The snippet will now look like this sdSS slideLinks http www google com http www tumblr com http www twitter com http www flickr com 1 3 2 5 SlideNum The SlideNum snippet is a complimentary snippet for use with SeydoggySlideshow 3 or SS3 enabled themes The sdSlideNum snippet is a method for defining how many slides to show and in which order should you find the built in slide sequences do not suit your needs 1 Download and install the SlideNum snippet 2 Open the Page Inspector RapidWeaver gt View gt Show Page Inspector 3 Be sure that the setting found in Page Inspector gt Styles gt Slide show type gt Off Manual snippet is selected 4 Paste this snippet into Page Inspector gt Header gt JavaScript changing each number to suit your needs T
9. Show Timeout 5 Slide Show Settings 3 2 2 SlideBox Stack SlideBox is a simple effective stack that allows you to create a content rich slide show in any SeydoggySlideshow 3 or SS3 enabled theme From simple text and images or anything you can imagine your SS3 enabled theme will turn each box into it s own slide Using the built in slide show controls in your SS3 enabled theme you can add flare to your content slide show with speed settings delays and special effects Or take it a step further and use the advanced tricks in the SS3 User API to link each slide to another destination 1 Download and install the SlideBox stack 2 Drag a SlideBox stack from your Stacks Library onto your Stacks page 3 Drag other stacks into each available content space and propagate each item with text and media as needed 4 To add or remove items from your slide show open the SlideBox stacks HUD and select the number of items you want in your slide show 5 Refer to your themes Styles panel for further settings 23 3 2 3 SlideBox Snippet The SlideBox snippet is a complimentary snippet for use with SeydoggySlideshow 3 or SS3 enabled themes The sdSlideBox snippet is a method for creating content based slides using HTML Using the built in slide show controls in your SS3 enabled theme you can add flare to your content slide show with speed settings delays and special effects Or take it a step further and use the advanced tricks in t
10. Shuffle e Toss e Random 2 2 20 Slideshow Speed Slide show speed controls the amount of time a transition takes The shorter the time the faster the animation is that switches one slide to the next e 1 4 second e 1 2 second e 3 4 second e 1 second Default e 11 2 second e 2 seconds e 21 2 seconds 2 2 21 Slideshow Settings Slide show settings are a collection of additional features that you can enable individually or en masse e Auto stop automatically stops the slide show once the last slide has been reached e Navigation displays left and right navigation arrows at either side of each slide e Pager displays pager buttons at the bottom of each slide e Pause on hover causes the slide show to pause the slide show when hovered over e Random order displays the slides in random order 13 2 2 22 Sidebar Position Sets the sidebar position e Right Default e Left e Hide 2 2 23 Font Family Sets the default font family for the whole theme e Sans serif general e Serif general e Helvetica sans serif e Lucida Grande sans serif e Fredericka the Great Google cursive e Titan One Google cursive e Qwigley Google cursive e Droid Sans Mono Google mono e Droid Sans Google san serif e PT Sans Google san serif e Source Sans Pro Google sans serif e Alegreya Google serif e Average Google serif e Neuton Google serif 2 2 24 Font Size Sets the relati
11. code is applied throughout your entire Rapid Weaver project Simply open your theme s contents and edit the custom css file suit your needs 31 4 4 JavaScript tre3rty comes with a blank custom js file for you to apply whatever custom scripts you like The advantage to placing your custom code here as opposed to the Page Inspector is that the code is applied throughout your entire Rapid Weaver project Simply open your theme s contents and edit the custom js file suit your needs 5 Updating Your Theme 5 1 Backing up Before updating your theme you should always make a backup copy To do so 1 Open the RapidWeaver Theme Drawer View gt Show Themes 2 Start typing the theme name in the search box 3 Right click on your theme icon when it appears 4 Choose Duplicate and give it an appropriate backup name 5 2 Updating To update your theme download a new copy of your theme from our order lookup page Follow the steps to find your order and download the latest version The version you download will always be the latest version Once downloaded open the zip dmg file find the rwtheme and double click it RapidWeaver will now automatically install the updated version for you 32
12. Enables device simulation such as iPhone and iPad to give you an idea of how your site might look on these devices This is for development purposes only as the feature does not work well outside of RapidWeaver The views are only approximations and should not be taken as fully accurate In the Style settings you can choose which device is shown be default while working on your layout Each time RapidWeaver loads the preview this will be the device that is shown first However after the preview has loaded you can use the drop menu on the page to switch to other views faster e Off Default e iPhone 5 e iPhone 4 e Android e iPad e Kindle 2 2 2 Responsive Behavior Turns the built in responsive features either on or off Normal would represent normal desktop web development while responsive would apply to sites that you want to render effectively across all screens from desktop to smart phone e Normal Default e Responsive 2 2 3 Maximum Width Sets the maximum width that your layout will scale to when the viewport window size increases Since the theme is fully responsive this only limits its maximum width not its minimum width e 768px e 960px 1024px Default 1280px e Full Width Scales according to the viewport size and always occupies the full width 2 2 4 Titlebar Options A collection of color settings that pertain to the title bar area of the theme e Background Titlebar Color e Bord
13. OM elements create animations handle events and develop Ajax applications jQuery also provides capabilities for developers to create plug ins on top of the JavaScript library This enables developers to create abstractions for low level interaction and animation advanced effects and high level theme able widgets The modular approach to the Query library allows the creation of powerful dynamic web pages and web applications Learn more about Query 3 6 Bootstrap Sleek intuitive and powerful front end framework for faster and easier web development http twitter github io bootstrap Twitter Bootstrap is baked right into tre3rty A free collection of tools for creating websites and web applications Twitter Bootstrap contains HTML and CSS based interface components and JavaScript extensions It is an incredibly powerful and tool to add some extra flare to your RapidWeaver projects If you re not afraid of a little HTML CSS and maybe a little JavaScript then you ll have a great time with Bootstrap Learn more about Twitter Bootstrap 4 Customize Your Theme 4 1 General There are two main ways to modify a themes behavior beyond the options available in the styles panel 1 Use the Header CSS JavaScript and Prefix fields found in View gt Show Page Inspector gt Header 2 Modify the themes contents by opening the theme contents in Rapid Weaver 1 From the Rapid Weaver menu select View gt Show Themes
14. Open the RapidWeaver Snippet browser View gt Show Snippets Search for ExtraContent in the browser s search field Drag an appropriate snippet somewhere on your page either in the main content or the sidebar Between the opening lt div id myExtraContent1 gt and closing lt div gt replace everything with content of your own For example lt div id myExtraContent1 gt Hello world lt div gt To change which area your content is displayed in simple change the number at the end of the id to one that corresponds with the desired area in your theme For example lt div id myExtraContent2 gt Hello world lt div gt Depending on your theme your ExtraContent may now automatically appear or there might be an option to turn the ExtraContent on or off 21 8 To add more content to more areas simply repeat the process using numbers that correspond to those in your theme For example lt div id myExtraContent1 gt Hello world lt div gt lt div id myExtraContent2 gt Question What did foo say when he walked into a bar lt div gt lt div id myExtraContent3 gt Answer Ouch lt div gt 9 You can add ExtraContent tags around just about anything Say for instance you wanted to embed a video above your main content with this embed code lt iframe src http player vimeo com video 46506843 width 500 height 313 frameborder 0 webkitAllowFullScreen mozallowfullscreen allowFullScr
15. Square Tile e Vertical Tile Wood Tile e Carbon Fiber Solid Tile e Grid Solid Tile e Noise Solid Tile e Pixels Solid Tile e Wood Solid Tile 2 2 7 Sidebar Options A collection of color width and position options pertaining to the sidebar area e Background Color e Text Color e Link Color e Social Links Color e Narrow right Width Position e Narrow left Width Position e Normal right Width Position Default e Normal left Width Position e Medium right Width Position e Medium left Width Position e Wide right Width Position e Wide left Width Position e Hide Width Position 2 2 8 Top Options A collection of color and background tile options that pertain to the top area that lies behind the header ExtraContent 1 and 2 and the sub navigation e Background Color e No Tile Top Tile Default e Blueprint Tile Chalk Tile e Diagonal Tile e Dotted Tile e Horizontal Tile e Linen Tile e Metal grid Tile e Noise Tile e Stone Tile e Square Tile e Vertical Tile e Wood Tile e Carbon Fiber Solid Tile e Grid Solid Tile e Noise Solid Tile e Pixels Solid Tile e Wood Solid Tile 2 2 9 ExtraContent 1 Options A collection of color and background image options as they pertain to the header or ExtraContentl area e
16. e uses its own theme style Built in Styles uses the master style for the Theme Default Pp A R Figure 1 one Theme Styles O O Page Inspector Features Styled Text 7 D Em At Q E General Sidebar Header Styles Page Page Specific Theme Default seydesign Copper Page Style gt Width Corners Top tile Main tile gt Toolbar 2 tile Sidebar tile gt ExtraContent 4 tile Navigation type gt Height header slide show EC 1 gt Background header slide show EC 1 Slide show type gt Slide show timeout Slide show effect Slide show speed Slide show settings gt Sidebar width 2 ga f H This page replace uusi S Save Style As e uses its own theme style Reveal Styles in Finder m _ uses the master style for the seydesign Ct Set as Master Style for This Theme Talanman ta Cannar Ee Figure 2 Saving Theme Styles 19 ExtraContent is a nearly ubiquitous technology found in most modern Rapid Weaver themes today Since it was first introduced in 2008 ExtraContent has been one of the most sought after most requested features of all time ExtraCon tent allows users to take their Rapid Wever site beyond the usual sidebar content layout and add content in places otherwise out of reach for Rapid Wever In tre3rty the 7 ExtraContent areas are located from top to bottom as follows e ExtraContentl and ExtraContent2 are located in the top area
17. een gt lt iframe gt 10 Then all you need to do is add lt div id myExtraContent1 gt in front and lt div gt at the end like this lt div id myExtraContent2 gt lt iframe src http player vimeo com video 46506843 width 500 height 313 frameborder 0 webkitAllowFullScreen mozallowfullscreen allowFullScreen gt lt iframe gt lt div gt 11 If using ExtraContent with HTML code in a styled text type area be sure to use the option Format gt Ignore Formatting if your code breaks out over several lines Otherwise your formatting might have excessive spacing or have awkward steps 3 2 SS3 Home page http foss seydoggy com p SS3 In 2011 we launched the third iteration of an integrated slide show that we d been putting in seyDesign Rapid Weaver themes since 2010 This third version dubbed SS3 was also the first time we d opened up the source for all developers to use in their own themes 22 SS3 allows users to turn just about anything into a slide show From built in images remote images content stacks and more For full instructions and tutorial videos on how to use 83 please visit http foss seydoggy com p 883 3 2 1 Basic Features of SS3 Note All of these basic features can be found in the RapidWeaver Page Inspector under the Styles tab and have been covered already in this manual 1 Image ExtraContent 1 Options 2 Height ExtraContent 1 Height 3 Slide Show Type 4 Slide
18. er Titlebar Color e Site Title Color e Site Slogan Color 2 2 5 Navigation Options A collection of colors and type options that pertain to each of the three navigation areas of the theme With regard to navigation types you can choose a system that is broken up into as many as three hierarchical parts for maximum architectural control e Background Top Menu Color e Border Top Menu Color e Text Top Menu Color e Current Top Menu Color e Background Sub Menu Color e Border Sub Menu Color e Text Sub Menu Color e Current Sub Menu Color e Button Vertical Responsive Menu Color e Border Vertical Responsive Menu Color e Text Vertical Responsive Menu Color e Current Vertical Responsive Menu Color e Background Responsive Menu Color e Text Responsive Menu Color e 3 tier Type Default e 2 tier a Type e 2 tier b Type e Vertical Type e Hide Type 2 2 6 Main Content Options A collection of colors and background tile options pertaining to the main content area e Background outer Color e Background inner Color e Border Color e Text Color e Link Color e No Tile Main Content Tile Default e Blueprint Tile Chalk Tile e Diagonal Tile e Dotted Tile e Horizontal Tile e Linen Tile e Metal grid Tile e Noise Tile e Stone Tile e
19. he SS3 User API to link each slide to another destination 1 2 3 Download and install the SlideBox snippet Open the Page Inspector RapidWeaver gt View gt Show Page Inspector Be sure that the setting found in Page Inspector gt Styles gt Slide show type gt Content SlideBox stack snippet is selected Paste the sdSlideBox snippet into any content area in RapidWeaver It will look like this lt div class sdSlideBoxSnippet id mySdSlideBox1 gt This content will appear as slide 1 lt br gt Some sample content Add whatever you like here lt div gt lt div class sdSlideBoxSnippet id mySdSlideBox2 gt This content will appear as slide 2 lt br gt Some sample content Add whatever you like here lt div gt lt div class sdSlideBoxSnippet id mySdSlideBox3 gt This content will appear as slide 3 lt br gt Some sample content Add whatever you like here lt div gt If you ve pasted the snippet into a styled text type area then you need to select the HTML code and ignore the formatting RapidWeaver gt Formatting gt Ignore Formatting Edit each sample text with any HTML of your liking Each area is a unique slide The sample text looks like this This codentent will appear as slide 1 lt br gt Some sample content Add whatever you like here 24 7 To add slides simply add a new sdSlideBoxSnippet wrapper and number it accordingly For example if I wanted to add a forth
20. he snippet will look like this sdSS slideNum 3 5 1 9 15 26 Each number corresponds to a header image i e 3 is Background image 3 from the Page Inspector gt Styles gt Background header slide show EC 1 menu The order of the numbers will coincide with the order of your slides 5 sdSlideNum is actually a simple comma separated list Adding or removing slides in the sequence is just a matter of adding or removing numbers from the list Just make sure that each number is separated from the next number by a comma making sure that the last number in the list is NOT followed by a comma Here are just a few examples a A sequence that starts at header image 1 and goes through to header image 8 sdSS slideNum 1 2 3 4 5 6 7 8 b A sequence of header images from 20 to 16 in reverse order sdSS slideNum 20 19 18 17 16 c A sequence of 7 random header image starting at 9 and ending 10 sdSS slideNum 9 6 11 2 20 17 10 3 2 6 SlideWH The SlideWH snippet is a complimentary snippet for use with SeydoggySlideshow 3 or SS3 enabled themes The sdSlideWH snippet is a method for defining externally hosted images to be used in your slide show sequence instead of the built in images 1 Download and install the SlideWH snippet 2 Open the Page Inspector RapidWeaver gt View gt Show Page Inspector 3 Be sure that the setting found in Page Inspector gt Styles gt Slide show type gt Off Manual
21. i gt lt a lt li gt lt a lt li gt lt a lt li gt lt a lt li gt lt a lt ul gt lt div gt social_links gt href href href href href href href class icon home gt lt a gt lt 1i gt class icon twitter sign gt lt a gt lt 1li gt class icon facebook sign gt lt a gt lt 1i gt class icon github sign gt lt a gt lt 1i gt class icon plus sign gt lt a gt lt 1li gt class icon camera gt lt a gt lt 1i gt class icon shopping cart gt lt a gt lt 1i gt If pasted into a styled text area be sure to select the snippet then use Format gt Ignore Formatting Replace with the full URI you wish to link to Add or remove lines as needed For a list of other supported icons visit Font Awesome Font Awesome Since tre3rty use Font Awesome for Social Links it s also available theme wide for anything else you might need nifty little icons for Learn more about Font Awesome 29 3 5 Query tre3rty comes with the same version of Query that is used in the Stacks RapidWeaver plugin In fact if the Stacks version is detected then tre3rty s version is ignored Query is a multi browser JavaScript library designed to simplify the client side scripting of HTML Used by over 65 of the 10 000 most visited websites Query is the most popular JavaScript library in use today jQuery s syntax is designed to make it easier to navigate a document select D
22. ics visit the RapidWeaver manual pages 1 3 Getting Help If you run into any trouble community support is just a click away at http seydesign com group 2 The Basics 2 1 Installation To install a Rapid Weaver Theme you must first have the Rapid Weaver application installed on your Mac operating system RapidWeaver is available on the Mac App Store Once RapidWeaver is installed simply double click on the seydesign tre3rty rwtheme file and RapidWeaver will install the theme for you Now that you have installed your theme you are ready to put it to good use Whether you are just getting started with your latest RapidWeaver project or are looking for a new design for an existing project selecting a new theme is easy 1 Simply open the RapidWeaver Theme Drawer View gt Show Themes 2 start typing the theme name in the search box 3 and select the theme icon when it appears 2 2 Options tre3rty has a lot of features built in so take the time to look around the Styles menu View gt Show Page Inspector gt Styles to familiarize yourself with them Try selecting various options and see what effect it has in preview mode Some options may not appear to do anything at all at first as they may rely on certain special features such as Social Links or ExtraContent Or it might also be a case where the current view already meets the minimum requirements set by options such as Minimum Width 2 2 1 Device Simulator
23. mage source line i e http www example com images header9 jpg c Repeat a and b for each image you wish to remove The snippet will now look like this sdSS slideWH http www example com images header3 jpg http www example com images header5 jpg http www example com images header1 jpg http www example com images header9 jpg di 3 3 SocialLinks Home page http foss seydoggy com p Social 20Links Social Links is a complimentary snippet for use with some themes that allows users to easily add simple social links to the designated area of the theme A perfect combination of ExtraContent and Font Awesome Social Links lets your site be social in a few easy steps In tre3rty the Social Links are located at the top right of the layout 28 1 Download and install the Social Links snippet 2 Paste this snippet into the main content area or sidebar area of your site It will look like this 3 4 lt Instructions 1 Paste this snippet into the main content area or sidebar area of your site 2 If pasted into a styled text area be sure to select the snippet then use Format gt Ignore Formatting 3 Replace with the full URI you wish to link to 4 Add or remove lines as needed 5 For a list of other supported icons visit http fortawesome github com Font Awesome gt lt div id myExtraContent12 gt lt ul class lt li gt lt a lt li gt lt a lt l
24. ontent in your site header you are free to craft any type of content that you feel fits the area If you are using Stacks then nearly anything is possible Maybe an left floated image with right floated text or a slider like the built in SS3 Bootstrap Carousel or Super Flex from Nick Cates Design Or if you prefer a more manual approach remember that Twitter Bootstrap is built in to tre3rty meaning that you have access to all sorts of advanced content features like grids thumbnails and sliders just to name a few 20 3 1 2 ExtraContent Stack Requires Stacks E N Qo BF wow Download and install the ExtraContent add ons Open the Stack element panel Search for ExtraContent in the panel s search field Drag the ExtraContent stack on your page Change the ExtraContent value in the settings Add more stacks inside the ExtraContent stack and preview Depending on your theme your ExtraContent may now automatically appear or there might be an option to turn the ExtraContent on or off To add more content to more areas simply repeat steps 1 through 6 NOTE Do not use Stacks Background Border and Layout options on the ExtraContent stack itself These features are general stack settings that are common to all stacks but do not apply in all cases Only apply said options to your content within the ExtraContent stack 3 1 3 ExtraContent Snippet 1 2 3 4 Download and install the ExtraContent add ons
25. slide I would copy the third slide and change the id from mySdSlideBox3 to mySdSlideBox4 Like this lt div class sdSlideBoxSnippet id mySdSlideBox4 gt This content will appear as slide 4 lt br gt Some sample content Add whatever you like here lt div gt 3 2 4 SlideLinks The SlideLinks Snippet is a complimentary snippet for use with SeydoggyS lideshow 3 or SS3 enabled themes The sdSlideLinks snippet is a method for defining unique URL s for each slide in an SS3 slide show whether they are the default internal image slides externally hosted image slides or content based SlideBox slides 1 Download and install the SlideLinks snippet 2 Open the Page Inspector RapidWeaver gt View gt Show Page Inspector 3 Once you ve set up the slide show with the desired settings paste this snippet into Page Inspector gt Header gt JavaScript changing each URL to suit your needs 4 The snippet will look like this sdSS slideLinks http www google com http www tumblr com http www twitter com http www flickr com http www facebook com 1 5 The order of the links will coincide with the order of your slides 6 Be sure that the number of links used matches the number of slides in your slide show To add links to the end of your sequence a Add a comma to the end of the URL line that is currently last i e http www facebook com b Add a new line after the comma c
26. snippet is selected 4 Paste the sdSlideWH snippet into Page Inspector gt Header gt JavaScript changing each image source to suit your needs The snippet will look like this sdSS slideWH http www example com images header3 jpg http www example com images header5 jpg http www example com images header1 jpg http www example com images header9 jpg http www example com images header15 jpg 27 The order of the images will coincide with the order of your slides 5 To add more images to your slide show sequence a Add a comma to the end of the image source line that is currently last i e http www example com images header15 jpg b Add a new line after the comma c On the new line add your new image source in quotations i e http www example com images header20 jpg d Repeat a through c for each additional link The snippet will now look like this sdSS slideWH http www example com images header3 jpg http www example com images header5 jpg http www example com images header1 jpg http www example com images header9 jpg http www example com images header15 jpg http www example com images header20 jpg 1 6 To remove images from your slide show sequence a Remove the last image source line i e http www example com images header15 jpg b Remove the trailing comma from what is now the last i
27. style you like Pw NN See Figure 1 2 3 2 Making Your Own Theme Styles Making your own theme styles is a great way to apply a group of your favorite theme variations and colors to other pages on your site Open the Page Inspector View gt Show Page Inspector Click the Styles tab Set all the variations and colors to your liking Click the cog icon found at the bottom of the panel Select Save Style As Enter an appropriate name Ao WN See Figure 2 2 3 3 Installing Theme Styles Theme Styles might also come independent of the theme itself downloaded from another source RapidWeaver Theme styles are identified by their rw style extension To install these Theme Styles simply double click them and RapidWeaver will install them for you automatically 3 Advanced Features 3 1 ExtraContent Home page http foss seydoggy com p ExtraContent 17 O O Page Inspector Features Styled Text DD kod Styles Page General Sidebar Header Page Specific Theme Default seydesign Copper Page Style Width Corners Top tile gt Main tile Toolbar 2 tile Sidebar tile gt ExtraContent 4 tile gt Navigation type gt Height header slide show EC 1 Background header slide show EC 1 Slide show type gt Slide show timeout Slide show effect Slide show speed Slide show settings Sidebar width 2 This pag
28. tre3rty 2 Thank you for purchasing the seydesign tre3rty rwtheme Like the clean lines of a fine automobile tre3rty promises to thrill you with every curve and detail tre3rty is a delightful optionally responsive RapidWeaver theme full of powerful features finesse and a designers touch tre3rty or utilizes such open source technologies as SS3 SmartNav SmartLayout Social Links Font Awesome and ExtraContent Built on a solid and proven framework tre3rty is sure to deliver solid performance and exceed expectation 1 2 The Opening Act In the next few pages you will learn how to install use and customize your theme While much of what you will learn here is common to most Rapid Weaver themes keep in mind that features found in some themes may not be found in this theme and vice versa Also be aware that RapidWeaver itself is a vast program with many features I will only cover the features that pertain specifically to this theme and I will assume that you have a certain level of basic understanding when it comes to the RapidWeaver application As such it is highly recommended that you take the time to become familiar with the basic operation of Rapid Weaver before delving any deeper into this or any other theme Some areas of the RapidWaver application worth reading up on are e The Page Inspector e Nested navigation e Adding a logo e Setting a Title and Slogan e Enabling breadcrumbs e Color selection For more on these top
29. tre3rty 2 Rapid Weaver Theme User Manual Contents 1 Introduction 1 1 Welcome to tre3rty 2 o e a 1 2 The Opening Act o o ee eee ka OTL EHS ps a E A AOS o Sede ct 2 The Basics 21 Anstallation 2c 24 Abe eee bb ES Se BORE Oe he 22 Options e gos n a amp rs Be eee ehh 2 2 1 Device Simulator 2 2 2 Responsive Behavior 000 2 2 3 Maximum Width 0 00004 2 2 4 Titlebar Options 04 2 2 5 Navigation Options 00 2 2 6 Main Content Options 2 2 7 Sidebar Options ma ww ee di 2 2 8 TOP Options 2 A et Bed 2 2 9 ExtraContent 1 Options 2 2 10 ExtraContent 1 Height o 2 2 11 ExtraContent 2 Options 2 2 12 ExtraContent 3 Options 2 2 13 ExtraContent 4 Options 2 2 14 ExtraContent 5 Options 2 2 15 ExtraContent 6 Options 2 3 2 2 16 ExtraContent 7 Options o a 2 2 17 2 2 18 Slideshow Type eesi sayida o S 2 2 19 Slideshow Effect m iie erada a aa aaa eie S S lideshow Timeout 2 2 20 2 2 21 2 222 Sidebar BOSTON al a o A a ae 2 2 23 Bont Family s a 0 00 dd ata a 2 2 2A FONT OLE de dde Bae e a ee 2 2 25 Font Family Site Title 2 2 26 Font Family lideshow Speed
30. ve font size for the whole theme e Extra small e Small e Medium Default e Large e Extra large 2 2 25 Font Family Site Title Sets the font family for the site title only 14 e Theme default Site Title Default e Sans serif general e Serif general e Helvetica sans serif e Lucida Grande sans serif e Fredericka the Great Google cursive e Titan One Google cursive e Qwigley Google cursive e Droid Sans Mono Google mono e Droid Sans Google san serif e PT Sans Google san serif e Source Sans Pro Google sans serif e Alegreya Google serif e Average Google serif e Neuton Google serif 2 2 26 Font Family Site Slogan Sets the font family for the site slogan only e Theme default Site Slogan Default e Sans serif general e Serif general e Helvetica sans serif e Lucida Grande sans serif e Fredericka the Great Google cursive e Titan One Google cursive e Qwigley Google cursive e Droid Sans Mono Google mono e Droid Sans Google san serif e PT Sans Google san serif e Source Sans Pro Google sans serif e Alegreya Google serif e Average Google serif e Neuton Google serif 2 2 27 Font Family Navigation Sets the font family for the navigation only e Theme default Navigation Default 15 e Sans serif general e Serif general e Helvetica sans serif e Lucida Grande sans serif e Fredericka the Great
Download Pdf Manuals
Related Search