Blog Designs / This Summer Only!

I get so many compliments on my blog design, and so many design requests, that I finally decided to offer custom blog designs at an affordable price. I am also offering $5 add-ons and logos. Head over to my design page to learn more and be the first in line for a design. The first person to submit a form will get %20 off of their order!

They will only be available until the end of August, so if you would like to get one, don't wait! I may or may not offer them again. Most of the money that I will earn will be saved for college.

I look forward to working with some of my lovely readers!
xo Rachelle

More CSS Codes to Improve Your Blogger Blog

 

Last year I did a post on basic blogger css codes to improve your blogger blog, and I got an overwhelmingly huge reply. It is my most popular post and continues to get feedback every week. Thank you so much! I decided to share a handful of other CSS codes for Blogger that I have found helpful in customizing my blog.

To apply a code to your blog, just go to "Customize Template > Advanced > Add CSS" then add the code into the box and save it.

TO REMOVE THE SPACE ABOVE HEADER (after removing navbar)

.content-inner

{

margin-top: -40px !important;

}

___________________________________

TO REMOVE "SHOWING POSTS WITH LABEL" MESSAGE

.status-msg-wrap {
display: none !important;
}

___________________________________

TO MAKE ALL IMAGES THE SAME SIZE
*this will make ALL images in posts and on pages the same size

.post-body img {

width: 400px;

height: auto;

}

.post table.tr-caption-container img {

width: 400px;

height: auto;

}

___________________________________

TO SEPARATE WIDGETS WITH SOLID LINE

.sidebar .widget {
border-bottom: 2px solid #F2F2F2;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

___________________________________

HIGHLIGHT WIDGET TITLES

h2 {
background:#000000;
} 


I hope that you found this very helpful!
Have a wonderful day.
xo Rachelle

How to Replace Your Header With an Image Map · Blogger

 

Ever since I posted "basic blogger css codes to improve your blogger blog" , I have received many requests for more css/html codes and tutorials, and I decided to share a tutorial that I would have absolutely loved to read when I first started blogging.

This tutorial will teach you how to replace your blog header with an image map, which is basically just an image with links on it (like my header). That way you can have a more personalized navigation bar to make your blog even more unique!

1. Create your new header image with Photoshop, Picmonkey, or any other editing program that you like. *TIP: Save your header image as a .png file to ensure sharp fonts and graphics.

2. Upload your new header to www.image-maps.com, and create links over different parts of your image.

3. Once you have finished, click "Get Your Code", and then click "HTML Code" in the tabs, and don't copy the code until step 9 (but make sure that you leave that page tab open!).

4. Now go to your Blogger Dashboard, select your blog, and go to Template → Edit HTML.

5. Hold down 'Ctrl+f' and search for these following lines in your HTML code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>2<b:widget id='Header1' locked='true' title='YOUR_BLOG_TITLE (Header)' type='Header'/>

6. Change 'maxwidgets' to '2', 'showaddelement' to 'yes', and 'locked' to 'false', so that it looks like the following code:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'> <b:widget id='Header1' locked='false' title='YOUR_BLOG_TITLE (Header)' type='Header'/>

7. After you have done that, save your work, and head back to your blog layout.

8. Once you are there, click 'edit' next to your header, and then click 'remove'.

9. Now add a new HTML/JavaScript gadget in the space where your header used to be, and finally copy and paste your image maps code into the gadget. Once you have saved your new gadget and viewed your blog to check that it looks good and the links work correctly, you are done! Good job! :)

I will be sprinkling a few more blog code posts around my blog in the future, so be sure to let me know what kind of tutorials you would like! Anything from blog advice to css/html codes, I would love to share it with you.

And if you have any questions at all, just leave a comment and I'll get back to you!
xo Rachelle

Font Haul

Hello!

I recently went on a little font spree and downloaded a bunch of brilliant new fonts that I love, so I thought that I would share them with you in a little font "haul". :) 

Here are a few of my favorites...

They were all free, and I downloaded them all from dafont.com. 

Sorry if some of them look a bit fuzzy...Photoshop kept crashing when I was trying to create the picture of all the fonts together, so some of them got a little pixly/fuzzy. I promise that they aren't when you download them, though!


I think that my favorite one is Peach Milk...it's so crafty and I just love it!

What are your favorite fonts?

xo Rachelle

Basic Blogger CSS Codes to Improve Your Blogger Blog

I love designing blogs and coding to make them look pretty, so I decided to share some basic CSS codes to help you achieve your dream blog design. I use all of these codes and they are so helpful. To apply the code to your blog, just go to "Customize Template > Advanced > Add CSS" then add the code into the box and save it.

REMOVE DEFAULT BLOGGER IMAGE BORDERS

.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;

}

CENTER YOUR BLOG HEADER

#header-inner img {margin: 0 auto !important;} #header-inner {text-align:center !important;}

CENTER YOUR POST AND DATE TITLES

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


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

CENTER PAGE TABS

.PageList {text-align:center !important;}

.PageList li {display:inline !important; float:none !important;}

DECREASE THE SPACE BETWEEN POST TITLE AND DATE HEADER

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

(edit the red text to your liking)



ITALIC LINKS ON HOVER

 a:hover { color: none; font-style: italic;
text-decoration: none; }

(if you wish for the link to change color on hover as well, then just replace the red text with the name of a basic color or the color html code) 


I hope that you found these codes helpful!
Be sure to let me know if you have any trouble with them or if you would like the code for something else. I would love to help you. :)

xo Rachelle

Changes in the New Year

Hello!
First of all, happy new year! I am so sorry that I haven't posted since last year... :) Anyway, I'm Rachelle...and if you've visited the about page, you probably already know that. :) I write the posts for this blog and my awesome mom takes the pictures and comes up with lots of fantastic ideas and also proofreads the posts. :)

My mom and I started Stella Bella Girls in May 2012 as an online webazine type website, where we released a new "issue" every month. Basically, I just updated the website with new crafts and such, but in July I decided to change it into a blog since it would be updated more often and my mom and I both felt like it was a better idea. I started posting in August, and have been ever since! It has been very fun and I really appreciate my readers. <3

However, ever since my mom and I began SBG, we both felt like it was too much of a company or machine...and we've been talking and decided that we want to make it more personal. From now on, I will be writing the posts from a more personal perspective (for example, saying "I" instead of "we") and try to make it a better blog. :)

Since I will be doing this, I think it would be appropriate to change the name...I feel as if "Stella Bella Girls" suggests that multiple girls are writing on it or something. My mom and I chose that name because "Stella Bella" means "beautiful star" in Italian, and the Bible encourages Christians to be shining stars, so we wanted to encourage middle school and high school girls to be beautiful stars. I think that it DID fit the website, but for the blog I want to choose a new name. Please write any suggestions in the comments! Keep in mind that it will still be a blog that is focused on God and I will post devotionals, but I will also do DIY crafts and many other fun posts. :)

Thank you for joining my mom and me on our little journey! I pray that this blog is a great encouragement to you.
xoxo
Rachelle