Don't use the theme's original css
-
So I have been working on getting the live site configured in WP. I am close, but I want to “remove” all of the original CSS. I keep the CSS I am going to use in a separate file and I just paste it into the preview.
Whenever I hit save all I get is “saving changes…”. I have tried on Chrome, FF, and Safari. Sometimes it saves the CSS, but it is hit and miss.
What I really want to do is to check the “don’t use the theme’s original css” box and have it save that setting. No matter what I do it will not work. I don’t want to pay for the full version until I am assured that what I experience in preview for just me will work.
Is the CSS preview system broken, or is the reason I cannot “remove the original css” because I don’t have the full version?
Thanks!
The blog I need help with is: (visible only to logged in users)
-
The CSS editor does not work that way for anyone at WordPress.com. The only theme that has no original CSS is Sandbox.
-
But in preview when using the css editor there is a flicker as the styles are transferred from the original to mine. Are you saying this flicker would be here always?
If this does not work that way for anyone then why on earth have it?
-
What I mean is, you cannot strip out all the CSS from any theme and start over raw. You can only adapt the existing CSS. And you can’t save changes unless you have the upgrade.
-
The Theme’s original CSS is scanned – then your CSS additions are scanned – last scanned rules – only put in the parts you want to change
-
I know how CSS works (it is my day job), I just don’t understand why WP.com would have this “feature” if it doesn’t work (unless it doesn’t work because I am in test mode). It would be nice if someone from WP could confirm.
Somehow I found this theme that had the same underlying structure so my site I am working with offline will match pixel perfect (and does with the CSS I paste in). I guess I will just have to try out the upgrade and use my CSS and see if there is a noticeable flicker (it could just be how the “theme” tool works). If there is still a flicker then I won’t be able to use WP.com.
Thanks.
-
The new “Customizer” is still under development, so maybe it’s a bit buggy. I just tried the option “Don’t use the theme’s original CSS” in a couple of my blogs: on the one without the upgrade it’s not working at the moment, on the one with the update it’s working.
To test what you want to test, try using the old CSS editor – see this post of mine, under “Update April 11”:
http://wpbtips.wordpress.com/2013/02/21/where-is-the-theme-css-and-how-do-i-edit-it/
But I doubt that what you’re trying to do will work satisfactorily. When you say “I found this theme that had the same underlying structure”, you mean same HTML and same CSS selectors? That’s highly unlikely. What are the two themes? -
Thanks…that is what I was hoping (just because I haven’t paid for the upgrade yet).
For the underlying structure I mean that one theme might be like:
<div|page>
<div|header></div>
<div|wrapper>
<div|content></div>
</div>
</div>
and another might be like (notice the extra container div)
<div|page>
<div|container>
<div|header></div>
<div|wrapper>
<div|content></div>
</div>
</div>
</div>
So somehow the first “minimalist” theme I chose had the same basic div structure as the existing website (I tried others, but some have different underlying div structures). When I say that the test site on WP.com looks like the existing website at the same domain…it is a pixel perfect match with my CSS.
Ultimately I think that WP Themes are created as the designers want, and they don’t all use the same structure. Ideally the themes would all have the same structure and just use CSS to change things (just like CSS Zengarden).
Thanks for the help justpi!
-
You’re welcome.
a) Did you try the old CSS editor? Did the option “Replace theme’s CSS” work with it?
b) “Basic structure” isn’t enough at all. Inside those basic divs there’s a ton of nested elements, and these will probably differ from theme to theme. And even if you find two themes with the same detailed structure, the CSS selectors will probably be different, so again the CSS of the one will be useless in the case of the other. So I would strongly suggest you follow the advice you were already given: select a wordpress.com theme whose basic layout and appearance is close to what you like and use the “normal” wordpress.com way, i.e. the add-on mode.
c) Yes, each theme is created as its designer wants. Note that most wp.com themes are not created by WP: they are created by other designers, and WP merely adopts and adapts them.
As for “ideally the themes would all have the same structure”, I don’t agree at all. A theme is more than a skin: it has functions too. I would say the exact opposite of what you’re saying: fortunately themes don’t all work the same way, and fortunately they don’t all have the same structure!that would make for a very dull theme world! Fortunately not all themes work the same way, and
-
-
I haven’t tried the old way yet. I will mess with it tonight/tomorrow.
I am not sure I agree with you about them being dull. Have you looked at http://www.csszengarden.com? It is the same content, and the same html structure, just using CSS you can design it to your hearts content…
I know themes contain “functions”, but theoretically they are “all the same” when it comes to structure. I.e. a widget has a header, maybe some lists, or something. I would think that a theme could be built that had every single possible item on it, and you could just use CSS to style/position it. I would imagine it would be possible for WP to achieve the same thing as ZG.
Of course I guess it is easier the way it is now as “newbs” can just swap out an image and basic colors without having to tweak things.
-
The ZG samples are just what I mentioned: different skins – variations on the same conventional two-column layout. CSS is great, but it won’t do for everything: you can’t use CSS to add a featured posts slider, for instance, or display the posts in a masonry layout.
But we don’t have to agree! You prefer ease of change, I prefer diversity – but I’m aware that there are pros and cons in both cases. For example, I’ve helped users turn the footer widgets into a sidebar or v.v. on some themes: this may require a couple of CSS rules on one theme but fifty different changes on another… Then there’s the nightmare with the variety of selectors: like you, I guess, I would be happier if designers used the same names for the same things: would you ever imagine that the ID of the f**ng footer on a certain wp.com theme is “#glass-bottomblock”? -
would you ever imagine that the ID of the f**ng footer on a certain wp.com theme is “#glass-bottomblock”?
Yes –
Some programmers (developers) are idiots for names and documentation (I used to be a programmer – but I took great pride in making my code easy to read – even for complex automated industrial systems)
Yes much easier if good names and code practices are used
- The topic ‘Don't use the theme's original css’ is closed to new replies.
WordPress.com Forums 