Posts mit dem Label HTML/CSS werden angezeigt. Alle Posts anzeigen
Posts mit dem Label HTML/CSS werden angezeigt. Alle Posts anzeigen

Freitag, 29. März 2013

Create your own cursor

I don't know why, but I couldn't find a simple tutorial about how to make your own cursor. Although it's really easy and I think everybody can do it. Even without great knowledge about HTML.

1. Of course, you need a graphic or picture that you want to use for the cursor. You can make it with any photo edit program like GIMP. Pick the size of the cursor, like 50x50. If the background of your graphic is transparent, make sure you save it as GIF or PNG. Otherwise, the background will just be white.

2. Upload the picture somewhere, if you save it as GIF, make sure the website support it. For exemple: flickr.com dosen't support it.

3. Copy this Code
<style> body, a, a:hover { cursor:url('PICTURE-URL'), auto }</style>
4. Replace PICTURE-URL with the URL of your graphic

5. Copy the finish Code in a HTML Widget and you're done.



Mittwoch, 14. November 2012

Blockquotes stylen

Heute will ich euch zeigen wie man Blockquotes stylen kann, wenn ihr nicht wisst was das ist, siehe unten.
So sieht es z.B bei mir aus
Blockquotes---Blockquotes---Blockquotes
Diesen Code müsst ihr bei Vorlage--->HTML bearbeiten, in CSS Bereich reinkopieren. Wo ist eigentlich egal, muss aber in der CSS Bereich sein.

So sieht der CSS Bereich aus. Ich habe nur irgendein Abschnitt genommen.






/*Blockquotes
----------------------------------------------- */
blockquote {
font: 12px normal
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
margin-right: 20px;
padding-left: 15px;
padding-right: 15px;
border-left: 1px solid #CCE7FF;
border-top: 1px solid #CCE7FF;
border-bottom: 1px solid #CCE7FF;
border-right: 1px solid #CCE7FF;
background-color: #FFF5FE;
}


font: 12px normal | 12px ist die Grösse, normal stellt die Schrift normal dar, ersetze es durch oblique, wenn du es kursiv willst. Ihr könnt auch die Schrift Einstellung bei jedem Post ändern, einfach Text makieren und einstellen und z.b unterstrichen. Farbe kann man auch so ändern.

margin-top/bottom/left/right: 20px; | Steht für den Abstand von Rand der Blockquote zur Rand des posts, die Zahl vor px könnt ihr beliebig ändern.


padding-left/right: 15px; | Der Abstand von Text innerhalb des Quotes zur Rand


border-left/top/bottom/right: 1px solid #CCE7FF; | Entscheidet über die Farbe und die Dicke des Rahmens. Lässt ihr ein Element aus gibt es auf dieser Seite einfach keinen Rahmen.
background-color: #FFF5FE; | Entscheidet über die Hintergrund Farben, ich habe einfach weiss genommen. Alle #xxxxxx sind Farbcodes und können geändert werden. Farben findet ihr bei ColorPicker

Ich hoffe dieses Tutorial war ausführlich genug.