Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
John Rothra
6,711 PointsResponsive WordPress Themes Not Using Tons of Embedded CSS
I'm looking at revamping my website to make it more streamlined and modern. While I could try to develop my own theme, I don't really have the time to build from scratch. So, I've been looking at various themes (free and premium). It seems, though, that many use embedded CSS which, from what I've learned and even heard on here, is considered a no-no.
Anyone know where I can find customizable modern responsive themes that are modern and don't use a ton of embedded css?
12 Answers
Philip Gales
15,193 PointsMost likely you will have to buy a theme and change the code yourself. The authors do this because (a) they can add more functionality to a theme to help it sell better, or (b) they tried to fix something quickly to fix an error after updating.
(c) sometimes they are just as new as us and forget things as simple as this.
John Rothra
6,711 PointsThe downside is that could mean theme updates are nixed or will override my changes. Not exactly ideal. It seems many that I've seen have the embedded css for the "customization" features built into making the theme look the way you want without the need to code. While that may be convenience, when it comes to load time, web design practices, and SEO, it's not something I like.
Philip Gales
15,193 PointsI have purchased over 20 themes and have yet to find the perfect one. I consider all of them building blocks, and realize it may take hours to remove all of the code that I do not want. Using a child theme I have almost never had problems with updates destroying my css, unless of course they removed a feature.
I have ranked websites very high without having to change the code structure, and I have also had incredibly fast websites. If you want perfect, create your own theme/website. If you want 95% good, buy a theme.
John Rothra
6,711 PointsHere's an example of a theme whose overall design template I like, but uses a ton of embedded css: http://satoristudio.net/bento/ (see source code).
From what I can gather, removing that css (lines 46-420) would require altering the parent theme, which could impact updates. I use child themes (love that method) and do use custom CSS. However, much of that embedded css seems to be a theme default. Looks good on the surface, not so much when I open the hood.
John Rothra
6,711 PointsWhat I may end up doing is spending a lot of time (hours and hours, days even) looking at various themes source code to see one that has an overall structure I like but is light on embedded css (or doesn't use any). Then do all my customizing the way I like: child theme stylesheet. Not a process I look forward to: hours/days looking at themes.
Philip Gales
15,193 PointsDownload the theme to confirm. I just looked at other themes that I have purchased and they all looked like that, but the 3 I looked at did not have all of that embedded code.
John Rothra
6,711 PointsHere's that theme downloaded and installed with no customizations by me--out of the box: http://wpupdate.johnrothra.com/wpupdate/
John Rothra
6,711 PointsI'm confused, you said that all the themes you purchased look like that, meaning having that embedded code? But that three you looked at didn't have it?
Philip Gales
15,193 Pointshttps://gtmetrix.com/reports/wpupdate.johnrothra.com/MJlGT7kh
Change the homepage and play with that theme some. And yes, the only embedded css was mine.
John Rothra
6,711 PointsSounds like you like the theme (Bento) despite the css issue. I do, but if I can eliminate that css and move it all to a separate file that would be ideal. I want to be able to have the site as streamlined as possible for loading as fast as possible (which we all do, I know).
Philip Gales
15,193 PointsSkype me philip.gales92
John Rothra
6,711 PointsBTW, this is my current live site's rating: https://gtmetrix.com/reports/www.johnrothra.com/IH3PtMAg
Philip Gales
15,193 PointsYou have A LOT of requests. You are also not using a CDN or proxy?
John Rothra
6,711 PointsHence part of the desire and need to redesign the site. Using a proxy? I know of CDNs, but not using a proxy.
Philip Gales
15,193 PointsI call Cloudflare a proxy server with CDN features.
John Rothra
6,711 PointsDid some looking into the Bento theme's coding and found that the embedded css (which the designer called "inline") is created using a lot of php conditional statements in the parent theme's functions.php file. I found a way to override parent theme functions (cf. http://code.tutsplus.com/tutorials/a-guide-to-overriding-parent-theme-functions-in-your-child-theme--cms-22623), but due to the excessive number of conditionals, I suspect it'll take so much code to remove them yet maintain the flexibility that it'll end up being more code than the css itself.
I did email the developer asking about this, though.
John Rothra
6,711 PointsVenting a little here --
Tried working with the Bento theme more, even tried overlooking the embedded CSS. However, I discovered that it also uses so much inline CSS that even adding !important in a child theme's CSS didn't override it. Ugh! In the name of being responsive, the code is atrocious! Uses PHP to regulate sizes in the embedded CSS, adds inline CSS to certain classes/IDs by default. So much design that's done using PHP that should be done via a stylesheet. That's what CSS is for--design--right?
So, off to look for other themes that will fit the bill.