Community Forums › Forums › Archived Forums › Design Tips and Tricks › Customizing Studiopress themes
- This topic has 9 replies, 3 voices, and was last updated 11 years, 2 months ago by chantal2012.
-
AuthorPosts
-
February 20, 2013 at 8:11 am #21637chantal2012Member
As I mentioned in a previous post, I was using Thesis but I have switched back to Studiopress so I'm experiencing a bit of a learning curve. Thesis was super easy to customize because you could just make changes in Firebug first (to see results), then copy and paste code in custom.css file, hit refresh and then voilà! This is how I got used to working in Thesis. So now, I'm trying to figure out the best way to work with Studiopress...I have the Lifestyle theme right now. I use Firebug to make changes like I've always done, but then it seems to take so long to go to Editor->style.css file and scroll down the file to find the code that you are trying to change. It's just a longer process...any suggestions for other methods to edit css a lot quicker? I know that in Firebug, it gives you the line number where to find the code that you need to change but these line numbers do not appear in the file editor located in the WordPress dashboard. I know I could use Dreamweaver or a program similar to this but that would take even longer because I would need to constantly be using FTP and keep uploading the file to see my changes. I was hoping for a quicker way to work.
February 20, 2013 at 8:50 am #21644Bill MurrayMember1) Whenever you can use the editor to directly edit files in your WP install, you have an inherently insecure setup. A lot of people do it, and it works for them, but if you are doing client work, it's something you should discourage. Clients may not want to put up with the more secure approach and give up the functionality they'd lose (such as being able to upgrade plugins from within the WP UI), but they should understand the security vulnerability created by making things easy.
2) For a quicker way to do development, consider a local install of WP and a good editor. Notepad++ is open source and a good editor. This works well when you are doing big changes before a site goes live. It's less suited to a little tweak to adjust something on a live site. The advantages are you'll see your CSS changes instantly and you won't need FTP. It will take a little work to set up, but once once and running, you appreciate the time investment you made.
3) For the little tweak, SFTP (secure FTP) plus a good editor works. For example, with FileZilla, you can configure your default editor, SFTP to a site, open the CSS file, make a change, and save the file. If you save the site settings in FileZilla, there's really very little hassle to using this approach. If your sites are preconfigured in FileZilla and you load FileZilla and your favorite editor when you fire up your machine, this approach is just about as fast as what you were doing with Thesis.
Web: https://wpperform.com or Twitter: @wpperform
We do managed WordPress hosting.
February 20, 2013 at 8:53 am #21647Sridhar KatakamParticipantPersonally I would place custom CSS code at the end of child theme's style.css, not 'in line' i.e., wherever they appear.
Here's one method:
Set your FTP client to open files for editing in a good editor like Sublime Text.
Any time you want to update style.css or other WP files, just open them directly from FTP client in the editor and make your desired changes.
February 20, 2013 at 9:26 am #21664chantal2012MemberSo whatever I add at the end of the style.css file will take precedence over what is already in there? As an example, if I wanted to customize the background color for instance (just a simple example), I could add the following code:
body {background-color:#b0c4de;}
to the end of my style.css file and it will replace what is already in there (meaning that I don't have to search the line code)???February 20, 2013 at 9:29 am #21666Sridhar KatakamParticipantFebruary 20, 2013 at 12:50 pm #21735Bill MurrayMember@chantal2012 - Just adding style rues at the end of your stylesheet to override an existing style rule in the same sheet isn't a good practice. It will make it more difficult to maintain the stylesheet. After all, you said you use Firebug, so you know the approximate line number of the line you want to change anyway. If you use an editor like Notepad++ with line numbers, you can quickly go to that line. It's one thing to do it as a test to see if you like the new rule, but it's another to leave it in a finished theme.
If you absolutely insist on just adding new styling rules, a better approach might be to install and activate the Jetpack plugin, which includes a custom CSS module. You can put your new rules in a special editor provided by Jetpack and never touch your child theme's stylesheet. One advantage of this approach is that your styling customizations move independent of your theme, so if you add custom styling for a plugin and change themes, your styling stays in place as long as Jetpack is activated.
Web: https://wpperform.com or Twitter: @wpperform
We do managed WordPress hosting.
February 20, 2013 at 5:46 pm #21831Sridhar KatakamParticipantJust adding style rues at the end of your stylesheet to override an existing style rule in the same sheet isn’t a good practice. It will make it more difficult to maintain the stylesheet.
That is news to me. I would appreciate if you can share any URLs that discuss this topic.
Placing custom CSS code at end of child theme's style.css will have the following benefits, in my opinion:
All your changes are at one place rather then at different places in the stylesheet. Tomorrow if something is not working as expected, you simply delete or comment out the custom CSS added at the end, i.e., essentially restore style.css back to how it was originally quickly, and narrow down the problem causing rules.
It will be easy for someone else helping you to see at a glance what changes have been done so they can help you faster.
February 20, 2013 at 11:15 pm #21879Bill MurrayMember@Sridhar_Katakam - Here's 1 URL, http://sixrevisions.com/css/100-exceedingly-useful-css-tips-and-tricks/. See rule 31. Do a Google search if you want more.
You are right about the benefit, but I think you are ignoring negative consequences, and you're ignoring the fact that there are other ways to get the benefit you cite. As I see it, the negative consequences are: 1) you're adding unnecessary bloat to the stylesheet and 2) you're making it harder to edit the stylesheet, because a styling rule is in 2 places, not 1. If you do all of your editing using a tool like Firebug and all you want to do is over-ride a few styling rules, you might think your approach is a sound one. But not everyone works that way. Try taking the Genesis sample child theme CSS and completely re-writing it, and I think you'll see that your method becomes inefficient. Further, while the benefit of documenting changes is a good one, you can achieve the same benefit by simply adding a comment on the change. You can develop a comment style to help you easily track your changes, and you can summarize the changes at the top of the stylesheet in the comments. This method is far more consistent with typical development practices.
If your method works for you, that's great. But if a professional theme developer offered a theme for sale that included a lot of duplicate styling rules, I think most knowledgeable buyers would look at that as inattention to detail at best and bad practice at worst.
Web: https://wpperform.com or Twitter: @wpperform
We do managed WordPress hosting.
February 20, 2013 at 11:17 pm #21880Sridhar KatakamParticipantFebruary 21, 2013 at 5:57 am #21925chantal2012Member@Bill Murray - Thanks Bill...I'm trying to wrap my head around all of this and still trying to find the best way to work.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.