CSS customizability of themes — any lessons learned?

  • Unknown's avatar
    gwideman · Member ·

    Folks — especially devblog or wp.com devs:

    CSS being the available tool here at wp.com, I’d like to hear whatever general lessons have been learned about how much one can customize a theme’s effect using CSS along various prominent dimensions. For example, it’s generally possible to change a theme’s entire color scheme, because that’s mostly set in CSS, but is it easy/hard/impossible to customize a three-col theme to have two cols?

    Knowing this would allow identifying which supplied themes are better starting points for one’s own customizations.

    So — as a starter list of possible dimensions of customization (some from the theme-selection filter):

    — Colors
    — Columns (1, 2, 3, 4)
    — Width (Fixed, Flexible)
    — Option: bottom widgets
    — Option: custom header
    — Page navigation
    — Tagline

    For wordpress.COM, where we only get to change the CSS, here are my current guesses as to degree of difficulty of each:

    — Colors: easy but laborious (and requires actual color skillz :-) )

    — Columns: impossible to add cols, may be possible to reduce cols (but are there gotchas?)

    — Width: Convert flexible to fixed, probably doable. Fixed to flexible, don’t know

    — Bottom widgets: Don’t know

    — Custom header: Custom header *image* easy to insert in CSS

    — Page navigation: don’t know

    — Tagline: (Subject of recent thread) Can be done nicely with text-widget+CSS in some themes, not so nicely in others. (Possibly put tagline in header image.)

    ——————-
    Thoughts? Thanks.

  • Unknown's avatar
    rosclarke · Member ·

    I think that it ought to be possible to move a sidebar to the bottom of the page using CSS. Maybe not possible in some themes, like the tagline issue.

  • Unknown's avatar
    aw1923 · Member ·

    just look at our blogs and you will see the different things that can be done, you can also check out this from the sandbox competition http://demo.sndbx.org/

  • Unknown's avatar
    devblog · Member ·

    — Tagline: (Subject of recent thread) Can be done nicely with text-widget+CSS in some themes, not so nicely in others. (Possibly put tagline in header image.)

    You know, now I remember that you it is indeed possible to write a tagline in any theme, as long as you have the CSS upgrade.

    You see, me being just a mere mortal who, after a day of work coding ActionScript, C#/VB.net, JavaScript, CSS, SQL, XML and other stuff, forgot to tell you that if you copy the “original” CSS code into the CSS editor, modify it to your liking, and making sure you select the “Start from scratch” radio button, then it won’t matter how the original code was written because your code will be applied in full (as if you were the theme’s author). I totally forgot to tell you that.

    I always recommend to make only the changes you want in the CSS editor and leave the “Add to existing CSS” radio button checked, but in your case (which would be a “special” one), starting from scratch would be the way to go. The reason why is because when you “add” to an existing CSS, the properties you define will be, well… added to the current definition. When you start from scratch, your definitions will be the only ones to be applied. The only thing you’d need to do is to use the right selectors et voilà.

    I hope this little explanation helps to clarify what you can do with CSS in regards to styling the current themes.

    PS. To demonstrate you how the tagline can be applied in every theme, when I get home, I’ll switch my blog to use Rubric and will add a tag line that will look just fine in any browser (and window size).

  • Unknown's avatar
    gwideman · Member ·

    devblog: I do appreciate your brain percolating on the tagline business — not just to solve an issue with Rubric, but it’s directly and indirectly contributing to understanding what can get done with CSS.

    I do understand that wp allows for the theme’s entire CSS can be replaced rather than appended. My understanding of CSS is that this doesn’t actually get you any more power than the option to add your custom CSS and override the bits you don’t like.

    However, the complete-replacement method may well be a more orderly way to proceed — you have all the CSS in one place, making it easier to take note of and fix the parts that obstruct what you’re trying to do.

    So it’s still a matter of getting a deep-in-the-DOM html block to position relative to the overall page instead of the sidebar, without disrupting anything else (or with appropriate compensations). I await your experiment with interest!

  • Unknown's avatar
    devblog · Member ·

    So it’s still a matter of getting a deep-in-the-DOM html block to position relative to the overall page instead of the sidebar…

    Nope, is not. It’s just a matter of coding the elements the right way. ;)

    You see, in the original CSS, the author is using absolute positioning and floats. You use one or the other, but not both in the same definition. Floating an element whose position you’re setting to “absolute” is just unnecessary. That’s all.

    Stay tuned. As soon as I have the sample, I’ll post it here.

  • Unknown's avatar
    devblog · Member ·

    This is one approach. It’s kinda “raw” but it positions your tagline better.

    It works in IE6, IE7, Fx3, Opera, Camino and Safari.

    It has some differences (like post titles) compared to the original code, but with more time you can easily replicate the look. Again, I just made some quick modifications to demonstrate that, if the person has the time – and knowledge – he/she can put a tagline on any theme (as long as the person has the CSS upgrade).

    #wpcombar a {
