Some Lace for this Winter

{Read in Italian...}

Winter has finally come here, after a very warm fall.
This makes me think that I haven't even started thinking about winter and Christmas creations: I have to hurry!

Today I want to show you a couple of earrings that I'm liking a lot and wearing often, because of their elegance and because they're lightweight.
Lightweight earrings made out of grey lace with small crystals.
They're made out of lace, quite firm, so I didn't have to starch it. I love this grey, slightly shimmer. I wanted to add another touch of light, with three small crystals.
I'd like to create more of these lace earrings, hopefully I'll be ready to show them off soon!
Bailey says Hi
Bailey says Hi: she's four months old now, she's a big and playful kitty!

How to choose a good Background for your Blog #4

{Read in Italian...}
come scegliere lo sfondo del blog 4
Hello! This is our last lesson about backgrounds.
So, we've made our choices: now we have to apply our background to our blog.
Again, I'm going to talk about Blogger interface, but of course the codes are universal and will work on any content management system, like Wordpress.
Blogger template designer lets us do almost everyting we need; however, it may happen to be unable to use this editor. Reasons can be multiple: maybe our template doesn't fully support it, or maybe we've been adding some code that has overwritten those selectors that normally allow the template designer to work.
What should we do then? Stick with our current background forever? No way! Editing the code related to our background is easy. Just remember:
keep calm and backup your template
Go to “Edit HTML”, press CTRL+F then type in the search box body. Scroll down until you find a CSS code similar to this:
body {
font: normal normal 15px Arimo;
color: #333333;
background: #ffffff none no-repeat scroll center center;
}
Your code might be slightly different, but for sure you will find the selector body and its attribute background. That's all we need.
Let's try to understand what these values mean.
  • #ffffff: this is our background color. This value (called hex-code) is made of a hashtag followed by 3-6 numbers and/or letters. In this example, we have a white background.
  • none: there are no images. If I had a background image, there would have been an URL in this place
  • no-repeat: if I had an image, with this value I'd prevent it from repeating. If I wanted to use a pattern, one that needs to be repeated to make sense, I would have typed repeat.
  • scroll: if I had a pattern, with this value my background would scroll down along with my content. If I replace this value with fixed, this would not occur: the pattern would still cover the whole window, but it wouldn't scroll down along with the content. It can be a nice effect, adding dimension to our blog.
  • center center: defines the position of a background image, both orizontally and vertically. With our example, the image would be centered (and then repeat itself if we specify a “repeat” value). Other values can be top, bottom, left and right.

Now, if we want just a solid color, look for its hex-code. You can check it from here: once you got it, copy and paste it into your CSS.
If we want an image or a pattern, first of all we need to upload it somewhere, to get a direct link, as we've already said in the previous post. Then, replace none with url(“”) and paste the link in between the quotation marks. Or, if we already have a background image but we want to change it, just change the link.
We're done!
Here's an example of what the CSS of a patterned background might look like:
background: #ffffff url(“http://yoursite.com/image.jpg”) repeat fixed top center;
That's all. For any question, feel free to leave me a comment!

Previous lessons:
1. General rules.
2. Solid colors and pattern dos and don'ts.
3. How to use a full-sized image as background.

Back with a new look!

{Read in Italian...}

Finally! These last two weeks have been extremely chaotic, with colds and headaches and so many things to do... But now I'm glad I can tell you that I'm done with my latest blog restyling!
It is terribly hard for me to work for myself: I'm such a perfectionist with a wide range of tastes, I'd totally be the nightmare for any designer if I were a customer ;)
Blog Design board for 'Tine the Lazy'
I decided to go for a super-minimal design, with the greatest attention for proportions and details. This makes me feel well represented with my OCD........
In my drafts used more graphic elements, but they just didn't fit. So now I have my colors and my fonts to talk about the personality of this space. Sometimes that's all you need, images and extra graphics are not mandatory under any circumstance! There are still some drawn elements, like those of my header and the "back to top" button. Some round shapes and dashed lines complete my scheme.

