Tonight we shared a simple way to edit your CSS using the Jetpack Custom CSS module.
For those who were unable to make tonight's Meetup or would like to follow along again with the presentation, here is the material we covered as well as a few exercises to try.
To download the resources used in this example, as well as tips for setting up your own local development server, you can find more information here:
http://www.meetup.com/Pittsburgh-WordPress-Developers-Designers/pages/Into_to_CSS_Files_and_Resources/
An introduction to WordPress theme development by Thad Allender from GraphPaperPress.com. Slides from WordPress December 2010 Meetup at Fathom Creative in Washington, D.C.
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
HTML and CSS can be a little daunting at first. This workshop covers the basics, breaks down the barrier to entry and shows you how you can start using HTML and CSS now.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
Stepping into theme development can be daunting. Sure anyone with a little PHP skill and a basic understanding of the loop can create theme templates, but there are a number of things you can learn which can take your theme development to the next level. We’ll discuss the skills that can take you from a beginner theme developer to a master.
An introduction to WordPress theme development by Thad Allender from GraphPaperPress.com. Slides from WordPress December 2010 Meetup at Fathom Creative in Washington, D.C.
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
HTML and CSS can be a little daunting at first. This workshop covers the basics, breaks down the barrier to entry and shows you how you can start using HTML and CSS now.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
Stepping into theme development can be daunting. Sure anyone with a little PHP skill and a basic understanding of the loop can create theme templates, but there are a number of things you can learn which can take your theme development to the next level. We’ll discuss the skills that can take you from a beginner theme developer to a master.
There are a million ways to write HTML and CSS, and everyone has their own, but is there a right way? Our code needs to be well structured, written in an organized manner, and performance driven. Sharing code amongst a team should be a joyful experience, not absolute terror.
Shay talks about how to how to write tactical HTML and CSS, crafting code that is maintainable, flexible, and extensible. Covering new methodologies such as OOCSS and SMACSS learn how to architect websites which are manageable and performant.
This presentation will introduce the audience to designing a WordPress theme in HTML5 and CSS3. We’ll discuss the history of HTML5, why HTML5 makes blog design easier, and what you need to do to get WordPress to output valid HTML5 code. You’ll also see how CSS3 can be used to generate an awesome-looking site using little to no graphics.
There are a million ways to write HTML and CSS, and everyone has their own, but is there a right way? Our code needs to be well structured, written in an organized manner, and performance driven. Sharing code amongst a team should be a joyful experience, not absolute terror.
Shay talks about how to how to write tactical HTML and CSS, crafting code that is maintainable, flexible, and extensible. Covering new methodologies such as OOCSS and SMACSS learn how to architect websites which are manageable and performant.
This presentation will introduce the audience to designing a WordPress theme in HTML5 and CSS3. We’ll discuss the history of HTML5, why HTML5 makes blog design easier, and what you need to do to get WordPress to output valid HTML5 code. You’ll also see how CSS3 can be used to generate an awesome-looking site using little to no graphics.
Website development company in delhi ncrCss Founder
Website Development Company is fastest growing company in the IT market for the website design and development. we are best website development company in India as well as in USA we are based in Noida and Delhi NCR. Website development company is powered by Css Founder.com
Kyle goes over the difference between static and dynamic sites, how easy it is to use WordPress and ExpressionEngine, and goes over hypothetical situations.
https://slocumthemes.com/build-perfect-wordpress-website/
NOT downloadable from here. Please, download from Slocum page
How To Build The Perfect
WordPress Website
A 9-Part course by SlocumThemes.com
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Unlocking Productivity: Leveraging the Potential of Copilot in Microsoft 365, a presentation by Christoforos Vlachos, Senior Solutions Manager – Modern Workplace, Uni Systems
Pushing the limits of ePRTC: 100ns holdover for 100 daysAdtran
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionAggregage
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...Neo4j
Leonard Jayamohan, Partner & Generative AI Lead, Deloitte
This keynote will reveal how Deloitte leverages Neo4j’s graph power for groundbreaking digital twin solutions, achieving a staggering 100x performance boost. Discover the essential role knowledge graphs play in successful generative AI implementations. Plus, get an exclusive look at an innovative Neo4j + Generative AI solution Deloitte is developing in-house.
A tale of scale & speed: How the US Navy is enabling software delivery from l...sonjaschweigert1
Rapid and secure feature delivery is a goal across every application team and every branch of the DoD. The Navy’s DevSecOps platform, Party Barge, has achieved:
- Reduction in onboarding time from 5 weeks to 1 day
- Improved developer experience and productivity through actionable findings and reduction of false positives
- Maintenance of superior security standards and inherent policy enforcement with Authorization to Operate (ATO)
Development teams can ship efficiently and ensure applications are cyber ready for Navy Authorizing Officials (AOs). In this webinar, Sigma Defense and Anchore will give attendees a look behind the scenes and demo secure pipeline automation and security artifacts that speed up application ATO and time to production.
We will cover:
- How to remove silos in DevSecOps
- How to build efficient development pipeline roles and component templates
- How to deliver security artifacts that matter for ATO’s (SBOMs, vulnerability reports, and policy evidence)
- How to streamline operations with automated policy checks on container images
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfPeter Spielvogel
Building better applications for business users with SAP Fiori.
• What is SAP Fiori and why it matters to you
• How a better user experience drives measurable business benefits
• How to get started with SAP Fiori today
• How SAP Fiori elements accelerates application development
• How SAP Build Code includes SAP Fiori tools and other generative artificial intelligence capabilities
• How SAP Fiori paves the way for using AI in SAP apps
UiPath Test Automation using UiPath Test Suite series, part 5DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 5. In this session, we will cover CI/CD with devops.
Topics covered:
CI/CD with in UiPath
End-to-end overview of CI/CD pipeline with Azure devops
Speaker:
Lyndsey Byblow, Test Suite Sales Engineer @ UiPath, Inc.
1. INTRO TO CSS
PRESENTED BY
WPPITTSBURGH.COM
HOW TO MAKE SIMPLE EDITS
TO CUSTOMIZE THE LOOK AND FEEL OF YOUR WEBSITE
2. WHAT IS CSS?
• CSS is the abbreviated term for “Cascading Style
Sheet”.
• The code found within your theme’s CSS file
determines the appearance of your site by applying
style rules to HTML content, which has no style of
its own.
3. CSS vs. HTML
• Think of CSS as “clothing” and
the HTML as the “mannequin”.
• CSS controls things such as
colors, spacing, layout, mobile-‐
responsiveness and more!
• HTML is the site’s structure.
• We can change the “clothing”
anyIme without affecIng the
structure of the site.
PHOTO CREDIT: PIXABAY.COM
5. With a few lines of custom CSS and a few images we
can easily customize different elements of the website.
6. LEARNING THE LINGO
CSS can be made easier to understand by breaking down each
“sentence” into it’s individual components.
Here is an example of a common CSS declaraIon, as well as a diagram
of what each CSS component is made of:
7. • The SELECTOR is what element of the website we want to change.
• The PROPERTY is what we want to change about it
• The VALUE is what we are changing.
8. HOW TO EDIT THEME CSS
It is important that you take care how/where 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!
Op#on 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:
hXps://codex.wordpress.org/Child_Themes
9. 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.
Op#on B: JetPack Plugin
The JetPack plugin provided by
WordPress.com offers a
number of features. You can
install it from the
WordPress.org plugin directory
or from within your WordPress
dashboard.
Learn more about JetPack here:
hXp://jetpack.me
10. TO ACTIVATE CUSTOM CSS IN JETPACK:
Navigate to
JetPack WordPress
Dashboard Menu.
Click on “Se^ngs”.
11. Next, hover over the “Custom CSS Module” and click on “AcIvate”.
12. You will now see the opIon “Edit CSS” under
the “Appearance” secIon of the menu.
*IMPORTANT NOTE!*
Below Edit CSS is the link for “Editor” 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.
14. STEP 1:
FINDING YOUR THEME’S STYLES
For today’s 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.
15. To launch the Inspector in Chrome, all you need to do is right-‐click on
the element you wish to change and choose “Inspect Element”.
Try It!
Click on Your Site
Title, Right Click,
and Choose
“Inspect Element”
from the Drop
Down menu.
16. You will see the HTML markup and the CSS Styles on the screen.
Source Code CSS Styles
17. Here is a closer view of the CSS style for the site #tle.
In this instance, the SELECTORS are .site-‐header h1 a, .site-‐header h2 a
The PROPERTIES are color, display, and text-‐decoraIon
And the VALUES of these properIes are #515151, inline-‐block, and none
18. 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 site’s home page.
Next choose the Inspect
Element opIon, which will
launch your browser’s
developer tools.
19. 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.
20. We can make changes right in our browser window to
preview what the new style may look like. These
changes are ONLY TEMPORARY -‐ in order to apply
them to your site, you must place the code in the “Edit
CSS” code editor provided by the JetPack plugin.
Look for this snippet of code in the CSS Styles Window:
21. 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-‐size, font-‐weight and font-‐style.
22. Click on the CSS box and create a new line of
properIes.
The First Property we will be adding is Font-‐Size.
Type Font-‐Size, then hit tab to enter “40px”
Next, hit enter and type Font-‐Weight, hit tab, type in
“bold” and press “Enter”.
Lastly, type “Font-‐Style”, hit tab, type in “italic” and hit
enter.
24. Select this code and “Copy” to your clipboard so you can paste
it into the Jetpack Custom CSS Editor.
25. Navigate to your WordPress Dashboard and Select “Appearance -‐> “Edit CSS”.
Paste the code into the Custom CSS Editor and click the blue “Save
Stylesheet” BuXon to save your changes.
27. 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 “sIcky post” in WordPress is a
post which “sIcks” 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.
28. To get started, first select the “Featured Post” secIon and right-‐click
to launch the Inspector in Google Chrome.
29. We are going to be doing something else to our sIcky posts, so hide this feature
by simply adding the following rule:
display:none
This causes the “Featured Post” element to no longer be displayed. s for this
element are already in the theme’s CSS, we only need to add our custom
declaraIon.
30. 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 theme’s CSS, we
only need to add our custom declaraIon.
arIcle.sIcky .featured-‐post {
display: none;
}
31. arIcle id="post-‐4" class="post-‐4 post type-‐post status-‐publish format-‐
standard sIcky hentry category-‐uncategorized"
Now let’s style the SIcky Post itself. Find and highlight the long line on the
HTML pane in the inspector that says:
32. You will noIce that when you highlight this line of code,
there isn’t any matching CSS we can use to style this
sIcky post. The only one displayed is .site-‐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!
33. To Add a new style to your site -‐ click on the “+” icon to add a new
style rule.
34. You will noIce that when the new declaraIon is created in the inspector,
it shows the selector as:
article#post-‐4
However that is not quite what we want. If leo as-‐is, this style rule would
only apply to arIcles with an ID that is equal to “4” 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
arIcle.sIcky which, in plain English works out to something like “Apply
this rule to all arIcles that have the class equal to “sIcky” which means
this post, plus any sIcky posts we make in the future.”
35. Click on the selector to change it to arIcle.sIcky
36. ID vs. Class
You may noIce while working with CSS, some selectors have a “#” in
front of them, and some have a “.” in front of them. This is used to
denote if there is an ID or a class associated with this HTML element.
Let’s look at the original HTML that was highlighted in our inspector:
arIcle id="post-‐4" class="post-‐4 post type-‐post status-‐publish
format-‐standard sIcky hentry category-‐uncategorized"
In this case, you would add a “#” in front of #post-‐4 because in the
original markup it appears as id=”post-‐4ʺ″ whereas we added a “.” in
front of .sIcky because it appears as class=”sIcky” in the original
markup.
In most cases, IDs are used for non-‐repeaIng secIons of a website
{such as header, navigaIon, or footer} -‐ classes are used for the
majority of the other elements which may repeat for easier styling.
37. Now that we have created our new selector, let’s add some styles to it.
Start by applying the following background color:
background: #D0EAF3;
This will give us a screen that looks like this:
38. 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.
39. 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.
40. To add padding, type this in the Inspector Window right below the
background declaraIon:
padding: 20px;
Now our screen will look like this:
41. REMEMBER: Styles entered in the Inspector Window are NOT
permanent and will disappear when the page is refreshed.
Let’s 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!
42. 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.
43. 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 “Add New” 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.
44. Once uploaded, copy the link for the image which is
located in the top right as the URL field.
45. 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.
46. Add the following to the line below:
background: url(‘hXp://yourimagelinkhere.jpg’)
Paste the URL of the image you uploaded to replace
hXp://yourimagelinkhere.jpg
47. Currently, the image is Iling along the page. Since the image is
designed to fade to white, let’s add a bit of code to this:
#FFF url(‘hXp://yourimagelinkhere.jpg') no-‐repeat
The #FFF declares the
background will be white
and the no-‐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.
48. Here is what our custom CSS file looks like so far:
49. 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.
50. 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-‐header h1 a, .site-‐
header h2 a selectors:
background: url('hXp://mycustomlogolink.png') top leo no-‐repeat;
In this example, we are adding “top leo no-‐repeat” 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 hXp://mycustomlogolink.png with the
URL you copied in the previous step.
51. Right now, our logo looks something like this:
We can make this look much beXer by adding just a few
addiIonal properIes.
52. Add this line of code:
text-‐indent: -‐9999px;
Hiding the Site Title Text
In our earlier example, when we wanted to hide an element we used
“display:none”. However, you need to display the Itle of your site to
make it user-‐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 -‐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.
53. height: 100px;
width: 440px;
Lastly, we need to make the “box” 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.