Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

css and wordpress

•Download as PPTX, PDF•
•
U
umesh patil

The document provides information about WordPress meetups held on the first Saturday of each month. The upcoming meetup will focus on WordPress and CSS, covering new CSS technologies, plugins, frameworks, and tools. Future meetups will discuss page builders and themes. The meetups involve introductions from attendees, questions, demonstrations, and discussions. CSS is described as important for styling websites built with WordPress. Inline CSS, page-wide CSS, site-wide CSS, and plugins can be used to add styling.

1 of 21
css and wordpress
 Provide for West-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
 Today is WordPress 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
 Every meeting will 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.
 As we go 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.
 During passing of 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.
 HTML provides the 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
 Many WP users 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 …
 Overall Browser Support  Tells which browsers support W3C standards  CSS Can-I-Use.com  All the specific HTML, CSS standards details
 Dontfeartheinternet.com  Super intro to HTML CSS  CSS3maker.com  All you need to do CSS3
 WordPress Theme provides 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
 Inline style applies 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;”>
 How to get from here  To here using inline CSS in WP There are a couple of nifty CSS and WordPress tricks involved
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>
Style.css is your themes 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 />
 So what does this get you?
 Free SiteOrigin CSS Editor  3 of Best 2015 WP plugins  Premium CSSHero Editor  $29 for 1 website
 SiteOrigin has been 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
 CSS Hero costs $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
 Direct CSS Styling 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
 Using W3CSS as Sitewide style  Using Bootstrap 4 as a Sitewide style  Using Foundation-Zurb 6 as a Sitewide style  Adding Animate.css for Splash

More Related Content

css and wordpress

  • 2.  Provide for West-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 is WordPress 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 meeting will 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 we go 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 passing of 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 provides the 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 WP users 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 Browser Support  Tells which browsers support W3C standards  CSS Can-I-Use.com  All the specific HTML, CSS standards details
  • 10.  Dontfeartheinternet.com  Super intro to HTML CSS  CSS3maker.com  All you need to do CSS3
  • 11.  WordPress Theme provides 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 style applies 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 to get 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 your themes 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 what does this get you?
  • 17.  Free SiteOrigin CSS Editor  3 of Best 2015 WP plugins  Premium CSSHero Editor  $29 for 1 website
  • 18.  SiteOrigin has been 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 Hero costs $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 CSS Styling 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 W3CSS as Sitewide style  Using Bootstrap 4 as a Sitewide style  Using Foundation-Zurb 6 as a Sitewide style  Adding Animate.css for Splash