August 26, 2014

CSS CRASH COURSE

I've recently had lots of questions regarding the CSS I use to change different aspects of my blog design. I'm not sure about all the technical terms, but I do know adding CSS to your design allows you to make minor changes without having to re-write a bunch of HTML code. When I first started blogging if I had questions about changes I wanted to make I would ask Tyler. Over time I started trying to figure out these changes on mine own. Thank goodness for Google. Anything I wanted to know I googled it.
The longer I blog the more CSS code I find, because I'm constantly looking for different ways to change or tweak my design. I'm super pumped for today because I'm sharing all the CSS that I'm currently using. I'm not a designer of any kind, I have simply found CSS that works for me.

1.) You need to know how to add CSS to your blog.  CSS can be added through template customization. Under the advanced settings there is an option to add CSS. Easy peasy, right? Hurray!

2.) You simply have to add the different CSS that you would like. Start coping and pasting like a pro!

---- Removing the Shadow Box from Images ----

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

---- Centering Your Post Title ----

.post-title { text-align:center; }

---- Centering Your Post Date ----

.date-header { text-align:center; }

---- Justifying your Post Text ----

.post { text-align:justify; }

---- Centering you Tabs  ----

.tabs {text-align:center !important;}
.tabs li {display:inline !important; float:none !important;}

---- Adjusting the width between your post title and header ---- 

h3.post-title {
margin-top: -10px !important;
}

.tabs-outer{
padding-bottom: 40px !important;
}

---- Adjusting the width of your post photos ---- 

.post-body img {
width: 700px;
height: auto;
}
What do you think? Will this CSS help you in your design ventures? What CSS are you currently using? Do you have any design tips for us?

Follow along : Instagram | Facebook | Twitter | Pinterest | Bloglovin | Shop

No comments:

Post a Comment

**I love reading all your sweet comments and love getting to know every single one of you. I do my best to respond to every comment and will do so via email. If you don't receive a response, you may be a no-reply blogger.

Related Posts Plugin for WordPress, Blogger...