- This topic has 2 replies, 3 voices, and was last updated 11 years, 4 months ago by
.
-
Posts
-
Hi everyone,
I was holding out messaging on here because I feel so inadequate..
Here is my issue..
I installed Genesis framework... I have somewhat customized just on wordpress, but the bigger issues which I am having is where it comes to changing the CSS for a child theme.. I feel so overwhelmed and quite honestly I have no idea where to start...
The things which I want to change: Font (size to 16px, colour to black, style to veranda), Links (colour to #ff0099, hover colour to #00ccff), headers/titles/nav bag to be in Georgia, Side bar to just have a black double boarder, and lastly a header image...
I feel like what I want to do is incredibly easy yet so hard as well....
Are there any 'easy' ways to do this? Or at least somewhere where I can attempt to learn code enough to achieve this?
I owe all!!!
My biggest suggestion for learning, is to back up what you have now, rename it "something backup", and then go to town on editing and learning how everything works.
Some helpful tips:
-Right Click > Inspect Element - use this to inspect the code on a specific element of your page. If you want to see the current background color, right click, inspect element on the background off to the side, then search through the code on the popup in your browser to find "background: 303030", or whatever value it has. Once you know the background color, you can then open your style.css file, and make edits.
-Find - This may seem super obvious, but using ctrl + f in any editor is a VERY powerful tool. For instance, above, you know the background color - open style.css, click at the top of the file (find will start where your cursor is, and work down the page), and search for the color value. Keep going until you find "background: 303030" (or whatever the color was), and edit it to your new value. Upload style.css via ftp (or edit it in WordPress, though I don't recommend this), and check your edits!
-Incognito Windows In Chrome - ctrl + shift + n will open a window that doesn't save history, cache, etc. This is great for seeing small edits, as they are sometimes cached, and you'll have proper code that you THINK isn't working, because you can't see the edit.
-Live Edit! - Using the right click > inspect element method, you can live edit the properties on the page to see how they look. Simply click on the value, and change it to whatever you want. This is perfect for ensuring that piece of code effects what you think it does. This is also a great tool for viewing other websites, and seeing how they do things, and changing values to see how things look.
-W3Schools - Google search "something css", and W3Schools will come up with a very easy to understand explanation of how it works. For instance, "padding css" will bring them up at the top, and you'll learn how padding works. Anything property you see in the code (padding, background-color, font, margin, etc), can be searched with "css" in Google, and you'll learn all about it.
-Don't Be Afraid - Code is intimidating at first, really intimidating. Rest assured that you have a backup (make sure you make a backup), and just go to town on trying things. You can't hurt anything, and you can only learn. If things get too messed up, revert to your backup, and start again.
Best of luck!
The easiest way to change the items you indicated is a premium plugin:
Design Palette Pro
Here's a summary of what it does
http://www.carriedils.com/genesis-design-palette-pro-vs-genesis-extender/
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.