Need help? Check out our Support site, then


Show off your CSS customized upgrade

  1. If you're using a custom CSS layout, post your blog in this forum thread.

  2. @engtech
    Here's a humble question from a non-geek. I thought we could have only one running posts page in a blog. Is it true that your blog pages are dynamic? If this is made possible through css customization then I'm certainly interested.

  3. Nope, the other pages are all standard category/archive pages. What I'm doing is using CSS to turn a text widget into a navigation bar at the top.

    CSS lets you reposition, hide or show and elements on the page. So what I end up doing is stuffing my sidebar full of HTML and then using CSS to move it to other places on the page.

    This is the sidebar code:
    <span class="etnav"><a title="Latest posts" href="http://engtech.wordpress.com" class="home" title="//engtech"><span class="left"> </span><span class="mid">main</span><span class="right"> </span></a><br /> <a title="Original Articles" href="http://engtech.wordpress.com/tag/engtecharticles" class="category-engtecharticles"><span class="left"> </span><span class="mid">articles</span><span class="right"> </span></a><br /> <a title="Opinion Pieces" href="http://engtech.wordpress.com/tag/engtechcommentary" class="category-engtechcommentary"><span class="left"> </span><span class="mid">opinion</span><span class="right"> </span></a><br /> <a title="Posts About Blogging" href="http://engtech.wordpress.com/tag/engtechblogging" class="category-engtechblogging"><span class="left"> </span><span class="mid">blogging</span><span class="right"> </span></a><br /> <a title="Recommended Links" href="http://engtech.wordpress.com/tag/engtechlinks" class="category-engtechlinks"><span class="left"> </span><span class="mid">links</span><span class="right"> </span></a><br /> <a title="Summary Digests" href="http://engtech.wordpress.com/tag/engtechdigest" class="category-engtechdigest"><span class="left"> </span><span class="mid">digest</span><span class="right"> </span></a><br /> </span>

  4. Hi, Engtech.

    I am following your blog for some time and taking some ideas to personalize my blog. I was ignoring that we could personalize the blog to this level!

    I'm using Sandbox theme, like you. But in this time I have not been capable to move a text widget only with the CSS. You have put the html (thanks!), but i dont find the apropiate CSS code in your stylesheet. How to do this?

    I'm using CSS customized upgrade too, so, i'm going to put my blog here. I think that is a good idea to add the theme we are using, too, and to add the theme name to posts's tags.

    Thanks!
    Alex.

  5. Blog: http://entomoagricola.wordpress.com
    Theme: Sandbox (Minimalist style with left and right sidebars)

  6. One big warning. This is messy. I put it together with a lot of trial and error, so it's probably more complicated than it needs to be.

    /* This moves it from the sidebar to the header portion of my layout (using position, top and left), and adds some generic font styles */<br /> span.etnav {<br /> position:absolute;<br /> top:76px;<br /> left:0;<br /> font-size:25px;<br /> font-weight:bolder;<br /> line-height:30px;<br /> color:#fff;<br /> display:block;<br /> width:900px;<br /> border:0;<br /> margin:0;<br /> padding:10px 0 10px 10px;<br /> }<br /> /* Styling the links */<br /> span.etnav a {<br /> display:inline;<br /> width:auto;<br /> color:lightsteelblue;<br /> margin:0;<br /> padding:0;<br /> }<br /> /* Adds whitespace around the "buttons" */<br /> span.etnav a span {<br /> padding:4px 0;<br /> }<br /> /* Images for the buttons <br /> - split into middle/left/right portions<br /> - have to stylize the a, a:visited and a:hover<br /> */<br /> span.etnav a span.mid {<br /> color:lightsteelblue;<br /> background:black url('http://engtech.wordpress.com/files/2007/01/buttons-black_m.png') repeat left top;<br /> padding:4px 2px;<br /> }<br /> span.etnav a span.left {<br /> background:black url('http://engtech.wordpress.com/files/2007/01/buttons-black_l.png') no-repeat right top;<br /> }<br /> span.etnav a span.right {<br /> background:black url('http://engtech.wordpress.com/files/2007/01/buttons-black_r.png') no-repeat left top;<br /> }<br /> span.etnav a:visited span.mid {<br /> color:lightsteelblue;<br /> background:black url('http://engtech.wordpress.com/files/2007/01/buttons-black_m.png') repeat left top;<br /> }<br /> span.etnav a:visited span.left {<br /> background:black url('http://engtech.wordpress.com/files/2007/01/buttons-black_l.png') no-repeat right top;<br /> }<br /> span.etnav a:visited span.right {<br /> background:black url('http://engtech.wordpress.com/files/2007/01/buttons-black_r.png') no-repeat left top;<br /> }<br /> /* Gets a bit complicated here, this is where I say "if the category of the current page matches the category of the link, then make the button white */<br /> body.home a.home span.mid,body.category-engtecharticles a.category-engtecharticles span.mid,body.category-engtechcommentary a.category-engtechcommentary span.mid,body.category-engtechblogging a.category-engtechblogging span.mid,body.category-engtechlinks a.category-engtechlinks span.mid,body.category-engtechdigest a.category-engtechdigest span.mid,body.s-category-engtecharticles a.category-engtecharticles span.mid,body.s-category-engtechcommentary a.category-engtechcommentary span.mid,body.s-category-engtechblogging a.category-engtechblogging span.mid,body.s-category-engtechlinks a.category-engtechlinks span.mid,body.s-category-engtechdigest a.category-engtechdigest span.mid {<br /> color:#000;<br /> background:black url('http://engtech.wordpress.com/files/2007/01/buttons-white_m.png') repeat left top;<br /> }<br /> /* There's 5-6 other corner cases for making the buttons white */

  7. I'm not really sure why I didn't use

    span.etnav a span.mid, span.etnav a:visited span.mid to shorten the code. I may have not known about it at the time.

  8. entomoagricola
    Member

    Ok, is a good idea to begin with the code :-)
    Thanks again!
    Alex.

  9. @ento: Very nice layout! I just checked it out.

  10. @engtech
    Thanks for answering my question in a way I understood. Thanks also for all that code {mumbo jumbo} designed to make it happen. :)

  11. Hi;
    My blog (www.thehashmark.wordpress.com) isn't that spectacular, but I'm pretty pleased with the way some small css changes have altered the way it looks.

    Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic