CSS Photo Album

Posted by Neville on July 14, 2012 under How To | Comments are off for this article

Interactive Photo Album

Have you ever been away on a trip and come back with a heap of photos that you meant to put in an album, and just didn’t get time to do that. Then they all ended up being thrown into the album loose. And you had intended to come back and sort them out.

What happened when you wanted to show them to your friends? They were still not sorted and you had an even better time sorting them out and passing them around for everyone to look at and comment. Grey Nomad Times Album

That’s what happened after our quick trip to Port Lincoln and back a few weeks ago. I had a lot of photos and just didn’t get around to adding them to my Grey Nomad Times site. So I just dumped them in there and now you can sort them out the way you like.

Well, not really. Actually, with the help of a little CSS and Javascript I now have a place where I can store some photos, and then move them around any way that I like. You can too! Why not have a go, and tell me what you think.I might even be able to share with you how to do that on your site!

 

Designing A Text Button For Linking

Posted by Neville on July 7, 2012 under Blogging, How To | Comments are off for this article

More CSS Styling

It’s been some time since the previous post, so now is the time to get back to some tips for adding features to a blog (or indeed any other site).

Making A Button Without Using An Image

Buttons and badges that you see  on blogs and websites are used to attract readers to click and be sent to another site. Most of these are images that are stored either on the site owner’s host or some other place on the web. To display that image requires the browser to download it from there, which has the potential to slow down the loading of the page on which is displayed.

Cascading Style SheetCSS (Cascading Style Sheet) styling can be used to remove the need to make that call to the retrieve the image. Thus making the loading of the page just a little more efficient. The time difference may not be significant, but for a site with many such calls for external links it can be helpful in speeding up the loading of the page.

Another benefit of using CSS coding for a button like the example in this post is that the code can be adapted easily to change the appearance or the text on the button without having to use a graphics application to edit it and then upload the edited button.

Get a Button Like this.

This simple button uses CSS and if you click the link it will take you to a service that gives you the opportunity to get the code to build your own button for your site(s).

Get Your Own Button

 

 

Why WordPress?

Posted by Neville on May 7, 2012 under Blogging, How To, Training | Comments are off for this article

Power and Simplicity

WordPressWordPress is the complete package for anyone wanting to create their own website. It can be used for almost any purpose, and is indeed being used extensively by high performing website owners.

It is a fully featured Content Management System backed by a huge community ready to offer support and advice. The addition of plugins to extend the functions of the basic installation adds tremendous power to WordPress.

Despite this great power, WordPress makes it easy for beginners to get up to speed and have a blog with new articles posted and added plugins in a very short space of time.

The Most Popular CMS

WordPress is the platform for countless types of websites such as personal blogs, community websites, stores, membership sites to fully featured eCommerce and fan sites.

Despite the popularity of the platform, the ability for each site to be tweaked and setup differently means that they do not all look alike. A WordPress based site does not have to have that out-of-the-box appearance that makes it just like many others. There are hundreds of freely available templates (or themes) that can also be modified with a little knowledge of html and CSS code.

By following this site you will discover some of the ways in which you can make your own unique site, based on the WordPress platform. This site uses a  free theme, with modifications that allow for the larger headlines with shadows, as a simple example. Stay tuned for more examples, with How To… instructions.

CSS: Why Bother?

Posted by Neville on July 27, 2011 under Blogging, How To, Training | Comments are off for this article

Is It Worth The Effort?

I have spent considerable time and effort in the most recent posts to experiment with CSS in the posts.

So, now it’s time to think about if that time and effort provide any real benefits. I guess the result of such consideration will depend on different points of view. So let’s get to it!

Why?

A blog theme comes with its own style elements for things like Headline fonts, colors and size. If these don’t really suit, that means changing to a different theme where they might be just right. But that often means that some other elements are not suitable.

CSS  can be used to modify the theme so that particular elements can be adjusted for best effect.

When?

Unlike the most recent posts, where styling with CSS has been used in each one, unless there is a good reason it may be best to use such styling less often. Overuse might reduce the effectiveness.

What?

There are many elements in a blog that can be adapted by using CSS styling. From the most obvious things such as manipulating font faces, color, size and position, to the use of boxes and shadows, to playing with images.

Where?

The examples in this blog have all been in posts. I have not been playing with other elements, such as headers and footers, so the emphasis has been on styling posts. This has been achieved by adding elements to the theme’s stylesheet. That brings up to the :-

How?

The process has been to devise snippets of code to perform various actions. These are then added to the stylesheet to be called on from coding in the individual posts.

As with many things that can be done to add to the features on your blog, it’s a matter of whether the extra effort is worth the result. The great thing about CSS styling by using a stylesheet is that an element can be declared once, and is then available for use over and over again.

If you are looking for help with getting some of those snippets of code and learning how to add and use them, I have offered help as one of the Talents at APSense.

Back Ground on Backgrounds

Posted by Neville on July 26, 2011 under Blogging, How To, Resources, Training | Comments are off for this article

Adding A Gradient Background

With No Images.

