You may think the default pyShip colors are awful (please don’t hurt my feelings) or you want your website to match your product’s style. What ever it is, you can customize it very easily with pyShip!
Changing colors on pyShip pages is very simple: it’s literary changing hex codes in a css file.
You can find these css files in the static/styles folder:
By opening any of these css files you will see the color variables at the very beginning which you can edit.
:root {
--bg-color: #171719; /* Background Color */
--accent-bg-color: #202020; /* Container color, for example the container under the title "Why spend time on complex frameworks when 90% of startsups fail?"*/
--main-text-color: white; /* Text Color */
--accent-text-color: white; /* Button text color */
--accent-color: #F25DBF; /* Accent Color (Pink) */
}
The descriptions beside each variable describes what the color changes. It is solely there to make your life easier when changing colors.
The images provided in the boilerplate will definitely not suit your projects. Don’t worry though, you can change them easily.
All the images/assets are named accordingly so that you can easily replace them.
You can find these images & assets in the static/assets folder:
PLEASE don’t delete these files: right-arrow.svg, left-arrow.svg, landing-twitter.svg, landing-product-hunt.svg, landing-instagram.svg.
You may delete download.svg as it is not used anywhere in the website, just used in the official pyship.co website.
You may notice that a lot of the files are svgs. We recommend you creating your logo in both svg and png formats and replacing the logo.svg file with the svg format and replacing favicon.png with the png format (make sure the names of the files don’t change)
Finally, create your landing visual in svg format and replace landing-visual.svg with it.
The landing visual is the image you see in the landing page’s hero section.