Topic:WordPress and CSS

Topic:WordPress with CSS Style

5/20/2016 8:30 PM 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

1

Purpose of New WordPress Meetup GroupProvide for West-End WordPress meetupsRight in Bloor Village, 1st Saturdays of month at 1:00PMAt Runnymede Library near Runnymede subwayEmphasis on WP problem solvingThus each attendee introduces themselves and asks one question which the group will hopefully solve:a) immediately if possibleb) during demo or presentationc) after meeting brainstormingd) in unfinished business at start of next meetingEmphasis will be on live WP demos & presentations

Topics for first 2 meetingsToday is WordPress and CSSThere is a ton of new CSS technology for WPGreat free help/tutorial websitesSome powerful new, free and premium CSS pluginsA powerful new and free CSS frameworkSome very useful, free online CSS toolsNext Month is Super Web Page/Post Designersas now Themes Providers must have Design Layout and Page Builder tools to succeed in marketplaceSubsequent demos & presentations by members of group. Survey acts as kickstarter

Introductions & QuestionsEvery meeting will start with intros by attendees in clockwise orderTell 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 days 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.

Question and Answer ScrumAs 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.

Survey TimeDuring 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.

Role of CSSHTML provides the layout and structure of Web pagesJavaScript 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 MediaCSS 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 designCSS controls colors, fonts, box model of spacing & other advanced features like animations. Curiously, CSS styling is hard to do in WordPress

WordPress and CSSMany WP users leave CSS up to the theme designsNo need to get involved in Cascading Style SheetsUse the Customize CommandAnd maybe a touch of CSS with HTML editor.But CSS is essential to add finishing styleAnd there is lots of great free CSS Help starting with

CSS GuidesOverall Browser SupportTells which browsers support W3C standardsCSS Can-I-Use.comAll the specific HTML, CSS standards details

2 More Good CSS GuidesDontfeartheinternet.comSuper intro to HTML CSS CSS3maker.comAll you need to do CSS3

What CSS Does For You in WPWordPress Theme provides Layout & Structure CSS used by theme does the StylingCSS is essential for your website Look and FeelBut you can do more DIY styling.By adding Inline CSS Styles in WP pages & postsBy adding Page-wide stylingBy using Site-wide Styling across all pages/postsBy using 2 Superstyling WP plugins

Inline CSS StylingInline style applies at the lowest level directly to HTML tag or elementAdvantage: great for immediate patch to stylingAdvantage: highest precedence in style cascadeDisadvantage: awkward, mistake prone for complex stylings Disadvantage: Inefficient with dense, many repeated styles

Inline CSS Styling in WordPressHow to get from hereTo here using inline CSS in WP

There are a couple of nifty CSS and WordPress tricks involved

Pagewide CSS StylesThis class style, .badge, can be used several times on a page simplifying stylingIt is second in cascade precedence But it requires a WP plugin to be used

.badge {float:left; margin:5px; color: blue; font-style:italic; padding:2px;

External or Sitewide CSSStyle.css is your themes stylingsMany plugins also have a plugin.css file for specific plugin stylingsThird 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 />

Page/Sitewide CSS Styling in WordPressSo what does this get you?

2 Advanced WP CSS Styling PluginsFree SiteOrigin CSS Editor3 of Best 2015 WP plugins Premium CSSHero Editor$29 for 1 website

SiteOrigin Free CSS EditorSiteOrigin has been delivering some of the best, free WordPress Plugins for the past 3 yearsStart CSS Editor in the dashboard under the menu Appearance | Custom CSSUsers point and click at the elements they want to styleHere is a must see video: https://www.youtube.com/watch?v=NscUjKze16wCSS Editor is a great way to make style changes and learn how CSS works in WordPress

CSSHero 2.0CSS Hero costs $29 for 1, $59 for 5 and $199 for 999 websites with support and updates for a yearCSS Hero goes beyond CSS EditorEasier editing of elements states like hover, visited, etcDisplays phone, tablet views for faster @media editsAdds more CSS3 styles for editingYouTube video on Rocket Mode allowing any theme - https://www.youtube.com/watch?v=DpYeilIFOn0&list=PLEx82v0KELhIbUXLIV3hZ-l_kMq5mWsYNNote: new version uses mouse wheel as only means to navigate some critical property lists

SummaryDirect 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 WordPress2 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 effectivelyThere are a flood of other CSS tools that impact not just WordPress but broader Web Design

Bonus: CSS Frameworks in WPUsing W3CSS as Sitewide styleUsing Bootstrap 4 as a Sitewide styleUsing Foundation-Zurb 6 as a Sitewide styleAdding Animate.css for Splash