This box has a background that has been called from the Stylesheet.It has been made without using an image, just 2 colours.

Hopefully the effect can be seen in most modern browsers.

It has been tested in some of them, but unfortunately it does not seem to be working in all.

The styling commands look like this:

background: -moz-linear-gradient(#ADD8E6, #FFFFF0 ); for FireFox

An Invitation To Contribute

Posted by Neville on July 25, 2011 under Blogging, Resources, Uncategorized | Comments are off for this article

Help Write An eBook Report

Following up on the recent series of  posts in this blog where various aspects of using CSS to add style to a blog theme plans are being made to produce a short report that puts these together in one place. That report will then be made available here at this blog.

TopTeamAnother site in the dotrim stable has been established to allow for people to cooperate on task like this. That site, The TopTeam, is currently beginning the process of taking ideas from its contributors for including that report.

I encourage you to visit and add your suggestions for styling hints and tips to include in the report.

More Headline and Image Styles

Posted by Neville on July 18, 2011 under Blogging, How To, Resources, Training | 2 Comments to Read

A Smaller Headline Added

Hover over the images

 

 

 

In this example:

  • Another, smaller headline style has been added.
  • 2 images, one floating left and the other to the right are shown
  • Each image has been rotated and will return to normal position when the pointer hovers over it.

The code for these:

<div>
<h2 id=”ab”>Hover over the images (h2)</h2>
</div> For Small Headline

 

<div style=”margin: 40px; float: left; width: 200px; height: 200px;”><img src=”http://dotrim.com/……Network-Blog.jpg” alt=”” /></div> For Rotated Image.

How To Add CSS Snippets To Your Blog Post

Posted by Neville on July 10, 2011 under Blogging, How To, Training | 3 Comments to Read

Shadow Boxing.

The previous post indicated that there would be some posts added that will show how to add snippets of code that will call on various CSS procedures.

An example of that type of How To… post has been posted at the TopTeam blog, a sister blog to this one.

You are invited to visit the TopTeam blog to discover how to Add A Box With Shadow to your blog post.

Stylesheets: CSS Styling For Blog Posts

Posted by Neville on July 8, 2011 under Blogging, How To, Training | Comments are off for this article

Using A Stylesheet to Style your Blog.

This method is the most efficient way to use CSS code in your blog. The elements, classes and ids that you set up in the stylesheet can be used over and over, without having to insert the whole code into its location, just the details that will call on what you want to happen.

The following examples come from modifications that I made to the stylesheet for this theme.

1: Shadows around boxes or divisions to make them stand out from the ordinary text.

This slab of text is enclosed in a division that has been given the class that makes a shadow around the box. This is ideal for text that  you want to highlight. It may be a quote from another source, or an important point that you want to emphasise.

 

 

2: To modify the standard values for elements. eg to make a bigger headline text.

This is the standard headline size 1.

This is styled headline size 1

Please note that a text shadow command has been used above, in addition to the change in size and colour.

3: To modify images. For example, adding round corners.

How to use the Stylesheet for adding features to your blog.

IMPORTANT: Before you begin:

Back Up Your Blog.

  1. Prepare the code to be added.
  2. Open the Editor from the Appearance menu on the Dashboard
  3. Locate the Stylesheet. In this theme it is called style.css
  4. Decide on a location to add your code. I choose to put it at the end, where it is easy to find if necessary to edit or remove.
  5. Paste the code on to the stylesheet
  6. Save the file. You are now ready to add the code to your posts.

A future post will outline how to add the code that calls the commands from the stylesheet. Once again, stay tuned.

Inline Style: CSS For Styling A Blog Post.

Posted by Neville on July 7, 2011 under Blogging, How To, Resources, Training | 2 Comments to Read

Using Inline Style In Blog Posts

dotrim

CSS Inline Style

So now it’s time to begin to add some style to your blog posts. To do that you can use inline styling. In this post I will discuss and demonstrate how to do that.
But first, what can you do with Inline styling.

1: You can make  a simple button to link to another site.

2: You can use commands to set out your text in different ways.

This paragraph has extra spacing between letters.

This is normal spacing.

3: Adjust the font.

The font size is set to 36 pixels

4: Change the Font Face.

This is Arial Font, size 24 pixels and Bold

These examples just scratch the surface of what is possible.

So now I guess that you are asking how is it possible to do these little tweaks.

All of these variations to the normal text and features of a blog post have been achieved by adding some basic CSS code into the HTML editing box when the post was being prepared.

Using the first example, the basic button, the effect was made by

  1. Editing the post in the HTML editing box.
  2. Preparing a division (the <div> and </div> tags) to take the code and to hold the result.
  3. In the <div> tag set up the style selector. In this case a box with a border. (eg <div style=”font-size:24 etc”>)
  4. Add the link code into the division.
  5. Publish the post.

Please note that using Inline styling is not the most efficient way of adding style to your blog if there are some features that you want to repeat on other posts. This type of styling needs to be set up each time that you want to use it.

A later post will outline the more efficient way of using CSS, the Stylesheet. Stay tuned.