Custom CSS Tumblr Codes - Ultimate Customization HTML

CSS plays a good part in Tumblr themes. You can easily decorate your blog using these custom CSS codes.

Mainly, users use CSS for custom backgrounds, icons, header or banner images. Most us use custom css for changing body font or color of the link. You can add various Tumblr Codes on this box.

Customize CSS Codes

Suppose, you don’t know any coding such as HTML and style or skin customization, at that situation, you can use custom CSS box to avoid editing in theme file.

There is a Custom CSS Box in Tumblr Theme Customization page that you can use to put your custom css files to decorate your theme.

Custom CSS codes

You can use above custom css box to add infinite or endless scrolling, scroll to top button, to change your background image or to add your new fonts.

It depends on you how you are customize your blog by this custom css HTML codes.

Many Tumblr users including me are using that CSS box as their primary feature to customize their blog theme. If you do not have deep knowledge about CSS styles, you can still use that CSS box.

Few HTML and CSS codes which you can try in your theme…

1Sidebar: Do you know, how to add sidebar using CSS and HTML codes in your theme? All themes use different codes in their theme and there is no standard codes for sidebar or any part of HTML themes. However, you can try below codes…

Custom Sidebar CSS

#sidebar {
    float: right;
    width: 260px;
    padding-right: 4px;
    padding-bottom: 120px;
}

HTML for above sidebar

<div id="sidebar">
Your Blogroll or Following Widgets
</div>

2Custom Footer: I have seen many blog themes that do not have footer to show copyright text and essential pages. So, I have decided to publish a static code to create footer in any existing theme.

CSS Codes for Footer

#footer {  width:100%;  }
#footer-wrapper {  max-width: 1125px;  margin: 0 auto;  color: #fff;  position: relative;  }
.footer {  float: left;  margin: 15px 12px;  width: 23%;  }
.footer .widget{  margin-bottom:8px;  }
.footer h2 { color: #272727;   font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;  font-size: 15px;  font-weight: normal;   padding: 4px 0 10px;   letter-spacing: 2px;  text-transform: uppercase;  }
.footer .widget-content {   color: #888; font-size: 15px; line-height: 14px;  }
.footer a { color:#32A4D6;  text-decoration:none;   -webkit-transition: all 0.2s ease;  -moz-transition: all 0.2s ease;  -o-transition: all 0.2s ease;  -ms-transition: all 0.2s ease;  transition: all 0.2s ease;  }
.footer a:hover {    color: #888; text-decoration:none;  }
.footer ul {  clear: both;  list-style: square outside none;  margin: 0 0 0 10px;  padding: 0;  }
.footer ul li {    padding: 10px 0;  }
.footer-credits p{  border-top:1px solid #CCCCCC;   padding:20px;  }
.footer-credits .attribution{  float:right;  }

Footer HTML codes

<div id='footer'>
<div class='ct-wrapper'>
<div class='clr'></div>
<div class='footer-credits'>
<p class='attribution'>
<a href="/">Home</a>
                    {block:HasPages}
                        {block:Pages}
                        <a href="{URL}">- {Label}</a>
                        {block:Pages}
                    {/block:HasPages}</p>
<p>&copy; {CopyrightYears} - <a href="/">{title}</a></p></div>
</div><!-- /ct-wrapper -->
</div><!-- footer -->

FAQ

1. Can I add JavaScript code in that box?

No. It is only for Custom CSS customization. JavaScript will not work on that box.

2. Can I put text using that box?

No. As I said easier, It is only for skin customization using CSS codes.

3. Can I put second Sidebar?

Yes, using CSS style, you can make your Second Sidebar.

4. How can I add copyright year in the footer?

Copyright variable is in-built with above footer codes.

Feedback & Asks

1. I’ve pretty much got my theme done, I just have a slight coding problem… If you go to my page, you’ll see that ALL the text is white. And it clashes. Where in the css/html codes do I change the font colors for my sidebar?! I have tried to find it, but I have a case of the dumbs right now.

2. Bootstrap is great. Its effectively now the 960 grid of 2012+. There’s no other way to really slice it, but its overkill for a lot of project and locks you into a lot of styling that you may not want or need.  There’s a lot of lightweight CSS frameworks. I’ve come increasingly to the conclusion that you should get into the habit of rolling your own.  

While I’ve seen some extreme criticism of frameworks such as “CSS frameworks, the killers of design trends”, my rationing is a little more practical and a little more selfish: I want control and I want to know the thought process of why each design decision was made. 

 Here’s a quick compiled list of links for building your own CSS framework:

CSS Frameworks + CSS Reset: Design From Scratch - An intro to CSS frameworks by Smashing Magazine.


Show / Hide all 27 notes

Why we are here:

About Tumblings.net updates Tumblr help tutorials time to time to customize Free Tumblr Themes, HTML Codes, Cute Backgrounds, Layouts, Widgets and Cool Quotes 2013.
Find us on Google+, Facebook and Twitter

Alexa About Us