styling question

Topics: ASP.NET 2.0
May 25, 2014 at 9:46 AM
Hi guys, I had a brief play with BE and it looks pretty good. My question is how do I style content with different kinds of layouts? E.g. images and texts all on one line? Everytime I try to insert an image, it just drops to the bottom of the editor and writing text besides it is aligned to the center?

May 30, 2014 at 3:27 PM
  1. You can always view the source and modify the html yourself to further enhance the visual layout of Post. After inserting the image, modify the source (html) to place the image where you want.
  2. If you are using the tinyMce editor, you can extend the functionality of the editor by writing your own plug-in.
May 30, 2014 at 4:36 PM
Hi Spabani,

CSS is your best friend :)

Lot of people try to over think things in changing their look of their themes.

When about 90% of it can be done through CSS and HTML.

Firebug also becomes your best Buddy.

Trick is knowing what CSS selectors to use and etc.

If you have any specifics please post them.
Aug 1, 2014 at 5:29 AM
I'm trying to set up a business client with their own blog. Are we supposed to expect everyone to know HTML and CSS?

Has anyone any idea if it's possible to insert an image and have the text wrap around it? The editor align buttons do not work with images...
Aug 3, 2014 at 4:09 PM
Edited Aug 3, 2014 at 4:13 PM
Hi Anthony,

With BE as-is with standard theme using the editor I was able to wrap text around an image with no issue.

When you insert image click on it in the editor and at the bottom of the image you have some positioning options:

Float, Float left, Float right

If you are using a different theme or one that you had modified if the editor align buttons are not working then the issue is with your CSS in your theme and not BE itself.

__Are we supposed to expect everyone to know HTML and CSS? __

If the theme that you are using is made "correctly" then in "theory" all a user have to do is edit their content with the BE Editor and everything will be displayed as they had wished for it to be displayed.

The key here is having your "theme" made correctly at the start to use as your "base" if that is correct then the answer to your question,

Does everyone "users included" expect to know HTML and CSS, the answer would be No.

The major factors here when using the BE editor is :
  1. BE CSS styling
  2. Your Base Theme CSS styling
  3. 3rd party CSS styling, bootstrap, widgets,extensions and etc
Because of the many different sources of CSS there exist many points where there will be styling conflicts with the CSS and this causing issues like your editor align buttons not working.

This is where the knowledge of HTML and CSS would come into play for the person responsible for "creating/editing" the theme that you had installed and are using, to set-up your theme according to the needs and the environment it is in.

One Theme installed in one BE instance installed on another site that uses different 3rd party CSS styling has the potential of both sites looking different even through both are using the same "theme".

This is where your "final" adjustments are needed and for that you will need to know HTML and CSS.

Once that is done, then when ever the user makes any new or edit their content it will be displayed according to their needs that was made in the theme.

They would not need to know HTML or CSS at all just basic skills on how to type into a word processor is needed.

So for you with editor align buttons not working with images you need to hunt down the CSS that is causing it not to work in your BE install.

First stop would be to use FireBug, or in FireFox web developer extension "Inspect Element".

Start with the actual webpage where the image is at, open up one of the tools mention above and start to turn off CSS selectors to see if it aligns.

Once it does then you know which CSS selector is giving you the issue.

Fix that and problem solved forever.

Or you can post the URL to the problem post and I can take a look at it myself or someone else here can too :)

Its a lot easier to see the actual issue and look at the CSS and HTML :)

Have a great day!

Brian Davis
Aug 3, 2014 at 7:57 PM
Hi KB,

When I insert image in editor, I see no positioning options at the bottom of the image, only drag/resize cursors on the highlighted image itself.

Inspecting page with browser tools, I see nothing amiss in the CSS being applied. The image is in a containing paragraph that is aligned left.
Aug 3, 2014 at 9:53 PM
Hi Anthony,

Then the question now is what version of BE are you using and what editor?

Look at the top of this post, I took a screenshot of the editor on what I see:


That is what you should see using the out of the box editor that comes with BE.

Well, with BlogEngine.NET and below the image options that I mention are not there.

Just seeing the resize drag cursors too :)

I don't see any align buttons for the image either.

In that case you would have to manually edit or css images.

If you are using BE 2.6 and above I believe Bootstrap is being used for those versions.

In that case you can just use a float in your image:

Code and Live example is here:

Fairly simple to do
<div class="pull-right"> <img src="/image.axd?picture=/2014/08/Capture1.PNG" height="282" width="427"> </div>
Aug 3, 2014 at 11:01 PM
Edited Aug 4, 2014 at 12:41 AM
I just checked and it's version 2.9.1 so I'm out of luck.

Thanks for all your help and suggestions; I'm upgrading to 3.0. I guess my custom CSS rules will need to be re-done.


I just installed version 3.0 and am still having problems with inserting images. I tried inserting a full-size image as a user would do and when trying to resize the image, it jumps all over the place. There is no padding between the image and the text. So once again this is unusable for a regular user out of the box.

I changed editor to bootstrap-wysiwyg:
    <add key="BlogEngine.DefaultEditor" value="~/editors/summernote/editor.cshtml" />
<add key="BlogEngine.DefaultEditor" value="~/editors/bootstrap-wysiwyg/editor.cshtml" />
When I try to edit existing post, title appears in edit view but no content.

  • boostrap-wysiwyg: editor appears but no content
  • tiny_mce: no editor window appears at all
Aug 6, 2014 at 2:07 PM
Edited Aug 6, 2014 at 2:10 PM
Thanks kb for all your suggestions. Maybe someone should write a really good developer/designer book on BE?

I had to revert to default editor and write extra CSS.
Aug 6, 2014 at 5:27 PM
Hi Anthony,

There is a new BE documentation site:

Documentation had always been an issue :)

For me I am always interested in doing some writing / documentation myself but the issue of time had always been an issue.

So I also assume this also applies to everyone else, everyone is very busy with little time to provide documentation.

Seems like the new Documentation site is going to have lots of documentation.