Well their not exactly tricks, anyone that knows HTML5 already knows these. but for those of us that don’t this can be priceless. I know I’ve spent way to much time finding them, and in my mind these are functions that should be incorporated into the “kitchen sink”, and maybe they are through some plugin. If you know of any please let me know.
These codes work in the HTML Editor as I’m sure you guessed, not the Visual Editor.
1. Disables title’s showing on pages and posts
Sometimes you don’t want the page/post title to appear, for various reasons, so to get rid of them just drop this into your themes Custom CSS window (if you have one) and the title of the Page or Post won’t appear (you can always add a title later, in case you want to have a different title then the page/post title and/or customize it). I haven’t applied it on this site but i usually apply them on my clients sites.
display: none;
}
2. Adding/making columns/text boxes (with or without borders)
<div style=”float: left; width: 550px; height: 110px; background:#fff; color: #fff; border: 1px solid #333; padding: 10px; margin: 5px;”>
Insert text here
</div>
Example:
text-shadow: 2px 2px 3px #444;
The 1st nr. controls the left & right, the 2nd controls the up & down, the 3rd the spread of the shadow and the last the color. Use negatives (-) to change direction (left instead of right, up instead of down).
To make the corners rounded add border-radius: 20px; by changing the px number you change the roundness.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla ligula, sollicitudin vitae mollis et, ullamcorper non purus. Nulla ut vulputate arcu. In at est nisi. Maecenas fermentum porttitor mi, eget rutrum elit feugiat ut. Donec egestas, lorem sed sollicitudin malesuada, risus metus accumsan magna, id sollicitudin sapien risus id eros.
You can also make the background an image by adding url(‘http://anysite.com/any_image.jpg’) no-repeat top center; after background: #fff like this background: #fff url(‘http://anysite.com/any_image.jpg’) no-repeat bottom center;
<div style=”float: left; width: 570px; height: 120px; background: #dbd093 url(‘http://anysite.com/any_image.jpg’) no-repeat top center; color: #fff; margin: 30px 0 10px 50px; text-align: left;”>
Insert text here
</div>
To make the background not just one color but a gradient add…
background: -moz-linear-gradient(white, #1C5FA5); …for Mozilla Firefox
background: -webkit-linear-gradient(white, #1C5FA5);…for browsers like Google Chrome or Safari
background: linear-gradient(white, #1C5FA5);…for other browsers like Internet Explorer or Opera
You have to add all 3 lines if you want your colored text box to be visible in other browsers too.
The only problem is, if you go back to the visual editor, it “cleans up” your code and removes these. The obvious answer is to not use the visual editor.
3. Changing font, size & color
Sure you can change color, and maybe even size by making it a different heading, but that way is very limited. A lot of people first make it look good in Word and then copy it over with the “Paste from Word” button, that is an option and for some it’s the easiest, but if your reading this then you’re looking for something more.
<span style=”font-size:14px;”>but it’s fiddly</span>
<span style=”font-family:georgia; color:#2233ff;”> and not worth the hassle </span>
<span style=”font-family:arial;color:#ff00ff; font-size:xx-small;”>all the time.</span>
Just paste this into your HTML window and see what happens
Bear in mind that you can only use fonts that are installed on your computer AND the viewers. So if you download a cool font and use it then probably only you will see it.
For font sizes you can use words such as xx-small,x-small, small, medium, large, x-large, xx-large or dimensions in pixels 12px, 16px, 22px, 30px …
The smallest size you can use in WordPress is xx-small or 12px.
If you find yourself changing size or font a lot then you can also change the default font and size in the Style.css file (you should be able to access it either through the themes editor or if you can access the database where your website is running from).
Now these might seem a bit too technical and maybe they are, but i prefer using this instead of a plugin, because the plugin might do this or just some of it and chances are it doesn’t do everything you want, what i’m saying is that you have more control this way, you can add or take back any part and modify any part.
I’m not saying the perfect plugin to do these doesn’t exist i just haven’t found it.
If you know or find a plugin that does all or some of this then please leave a comment.
Email
Facebook
Flickr
DeviantArt
RSS
Twitter