The slider is implemented and works, it just doesn’t look like how we have designed it. We go through the process of stripping away HTML and CSS that we don’t need. We also look at the settings for the RoyalSlider to turn off some things that we don’t need.<\/p>\n
We look at how you can remove certain files from showing up in search in Sublime Text. <\/p>\n
We implement a very simple CSS reset, which came up when the slider didn’t hug the edges of the browser because of the UA stylesheet adding padding to the body element.<\/p>\n
We also Photoshop a few of the slides to make the edges fade to white better.<\/p>\n","protected":false},"excerpt":{"rendered":"
The slider is implemented and works, it just doesn’t look like how we have designed it. We go through the process of stripping away HTML and CSS that we don’t need. We also look at the settings for the RoyalSlider to turn off some things that we don’t need. We look at how you can […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":19998,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"lodge-video.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":20034,"url":"https:\/\/css-tricks.com\/lodge\/artists-website\/005-photoshopping-mobile-part-1\/","url_meta":{"origin":20058,"position":0},"title":"#005 – Photoshopping Mobile, Part 1","date":"January 29, 2013","format":false,"excerpt":"We start out with our Photoshop file open. The rather silly looking \"elongated\" iPhone screenshot, which simply just gives us a canvas in the mobile first context. We start out as simple as can be: with Jeff's name. We need to pick a font straight away. This kind of thing\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20280,"url":"https:\/\/css-tricks.com\/lodge\/artists-website\/014-positioning-the-slider\/","url_meta":{"origin":20058,"position":1},"title":"#014 – Positioning the Slider","date":"February 26, 2013","format":false,"excerpt":"The slider works! But it's not placed quite exactly as we have designed in our Photoshop file. We need more room below it to expose more of the main navigation. In this screencast we dig into the CSS that comes with the slider and clean house! Some of the sizing\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20642,"url":"https:\/\/css-tricks.com\/lodge\/artists-website\/031-limiting-the-slider-height-for-desktop\/","url_meta":{"origin":20058,"position":2},"title":"#031 – Limiting the Slider Height for Desktop","date":"March 18, 2013","format":false,"excerpt":"When the browser window gets larger, the slider at the top of the homepage gets ridiculously big. This is a mobile first series, but since the mobile version of the slider is already working well (perhaps we should load smaller images, but functionally it's cool) we can focus on making\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20056,"url":"https:\/\/css-tricks.com\/lodge\/artists-website\/012-slider-foundations\/","url_meta":{"origin":20058,"position":3},"title":"#012 – Slider Foundations","date":"January 30, 2013","format":false,"excerpt":"We decide to go with the RoyalSlider for the slider on the homepage. I've long been a fan of the AnythingSlider, because I was part of it's creation and I think it's very powerful. However, I think it's a bit long in the tooth these days not supporting touch events\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":15126,"url":"https:\/\/css-tricks.com\/snippets\/css\/smiley-slider\/","url_meta":{"origin":20058,"position":4},"title":"Smiley Slider","date":"November 20, 2011","format":false,"excerpt":"Requires jQuery and jQuery UI for the actual slider. The face is made from elements made into circles with border-radius. The mouth, indicating happiness level, is another circle just cropped down to size with a parent element with hidden overflow. #face { width: 100px; height: 100px; position: relative; border: 2px\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20039,"url":"https:\/\/css-tricks.com\/lodge\/artists-website\/006-photoshop-2-mp4\/","url_meta":{"origin":20058,"position":5},"title":"#006 – Photoshopping Mobile, Part 2","date":"January 29, 2013","format":false,"excerpt":"We have the \"header\" of the design in place, we just need to figure out the rest of the page. We have a list of the most important goals we're trying to accomplish, so that will help us guide us. Essentially a set of links (\"main navigation\") will serve us\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/20058"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=20058"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/20058\/revisions"}],"predecessor-version":[{"id":210043,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/20058\/revisions\/210043"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/19998"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=20058"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=20058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}