Page Image Alignment

0 Comments

Welcome to image alignment! The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let’s get started.

On the topic of alignment, it should be noted that users can choose from the options of NoneLeftRight, and Center. In addition, they also get the options of ThumbnailMediumLarge & Fullsize.

Image Alignment 580x300

The image above happens to be centered.

Image Alignment 150x150The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!

And now for a massively large image. It also has no alignment.

Image Alignment 1200x400

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

Image Alignment 300x200

And now we’re going to shift things to the right align. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there… Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah… Just like that. It never felt so good to be right.

And just when you thought we were done, we’re going to do them all over again with captions!

Image Alignment 580x300

Look at 580×300 getting some caption love.

The image above happens to be centered. The caption also has a link in it, just to see if it does anything funky.

Image Alignment 150x150

Itty-bitty caption.

The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!

And now for a massively large image. It also has no alignment.

Image Alignment 1200x400

Massive image comment for your eyeballs.

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

Image Alignment 300x200

Feels good to be right all the time.

And now we’re going to shift things to the right align. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there… Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah… Just like that. It never felt so good to be right.

And that’s a wrap, yo! You survived the tumultuous waters of alignment. Image alignment achievement unlocked!

Top

Halo Theme

You are running Inferno version 1.0

You are running this admin panel in demo mode. This requires You to activate cookies, if You want to take Your changes effect.

Please note, that some functionality is stripped in demo mode. That said, You are not able to upload any files

Responsive layout

Do you want to activate the responsive (mobile) version of the page or do you want to disable it (latter will not scale accordingly to display size).

Favicon Image

Upload Image Remove

Theme orientation

Box shadow

If boxed layout is turned on you can give the box a shadow.

Tothetop-Link

Do You want to show a Link at the bottom to scroll smoothly to the Top of a page?

Logo Type

Do You want to use an Image or Text as Your Logo (Text can be styled with Google Webfonts)?

Logo Image

Upload Image Remove

Logo image height

Requires custom stylesheet to be enabled.

Header stripes

Show stripes in the header.

Mega menu

Activate mega menu or have classical dropdown menu otherwise.

Mega menu thumbnail hover effect

If mega menu is activated and you use featured post images in the menu you can set a hover effect for them here.

Search

A search in the navigation.

Article featured image on Listings

Show the featured image on the Post Listing Templates (Post Overview, Archives, Categories, ...)?

Article featured image on Single Post

Show the featured image on the Single Post View?

Blog header type

Blog header image

Upload Image Remove

Blog sidebar

Blog index excerpt

Do you want the excerpt on post listing pages like the blog index to be shortened automatically or manually with the <!-- more --> tag?

Show post tags

Whether you want to show post tags or not in the post meta information.

Show post categories

Whether you want to show post categories or not in the post meta information.

Show post author

Whether you want to show the post author or not in the post meta information.

All posts in portfolio

Turn on to request all the portfolio works without site pagination.

Portfolio posts number

Isotope portfolio

Use common isotope portfolio with filtering. Alternatively the portfolio index site will not have any effects but category listings will have a unique scroll effect.

Mark new works as 'New'

Image width in the portfolio

Image width in the portfolio

Portfolio hover effect

Portfolio lightbox

Do you want to use a lightbox in the portfolio instead of linking the portfolio post page?

Contact Form 7 shortcode

Contact adress

Phone number

Email

Contact Google Maps shortcode

Logo Image

Upload Image Remove

Copyright

Header style

Do you want to activate header decoration lines?

Footer style

Decide whether you want the footer to be displayed boxed or in full width.

Content area drop shadow

Activate shadow on the content box.

Custom CSS file

Do You want to load an aditional CSS file, which will allow you to style the theme itself by the options provided in this panel? All options in the 'fonts' and the 'style' section of this admin panel are meant to be working only with this option activated.

Background color

Only, if the option below is deactivated.

Use pattern as background

If you want to use the option below you need to turn this option on. Otherwise the background color option above will take effect.

Background patterns

Global Site Font

Show Google Font for this Option. Hide Google Font for this Option.
Grumpy wizards make toxic brew for the evil Queen and Jack.
You can view all Google fonts here. Consider, that You have to respect case-sensitivity. If the font has been successfully recognized, the demo text will change to the entered font.

Site text size

Common content text color

Logo Font

Show Google Font for this Option. Hide Google Font for this Option.
Grumpy wizards make toxic brew for the evil Queen and Jack.
Requires You to select Text Logo in the General settings.
You can view all Google fonts here. Consider, that You have to respect case-sensitivity. If the font has been successfully recognized, the demo text will change to the entered font.

Logo Font Size

Only, if You selected Text Logo in the General settings.

Logo Font Color

Only, if You selected Text Logo in the General settings.

Slogan Font

Show Google Font for this Option. Hide Google Font for this Option.
Grumpy wizards make toxic brew for the evil Queen and Jack.
You can view all Google fonts here. Consider, that You have to respect case-sensitivity. If the font has been successfully recognized, the demo text will change to the entered font.

Slogan Font Size

Color for slogan

Navigation Font

Show Google Font for this Option. Hide Google Font for this Option.
Grumpy wizards make toxic brew for the evil Queen and Jack.
You can view all Google fonts here. Consider, that You have to respect case-sensitivity. If the font has been successfully recognized, the demo text will change to the entered font.

Navigation Font Size

Navigation Font Color

Navigation Font Hover and Active Color

Tagline Font

Show Google Font for this Option. Hide Google Font for this Option.
Grumpy wizards make toxic brew for the evil Queen and Jack.
You can view all Google fonts here. Consider, that You have to respect case-sensitivity. If the font has been successfully recognized, the demo text will change to the entered font.

Tagline Font Size

This will enlarge (value is bigger than 1) / reduce (value is smaller than 1) the Font size in the area relatively.

Tagline Font Color

Import / Export your panel settings

Note: You need to reload the current page to see actual changes in the fields. Also, no image files themselves are being recovered.

Options successfully saved!

Options could not be saved! Eventually contact support.