Pages

Sunday, November 27, 2011

3

CSS styling with gradients

A little while ago I made my gradient PNG data URI tool for the comment bubble CSS. Gradients can be used many ways in CSS. I just styled two elements on this blog, the sidebar gadget titles, and the search button(s):


I just quickly made some gradients using the colors in my blog – and here is the CSS for these:
.sidebar .widget h2 {
padding:1px 0 1px 3px;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAABCAYAAACbv+HiAAAABHNCSVQICAgIfAhkiAAAAGRJREFUKJGdkkEOgCAMBGf5/0t8nF/QA7ExUJfKiZQJ7YStzoMLBGr0U4DQU8ddC0bCZFi8e3EZls2RYeOcbffJwbmPvZz72qHknvh9u+d+pZw23eecfL4q/t+vHXPui3yzHbsBQ9wD/WdajeAAAAAASUVORK5CYII=) 100% 100%;
}
input.gsc-search-button {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAYAAACgXdXMAAAABHNCSVQICAgIfAhkiAAAACFJREFUCJljeLeK4T/Tj18MDEzffzEw4GH9xCtLLAufKQB+SDdFA0XBigAAAABJRU5ErkJggg==) 100% 100% !important;
}
(double click to select for copying)
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

3 comments:

Ariel said... [reply]

Hello I think you could help me with these 2 doubts, It's not about this post but didn't find a post for this

Doubt 1) how can I reduce the space at right side of the blog? see this image http://goo.gl/U388O
It's the awesome templates, I could reduce the other spaces but not this

Doubt 2) Is there any way of in a particular post the post be more width? Because I'd like make a post that cover all the screen, on that case the total width of the blog will increase, I'll be also in the awesome templates

MS-potilas said... [reply]

@Ariel
Hi Ariel,

unfortunately I'm not familiar with those templates. But I'll give you some tips which might be useful:

I think that space comes from some margin or margin-right definition.

When editing html pages/styles, I use Google Chrome and "Inspect element" functionality, it shows you the styles of the elements and you can even modify them on the fly and see what the changes do.

On some templates (like Simple) you can make posts area wider, but it is always for all posts and whole blog. There might be some templates that have dynamic post width (depends on the browser window width), or wider width in single post view.

A good place to ask template questions is the Layouts and Templates forum in Blogger forums.

Ariel said... [reply]

@MS-potilas
Thanks, and my comment has nothing to do with your tutorial delete all, I have already read your answer

And thank for so fast answer! bye

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: