Tag archive for: CSS

How to create a Carousel in WordPress with Slide Anything

When you have been adding content to your website for some time, you may notice two things:

1. There are many pages that are never visited in months or even years.
2. The home page will always have page views.

Given these points, the home page is one place where you have the chance to promote pages that are rarely seen organically.

If your website is realised by polyglot stack, then you will find the Slide Anything plugin useful for creating a Carousel for your WordPress instance.

Given that, this post shows how you can create a Carousel in WordPress with Slide Anything.

CSS styles for styling image alignment in your WordPress pages and posts

When you create your own WordPress theme, one of the things of provide for is the ability to style image alignments.

By default, the WordPress Editor will include one of the predefined CSS classes when we add images to a post or page.

Therefore, by providing the CSS styles for each of these classes, we will be able to style the image alignment of our WordPress pages and posts.

Given these points, let us look at the CSS styles for styling image alignment in our WordPress pages and posts.

How to make a portion of your sidebar sticky as you scroll till the footer of your web page with jQuery and some CSS styles

You want a portion of your sidebar to stick as you scroll down your web page.

When you reach the footer of your web page, you want that portion to stop just above the footer of your web page.

In this case, you can use jQuery to help you achieve this behaviour.

Given that, this post shows how to make a portion of your sidebar sticky as you scroll till the footer of your web page with jQuery and some CSS styles.

Flexible CSS rule-sets to keep your images within their parent element

Since an image is worth a thousand words, we use images in your webpage to express complex ideas succinctly.

By default, if we do not specify any dimensions for an image, most browsers will show the image according to its actual size. In this situation, an image will appear to spill over the boundaries of its parent element if it is bigger.

For example, the following screenshot shows the image at https://commons.wikimedia.org/wiki/File:LARGE_elevation.jpg spilling over its parent element:

One way to prevent a larger image from going beyond the boundaries of its parent element is to give a standard width to all images. However, if the actual width of an image is smaller than the given width, the image will be stretched:

This post shows the CSS rule-sets that you can use for flexibly keeping images within their parent element.

Implementing Google Custom Search as a WordPress page without using any plugin

Creating a search engine to search content across a polyglot website is not an easy task. In order to do that, you need to either:

• take a search query and match it across data repositories from different application processes, or
• have a process that will maintain an index of content from the different applications and search within that content.

Since Google had indexed most of the content in the Internet, Google Custom Search can be the easiest way for us to implement site-wide search. In addition to fast searching, Google Custom Search also comes with AdSense monetization.

In case you need it, this is how you can implement Google Custom Search as a WordPress page without using any plugin.

How to make a HTML search box with the input text field and search button within the same enclosing box

Since Google had indexed most of the content from my website, Google Custom Search is the easiest way for me to implement site-wide search. In addition to fast searching, Google Custom Search also comes with AdSense monetization.

Given these points and some time on hand, I had recently implemented site-wide search with Google Custom Search.

In addition to building the search page to display the search result, there is a need for a HTML search box beside the top navigation links:

Since I had spent quite a bit of time on building the search box, I decided to document the steps in this post for future references.

With this intention, this is how to make a HTML search box with the input text field and search button within the same enclosing box.

Make your PHP webpage loads faster by aggregating external CSS scripts

In most cases, the speed of which a browser completes the rendering a of webpage is very much dependent on the network connection which connects it to a web server. While some browsers have the luxury of fibre connections, there could be others that are rendering your webpages via a mobile network.

Because each HTTP response consists of the header portion in addition to the actual content, we could reduce the number of bytes that our browsers need to read from our servers by aggregating external CSS and JS scripts.

Essential css properties for using a background image on a html submit button

There are times when you feel that the default look of a submit button is just not enough for your webpage. One way to change the default look of your submit button is to use a background image. In this post, I document my attempt in using a background image for my submit button in the search this blog section of my blog.