SlideShare uma empresa Scribd logo
1 de 20
Baixar para ler offline
Welcome.
How to dominate a
theme.
By James Strang
Why are you here for?
• Get a basic understanding of HTML and CSS
• Learn how to use your browser tools
• Alter visual elements of your website
How to dominate a free theme WCTO 2014
Just Kidding…..
Hello World
CSS Basics
• HTML can be defined using CSS by ID, CLASS, TAG, or inline style.
• CSS uses {curly brackets}
• CSS code is a supplement to HTML, not a replacement.
Syntax of CSS - Inline
Hello World
Syntax of CSS – in stylesheet
input[type="submit"] {
border: 1px solid #ccc;
border-color: #ccc #ccc #bbb #ccc;
background: #e6e6e6;
color: #262626;
cursor: pointer; /* Improves usability and consistency of cursor style */
-webkit-appearance: button; /* Corrects style of 'input' types in iOS */
font-size: 12px;
font-size: 1.4rem;
line-height: 1;
padding: 5px 2%;
}
Selectors
• Tag (h1, h2, div, a, img, body...)
-Affects all elements of a tag
• ID ( #elementid )
-Used for unique items on a page
• Class ( .elementclass )
-Affects all elements that have been assigned the class
• Inline CSS (<element style="style_definitions">)
-Written into HTML, takes top priority. Can be added in the HTML tab
Grouping Selectors
• Comma “,” allows multiple selectors for 1 declaration. “h1, h2, h3 {color: blue;}”
• Space “ ” searches first for all instances of second “.postbody img {border: 1px;}
• Right Chevron “>” searches for direct children “td > a {font-variant: small-caps;}”
• More information about selectors: http://www.w3schools.com/cssref/css_selectors.asp
display: none;
Your secret weapon.
“Inspecting”
your site
How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014
How to add Custom CSS to your website:
• Jetpack Custom CSS
• Plugin (Simple Custom CSS)
• Child Theme
• Editing your theme files… (Not recommended)
Simple Custom CSS
Let’s get practical
Real code examples.
Resources
• Great list of CSS properties with examples
http://www.w3schools.com/cssref/default.asp
• Enter any CSS or URL to have it explained to you
http://tux.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py
• Great resource for anything code related on your website
http://www.w3schools.com/
• WordPress Forums where people like me are able to help you.
https://wordpress.org/support/

Mais conteúdo relacionado

Mais procurados

TMW Code Club Session 1
TMW Code Club Session 1TMW Code Club Session 1
TMW Code Club Session 1nolly00
 
HTML/CSS Workshop @ Searchcamp
HTML/CSS Workshop @ SearchcampHTML/CSS Workshop @ Searchcamp
HTML/CSS Workshop @ SearchcampJames Mills
 
CSS introduction
CSS introductionCSS introduction
CSS introductionCloudTech 
 
Hammersmith fundamentals html fundamentals
Hammersmith fundamentals   html fundamentalsHammersmith fundamentals   html fundamentals
Hammersmith fundamentals html fundamentalsMike Bradshaw
 
WordCamp Kent 2019 - WP 101: Custom Post Type & Custom Fields
WordCamp Kent 2019 - WP 101: Custom Post Type & Custom FieldsWordCamp Kent 2019 - WP 101: Custom Post Type & Custom Fields
WordCamp Kent 2019 - WP 101: Custom Post Type & Custom FieldsJoe Querin
 
Steve Barman - CSS and WordPress
Steve Barman - CSS and WordPressSteve Barman - CSS and WordPress
Steve Barman - CSS and WordPressAnthony Montalbano
 
Sass: The Future of Stylesheets
Sass: The Future of StylesheetsSass: The Future of Stylesheets
Sass: The Future of Stylesheetschriseppstein
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Deepak Sharma
 
Steph's Html5 and css presentation
Steph's Html5 and css presentationSteph's Html5 and css presentation
Steph's Html5 and css presentationstephy123123
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation joilrahat
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSSRuss Weakley
 

Mais procurados (19)

TMW Code Club Session 1
TMW Code Club Session 1TMW Code Club Session 1
TMW Code Club Session 1
 
CSS Best practice
CSS Best practiceCSS Best practice
CSS Best practice
 
CSS Modules
CSS ModulesCSS Modules
CSS Modules
 
HTML/CSS Workshop @ Searchcamp
HTML/CSS Workshop @ SearchcampHTML/CSS Workshop @ Searchcamp
HTML/CSS Workshop @ Searchcamp
 
CSS introduction
CSS introductionCSS introduction
CSS introduction
 
Hammersmith fundamentals html fundamentals
Hammersmith fundamentals   html fundamentalsHammersmith fundamentals   html fundamentals
Hammersmith fundamentals html fundamentals
 
Efficient theming in Drupal
Efficient theming in DrupalEfficient theming in Drupal
Efficient theming in Drupal
 
WordCamp Kent 2019 - WP 101: Custom Post Type & Custom Fields
WordCamp Kent 2019 - WP 101: Custom Post Type & Custom FieldsWordCamp Kent 2019 - WP 101: Custom Post Type & Custom Fields
WordCamp Kent 2019 - WP 101: Custom Post Type & Custom Fields
 
Steve Barman - CSS and WordPress
Steve Barman - CSS and WordPressSteve Barman - CSS and WordPress
Steve Barman - CSS and WordPress
 
Sass: The Future of Stylesheets
Sass: The Future of StylesheetsSass: The Future of Stylesheets
Sass: The Future of Stylesheets
 
Jquery News Packages
Jquery News PackagesJquery News Packages
Jquery News Packages
 
CSS Reset
CSS ResetCSS Reset
CSS Reset
 
Fundamental CSS3
Fundamental CSS3Fundamental CSS3
Fundamental CSS3
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
 
Css home
Css   homeCss   home
Css home
 
Steph's Html5 and css presentation
Steph's Html5 and css presentationSteph's Html5 and css presentation
Steph's Html5 and css presentation
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSS
 
Day6
Day6Day6
Day6
 

Destaque

Sound cloud sign in
Sound cloud sign inSound cloud sign in
Sound cloud sign inharmanuk
 
Hoja de vida minerva brayan
Hoja de vida minerva brayanHoja de vida minerva brayan
Hoja de vida minerva brayanbairon360
 
Poster Fundamentos de investigación
Poster Fundamentos de investigaciónPoster Fundamentos de investigación
Poster Fundamentos de investigaciónlittle-popcorn
 
Evaluacion nacional aporte individual de educacion y comunicacion
Evaluacion nacional aporte individual de educacion y comunicacionEvaluacion nacional aporte individual de educacion y comunicacion
Evaluacion nacional aporte individual de educacion y comunicacionleidyspsicologa22
 
Compañía abc ltda
Compañía abc ltdaCompañía abc ltda
Compañía abc ltdawilis1990
 
FTE outsourcing_PharmaNetwork_sep2014
FTE outsourcing_PharmaNetwork_sep2014FTE outsourcing_PharmaNetwork_sep2014
FTE outsourcing_PharmaNetwork_sep2014Frédéric Gaussens
 
Presentación1
Presentación1Presentación1
Presentación1yexceni
 
Mosaicos horizontales
Mosaicos horizontalesMosaicos horizontales
Mosaicos horizontalesanlual3
 
Aralin16 130429105227-phpapp02
Aralin16 130429105227-phpapp02Aralin16 130429105227-phpapp02
Aralin16 130429105227-phpapp02zurcyrag23
 
Boletín de oferta no.85
Boletín de oferta no.85Boletín de oferta no.85
Boletín de oferta no.85uribe78
 
Servicios y Herramientas de Internet
Servicios y Herramientas de InternetServicios y Herramientas de Internet
Servicios y Herramientas de Internetpaubect
 

Destaque (20)

La desnutrición infantil en el medio rural mexicano
La desnutrición infantil en el medio rural mexicanoLa desnutrición infantil en el medio rural mexicano
La desnutrición infantil en el medio rural mexicano
 
Ensayo cbr
Ensayo cbrEnsayo cbr
Ensayo cbr
 
Latin feel tab
Latin feel tabLatin feel tab
Latin feel tab
 
Sound cloud sign in
Sound cloud sign inSound cloud sign in
Sound cloud sign in
 
Hoja de vida minerva brayan
Hoja de vida minerva brayanHoja de vida minerva brayan
Hoja de vida minerva brayan
 
Poster Fundamentos de investigación
Poster Fundamentos de investigaciónPoster Fundamentos de investigación
Poster Fundamentos de investigación
 
Evaluacion nacional aporte individual de educacion y comunicacion
Evaluacion nacional aporte individual de educacion y comunicacionEvaluacion nacional aporte individual de educacion y comunicacion
Evaluacion nacional aporte individual de educacion y comunicacion
 
Compañía abc ltda
Compañía abc ltdaCompañía abc ltda
Compañía abc ltda
 
Gab.wal,val
Gab.wal,valGab.wal,val
Gab.wal,val
 
Cesar
CesarCesar
Cesar
 
FTE outsourcing_PharmaNetwork_sep2014
FTE outsourcing_PharmaNetwork_sep2014FTE outsourcing_PharmaNetwork_sep2014
FTE outsourcing_PharmaNetwork_sep2014
 
Presentación1
Presentación1Presentación1
Presentación1
 
Mosaicos horizontales
Mosaicos horizontalesMosaicos horizontales
Mosaicos horizontales
 
Aralin16 130429105227-phpapp02
Aralin16 130429105227-phpapp02Aralin16 130429105227-phpapp02
Aralin16 130429105227-phpapp02
 
Boletín de oferta no.85
Boletín de oferta no.85Boletín de oferta no.85
Boletín de oferta no.85
 
Violencia familiar
Violencia familiar Violencia familiar
Violencia familiar
 
Catequesis
CatequesisCatequesis
Catequesis
 
Intranet
IntranetIntranet
Intranet
 
T de Student
T de StudentT de Student
T de Student
 
Servicios y Herramientas de Internet
Servicios y Herramientas de InternetServicios y Herramientas de Internet
Servicios y Herramientas de Internet
 

Semelhante a How to dominate a free theme WCTO 2014

Internet tech &amp; web prog. p4,5
Internet tech &amp; web prog.  p4,5Internet tech &amp; web prog.  p4,5
Internet tech &amp; web prog. p4,5Taymoor Nazmy
 
Css basics
Css basicsCss basics
Css basicsASIT
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSTJ Stalcup
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell
 
Cascading Style Sheets - CSS
Cascading Style Sheets - CSSCascading Style Sheets - CSS
Cascading Style Sheets - CSSSun Technlogies
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflowPeter Kaizer
 
basic programming language AND HTML CSS JAVApdf
basic programming language AND HTML CSS JAVApdfbasic programming language AND HTML CSS JAVApdf
basic programming language AND HTML CSS JAVApdfelayelily
 
WEB TECHNOLOGY Unit-2.pptx
WEB TECHNOLOGY Unit-2.pptxWEB TECHNOLOGY Unit-2.pptx
WEB TECHNOLOGY Unit-2.pptxkarthiksmart21
 
2 introduction css
2 introduction css2 introduction css
2 introduction cssJalpesh Vasa
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSSSyed Sami
 

Semelhante a How to dominate a free theme WCTO 2014 (20)

Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 
Internet tech &amp; web prog. p4,5
Internet tech &amp; web prog.  p4,5Internet tech &amp; web prog.  p4,5
Internet tech &amp; web prog. p4,5
 
Css basics
Css basicsCss basics
Css basics
 
CSS Overview
CSS OverviewCSS Overview
CSS Overview
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSS
 
Css
CssCss
Css
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
Cascading Style Sheets - CSS
Cascading Style Sheets - CSSCascading Style Sheets - CSS
Cascading Style Sheets - CSS
 
Web 102 INtro to CSS
Web 102  INtro to CSSWeb 102  INtro to CSS
Web 102 INtro to CSS
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
basic programming language AND HTML CSS JAVApdf
basic programming language AND HTML CSS JAVApdfbasic programming language AND HTML CSS JAVApdf
basic programming language AND HTML CSS JAVApdf
 
WEB TECHNOLOGY Unit-2.pptx
WEB TECHNOLOGY Unit-2.pptxWEB TECHNOLOGY Unit-2.pptx
WEB TECHNOLOGY Unit-2.pptx
 
Css 3
Css 3Css 3
Css 3
 
Css 3
Css 3Css 3
Css 3
 
css v1 guru
css v1 gurucss v1 guru
css v1 guru
 
Unit 3 (it workshop).pptx
Unit 3 (it workshop).pptxUnit 3 (it workshop).pptx
Unit 3 (it workshop).pptx
 
2 introduction css
2 introduction css2 introduction css
2 introduction css
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 
WT CSS
WT  CSSWT  CSS
WT CSS
 
Css
CssCss
Css
 

Último

Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 

Último (20)

Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 

How to dominate a free theme WCTO 2014

  • 2. How to dominate a theme. By James Strang
  • 3. Why are you here for? • Get a basic understanding of HTML and CSS • Learn how to use your browser tools • Alter visual elements of your website
  • 7. CSS Basics • HTML can be defined using CSS by ID, CLASS, TAG, or inline style. • CSS uses {curly brackets} • CSS code is a supplement to HTML, not a replacement.
  • 8. Syntax of CSS - Inline
  • 10. Syntax of CSS – in stylesheet input[type="submit"] { border: 1px solid #ccc; border-color: #ccc #ccc #bbb #ccc; background: #e6e6e6; color: #262626; cursor: pointer; /* Improves usability and consistency of cursor style */ -webkit-appearance: button; /* Corrects style of 'input' types in iOS */ font-size: 12px; font-size: 1.4rem; line-height: 1; padding: 5px 2%; }
  • 11. Selectors • Tag (h1, h2, div, a, img, body...) -Affects all elements of a tag • ID ( #elementid ) -Used for unique items on a page • Class ( .elementclass ) -Affects all elements that have been assigned the class • Inline CSS (<element style="style_definitions">) -Written into HTML, takes top priority. Can be added in the HTML tab
  • 12. Grouping Selectors • Comma “,” allows multiple selectors for 1 declaration. “h1, h2, h3 {color: blue;}” • Space “ ” searches first for all instances of second “.postbody img {border: 1px;} • Right Chevron “>” searches for direct children “td > a {font-variant: small-caps;}” • More information about selectors: http://www.w3schools.com/cssref/css_selectors.asp
  • 17. How to add Custom CSS to your website: • Jetpack Custom CSS • Plugin (Simple Custom CSS) • Child Theme • Editing your theme files… (Not recommended)
  • 19. Let’s get practical Real code examples.
  • 20. Resources • Great list of CSS properties with examples http://www.w3schools.com/cssref/default.asp • Enter any CSS or URL to have it explained to you http://tux.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py • Great resource for anything code related on your website http://www.w3schools.com/ • WordPress Forums where people like me are able to help you. https://wordpress.org/support/