Embed Size (px)
Citation preview
INTRO TO CSS
PRESENTED BY WPPITTSBURGHCOM
HOW TO MAKE SIMPLE EDITS TO CUSTOMIZE THE LOOK AND FEEL OF YOUR WEBSITE
WHAT IS CSSbull CSS is the abbreviated term for ldquoCascading Style Sheetrdquo
bull The code found within your themersquos CSS file determines the appearance of your site by applying style rules to HTML content which has no style of its own
CSS vs HTMLbull Think of CSS as ldquoclothingrdquo and the HTML as the ldquomannequinrdquo
bull CSS controls things such as colors spacing layout mobile-shy‐responsiveness and more
bull HTML is the sitersquos structure
bull We can change the ldquoclothingrdquo anyIme without affecIng the structure of the site
PHOTO CREDIT PIXABAYCOM
This is the Twenty-shy‐Twelve WordPress Theme
With a few lines of custom CSS and a few images we can easily customize different elements of the website
LEARNING THE LINGOCSS can be made easier to understand by breaking down each ldquosentencerdquo into itrsquos individual components
Here is an example of a common CSS declaraIon as well as a diagram of what each CSS component is made of
bull The SELECTOR is what element of the website we want to change
bull The PROPERTY is what we want to change about it
bull The VALUE is what we are changing
HOW TO EDIT THEME CSS It is important that you take care howwhere you edit the CSS in your theme as you do not want to overwrite your changes with any theme updates and risk losing all of your hard work
Opon A Create a Child Theme
A child theme inherits the files of the parent theme but allows you to make changes to the theme files without risk of these changes being lost in theme updates Learn more about child themes here
hXpscodexwordpressorgChild_Themes
If creaIng a child theme is not the right soluIon for you or you would like a simple way to edit CSS quickly and easily you can use a plugin which is what we will demonstrate today
Opon B JetPack Plugin
The JetPack plugin provided by WordPresscom offers a number of features You can install it from the WordPressorg plugin directory or from within your WordPress dashboard
Learn more about JetPack here hXpjetpackme
TO ACTIVATE CUSTOM CSS IN JETPACK
Navigate to JetPack WordPress Dashboard Menu
Click on ldquoSe^ngsrdquo
Next hover over the ldquoCustom CSS Modulerdquo and click on ldquoAcIvaterdquo
You will now see the opIon ldquoEdit CSSrdquo under the ldquoAppearancerdquo secIon of the menu
IMPORTANT NOTE
Below Edit CSS is the link for ldquoEditorrdquo which will take you to the editor for ediIng core theme files It is VERY important that you do not edit this secIon unless using a child theme as all of your changes may be lost when the theme is updated
WE ARE NOW READY TO EDIT CSS
STEP 1 FINDING YOUR THEMErsquoS STYLES
For todayrsquos exercises we are going to use and modify the exisIng CSS of the Twenty Twelve WordPress theme Using an exisIng theme can someImes be easier than coding from scratch
In order to make changes to the CSS we need to find the selector we wish to change first
The easiest ways to do this are through the developer tools available in Google Chrome or Mozilla Firefox
Today we will be using Google Chrome
To launch the Inspector in Chrome all you need to do is right-shy‐click on the element you wish to change and choose ldquoInspect Elementrdquo
Try It
Click on Your Site Title Right Click and Choose ldquoInspect Elementrdquo from the Drop Down menu
You will see the HTML markup and the CSS Styles on the screen
Source Code CSS Styles
Here is a closer view of the CSS style for the site tle
In this instance the SELECTORS are site-shy‐header h1 a site-shy‐header h2 a
The PROPERTIES are color display and text-shy‐decoraIon
And the VALUES of these properIes are 515151 inline-shy‐block and none
EXERCISE 1 MODIFYING FONTS
For this exercise we will be making changes to the blog Itle text found at the top of blog arIcles on your site To locate the CSS for this element right click on any blog Itle on your test sitersquos home page
Next choose the Inspect Element opIon which will launch your browserrsquos developer tools
The TOP of the browser window is your SITE
The BOTTOM LEFT is the HTML of the site
The BOTTOM RIGHT is where you find your CSS STYLES
We can make changes right in our browser window to preview what the new style may look like These changes are ONLY TEMPORARY -shy‐ in order to apply them to your site you must place the code in the ldquoEdit CSSrdquo code editor provided by the JetPack plugin
Look for this snippet of code in the CSS Styles Window
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
WHAT IS CSSbull CSS is the abbreviated term for ldquoCascading Style Sheetrdquo
bull The code found within your themersquos CSS file determines the appearance of your site by applying style rules to HTML content which has no style of its own
CSS vs HTMLbull Think of CSS as ldquoclothingrdquo and the HTML as the ldquomannequinrdquo
bull CSS controls things such as colors spacing layout mobile-shy‐responsiveness and more
bull HTML is the sitersquos structure
bull We can change the ldquoclothingrdquo anyIme without affecIng the structure of the site
PHOTO CREDIT PIXABAYCOM
This is the Twenty-shy‐Twelve WordPress Theme
With a few lines of custom CSS and a few images we can easily customize different elements of the website
LEARNING THE LINGOCSS can be made easier to understand by breaking down each ldquosentencerdquo into itrsquos individual components
Here is an example of a common CSS declaraIon as well as a diagram of what each CSS component is made of
bull The SELECTOR is what element of the website we want to change
bull The PROPERTY is what we want to change about it
bull The VALUE is what we are changing
HOW TO EDIT THEME CSS It is important that you take care howwhere you edit the CSS in your theme as you do not want to overwrite your changes with any theme updates and risk losing all of your hard work
Opon A Create a Child Theme
A child theme inherits the files of the parent theme but allows you to make changes to the theme files without risk of these changes being lost in theme updates Learn more about child themes here
hXpscodexwordpressorgChild_Themes
If creaIng a child theme is not the right soluIon for you or you would like a simple way to edit CSS quickly and easily you can use a plugin which is what we will demonstrate today
Opon B JetPack Plugin
The JetPack plugin provided by WordPresscom offers a number of features You can install it from the WordPressorg plugin directory or from within your WordPress dashboard
Learn more about JetPack here hXpjetpackme
TO ACTIVATE CUSTOM CSS IN JETPACK
Navigate to JetPack WordPress Dashboard Menu
Click on ldquoSe^ngsrdquo
Next hover over the ldquoCustom CSS Modulerdquo and click on ldquoAcIvaterdquo
You will now see the opIon ldquoEdit CSSrdquo under the ldquoAppearancerdquo secIon of the menu
IMPORTANT NOTE
Below Edit CSS is the link for ldquoEditorrdquo which will take you to the editor for ediIng core theme files It is VERY important that you do not edit this secIon unless using a child theme as all of your changes may be lost when the theme is updated
WE ARE NOW READY TO EDIT CSS
STEP 1 FINDING YOUR THEMErsquoS STYLES
For todayrsquos exercises we are going to use and modify the exisIng CSS of the Twenty Twelve WordPress theme Using an exisIng theme can someImes be easier than coding from scratch
In order to make changes to the CSS we need to find the selector we wish to change first
The easiest ways to do this are through the developer tools available in Google Chrome or Mozilla Firefox
Today we will be using Google Chrome
To launch the Inspector in Chrome all you need to do is right-shy‐click on the element you wish to change and choose ldquoInspect Elementrdquo
Try It
Click on Your Site Title Right Click and Choose ldquoInspect Elementrdquo from the Drop Down menu
You will see the HTML markup and the CSS Styles on the screen
Source Code CSS Styles
Here is a closer view of the CSS style for the site tle
In this instance the SELECTORS are site-shy‐header h1 a site-shy‐header h2 a
The PROPERTIES are color display and text-shy‐decoraIon
And the VALUES of these properIes are 515151 inline-shy‐block and none
EXERCISE 1 MODIFYING FONTS
For this exercise we will be making changes to the blog Itle text found at the top of blog arIcles on your site To locate the CSS for this element right click on any blog Itle on your test sitersquos home page
Next choose the Inspect Element opIon which will launch your browserrsquos developer tools
The TOP of the browser window is your SITE
The BOTTOM LEFT is the HTML of the site
The BOTTOM RIGHT is where you find your CSS STYLES
We can make changes right in our browser window to preview what the new style may look like These changes are ONLY TEMPORARY -shy‐ in order to apply them to your site you must place the code in the ldquoEdit CSSrdquo code editor provided by the JetPack plugin
Look for this snippet of code in the CSS Styles Window
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
CSS vs HTMLbull Think of CSS as ldquoclothingrdquo and the HTML as the ldquomannequinrdquo
bull CSS controls things such as colors spacing layout mobile-shy‐responsiveness and more
bull HTML is the sitersquos structure
bull We can change the ldquoclothingrdquo anyIme without affecIng the structure of the site
PHOTO CREDIT PIXABAYCOM
This is the Twenty-shy‐Twelve WordPress Theme
With a few lines of custom CSS and a few images we can easily customize different elements of the website
LEARNING THE LINGOCSS can be made easier to understand by breaking down each ldquosentencerdquo into itrsquos individual components
Here is an example of a common CSS declaraIon as well as a diagram of what each CSS component is made of
bull The SELECTOR is what element of the website we want to change
bull The PROPERTY is what we want to change about it
bull The VALUE is what we are changing
HOW TO EDIT THEME CSS It is important that you take care howwhere you edit the CSS in your theme as you do not want to overwrite your changes with any theme updates and risk losing all of your hard work
Opon A Create a Child Theme
A child theme inherits the files of the parent theme but allows you to make changes to the theme files without risk of these changes being lost in theme updates Learn more about child themes here
hXpscodexwordpressorgChild_Themes
If creaIng a child theme is not the right soluIon for you or you would like a simple way to edit CSS quickly and easily you can use a plugin which is what we will demonstrate today
Opon B JetPack Plugin
The JetPack plugin provided by WordPresscom offers a number of features You can install it from the WordPressorg plugin directory or from within your WordPress dashboard
Learn more about JetPack here hXpjetpackme
TO ACTIVATE CUSTOM CSS IN JETPACK
Navigate to JetPack WordPress Dashboard Menu
Click on ldquoSe^ngsrdquo
Next hover over the ldquoCustom CSS Modulerdquo and click on ldquoAcIvaterdquo
You will now see the opIon ldquoEdit CSSrdquo under the ldquoAppearancerdquo secIon of the menu
IMPORTANT NOTE
Below Edit CSS is the link for ldquoEditorrdquo which will take you to the editor for ediIng core theme files It is VERY important that you do not edit this secIon unless using a child theme as all of your changes may be lost when the theme is updated
WE ARE NOW READY TO EDIT CSS
STEP 1 FINDING YOUR THEMErsquoS STYLES
For todayrsquos exercises we are going to use and modify the exisIng CSS of the Twenty Twelve WordPress theme Using an exisIng theme can someImes be easier than coding from scratch
In order to make changes to the CSS we need to find the selector we wish to change first
The easiest ways to do this are through the developer tools available in Google Chrome or Mozilla Firefox
Today we will be using Google Chrome
To launch the Inspector in Chrome all you need to do is right-shy‐click on the element you wish to change and choose ldquoInspect Elementrdquo
Try It
Click on Your Site Title Right Click and Choose ldquoInspect Elementrdquo from the Drop Down menu
You will see the HTML markup and the CSS Styles on the screen
Source Code CSS Styles
Here is a closer view of the CSS style for the site tle
In this instance the SELECTORS are site-shy‐header h1 a site-shy‐header h2 a
The PROPERTIES are color display and text-shy‐decoraIon
And the VALUES of these properIes are 515151 inline-shy‐block and none
EXERCISE 1 MODIFYING FONTS
For this exercise we will be making changes to the blog Itle text found at the top of blog arIcles on your site To locate the CSS for this element right click on any blog Itle on your test sitersquos home page
Next choose the Inspect Element opIon which will launch your browserrsquos developer tools
The TOP of the browser window is your SITE
The BOTTOM LEFT is the HTML of the site
The BOTTOM RIGHT is where you find your CSS STYLES
We can make changes right in our browser window to preview what the new style may look like These changes are ONLY TEMPORARY -shy‐ in order to apply them to your site you must place the code in the ldquoEdit CSSrdquo code editor provided by the JetPack plugin
Look for this snippet of code in the CSS Styles Window
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
This is the Twenty-shy‐Twelve WordPress Theme
With a few lines of custom CSS and a few images we can easily customize different elements of the website
LEARNING THE LINGOCSS can be made easier to understand by breaking down each ldquosentencerdquo into itrsquos individual components
Here is an example of a common CSS declaraIon as well as a diagram of what each CSS component is made of
bull The SELECTOR is what element of the website we want to change
bull The PROPERTY is what we want to change about it
bull The VALUE is what we are changing
HOW TO EDIT THEME CSS It is important that you take care howwhere you edit the CSS in your theme as you do not want to overwrite your changes with any theme updates and risk losing all of your hard work
Opon A Create a Child Theme
A child theme inherits the files of the parent theme but allows you to make changes to the theme files without risk of these changes being lost in theme updates Learn more about child themes here
hXpscodexwordpressorgChild_Themes
If creaIng a child theme is not the right soluIon for you or you would like a simple way to edit CSS quickly and easily you can use a plugin which is what we will demonstrate today
Opon B JetPack Plugin
The JetPack plugin provided by WordPresscom offers a number of features You can install it from the WordPressorg plugin directory or from within your WordPress dashboard
Learn more about JetPack here hXpjetpackme
TO ACTIVATE CUSTOM CSS IN JETPACK
Navigate to JetPack WordPress Dashboard Menu
Click on ldquoSe^ngsrdquo
Next hover over the ldquoCustom CSS Modulerdquo and click on ldquoAcIvaterdquo
You will now see the opIon ldquoEdit CSSrdquo under the ldquoAppearancerdquo secIon of the menu
IMPORTANT NOTE
Below Edit CSS is the link for ldquoEditorrdquo which will take you to the editor for ediIng core theme files It is VERY important that you do not edit this secIon unless using a child theme as all of your changes may be lost when the theme is updated
WE ARE NOW READY TO EDIT CSS
STEP 1 FINDING YOUR THEMErsquoS STYLES
For todayrsquos exercises we are going to use and modify the exisIng CSS of the Twenty Twelve WordPress theme Using an exisIng theme can someImes be easier than coding from scratch
In order to make changes to the CSS we need to find the selector we wish to change first
The easiest ways to do this are through the developer tools available in Google Chrome or Mozilla Firefox
Today we will be using Google Chrome
To launch the Inspector in Chrome all you need to do is right-shy‐click on the element you wish to change and choose ldquoInspect Elementrdquo
Try It
Click on Your Site Title Right Click and Choose ldquoInspect Elementrdquo from the Drop Down menu
You will see the HTML markup and the CSS Styles on the screen
Source Code CSS Styles
Here is a closer view of the CSS style for the site tle
In this instance the SELECTORS are site-shy‐header h1 a site-shy‐header h2 a
The PROPERTIES are color display and text-shy‐decoraIon
And the VALUES of these properIes are 515151 inline-shy‐block and none
EXERCISE 1 MODIFYING FONTS
For this exercise we will be making changes to the blog Itle text found at the top of blog arIcles on your site To locate the CSS for this element right click on any blog Itle on your test sitersquos home page
Next choose the Inspect Element opIon which will launch your browserrsquos developer tools
The TOP of the browser window is your SITE
The BOTTOM LEFT is the HTML of the site
The BOTTOM RIGHT is where you find your CSS STYLES
We can make changes right in our browser window to preview what the new style may look like These changes are ONLY TEMPORARY -shy‐ in order to apply them to your site you must place the code in the ldquoEdit CSSrdquo code editor provided by the JetPack plugin
Look for this snippet of code in the CSS Styles Window
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
With a few lines of custom CSS and a few images we can easily customize different elements of the website
LEARNING THE LINGOCSS can be made easier to understand by breaking down each ldquosentencerdquo into itrsquos individual components
Here is an example of a common CSS declaraIon as well as a diagram of what each CSS component is made of
bull The SELECTOR is what element of the website we want to change
bull The PROPERTY is what we want to change about it
bull The VALUE is what we are changing
HOW TO EDIT THEME CSS It is important that you take care howwhere you edit the CSS in your theme as you do not want to overwrite your changes with any theme updates and risk losing all of your hard work
Opon A Create a Child Theme
A child theme inherits the files of the parent theme but allows you to make changes to the theme files without risk of these changes being lost in theme updates Learn more about child themes here
hXpscodexwordpressorgChild_Themes
If creaIng a child theme is not the right soluIon for you or you would like a simple way to edit CSS quickly and easily you can use a plugin which is what we will demonstrate today
Opon B JetPack Plugin
The JetPack plugin provided by WordPresscom offers a number of features You can install it from the WordPressorg plugin directory or from within your WordPress dashboard
Learn more about JetPack here hXpjetpackme
TO ACTIVATE CUSTOM CSS IN JETPACK
Navigate to JetPack WordPress Dashboard Menu
Click on ldquoSe^ngsrdquo
Next hover over the ldquoCustom CSS Modulerdquo and click on ldquoAcIvaterdquo
You will now see the opIon ldquoEdit CSSrdquo under the ldquoAppearancerdquo secIon of the menu
IMPORTANT NOTE
Below Edit CSS is the link for ldquoEditorrdquo which will take you to the editor for ediIng core theme files It is VERY important that you do not edit this secIon unless using a child theme as all of your changes may be lost when the theme is updated
WE ARE NOW READY TO EDIT CSS
STEP 1 FINDING YOUR THEMErsquoS STYLES
For todayrsquos exercises we are going to use and modify the exisIng CSS of the Twenty Twelve WordPress theme Using an exisIng theme can someImes be easier than coding from scratch
In order to make changes to the CSS we need to find the selector we wish to change first
The easiest ways to do this are through the developer tools available in Google Chrome or Mozilla Firefox
Today we will be using Google Chrome
To launch the Inspector in Chrome all you need to do is right-shy‐click on the element you wish to change and choose ldquoInspect Elementrdquo
Try It
Click on Your Site Title Right Click and Choose ldquoInspect Elementrdquo from the Drop Down menu
You will see the HTML markup and the CSS Styles on the screen
Source Code CSS Styles
Here is a closer view of the CSS style for the site tle
In this instance the SELECTORS are site-shy‐header h1 a site-shy‐header h2 a
The PROPERTIES are color display and text-shy‐decoraIon
And the VALUES of these properIes are 515151 inline-shy‐block and none
EXERCISE 1 MODIFYING FONTS
For this exercise we will be making changes to the blog Itle text found at the top of blog arIcles on your site To locate the CSS for this element right click on any blog Itle on your test sitersquos home page
Next choose the Inspect Element opIon which will launch your browserrsquos developer tools
The TOP of the browser window is your SITE
The BOTTOM LEFT is the HTML of the site
The BOTTOM RIGHT is where you find your CSS STYLES
We can make changes right in our browser window to preview what the new style may look like These changes are ONLY TEMPORARY -shy‐ in order to apply them to your site you must place the code in the ldquoEdit CSSrdquo code editor provided by the JetPack plugin
Look for this snippet of code in the CSS Styles Window
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
LEARNING THE LINGOCSS can be made easier to understand by breaking down each ldquosentencerdquo into itrsquos individual components
Here is an example of a common CSS declaraIon as well as a diagram of what each CSS component is made of
bull The SELECTOR is what element of the website we want to change
bull The PROPERTY is what we want to change about it
bull The VALUE is what we are changing
HOW TO EDIT THEME CSS It is important that you take care howwhere you edit the CSS in your theme as you do not want to overwrite your changes with any theme updates and risk losing all of your hard work
Opon A Create a Child Theme
A child theme inherits the files of the parent theme but allows you to make changes to the theme files without risk of these changes being lost in theme updates Learn more about child themes here
hXpscodexwordpressorgChild_Themes
If creaIng a child theme is not the right soluIon for you or you would like a simple way to edit CSS quickly and easily you can use a plugin which is what we will demonstrate today
Opon B JetPack Plugin
The JetPack plugin provided by WordPresscom offers a number of features You can install it from the WordPressorg plugin directory or from within your WordPress dashboard
Learn more about JetPack here hXpjetpackme
TO ACTIVATE CUSTOM CSS IN JETPACK
Navigate to JetPack WordPress Dashboard Menu
Click on ldquoSe^ngsrdquo
Next hover over the ldquoCustom CSS Modulerdquo and click on ldquoAcIvaterdquo
You will now see the opIon ldquoEdit CSSrdquo under the ldquoAppearancerdquo secIon of the menu
IMPORTANT NOTE
Below Edit CSS is the link for ldquoEditorrdquo which will take you to the editor for ediIng core theme files It is VERY important that you do not edit this secIon unless using a child theme as all of your changes may be lost when the theme is updated
WE ARE NOW READY TO EDIT CSS
STEP 1 FINDING YOUR THEMErsquoS STYLES
For todayrsquos exercises we are going to use and modify the exisIng CSS of the Twenty Twelve WordPress theme Using an exisIng theme can someImes be easier than coding from scratch
In order to make changes to the CSS we need to find the selector we wish to change first
The easiest ways to do this are through the developer tools available in Google Chrome or Mozilla Firefox
Today we will be using Google Chrome
To launch the Inspector in Chrome all you need to do is right-shy‐click on the element you wish to change and choose ldquoInspect Elementrdquo
Try It
Click on Your Site Title Right Click and Choose ldquoInspect Elementrdquo from the Drop Down menu
You will see the HTML markup and the CSS Styles on the screen
Source Code CSS Styles
Here is a closer view of the CSS style for the site tle
In this instance the SELECTORS are site-shy‐header h1 a site-shy‐header h2 a
The PROPERTIES are color display and text-shy‐decoraIon
And the VALUES of these properIes are 515151 inline-shy‐block and none
EXERCISE 1 MODIFYING FONTS
For this exercise we will be making changes to the blog Itle text found at the top of blog arIcles on your site To locate the CSS for this element right click on any blog Itle on your test sitersquos home page
Next choose the Inspect Element opIon which will launch your browserrsquos developer tools
The TOP of the browser window is your SITE
The BOTTOM LEFT is the HTML of the site
The BOTTOM RIGHT is where you find your CSS STYLES
We can make changes right in our browser window to preview what the new style may look like These changes are ONLY TEMPORARY -shy‐ in order to apply them to your site you must place the code in the ldquoEdit CSSrdquo code editor provided by the JetPack plugin
Look for this snippet of code in the CSS Styles Window
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
bull The SELECTOR is what element of the website we want to change
bull The PROPERTY is what we want to change about it
bull The VALUE is what we are changing
HOW TO EDIT THEME CSS It is important that you take care howwhere you edit the CSS in your theme as you do not want to overwrite your changes with any theme updates and risk losing all of your hard work
Opon A Create a Child Theme
A child theme inherits the files of the parent theme but allows you to make changes to the theme files without risk of these changes being lost in theme updates Learn more about child themes here
hXpscodexwordpressorgChild_Themes
If creaIng a child theme is not the right soluIon for you or you would like a simple way to edit CSS quickly and easily you can use a plugin which is what we will demonstrate today
Opon B JetPack Plugin
The JetPack plugin provided by WordPresscom offers a number of features You can install it from the WordPressorg plugin directory or from within your WordPress dashboard
Learn more about JetPack here hXpjetpackme
TO ACTIVATE CUSTOM CSS IN JETPACK
Navigate to JetPack WordPress Dashboard Menu
Click on ldquoSe^ngsrdquo
Next hover over the ldquoCustom CSS Modulerdquo and click on ldquoAcIvaterdquo
You will now see the opIon ldquoEdit CSSrdquo under the ldquoAppearancerdquo secIon of the menu
IMPORTANT NOTE
Below Edit CSS is the link for ldquoEditorrdquo which will take you to the editor for ediIng core theme files It is VERY important that you do not edit this secIon unless using a child theme as all of your changes may be lost when the theme is updated
WE ARE NOW READY TO EDIT CSS
STEP 1 FINDING YOUR THEMErsquoS STYLES
For todayrsquos exercises we are going to use and modify the exisIng CSS of the Twenty Twelve WordPress theme Using an exisIng theme can someImes be easier than coding from scratch
In order to make changes to the CSS we need to find the selector we wish to change first
The easiest ways to do this are through the developer tools available in Google Chrome or Mozilla Firefox
Today we will be using Google Chrome
To launch the Inspector in Chrome all you need to do is right-shy‐click on the element you wish to change and choose ldquoInspect Elementrdquo
Try It
Click on Your Site Title Right Click and Choose ldquoInspect Elementrdquo from the Drop Down menu
You will see the HTML markup and the CSS Styles on the screen
Source Code CSS Styles
Here is a closer view of the CSS style for the site tle
In this instance the SELECTORS are site-shy‐header h1 a site-shy‐header h2 a
The PROPERTIES are color display and text-shy‐decoraIon
And the VALUES of these properIes are 515151 inline-shy‐block and none
EXERCISE 1 MODIFYING FONTS
For this exercise we will be making changes to the blog Itle text found at the top of blog arIcles on your site To locate the CSS for this element right click on any blog Itle on your test sitersquos home page
Next choose the Inspect Element opIon which will launch your browserrsquos developer tools
The TOP of the browser window is your SITE
The BOTTOM LEFT is the HTML of the site
The BOTTOM RIGHT is where you find your CSS STYLES
We can make changes right in our browser window to preview what the new style may look like These changes are ONLY TEMPORARY -shy‐ in order to apply them to your site you must place the code in the ldquoEdit CSSrdquo code editor provided by the JetPack plugin
Look for this snippet of code in the CSS Styles Window
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
HOW TO EDIT THEME CSS It is important that you take care howwhere you edit the CSS in your theme as you do not want to overwrite your changes with any theme updates and risk losing all of your hard work
Opon A Create a Child Theme
A child theme inherits the files of the parent theme but allows you to make changes to the theme files without risk of these changes being lost in theme updates Learn more about child themes here
hXpscodexwordpressorgChild_Themes
If creaIng a child theme is not the right soluIon for you or you would like a simple way to edit CSS quickly and easily you can use a plugin which is what we will demonstrate today
Opon B JetPack Plugin
The JetPack plugin provided by WordPresscom offers a number of features You can install it from the WordPressorg plugin directory or from within your WordPress dashboard
Learn more about JetPack here hXpjetpackme
TO ACTIVATE CUSTOM CSS IN JETPACK
Navigate to JetPack WordPress Dashboard Menu
Click on ldquoSe^ngsrdquo
Next hover over the ldquoCustom CSS Modulerdquo and click on ldquoAcIvaterdquo
You will now see the opIon ldquoEdit CSSrdquo under the ldquoAppearancerdquo secIon of the menu
IMPORTANT NOTE
Below Edit CSS is the link for ldquoEditorrdquo which will take you to the editor for ediIng core theme files It is VERY important that you do not edit this secIon unless using a child theme as all of your changes may be lost when the theme is updated
WE ARE NOW READY TO EDIT CSS
STEP 1 FINDING YOUR THEMErsquoS STYLES
For todayrsquos exercises we are going to use and modify the exisIng CSS of the Twenty Twelve WordPress theme Using an exisIng theme can someImes be easier than coding from scratch
In order to make changes to the CSS we need to find the selector we wish to change first
The easiest ways to do this are through the developer tools available in Google Chrome or Mozilla Firefox
Today we will be using Google Chrome
To launch the Inspector in Chrome all you need to do is right-shy‐click on the element you wish to change and choose ldquoInspect Elementrdquo
Try It
Click on Your Site Title Right Click and Choose ldquoInspect Elementrdquo from the Drop Down menu
You will see the HTML markup and the CSS Styles on the screen
Source Code CSS Styles
Here is a closer view of the CSS style for the site tle
In this instance the SELECTORS are site-shy‐header h1 a site-shy‐header h2 a
The PROPERTIES are color display and text-shy‐decoraIon
And the VALUES of these properIes are 515151 inline-shy‐block and none
EXERCISE 1 MODIFYING FONTS
For this exercise we will be making changes to the blog Itle text found at the top of blog arIcles on your site To locate the CSS for this element right click on any blog Itle on your test sitersquos home page
Next choose the Inspect Element opIon which will launch your browserrsquos developer tools
The TOP of the browser window is your SITE
The BOTTOM LEFT is the HTML of the site
The BOTTOM RIGHT is where you find your CSS STYLES
We can make changes right in our browser window to preview what the new style may look like These changes are ONLY TEMPORARY -shy‐ in order to apply them to your site you must place the code in the ldquoEdit CSSrdquo code editor provided by the JetPack plugin
Look for this snippet of code in the CSS Styles Window
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
If creaIng a child theme is not the right soluIon for you or you would like a simple way to edit CSS quickly and easily you can use a plugin which is what we will demonstrate today
Opon B JetPack Plugin
The JetPack plugin provided by WordPresscom offers a number of features You can install it from the WordPressorg plugin directory or from within your WordPress dashboard
Learn more about JetPack here hXpjetpackme
TO ACTIVATE CUSTOM CSS IN JETPACK
Navigate to JetPack WordPress Dashboard Menu
Click on ldquoSe^ngsrdquo
Next hover over the ldquoCustom CSS Modulerdquo and click on ldquoAcIvaterdquo
You will now see the opIon ldquoEdit CSSrdquo under the ldquoAppearancerdquo secIon of the menu
IMPORTANT NOTE
Below Edit CSS is the link for ldquoEditorrdquo which will take you to the editor for ediIng core theme files It is VERY important that you do not edit this secIon unless using a child theme as all of your changes may be lost when the theme is updated
WE ARE NOW READY TO EDIT CSS
STEP 1 FINDING YOUR THEMErsquoS STYLES
For todayrsquos exercises we are going to use and modify the exisIng CSS of the Twenty Twelve WordPress theme Using an exisIng theme can someImes be easier than coding from scratch
In order to make changes to the CSS we need to find the selector we wish to change first
The easiest ways to do this are through the developer tools available in Google Chrome or Mozilla Firefox
Today we will be using Google Chrome
To launch the Inspector in Chrome all you need to do is right-shy‐click on the element you wish to change and choose ldquoInspect Elementrdquo
Try It
Click on Your Site Title Right Click and Choose ldquoInspect Elementrdquo from the Drop Down menu
You will see the HTML markup and the CSS Styles on the screen
Source Code CSS Styles
Here is a closer view of the CSS style for the site tle
In this instance the SELECTORS are site-shy‐header h1 a site-shy‐header h2 a
The PROPERTIES are color display and text-shy‐decoraIon
And the VALUES of these properIes are 515151 inline-shy‐block and none
EXERCISE 1 MODIFYING FONTS
For this exercise we will be making changes to the blog Itle text found at the top of blog arIcles on your site To locate the CSS for this element right click on any blog Itle on your test sitersquos home page
Next choose the Inspect Element opIon which will launch your browserrsquos developer tools
The TOP of the browser window is your SITE
The BOTTOM LEFT is the HTML of the site
The BOTTOM RIGHT is where you find your CSS STYLES
We can make changes right in our browser window to preview what the new style may look like These changes are ONLY TEMPORARY -shy‐ in order to apply them to your site you must place the code in the ldquoEdit CSSrdquo code editor provided by the JetPack plugin
Look for this snippet of code in the CSS Styles Window
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
TO ACTIVATE CUSTOM CSS IN JETPACK
Navigate to JetPack WordPress Dashboard Menu
Click on ldquoSe^ngsrdquo
Next hover over the ldquoCustom CSS Modulerdquo and click on ldquoAcIvaterdquo
You will now see the opIon ldquoEdit CSSrdquo under the ldquoAppearancerdquo secIon of the menu
IMPORTANT NOTE
Below Edit CSS is the link for ldquoEditorrdquo which will take you to the editor for ediIng core theme files It is VERY important that you do not edit this secIon unless using a child theme as all of your changes may be lost when the theme is updated
WE ARE NOW READY TO EDIT CSS
STEP 1 FINDING YOUR THEMErsquoS STYLES
For todayrsquos exercises we are going to use and modify the exisIng CSS of the Twenty Twelve WordPress theme Using an exisIng theme can someImes be easier than coding from scratch
In order to make changes to the CSS we need to find the selector we wish to change first
The easiest ways to do this are through the developer tools available in Google Chrome or Mozilla Firefox
Today we will be using Google Chrome
To launch the Inspector in Chrome all you need to do is right-shy‐click on the element you wish to change and choose ldquoInspect Elementrdquo
Try It
Click on Your Site Title Right Click and Choose ldquoInspect Elementrdquo from the Drop Down menu
You will see the HTML markup and the CSS Styles on the screen
Source Code CSS Styles
Here is a closer view of the CSS style for the site tle
In this instance the SELECTORS are site-shy‐header h1 a site-shy‐header h2 a
The PROPERTIES are color display and text-shy‐decoraIon
And the VALUES of these properIes are 515151 inline-shy‐block and none
EXERCISE 1 MODIFYING FONTS
For this exercise we will be making changes to the blog Itle text found at the top of blog arIcles on your site To locate the CSS for this element right click on any blog Itle on your test sitersquos home page
Next choose the Inspect Element opIon which will launch your browserrsquos developer tools
The TOP of the browser window is your SITE
The BOTTOM LEFT is the HTML of the site
The BOTTOM RIGHT is where you find your CSS STYLES
We can make changes right in our browser window to preview what the new style may look like These changes are ONLY TEMPORARY -shy‐ in order to apply them to your site you must place the code in the ldquoEdit CSSrdquo code editor provided by the JetPack plugin
Look for this snippet of code in the CSS Styles Window
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
Next hover over the ldquoCustom CSS Modulerdquo and click on ldquoAcIvaterdquo
You will now see the opIon ldquoEdit CSSrdquo under the ldquoAppearancerdquo secIon of the menu
IMPORTANT NOTE
Below Edit CSS is the link for ldquoEditorrdquo which will take you to the editor for ediIng core theme files It is VERY important that you do not edit this secIon unless using a child theme as all of your changes may be lost when the theme is updated
WE ARE NOW READY TO EDIT CSS
STEP 1 FINDING YOUR THEMErsquoS STYLES
For todayrsquos exercises we are going to use and modify the exisIng CSS of the Twenty Twelve WordPress theme Using an exisIng theme can someImes be easier than coding from scratch
In order to make changes to the CSS we need to find the selector we wish to change first
The easiest ways to do this are through the developer tools available in Google Chrome or Mozilla Firefox
Today we will be using Google Chrome
To launch the Inspector in Chrome all you need to do is right-shy‐click on the element you wish to change and choose ldquoInspect Elementrdquo
Try It
Click on Your Site Title Right Click and Choose ldquoInspect Elementrdquo from the Drop Down menu
You will see the HTML markup and the CSS Styles on the screen
Source Code CSS Styles
Here is a closer view of the CSS style for the site tle
In this instance the SELECTORS are site-shy‐header h1 a site-shy‐header h2 a
The PROPERTIES are color display and text-shy‐decoraIon
And the VALUES of these properIes are 515151 inline-shy‐block and none
EXERCISE 1 MODIFYING FONTS
For this exercise we will be making changes to the blog Itle text found at the top of blog arIcles on your site To locate the CSS for this element right click on any blog Itle on your test sitersquos home page
Next choose the Inspect Element opIon which will launch your browserrsquos developer tools
The TOP of the browser window is your SITE
The BOTTOM LEFT is the HTML of the site
The BOTTOM RIGHT is where you find your CSS STYLES
We can make changes right in our browser window to preview what the new style may look like These changes are ONLY TEMPORARY -shy‐ in order to apply them to your site you must place the code in the ldquoEdit CSSrdquo code editor provided by the JetPack plugin
Look for this snippet of code in the CSS Styles Window
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
You will now see the opIon ldquoEdit CSSrdquo under the ldquoAppearancerdquo secIon of the menu
IMPORTANT NOTE
Below Edit CSS is the link for ldquoEditorrdquo which will take you to the editor for ediIng core theme files It is VERY important that you do not edit this secIon unless using a child theme as all of your changes may be lost when the theme is updated
WE ARE NOW READY TO EDIT CSS
STEP 1 FINDING YOUR THEMErsquoS STYLES
For todayrsquos exercises we are going to use and modify the exisIng CSS of the Twenty Twelve WordPress theme Using an exisIng theme can someImes be easier than coding from scratch
In order to make changes to the CSS we need to find the selector we wish to change first
The easiest ways to do this are through the developer tools available in Google Chrome or Mozilla Firefox
Today we will be using Google Chrome
To launch the Inspector in Chrome all you need to do is right-shy‐click on the element you wish to change and choose ldquoInspect Elementrdquo
Try It
Click on Your Site Title Right Click and Choose ldquoInspect Elementrdquo from the Drop Down menu
You will see the HTML markup and the CSS Styles on the screen
Source Code CSS Styles
Here is a closer view of the CSS style for the site tle
In this instance the SELECTORS are site-shy‐header h1 a site-shy‐header h2 a
The PROPERTIES are color display and text-shy‐decoraIon
And the VALUES of these properIes are 515151 inline-shy‐block and none
EXERCISE 1 MODIFYING FONTS
For this exercise we will be making changes to the blog Itle text found at the top of blog arIcles on your site To locate the CSS for this element right click on any blog Itle on your test sitersquos home page
Next choose the Inspect Element opIon which will launch your browserrsquos developer tools
The TOP of the browser window is your SITE
The BOTTOM LEFT is the HTML of the site
The BOTTOM RIGHT is where you find your CSS STYLES
We can make changes right in our browser window to preview what the new style may look like These changes are ONLY TEMPORARY -shy‐ in order to apply them to your site you must place the code in the ldquoEdit CSSrdquo code editor provided by the JetPack plugin
Look for this snippet of code in the CSS Styles Window
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
WE ARE NOW READY TO EDIT CSS
STEP 1 FINDING YOUR THEMErsquoS STYLES
For todayrsquos exercises we are going to use and modify the exisIng CSS of the Twenty Twelve WordPress theme Using an exisIng theme can someImes be easier than coding from scratch
In order to make changes to the CSS we need to find the selector we wish to change first
The easiest ways to do this are through the developer tools available in Google Chrome or Mozilla Firefox
Today we will be using Google Chrome
To launch the Inspector in Chrome all you need to do is right-shy‐click on the element you wish to change and choose ldquoInspect Elementrdquo
Try It
Click on Your Site Title Right Click and Choose ldquoInspect Elementrdquo from the Drop Down menu
You will see the HTML markup and the CSS Styles on the screen
Source Code CSS Styles
Here is a closer view of the CSS style for the site tle
In this instance the SELECTORS are site-shy‐header h1 a site-shy‐header h2 a
The PROPERTIES are color display and text-shy‐decoraIon
And the VALUES of these properIes are 515151 inline-shy‐block and none
EXERCISE 1 MODIFYING FONTS
For this exercise we will be making changes to the blog Itle text found at the top of blog arIcles on your site To locate the CSS for this element right click on any blog Itle on your test sitersquos home page
Next choose the Inspect Element opIon which will launch your browserrsquos developer tools
The TOP of the browser window is your SITE
The BOTTOM LEFT is the HTML of the site
The BOTTOM RIGHT is where you find your CSS STYLES
We can make changes right in our browser window to preview what the new style may look like These changes are ONLY TEMPORARY -shy‐ in order to apply them to your site you must place the code in the ldquoEdit CSSrdquo code editor provided by the JetPack plugin
Look for this snippet of code in the CSS Styles Window
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
STEP 1 FINDING YOUR THEMErsquoS STYLES
For todayrsquos exercises we are going to use and modify the exisIng CSS of the Twenty Twelve WordPress theme Using an exisIng theme can someImes be easier than coding from scratch
In order to make changes to the CSS we need to find the selector we wish to change first
The easiest ways to do this are through the developer tools available in Google Chrome or Mozilla Firefox
Today we will be using Google Chrome
To launch the Inspector in Chrome all you need to do is right-shy‐click on the element you wish to change and choose ldquoInspect Elementrdquo
Try It
Click on Your Site Title Right Click and Choose ldquoInspect Elementrdquo from the Drop Down menu
You will see the HTML markup and the CSS Styles on the screen
Source Code CSS Styles
Here is a closer view of the CSS style for the site tle
In this instance the SELECTORS are site-shy‐header h1 a site-shy‐header h2 a
The PROPERTIES are color display and text-shy‐decoraIon
And the VALUES of these properIes are 515151 inline-shy‐block and none
EXERCISE 1 MODIFYING FONTS
For this exercise we will be making changes to the blog Itle text found at the top of blog arIcles on your site To locate the CSS for this element right click on any blog Itle on your test sitersquos home page
Next choose the Inspect Element opIon which will launch your browserrsquos developer tools
The TOP of the browser window is your SITE
The BOTTOM LEFT is the HTML of the site
The BOTTOM RIGHT is where you find your CSS STYLES
We can make changes right in our browser window to preview what the new style may look like These changes are ONLY TEMPORARY -shy‐ in order to apply them to your site you must place the code in the ldquoEdit CSSrdquo code editor provided by the JetPack plugin
Look for this snippet of code in the CSS Styles Window
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
To launch the Inspector in Chrome all you need to do is right-shy‐click on the element you wish to change and choose ldquoInspect Elementrdquo
Try It
Click on Your Site Title Right Click and Choose ldquoInspect Elementrdquo from the Drop Down menu
You will see the HTML markup and the CSS Styles on the screen
Source Code CSS Styles
Here is a closer view of the CSS style for the site tle
In this instance the SELECTORS are site-shy‐header h1 a site-shy‐header h2 a
The PROPERTIES are color display and text-shy‐decoraIon
And the VALUES of these properIes are 515151 inline-shy‐block and none
EXERCISE 1 MODIFYING FONTS
For this exercise we will be making changes to the blog Itle text found at the top of blog arIcles on your site To locate the CSS for this element right click on any blog Itle on your test sitersquos home page
Next choose the Inspect Element opIon which will launch your browserrsquos developer tools
The TOP of the browser window is your SITE
The BOTTOM LEFT is the HTML of the site
The BOTTOM RIGHT is where you find your CSS STYLES
We can make changes right in our browser window to preview what the new style may look like These changes are ONLY TEMPORARY -shy‐ in order to apply them to your site you must place the code in the ldquoEdit CSSrdquo code editor provided by the JetPack plugin
Look for this snippet of code in the CSS Styles Window
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
You will see the HTML markup and the CSS Styles on the screen
Source Code CSS Styles
Here is a closer view of the CSS style for the site tle
In this instance the SELECTORS are site-shy‐header h1 a site-shy‐header h2 a
The PROPERTIES are color display and text-shy‐decoraIon
And the VALUES of these properIes are 515151 inline-shy‐block and none
EXERCISE 1 MODIFYING FONTS
For this exercise we will be making changes to the blog Itle text found at the top of blog arIcles on your site To locate the CSS for this element right click on any blog Itle on your test sitersquos home page
Next choose the Inspect Element opIon which will launch your browserrsquos developer tools
The TOP of the browser window is your SITE
The BOTTOM LEFT is the HTML of the site
The BOTTOM RIGHT is where you find your CSS STYLES
We can make changes right in our browser window to preview what the new style may look like These changes are ONLY TEMPORARY -shy‐ in order to apply them to your site you must place the code in the ldquoEdit CSSrdquo code editor provided by the JetPack plugin
Look for this snippet of code in the CSS Styles Window
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
Here is a closer view of the CSS style for the site tle
In this instance the SELECTORS are site-shy‐header h1 a site-shy‐header h2 a
The PROPERTIES are color display and text-shy‐decoraIon
And the VALUES of these properIes are 515151 inline-shy‐block and none
EXERCISE 1 MODIFYING FONTS
For this exercise we will be making changes to the blog Itle text found at the top of blog arIcles on your site To locate the CSS for this element right click on any blog Itle on your test sitersquos home page
Next choose the Inspect Element opIon which will launch your browserrsquos developer tools
The TOP of the browser window is your SITE
The BOTTOM LEFT is the HTML of the site
The BOTTOM RIGHT is where you find your CSS STYLES
We can make changes right in our browser window to preview what the new style may look like These changes are ONLY TEMPORARY -shy‐ in order to apply them to your site you must place the code in the ldquoEdit CSSrdquo code editor provided by the JetPack plugin
Look for this snippet of code in the CSS Styles Window
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
EXERCISE 1 MODIFYING FONTS
For this exercise we will be making changes to the blog Itle text found at the top of blog arIcles on your site To locate the CSS for this element right click on any blog Itle on your test sitersquos home page
Next choose the Inspect Element opIon which will launch your browserrsquos developer tools
The TOP of the browser window is your SITE
The BOTTOM LEFT is the HTML of the site
The BOTTOM RIGHT is where you find your CSS STYLES
We can make changes right in our browser window to preview what the new style may look like These changes are ONLY TEMPORARY -shy‐ in order to apply them to your site you must place the code in the ldquoEdit CSSrdquo code editor provided by the JetPack plugin
Look for this snippet of code in the CSS Styles Window
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
The TOP of the browser window is your SITE
The BOTTOM LEFT is the HTML of the site
The BOTTOM RIGHT is where you find your CSS STYLES
We can make changes right in our browser window to preview what the new style may look like These changes are ONLY TEMPORARY -shy‐ in order to apply them to your site you must place the code in the ldquoEdit CSSrdquo code editor provided by the JetPack plugin
Look for this snippet of code in the CSS Styles Window
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
We can make changes right in our browser window to preview what the new style may look like These changes are ONLY TEMPORARY -shy‐ in order to apply them to your site you must place the code in the ldquoEdit CSSrdquo code editor provided by the JetPack plugin
Look for this snippet of code in the CSS Styles Window
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
In this example right now the only styling for the Blog Post Titles is that there is no underline underneath the link
We can edit this code in our browser window to change the font-shy‐size font-shy‐weight and font-shy‐style
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
Click on the CSS box and create a new line of properIes
The First Property we will be adding is Font-shy‐Size
Type Font-shy‐Size then hit tab to enter ldquo40pxrdquo
Next hit enter and type Font-shy‐Weight hit tab type in ldquoboldrdquo and press ldquoEnterrdquo
Lastly type ldquoFont-shy‐Stylerdquo hit tab type in ldquoitalicrdquo and hit enter
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
Here is what your screen should look like
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
Select this code and ldquoCopyrdquo to your clipboard so you can paste it into the Jetpack Custom CSS Editor
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
Navigate to your WordPress Dashboard and Select ldquoAppearance -shy‐gt ldquoEdit CSSrdquo
Paste the code into the Custom CSS Editor and click the blue ldquoSave Stylesheetrdquo BuXon to save your changes
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
Our Blog Titles Now Look Like This
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
EXERCISE 2 BACKGROUND COLORS AND PADDING
For this exercise we will change the background color of the sIcky post from white to blue using background colors and padding
A ldquosIcky postrdquo in WordPress is a post which ldquosIcksrdquo or stays at top on the front page of the blog
This is a great way to place a welcome message special announcement or other informaIon that does not change frequently and draw aXenIon to it for your website visitors
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
To get started first select the ldquoFeatured Postrdquo secIon and right-shy‐click to launch the Inspector in Google Chrome
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
We are going to be doing something else to our sIcky posts so hide this feature by simply adding the following rule
displaynone
This causes the ldquoFeatured Postrdquo element to no longer be displayed s for this element are already in the themersquos CSS we only need to add our custom declaraIon
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
Because this change is only in the inspector we will again need to copy this into our JetPack CSS editor in the Dashboard Unlike last Ime though we can simplify this to only include the rule we added like so
Doing this keeps our custom CSS from ge^ng too bloated Since the other styles for this element are already in the themersquos CSS we only need to add our custom declaraIon
arIclesIcky featured-shy‐post display none
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
Now letrsquos style the SIcky Post itself Find and highlight the long line on the HTML pane in the inspector that says
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
You will noIce that when you highlight this line of code there isnrsquot any matching CSS we can use to style this sIcky post The only one displayed is site-shy‐content arIcle when ideally we would be looking for a style with sIcky in it
The good news is we can use the inspector to add new styles to our site
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
To Add a new style to your site -shy‐ click on the ldquo+rdquo icon to add a new style rule
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
You will noIce that when the new declaraIon is created in the inspector it shows the selector as
articlepost-shy‐4
However that is not quite what we want If leo as-shy‐is this style rule would only apply to arIcles with an ID that is equal to ldquo4rdquo which is the exact post we are on as it is the 4th post we have created on our test site
In this case we will need to create a new style declaraIon on our own rather than use one that exists already
We can get around this by modifying the selector to instead say arIclesIcky which in plain English works out to something like ldquoApply this rule to all arIcles that have the class equal to ldquosIckyrdquo which means this post plus any sIcky posts we make in the futurerdquo
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
Click on the selector to change it to arIclesIcky
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
ID vs Class
You may noIce while working with CSS some selectors have a ldquordquo in front of them and some have a ldquordquo in front of them This is used to denote if there is an ID or a class associated with this HTML element Letrsquos look at the original HTML that was highlighted in our inspector
arIcle id=post-shy‐4 class=post-shy‐4 post type-shy‐post status-shy‐publish format-shy‐standard sIcky hentry category-shy‐uncategorized
In this case you would add a ldquordquo in front of post-shy‐4 because in the original markup it appears as id=rdquopost-shy‐4ʺPrime whereas we added a ldquordquo in front of sIcky because it appears as class=rdquosIckyrdquo in the original markup
In most cases IDs are used for non-shy‐repeaIng secIons of a website such as header navigaIon or footer -shy‐ classes are used for the majority of the other elements which may repeat for easier styling
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
Now that we have created our new selector letrsquos add some styles to it Start by applying the following background color
background D0EAF3
This will give us a screen that looks like this
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
If you want to experiment with the color a bit you can click on the Iny swatch next to the hex code D0EAF3 which will bring up a color mixer tool
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
Since the original theme CSS files did not include a background color you will see the text and the image go all the way to the edge of the box The way to fix this is to add some padding
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
To add padding type this in the Inspector Window right below the background declaraIon
padding 20px
Now our screen will look like this
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
REMEMBER Styles entered in the Inspector Window are NOT permanent and will disappear when the page is refreshed
Letrsquos copy our style as we did in the previous exercise and paste into the JetPack Custom CSS Editor and save our changes
Now refresh your browser window and admire your work
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
EXERCISE 3 SITE TITLE AND BACKGROUND IMAGE
Our final exercise is to change the site Itle to an image logo and to create a background image This is an easy way to add your own custom branding to your website
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
CHANGING THE HEADER BACKGROUND IMAGE
To change the header background image in the Twenty Twelve theme we need to first upload our image to the media folder Click on ldquoAdd Newrdquo to drop or select a file for uploading In our resources available to download
we have included an image for you to use as your background
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
Once uploaded copy the link for the image which is located in the top right as the URL field
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
For this exercise click on the element of the HTML highlighted below This will bring up the body site class to be styled in the inspector
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
Add the following to the line below
background url(lsquohXpyourimagelinkherejpgrsquo)
Paste the URL of the image you uploaded to replace hXpyourimagelinkherejpg
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
Currently the image is Iling along the page Since the image is designed to fade to white letrsquos add a bit of code to this
FFF url(lsquohXpyourimagelinkherejpg) no-shy‐repeat
The FFF declares the background will be white and the no-shy‐repeat aoer the URL declares the image should only appear once
Copy the code to your clipboard and paste in the JetPack Custom CSS Editor and save your changes
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
Here is what our custom CSS file looks like so far
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
Our final step is to add a logo Once again go to the Media Library and upload or select your logo image and copy the URL
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
We are going to add the logo just as we did the custom header background image
Click on the Site Title and Inspect Element Add the following code to the site-shy‐header h1 a site-shy‐
header h2 a selectors
background url(hXpmycustomlogolinkpng) top leo no-shy‐repeat
In this example we are adding ldquotop leo no-shy‐repeatrdquo to the value to state we only want the image to appear in the top
leo of the website and to not repeat across the page Be sure to replace hXpmycustomlogolinkpng with the
URL you copied in the previous step
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
Right now our logo looks something like this
We can make this look much beXer by adding just a few addiIonal properIes
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
Add this line of code
text-shy‐indent -shy‐9999px
Hiding the Site Title Text
In our earlier example when we wanted to hide an element we used ldquodisplaynonerdquo However you need to display the Itle of your site to make it user-shy‐friendly and accessible to those who may be using a screen reader or other method for using the internet
So in this instance we are going to indent the text by -shy‐9999px which will move it off the screen but sIll make it accessible by those who may need the text version of the site Itle
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
height 100px width 440px
Lastly we need to make the ldquoboxrdquo for the logo space to fit the dimensions of the logo This can be achieved simply by declaring a height and width Add this to the code you have so far
Copy your changes and paste into the JetPack Custom CSS Editor
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
OUR FINAL PRODUCT
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
QuesEons Want to Learn More
Connect with us
hMpwppiMsburghcom
hMpswwwfacebookcomgroupswppiMsburgh
hMptwiMercomwppgh
hMpwwwmeetupcomPiMsburgh-shy‐WordPress-shy‐Developers-shy‐Designers
