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

css and wordpress

Recommended

More Related Content

What's hot (19)

Viewers also liked (17)

Similar to css and wordpress (20)

More from umesh patil (19)

Recently uploaded (20)

css and wordpress