I also improved my navigation bar, giving a lot of attention to my About and Contacts pages. Sometimes we tend to neglect these pages, but that's a big mistake! My advice to whoever runs a blog or a website is to put a lot of care into them, these are the first pages that a potential reader can hit...

Talking about social and SEO-friendly improvements, I merged my Blogger account with my Google+ profile.
I've always been neglecting G+, but the more we move forward, the more this social network takes relevance in order to gain visibility and authority on search engines, so I have to get used to it!

I hope that you like the new look of my little space :)

How to choose a good Background for your Blog #3

{Read in Italian...}
how to choose a good background for your blog 3
Hello! Let's go further with our lessons about blog background.
We've already had an introduction and we talked about solid colors and patterns, so today we can see what to do to have a stretchable image that fits our whole browser window as background, without repeating itself or leaving blank areas.
Here's an example:
how to choos a good backgroud for our blog 3
I'm not a Wordpress expert right now, so I'm going to explain the steps of the process through Blogger user interface, but of course the CSS code is OK for any blog-publishing service.

You're going to need a good, optimized image. It must be lightweight (try not to get past 300 Kb), keeping an acceptable quality (it doesn't have to be blurry or noisy) and with a correct aspect ratio (so that it won't be deformed when stretched to fit your browser window).
Blogger's advice is to use something 1800x1600 px, which is a good compromise to fit an average resolution.
You can get to a good result quite easily if you have a little confidence with any photo editing software.

General rule for digital images: never, ever, ever try to enlarge a small image!

If we get a nice, optimized image for our purpose, we can go further, but first of all backup your template!

My advice is to open a second blog for testing purpose, so you can try and try again until you get what you want, without messing with your public blog.
For my example I used one of Blogger Travel templates, which comes with a semi-tansparent content background: this way our image can stand out, without impairing readability.

First, you have to upload your image, so that you can get a direct URL. You can do it through image hosting websites like Photobucket, or you can upload it on a post from your own blog, without publishing it, just saving (this is the method I personally use).
Just do as you prefer and get an URL.

Now, from Blogger interface go to Template → Customize → Advanced → Add CSS.
Copy and paste this code:
html, body {
background: url('background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Replace 'background.jpg' with the link to your image and click on "Apply to Blog".

That's it!

Warning: people still using obsolete browsers, like Internet Explorer 6-7, may not see your background correctly: these browsers don't support these CSS features!
The choice to risk to have a couple of potential readers not seeing your background properly is up to you.
Anyway, let me know if you encounter any problem...

More:
1. General rules.
2. Solid colors and pattern dos and don'ts.
4. Implementation.

Pet Tag... with Pasta!

{Read in Italian...}

Hello everyone! Me and my bf are leaving for the weekend and little Bailey is going to stay with my in-laws for a couple of days.
Pet Tag... with Pasta!
I must admit that I'm not really happy about that, even if I know that our kitty will be safe with them...
I've already trained her to wear her colllar and tag: both beautifully handmade, bought from Etsy.
Pet Tag... with Pasta!
Collar from FunkyMutt. You don't say my favorite show is Doctor Who, right?...
There's only one problem: her tag shows my home phone number. Not very useful if we're not there!
Pet Tag... with Pasta!
Tag from FetchAPassionTags. Part of their profits goes to Rescue worldwide: another good reason to take a look! The key charm was added by me.
So I thought that I could create a second tag by myself, with my in-laws' phone number.
I used polymer clay, that I stamped with... veeeery professional tools: pasta!
Pet Tag... with Pasta!
When I saw this tutorial on Pinterest, I thought: “shame that this stuff doesn't exist in Italy”, but I was wrong: I found this alphabet pasta while I was doing my usual grocery shopping!
So here's the result...
Pet Tag... with Pasta!
My in-laws' phone numer is on the other side: I didn't show it for obvious privacy reasons.
… and my creation worn by the gorgeous model...
Pet Tag... with Pasta!
So, what do you think? I wanted to decorate it with pigments to enhance the look of the letters, but I was afraid that it wouldn't have been safe for Bailey if she tried to bite it...

Have a nice weekend!
Related Posts Plugin for WordPress, Blogger...