border:none;
}

#wpcombar a:hover {
background:#6da6d1;
color:black;
}

body {
background:#fff url('http://s3.wordpress.com/wp-content/themes/pub/rubric/images/rubric/gradient.gif?m=1158640643i') bottom left repeat-x;
font-family:Verdana, Tahoma, Arial, sans-serif;
font-size:80%;
margin:0;
padding:0;
}

#rap {
overflow:hidden;
clear:both;
position:relative;
}

#header {
width:auto;
height:150px;
background:transparent url('http://grahamwideman.files.wordpress.com/2009/01/header_clouds_012.jpg') top left no-repeat!important;
overflow:hidden;
clear:both;
margin:0;
padding:0;
}

#header a {
display:block;
border:none;
margin:40px 20px 20px;
padding:0;
}

#header a:hover {
background:none;
}

#content {
background:#fff;
float:left;
border:1px #eee solid;
margin:50px 280px 0 50px;
padding:20px;
}

#menu {
width:220px;
float:left;
font-size:90%;
margin:50px 0 0 -230px;
}

#menu ul {
margin-top:0;
padding-left:0;
margin-left:0;
list-style:none;
font-weight:bold;
color:#B54141;
}

#menu h2 {
font-size:1em;
}

#menu a:link,#menu a:visited {
color:black;
border:none;
}

#menu ul ul {
margin-left:0;
list-style:disc;
list-style-position:inside;
padding-left:.5em;
text-indent:0;
font-weight:normal;
color:black;
}

#menu form {
margin:0;
}

#menu form br {
display:none;
}

#content h2 {
font-size:.9em;
color:#666;
margin-bottom:0;
margin-top:0;
}

h3 {
font-size:1.5em;
font-weight:normal;
margin-bottom:.33em;
}

.storytitle {
margin-top:.25em;
}

.post-categories {
display:inline;
margin:0;
padding:0;
}

.post-categories li {
display:inline;
margin-left:3px;
padding:0;
}

.post .meta {
font-size:.85em;
color:#666;
}

.post .meta * {
margin-top:0;
}

.post .feedback {
margin-bottom:3em;
border-bottom:1px solid #ccc;
padding-bottom:1px;
}

.feedback {
clear:both;
}

.sticky {
background:#f7f7f7;
margin:5px 0 15px;
padding:5px 10px 10px;
}

.sticky a {
border-color:#ccc;
}

p.credit {
clear:both;
padding:10px;
}

p.credit a:visited,p.credit a:link {
border:none;
}

p,td,th,li {
font-size:1em;
line-height:1.65em;
}

a:link,a:visited {
text-decoration:none;
color:#B54141;
border:1px solid white;
}

a:hover {
background-color:#eee;
border:1px solid #ccc;
}

#comment {
width:95%;
}

* html #comment {
width:400px;
}

#commentlist li .avatar {
float:right;
border:1px solid #eee;
margin-right:15px;
padding:2px;
}

img.centered,img.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}

img.alignright {
display:inline;
margin:0 0 2px 7px;
padding:4px;
}

img.alignleft {
display:inline;
margin:0 7px 2px 0;
padding:4px;
}

.alignright {
float:right;
}

.alignleft {
float:left;
}

.aligncenter,div.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}

.wp-caption {
border:1px solid #ddd;
text-align:center;
background-color:#f3f3f3;
padding-top:4px;
-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
margin:10px;
}

.wp-caption img {
border:0 none;
margin:0;
padding:0;
}

.wp-caption p.wp-caption-text {
font-size:11px;
line-height:17px;
margin:0;
padding:0 4px 5px;
}

.mytagline {
position:absolute;
top:80px;
left:20px;
font-size:1.5em;
display:block;
width:100%;
height:auto;
white-space:nowrap;
}

    HTH

  • Unknown's avatar
    gwideman · Member ·

    devblog: I’ll be studying your CSS surgery to make sure I understand how positioning works. Meanwhile, I’m getting sold on the merits of Sandbox. See next post.

  • Unknown's avatar
    gwideman · Member ·

    All: Prompted by you guys, I looked into Sandbox. I see why it’s special — it focuses on facilitating customization using CSS, which is especially suitable around here. The Sandbox competition gives us an easy way to see the dimensions of variation possible with CSS.

    As a reference that others may also find useful, I’ve tabulated the features found on all of the 48 Sandbox competition winners — this should provide a quick way to look at a sample implementation of each kind of feature.

    Theme customization with CSS: Sandbox competition

  • Unknown's avatar
    decorinspiration · Member ·

    Hi – I’m new here. How can you change the color of the page tabs on your blog? Can someone provide the code for this?

    Thanks

  • Unknown's avatar
    devblog · Member ·

    decorinspiration,

    Please don’t hijack threads. Start a new one providing a URL link to your blog.

  • The topic ‘CSS customizability of themes — any lessons learned?’ is closed to new replies.