Welcome to the Custom CSS tutorial for custom profile design! Have a specific question? Hitting Ctrl+F will help you search for keywords
Still can't find what you're looking for? Drop a question in the comments below! Doing this will help other users with similar questions find what they need
Click HERE to find the Themes Group. That is where you will find pre-made CSS codes that are free to use!
DISCLAIMERS & NOTES:
-- Custom CSS codes alter the appearance of the default base theme you have already selected. It does not override the base theme and create something completely new. Pre-made CSS codes may look different based on what default theme you have selected
-- All profile appearances and colors are prone to change based on the dimensions and settings of the individual viewer's screen, and layouts may appear different on mobile devices
-- Profile appearances are prone to change slightly with site updates. Admins typically cannot control these site updates, but we will do our best to help you out if profile things get shifted as a result
-- CSS codes are great to add and design features that your Design Studio does not provide. Don’t forget about all of the great options the Design Studio already has, don’t be afraid to experiment and have them work together!
ADDING A PRE-MADE CODE FOR THE FIRST TIME
Step 1
Find the Design Studio option on your profile. It will either be on the header of your page, or under the "Options" button
Step 2
If you are using a pre-made code from the Themes Group for the first time, be sure to set your code to the default base theme the maker of the code used. You are free to use whatever base theme you want and alter the code to your liking!
Step 3:
-- Go to the CSS section (circled in red) and delete whatever code you had before. Be sure everything in both the “Global CSS” and the “Theme CSS” sections (circled in blue) gets deleted
Steps 4-6:
-- Paste the new code into the “Theme CSS” option. NOT the Global css option.
-- Hit PREVIEW to privately view a preview of your edits
-- Edit away, and don't forget to hit SAVE!
EDITING YOUR PROFILE - see image below
If you have ANY sort of custom code in your profile, you will need to edit your profile this way.
These steps are very important, or else the design studio will not show your customized items
-- Go to your Design Studio, located on your profile under "Options"
-- Go to HISTORY, circled in yellow
-- Click the most recent theme icon, a green check mark will appear. Circled in red
-- You can now either edit your code (circled in blue) or edit all of the other custom sections. Don't forget to save!!
-- Important note: You will need to do this every single time you want to edit your profile after you save it
----------
FREQUENTLY ASKED QUESTIONS
“My code is not working” checklist.
Did you:
- Follow the steps listed in the “Editing your Code” segment
- Make sure that ALL code in the old CSS box was deleted
- Make sure that all code is deleted from the Global CSS section
- Double check that all brackets, parenthesies, periods, colons and semi-colons are accounted for
- Double check for any typos
- Make sure the specific CSS code is compatible with your base theme. If not, either switch your base theme and start from scratch before pasting your CSS code again, or alter your CSS code to fit the base theme you have
- Make sure there are no duplicates of a certain code in what you have
If your code is still not working, then perhaps you need an additional line of code to edit a specific part of your profile. Reach out to an admin, we are happy to help!
What is the Global CSS code option?
The information in the Global CSS code section is the "bare bones" of the site code itself. It is just kinda there, honestly. It will not affect anything site-wide if you were to tinker with it. However, any code you put in there will alter any base theme code you select as a default. For example, if you key in a code for a border design into the Global CSS section, then each and every base theme code you click on will pop up with that border design. Things in the Global CSS code section may clash or override any other code you have in the Themes CSS option, or any edits you may try to make.
Overall, it will save you some mental gymnastics to simply leave that section alone.
"How do I add XYZ detail/feature onto my page or code?"
-- You can locate the "Single codes and tips" tab in the Themes group, new codes for different features are frequently being added!
- You can also go to other pre-made codes in the Themes group that have that detail, and simply locate the strip of code for that detail and copy/paste it into your own code. Search the codes for lables or key words using Ctrl+F
-- If you are looking for anything specific, can't find a pre-made code, or do not know where to copy/paste that strip of code, drop a question into the Themes Group or reach out to an admin!
**More frequent questions will be added as they come
Have any questions about CSS codes? Drop them down below!
Comments