css and wordpress

css and wordpress

• 2.
   Provide forWest-End WordPress meetups  Right in Bloor Village, 1st Saturdays of month at 1:00PM  At Runnymede Library near Runnymede subway  Emphasis on WP problem solving  Thus each attendee introduces themselves and asks one question which the group will hopefully solve: a) immediately if possible b) during demo or presentation c) after meeting brainstorming d) in “unfinished business” at start of next meeting  Emphasis will be on live WP demos & presentations
• 3.
   Today isWordPress and CSS • There is a ton of new CSS technology for WP • Great free help/tutorial websites • Some powerful new, free and premium CSS plugins • A powerful new and free CSS framework • Some very useful, free online CSS tools  Next Month is Super Web Page/Post Designers as now Themes Providers must have Design Layout and Page Builder tools to succeed in marketplace  Subsequent demos & presentations by members of group. Survey acts as kickstarter
• 4.
   Every meetingwill start with intros by attendees in clockwise order  Tell us your name, how you use WordPress and add a WP question or problem. Note it does not have to be related to to the day’s topic.  Enter your name and question or future topic in the Meetup Almanac which is circulating counter clockwise. Leave an email address if you add a question or would like to discuss a future topic for the demos.
• 5.
   As wego through the questions if you have an answer come to the demo machine and show us with an online example if possible.  We have localhost/WPtest ready or can plugin in your machine. Also library WiFi is available so attendees can follow on their machines.  Q&A scrum will be interrupted at 1:40 for Demo and unanswered questions will be addressed at post-meeting scrum, later emails, or unfinished business at next meeting.
• 6.
   During passingof the Meetup Almanac is your opportunity to raise topics for future meeting demos/presentations. Those presentations can be short and sweet: 5-15 minutes.  Any presentation of more than 15 minutes will require a review by Organizer.  Leave an email address and before the next meeting we shall organize the presentations order.  In sum, your participation will help determine the Meetings effectiveness.
• 7.
   HTML providesthe layout and structure of Web pages  JavaScript provides the local page processing. JS has a critical role  PHP provides the client-server processing and a broad range of connectivity to other Web services like Mail Chimp, PayPal, Google Map, and Social Media  CSS provides the icing on the cake. It allows you to refine and polish the look of your website to give it a distinctive edge. CSS is essential to good website design  CSS controls colors, fonts, box model of spacing & other advanced features like animations.  Curiously, CSS styling is hard to do in WordPress
• 8.
   Many WPusers leave CSS up to the theme designs  No need to get involved in Cascading Style Sheets  Use the Customize Command  And maybe a touch of CSS with HTML editor….  But CSS is essential to add finishing style  And there is lots of great free CSS Help starting with …
• 9.
   Overall BrowserSupport  Tells which browsers support W3C standards  CSS Can-I-Use.com  All the specific HTML, CSS standards details
• 10.
   Dontfeartheinternet.com  Superintro to HTML CSS  CSS3maker.com  All you need to do CSS3
• 11.
   WordPress Themeprovides Layout & Structure  CSS used by theme does the Styling  CSS is essential for your website Look and Feel  But you can do more DIY styling….  By adding Inline CSS Styles in WP pages & posts  By adding Page-wide styling  By using Site-wide Styling across all pages/posts  By using 2 Superstyling WP plugins
• 12.
   Inline styleapplies at the lowest level directly to HTML tag or element  Advantage: great for immediate patch to styling  Advantage: highest precedence in style cascade  Disadvantage: awkward, mistake prone for complex stylings  Disadvantage: Inefficient with dense, many repeated styles <p style=“color:red; font-size:20px;”>
• 13.
   How toget from here  To here using inline CSS in WP There are a couple of nifty CSS and WordPress tricks involved
• 14.
  This class style,.badge, can be used several times on a page simplifying styling It is second in cascade precedence But it requires a WP plugin to be used <style> .badge {float:left; margin:5px; color: blue; font-style:italic; padding:2px; </style>
• 15.
  Style.css is yourthemes stylings Many plugins also have a “plugin.css” file for specific plugin stylings Third in Cascade precedence which means Pagewide style will overrule same name Sitewide style. And Inline style has highest precedence. http://www.eyetime.com/wp-content/themes/magazine/style.css />
• 16.
   So whatdoes this get you?
• 17.
   Free SiteOriginCSS Editor  3 of Best 2015 WP plugins  Premium CSSHero Editor  $29 for 1 website
• 18.
   SiteOrigin hasbeen delivering some of the best, free WordPress Plugins for the past 3 years  Start CSS Editor in the dashboard under the menu Appearance | Custom CSS  Users point and click at the elements they want to style  Here is a must see video: https://www.youtube.com/watch?v=NscUjKze16w  CSS Editor is a great way to make style changes and learn how CSS works in WordPress
• 19.
   CSS Herocosts $29 for 1, $59 for 5 and $199 for 999 websites with support and updates for a year  CSS Hero goes beyond CSS Editor • Easier editing of elements states like hover, visited, etc • Displays phone, tablet views for faster @media edits • Adds more CSS3 styles for editing  YouTube video on Rocket Mode allowing any theme - https://www.youtube.com/watch?v=DpYeilIFOn0&list= PLEx82v0KELhIbUXLIV3hZ-l_kMq5mWsYN  Note: new version uses mouse wheel as only means to navigate some critical property lists
• 20.
   Direct CSSStyling gives users the ability to refine the style and design of a website.  Insert CSS & JavaScript plugin unlocks the potential of doing DIY CSS on WordPress  2 new plugins unlock the capability of fast direct CSS edits so users now can create any look/style for key landing pages or their whole website – and do so quickly and effectively  There are a flood of other CSS tools that impact not just WordPress but broader Web Design
• 21.
   Using W3CSSas Sitewide style  Using Bootstrap 4 as a Sitewide style  Using Foundation-Zurb 6 as a Sitewide style  Adding Animate.css for Splash