Manual - seyDesign
Contents
1. 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 Sytten 2 use FontAwesome for Social Links it s also available theme wide for anything else you might need nifty little icons for Learn more about Font Awesome 3 5 jQuery Sytten 2 comes with the same version of jQuery that is used in the Stacks RapidWeaver plugin In fact if the Stacks version is detected then Sytten 2 s version is ignored jQuery 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 jQuery is the most popular JavaScript library in use today 29 jQuery s syntax is designed to make it easier to navigate a document select DOM 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 jQuery library allows the creation of powerful dynamic web pages and web applications Learn more about jQuery 3 6 Bootstrap Sleek intuitive and powerful front end framework for fast2. Slide show speed Slide show settings Sidebar width 2 This page uses its own theme style Built in Styles uses the master style for the Theme Default Pp A Figure 1 ie 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 18 4 Select the theme style you like 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
3. 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 11 ExtraContent 1 Options A collection of color and background image options as they pertain to the header or ExtraContentl area e Banner Color e 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 e 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 12 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
4. Enter an appropriate name DARAN 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 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 RapidWever site beyond the usual sidebar content layout and add content in places otherwise out of reach for Rapid Wever In Sytten 2 the 7 ExtraContent areas are located from top to bottom as follows e ExtraContentl and ExtraContent2 are located in the top area header of the layout just under the title and slogan 19 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 Bann
5. 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 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 the SS3 User API to link each slide to another destination 23 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 Rapid Weaver It will look like this lt div class sdSlideBoxSnippet id mySdSlideBox1 gt This content will appe
6. 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 26 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 Slide WH 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 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 J The order of the images will coincide with the order
7. 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 27 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 image 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 d 3 3 SocialLinks Home page http foss seydoggy com p Social 20Links Social Links is a complimentary snippet for use
8. that lies behind the Site Title e Background Color e Site Title Color e Site Slogan Color e Social Links Color e None Background Default e Blueprint tile Tile e Diagonal tile Tile e Dotted tile Tile e Horizontal tile Tile e Linen tile Tile e Metal grid tile Tile e Noise tile Tile e Square tile Tile e Vertical tile Tile e Vista 1 Background e Vista 2 Background e Vista 3 Background e Vista 4 Background e Vista 5 Background 2 2 4 Top Effect A collection of transparent overlay effects that give a filtered effect to the top area of your site The effect can be layered e Spotlight Quarter 1 Transparent Filter e Spotlight Half 1 Transparent Filter e Spotlight Full 1 Transparent Filter e Halftone Dark 2 Transparent Filter e Halftone Light 2 Transparent Filter e Mask Dark 3 Transparent Filter e Mask Mid 3 Transparent Filter e Mask Light 3 Transparent Filter e Bottom Fade Dark 4 Transparent Filter e Bottom Fade Mid 4 Transparent Filter e Bottom Fade Light 4 Transparent Filter e Bottom Grad Dark 4 Transparent Filter e Bottom Grad Mid 4 Transparent Filter e Bottom Grad Light 4 Transparent Filter 2 2 5 Title Shadow Options to control the text shadow effect of the title and slogan e Off Default e Embed e Emboss 2 2 6 Top Menu Text Shadow Option
9. 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 topics 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 RapidWeaver 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 Sytten 2 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 Sytten 2 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 o
10. 2 13 ExtraContent 2 Options A collection of color settings for the ExtraContent 2 area e Background Color e Text Color e Link Color 2 2 14 ExtraContent 3 Options A collection of color settings for the ExtraContent 2 area e Background Color e Text Color e Link Color 2 2 15 ExtraContent 4 Options A collection of color settings for the ExtraContent 4 area e Background Color e Text Color e Link Color 2 2 16 ExtraContent 5 Options A collection of color settings for the ExtraContent 5 area e Background Color e Text Color e Link Color 2 2 17 Slideshow Type The slide show type allows you to choose from Off Content or a selection of preset internal sequences e Off Manual snippet Default turns off the slide show unless the SlideNum or SlideWH snippets are detected e Content SlideBox stack snippet enables the use of content slides created either with the SlideBox snippet or SlideBox stack 10 Slides 1 to 5 enables the internal slide sequence using slides X to Y Slides 6 to 10 Slides 11 to 15 e 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 e 4 seconds Default e 6 seconds e 8 seconds e 12 seconds e 16 seconds e 20 seconds
11. 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 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 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 11 e 1 4 second e 1 2 second e 3 4 second e 1 second Default e 11 2 second e 2 seconds e 2 1 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 2 2 22 Font Family Sets the default font family for the whole theme e Cookie cursive e Lobster cursive e Andale Mono monospace e Courier New monospace e Monaco monospace e Arial sans serif e Cabin sans serif e Geneva sans serif e Helvetica sans serif Default e Lucida Grande sans serif e M
12. 4 4 4 4 6 go eo BBO A g Font Family Title Font Size Title mr we EES Font Family Slogad o a Font Size Slogan o oo o e Font Family Navigation o o a Font Family Headings o Line Helebtv Vii a aa a Responsive Behavior Theme Styles a s a aa bbe a ee Se ee ad 2 3 1 2 3 2 2 3 3 Using Theme Styles o Making Your Own Theme Styles Installing Theme Styles o o 3 Advanced Features 3 1 3 2 EXtra Content sg cia e ee dd Da 3 1 1 ExtraContent 1 The Place for Headers Banners and Sliders Oh Mylo coi o e 3 1 2 ExtraContent Stack o 3 13 ExtraContent Snippet 04 DOO Hitt oe Boe elt as ME A al Gh a oa SIA Le ook dha eM 3 2 1 Basic Features of 893 0 3 2 2 SlideBox Stak i p war ke ee A A EY Seas 3 2 3 SlideBox Snippet 3 24 Slidebinks aa acre ea A EEE ges 3 2 5 SolideNumis do a E RI RENA 26 3 20 SUdeW He ia ra 8 a a E A da 27 did SOCIALES 2 o ee A AA a bb ered 28 3 4 FontAwesome a A e aa AURRE ee 29 3 0 JQUETY Seaia ai aa n o eo ee ew a E T E elle E 29 3 0 B tstrap u aa a e do aA A EE a ee A 30 4 Customize Your Theme 30 AT General ii e e o e Ee d 30 A VE A E NA 31 A IO A A he Oh Oh Oh Ce aha eee alo NN aa 31 AA JAVASCTIPU seit ts el a
13. Sytten 2 RapidWeaver T heme User Manual Contents 1 Introduction 1 1 Welcome to Sytten 2 o 1 2 The Opening Act o e ee eee ee k3 OTL EHS ys E A AOS o Sede 2 The Basics 21 Anstallation 2 6 24 Abe oe eee bb ESS BORE Oe ke 22 Options e sos todd rd bak ee ore heehee 2 2 1 Device Simulator 2 2 2 Maximum Width ceci dd 223 Top Options lt s a adds A A 22 40 Top Effecta a dd de fa 2 2 5 Title Shadow Liede a 24 rare oe ete Yee 4 2 2 6 Top Menu Text Shadow 0 22 Logo Options 2 vee 8 aa a dd A 2 2 8 Navigation Options 00 0 2 2 9 Main Content Options 0 2 2 10 Sidebar Options 004 2 2 11 ExtraContent 1 Options 2 2 12 ExtraContent 1 Height o a 2 2 13 ExtraContent 2 Options 2 2 14 ExtraContent 3 Options 2 2 15 ExtraContent 4 Options NI nN NN 2 3 2 2 16 2 2 17 2 2 18 2 2 19 2 2 20 2 2 21 2 2 22 2 2 23 2 2 24 2 2 25 2 2 26 2 2 27 2 2 28 2 2 29 2 2 30 2 2 31 ExtraContent 5 Options o a Slideshow Type eesi caudia o Slideshow Timeout o o Slideshow Effect a se aeia s aa o 0000004 Slideshow Speed o e S lideshow Settings aoaaa Font Family 88 2 dd amp AA a te R ra Font DIZ
14. a a a ed gh BR A Se eG Se 32 5 Updating Your Theme 32 5T Backing Up A A AAA a a aA 32 5 2 Updating a ry dite dah aa ee ee AA e AA reho 32 1 Introduction 1 1 Welcome to Sytten 2 Thank you for purchasing the seydesign Sytten 2 rwtheme Sytten is an open feeling theme that leverages full widths and big vertical spaces to allow your ideas and creativity to flow freely With practically no limitations set for logo size a bold title and a vast space for beautiful vistas Sytten presents your visitors with an above the fold experience like no other This breathtaking RapidWeaver theme is chock full of great features like vast vistas that fill the top of your site and fantastic designer fonts for those finishing touches Built on our tried and true framework Sytten is fully responsive includes Device Simulator SS3 SmartNav Font Awesome and so much more 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 Rapid Weaver 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
15. ar 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 To add slides simply add a new sdSlideBoxSnippet wrapper and number it accordingly For example if I wanted to add a forth 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 24 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 wheth
16. efore 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
17. er and easier web development http twitter github io bootstrap Twitter Bootstrap is baked right into Sytten 2 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 2 Use the search field to find your theme 3 Right click click control click on your theme and select Reveal Contents in Finder 30 4 2 Images Sytten 2 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 ima
18. er 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 J 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 On the new line add your new URL in quotations i e http seydesign com 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 25 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 trai
19. ers 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 Sytten 2 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 ExtraContent 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 Sytten 2 meaning that you have access to all sorts of advanced content featu
20. f 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 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 22 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 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
21. ges 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 PAS O ES 3 You can also keep your theme intact and use custom CSS For the header pageHeadert 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 Sytten 2 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 code is applied throughout your entire RapidWeaver project Simply open your theme s contents and edit the custom css file suit your needs 31 4 4 JavaScript Sytten 2 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 B
22. hange 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 To add more content to more areas simply repeat the process using numbers that correspond to those in your theme For example 21 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 Duch 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 allowFullScreen 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 i
23. ling 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 As 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 The snippet will look like this sdSS slideNum 3 5 1 9 15 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
24. ontserrat sans serif e Trebuchet MS sans serif e Ubuntu sans serif e Verdana sans serif e Bree serif e Droid serif 12 e Georgia serif e Lora serif e Playfair Display serif e Times serif e Vollkorn serif 2 2 23 Font Size Sets the relative font size for the whole theme e Extra small e Small e Medium Default e Large e Extra large 2 2 24 Font Family Title Sets the font family for the site title only e Theme Default Title Default e Cookie cursive e Lobster cursive e Andale Mono monospace e Courier New monospace e Monaco monospace e Arial sans serif e Cabin sans serif e Geneva sans serif e Helvetica sans serif e Lucida Grande sans serif e Montserrat sans serif e Trebuchet MS sans serif e Ubuntu sans serif e Verdana sans serif e Bree serif e Droid serif e Georgia serif e Lora serif e Playfair Display serif e Times serif e Vollkorn serif 13 2 2 25 Font Size Title e Theme Default Title Default e Extra small e Small e Large e Extra large 2 2 26 Font Family Slogan Sets the font family for the site slogan only e Theme Default Title Default e Cookie cursive e Lobster cursive e Andale Mono monospace e Courier New monospace e Monaco monospace e Arial sans serif e Cabin sans serif e Geneva sans serif e Helvetica sans serif e Lucida Grande sans serif e Mon
25. ptions 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 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 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 e 1024px Default e 1280px e Full Width Scales according to the viewport size and always occupies the full width 2 2 3 Top Options A collection of color and background tile options that pertain to the top area
26. res like grids thumbnails and sliders just to name a few 3 1 2 ExtraContent Stack Requires Stacks 1 Download and install the ExtraContent add ons 2 Open the Stack element panel 20 NOD A E y 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 Download and install the ExtraContent add ons Open the Rapid Weaver 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 c
27. rgia serif e Lora serif e Playfair Display serif e Times serif e Vollkorn serif 2 2 30 Line Height Sets the overall line height e Small e Medium Default e Large 2 2 31 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 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 1 Open the Page Inspector View gt Show Page Inspector 2 Click the Styles tab 3 Click the folder icon found at the bottom of the panel 16 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
28. to control the text shadow effect of the top menu e Off Default e Embed e Emboss 2 2 7 Logo Options Option to turn the Site Logo on or off e Off Default e On 2 2 8 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 Hover Background Top Menu Color e Text Top Menu Color e Hover Text Top Menu Color e Current Text Top Menu Color e Border Top Drop Menu Color e Text Top Drop Menu Color e Bar Background Sub Menu Color e Hover Background Sub Menu Color e Text Sub Menu Color e Hover Text Sub Menu Color e Current Text Sub Menu Color e Border Sub Drop Menu Color e Text Sub Drop Menu Color e Background Vertical Responsive Color e Border Vertical Responsive Color e Text Vertical Responsive Color e 3 tier Type Default e 2 tier a Type e 2 tier b Type e Vertical Type e Hide Type 2 2 9 Main Content Options A collection of colors pertaining to the main content area e Background Color e Text Color e Link Color 2 2 10 Sidebar Options A collection of color width and position options pertaining to the sidebar area e Background Color e Text
29. tserrat sans serif e Trebuchet MS sans serif e Ubuntu sans serif e Verdana sans serif e Bree serif e Droid serif e Georgia serif e Lora serif e Playfair Display serif e Times serif e Vollkorn serif 2 2 27 Font Size Slogan e Theme Default Slogan Default e Extra small e Small e Large e Extra large 14 2 2 28 Font Family Navigation Sets the font family for the navigation only e Theme Default Title Default e Cookie cursive e Lobster cursive e Andale Mono monospace e Courier New monospace e Monaco monospace e Arial sans serif e Cabin sans serif e Geneva sans serif e Helvetica sans serif e Lucida Grande sans serif e Montserrat sans serif e Trebuchet MS sans serif e Ubuntu sans serif e Verdana sans serif e Bree serif e Droid serif e Georgia serif e Lora serif e Playfair Display serif e Times serif e Vollkorn serif 2 2 29 Font Family Headings Sets the font family for the headings only e Theme Default Title Default e Cookie cursive e Lobster cursive e Andale Mono monospace e Courier New monospace e Monaco monospace e Arial sans serif e Cabin sans serif e Geneva sans serif e Helvetica sans serif e Lucida Grande sans serif 15 e Montserrat sans serif e Trebuchet MS sans serif e Ubuntu sans serif e Verdana sans serif e Bree serif e Droid serif e Geo
30. 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 Sytten 2 the Social Links are located at the top right of the layout 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 i Instructions 1 Paste this snippet into the main content area or sidebar area of your site 28 3 4 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 social_links gt lt li gt lt a href class icon home gt lt a gt lt 1i gt lt li gt lt a href class icon twitter sign gt lt a gt lt li gt lt li gt lt a href class icon facebook sign gt lt a gt lt 1i gt lt li gt lt a href class icon github sign gt lt a gt lt 1li gt lt li gt lt a href class icon plus sign gt lt a gt lt 1li gt lt li gt lt a href class icon camera gt lt a gt lt 1i gt lt li gt lt a href class icon shopping cart gt lt a gt lt 1i gt lt ul gt lt div gt
Download Pdf Manuals
Related Search