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