Community Forums › Forums › Archived Forums › General Discussion › Rearranging Stylesheet
- This topic has 8 replies, 2 voices, and was last updated 9 years, 8 months ago by Summer.
-
AuthorPosts
-
August 20, 2014 at 1:34 pm #120052mzroxy0507Member
Hello,
I am wondering what's the best process to go about to rearrange my stylesheet. I see on a few genesis sites the stylesheets are arranged differently than the genesis framework. It seems easier for me to understand and make the changes I want when it's rearranged but i'm not sure where to begin. Can anyone give me advise on this? I'm been copying the genesis framework exactly how it is to create my framework.
August 20, 2014 at 5:10 pm #120094mzroxy0507MemberIs anyone able to help me with this?
August 20, 2014 at 6:58 pm #120102mzroxy0507MemberSomeone please help me. I don't know where to start.
August 20, 2014 at 7:15 pm #120105SummerMemberYour question is not clear. What exactly are you trying to accomplish? If you want to rearrange the stylesheet for your child theme so that it's easier for you to find the elements faster, you are the only person who can determine what to put where to best suit your needs.
What child theme are you using and what about it do you think needs rearranging?
WordPress / Genesis Site Design & Troubleshooting: A Touch of Summer | @SummerWebDesign
Slice of SciFi | Writers, After DarkAugust 20, 2014 at 7:45 pm #120110mzroxy0507MemberHi Summer. Thank you for responding. I'm using the Genesis sample child but I would like the style sheet to be arranged more like a site I looked at which is:
* Table of Contents:
*
* 1.0 - Reset
* 2.0 - Repeatable Patterns
* 3.0 - Basic Structure
* 4.0 - Header
* 5.0 - Navigation
* 6.0 - Content
* 6.1 - Post Thumbnail
* 6.2 - Entry Header
* 6.3 - Entry Meta
* 6.4 - Entry Content
* 6.5 - Galleries
* 6.6 - Post Formats
* 6.7 - Post/Image/Paging Navigation
* 6.8 - Attachments
* 6.9 - Archives
* 6.10 - Contributor Page
* 6.11 - 404 Page
* 6.12 - Full-width
* 6.13 - Singular
* 6.14 - Comments
* 7.0 - Sidebar
* 7.1 - Widgets
* 7.2 - Content Sidebar Widgets
* 8.0 - Footer
* 9.0 - Featured Content
* 10.0 - Multisite
* 11.0 - Media Queries
* 12.0 - Printor
Table of Contents
01 Import Fonts
02 Defaults
03 Typography
- Font Color
- Font Family
- Font Size
- Font Miscellaneous
04 Layout
- Structure
- 980px CSS Grid
- Header
- Homepage
- Main Content
- Post Info & Meta
- Column Classes
- Miscellaneous
05 Menus
- Primary Navigation Extras
06 Headings
07 Lists
08 Post Navigation
09 Comments
10 Sidebars
11 Footer
- Footer Widgets
12 Forms & Buttons
- Gravity Forms
13 Images & Captions
14 Media QueriesSo I guess my questions are:
-Where do I start?
-Do I start by just rearranging the original genesis style.css into these categories?
-Do I keep everything from the original style.css?August 20, 2014 at 10:54 pm #120124SummerMemberWhat advantage would rearranging the css rules into a different order give you? The index for the sample theme is pretty straightforward, and nicely organized, imo. The main sections just don't have numbers, and there's no advantage or disadvantage to them being there or not.
But, as for where you'd start, you would open up the CSS stylesheet for the child theme on your computer, in a plain text editor like Notepad on the PC or TextEdit or TextWrangler on the Mac, and start cutting and pasting css rules until they are in the order you want them to be.
There's no sorting or anything like that, you'll have to manually edit and rearrange each css rule in the file until you get it in the order you want, and you'd have to manually create the table of contents. Then when you're done, you'd upload that to your sample theme folder on your website, and unless you made actual changes to what the CSS is doing, it should look exactly the same as with the stylesheet that came with the theme.
The Genesis sample child theme's style.css is almost 1500 lines long. That's a lot of cutting and pasting for something that already works as-is, so make sure you take care of your wrists 🙂
If you want to learn a new programming language, you can try your hand at Sass and learn how to write scripts that generate the CSS you want, but I haven't played with it yet, so I don't know if that would help you or be a hindrance.
WordPress / Genesis Site Design & Troubleshooting: A Touch of Summer | @SummerWebDesign
Slice of SciFi | Writers, After DarkAugust 20, 2014 at 11:07 pm #120125SummerMemberAlso, for that second example you used, the "import fonts" section is not used... you would add actions to your functions.php to do that now (best practice these days).
Look at the wp_enqueue_style call in the sample theme's functions.php to see the proper way to do that now.
WordPress / Genesis Site Design & Troubleshooting: A Touch of Summer | @SummerWebDesign
Slice of SciFi | Writers, After DarkAugust 21, 2014 at 8:42 am #120212mzroxy0507MemberThank you Summer. I think I may need to go through the Genesis Framework and become more familar with where everything is located.
August 21, 2014 at 11:00 am #120254SummerMemberAnything you can do to save yourself extra work, I believe is a good thing 🙂
Good resources to start would be Genesis Changelog, and you can purchase the Changes in Genesis ebook guide from there as well. There's also the PDF of the Beginner's Guide that you can download from your StudioPress account/downloads area.
And looking through functions and stylesheets of various child themes to see how things are done is a good way to get used to things. They are different in Genesis than in anything else you've worked with in WordPress, but in the long run, you'll see how it makes your life and dev cycle a little easier/faster.
You could also keep track of any changes in WordPress, at their dev blog or at the Codex, so you know that when you see something like "Import Fonts" in a stylesheet, you know you're looking at an older theme rather than a current one.
And of course, there are tons of people here to answer questions!
WordPress / Genesis Site Design & Troubleshooting: A Touch of Summer | @SummerWebDesign
Slice of SciFi | Writers, After Dark -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.