Changing Appearency Of Blog Engine

Topics: ASP.NET 2.0, Themes
Jan 10, 2011 at 5:20 PM

Hey guys, im new to blog engine. I have to say its a very nice site that was many features, but i also have to say that i was overwhelmed by its code, and i couldn't understand 90% of it. Basically the reason i went into the code in the first place is because i wanted to change the layout. For example i wanted to put an image on top instead of the blog name. And have different sections like Videos, Articles, etc. Can i change this? And from where?

 

Thanks

Jan 10, 2011 at 5:29 PM

For a start you would choose a them you like, (there are many), then edit the css file in the theme folder.

Check out these sites, BE 2.0 one using SQL_CE and the other XML

http://tucsonbookworms.com

http://sahcinfo.org

 

Jan 10, 2011 at 5:34 PM

Yes thats the type of modification i want to use. My version only came with 3 styles: Mobile, Indigo, and Standard. They all look the same from within visual studio.

So if i wanted to change the top part to have an image instead of text, i would modify the:

 

"

#header {
    text-align: right;
    margin-bottom: 30px;
    width: 100%;
}

#header p {
    font-family: Arial;
    font-size: 80px;
    font-weight: bold;
    margin: 0px;
    letter-spacing: 8px;
}

#header span {
    font-weight: normal;
    letter-spacing: 4px;
    color: silver;
    margin: 0px;
}

#header a {
    text-decoration: none;
    color: white;
}
"

?

Thanks!

 

Jan 10, 2011 at 6:44 PM

I changed the style and it is giving me a directory listing now. Anyone know why this happens? Here is what it is showing me:

 

Directory Listing -- /BlogEngine.NET/Account/


[To Parent Directory]

Saturday, January 01, 2011 01:36 PM 5,265 account.css
Saturday, January 01, 2011 01:36 PM 3,744 account.js
Saturday, January 01, 2011 01:36 PM 1,353 account.master
Saturday, January 01, 2011 01:36 PM 3,604 account.master.cs
Saturday, January 01, 2011 01:36 PM 705 change-password-success.aspx
Saturday, January 01, 2011 01:36 PM 200 change-password-success.aspx.cs
Saturday, January 01, 2011 01:36 PM 2,796 change-password.aspx
Saturday, January 01, 2011 01:36 PM 1,227 change-password.aspx.cs
Saturday, January 01, 2011 01:36 PM 3,064 login.aspx
Saturday, January 01, 2011 01:36 PM 1,841 login.aspx.cs
Saturday, January 01, 2011 01:36 PM 1,682 password-retrieval.aspx
Saturday, January 01, 2011 01:36 PM 3,437 password-retrieval.aspx.cs
Saturday, January 01, 2011 01:36 PM 3,858 register.aspx
Saturday, January 01, 2011 01:36 PM 3,384 register.aspx.cs
Saturday, January 01, 2011 01:36 PM 776 Web.Config


I created a new style called MyStyle
Jan 10, 2011 at 7:58 PM

Bump

Coordinator
Jan 10, 2011 at 11:41 PM

It shows you listing because you didn't specify file you want to load, for example login.aspx, and there is no default document in that directory.

If you want to modify theme, you can take a look at this simple tutorial.

Jan 11, 2011 at 7:21 AM

Thanks for the link mate, but i already know how to tell visual studio what to open when it loads. What i dont know is where to point it to. What is the startup page i need to point it to? Im using asp.net btw and not php.

 

Thanks

Coordinator
Jan 11, 2011 at 7:46 AM

default.aspx in the root folder is the homepage.

Jan 11, 2011 at 9:37 AM

Ok mate thanks, i will try this when i get to home. Also, thanks for your other reply:

 

"

Most of the layout related files can be found in the theme folder ... themes\(your theme name).  The default theme is Standard, if you haven't changed to another theme in the control panel.

The site.master file controls the overall site layout.  PostView.ascx controls the layout for each post.  CommentView.ascx controls the layout for each comment.  There's usually a style.css file too that has all the CSS.

"

 

Does this mean i can change how posts will look?

 

Can i create something similar to http://www.geneticwar.com/ using blog engine?

 

Thanks!

Jan 11, 2011 at 10:36 AM

Yep you can reuse and expand design ideas taken from geneticwar.com to a degree

Basically the site is made of a header, content to the left, widgets to the right and a footer at the bottom
You probably need to redesign widgets and editor to support images

Some of the content is a bit more difficult and probably impossible without heavy redesign of core components
BE is an engine for blogs/simple content not a full featured CMS like eg Umbraco or DotNetNuke

rgds /Peter

Jan 11, 2011 at 11:48 AM

Peter, is it possible to create sections of the site where only certain content is posted? Like having a section for videos and a section for articles?

 

And also, how come blog engine isnt designed using tables, but headers and footers?

 

Thanks

Jan 11, 2011 at 11:49 AM

Oh and geneticwar is made in wordpress :) Too bad i dont know php

Jan 11, 2011 at 12:34 PM
TheGateKeeper wrote:

how come blog engine isnt designed using tables, but headers and footers?

Tables??

Tables are so old school and should be avoided at all costs for use in modern webdesign - you can achive exactly the same using cascading stylesheets (css) and have a far more flexible solution

- Peter

Jan 11, 2011 at 12:41 PM
TheGateKeeper wrote:

Oh and geneticwar is made in wordpress :) Too bad i dont know php

It is possible to convert wp templates for use in BE
It's ok to think big but why no start small and get the site up and running and then at later stages expand/extent?

And please note that allthough geneticwar and any site for that matter is available free to read and explore on the internet is not the same as the sites design/code is free to use unless explicit stated otherwise
One can always ask kindly if the owner will like to share design ideas - but please ask first not later :-)

Jan 11, 2011 at 4:48 PM
Edited Jan 11, 2011 at 4:59 PM

I cant get the style to work, its looking deformed. Here is what i see in visual studio:

 

http://hotfile.com/dl/96039039/693cf12/Screen1.jpg.html

 

And here is what i see when i run it:

http://hotfile.com/dl/96039234/2cc211a/Screen2.jpg.html

 

I set default.aspx as the startpage, why is this happeneing?

 

I can upload the code if you want.

 

Jan 11, 2011 at 5:45 PM

Bump, anyone?

Jan 11, 2011 at 5:58 PM

Here i uploaded the source code, you can scan it with http://www.virustotal.com/ to make sure its not infected. The only thing i changed was the styles folder so there isnt a lot to look at. Here it is:

 

http://hotfile.com/dl/96053201/988e3ed/Website.rar.html

Jan 12, 2011 at 6:20 AM

Bump, please can someone look at it? I cant get it to work.

Coordinator
Jan 12, 2011 at 7:01 AM

This latest file doesn't appear to be available any long.  I was able to see this one, but then this cheezy hotfile.com is making me wait 29 minutes to download the other one -- no thanks.

For the one I was able to see, it looks like CSS styling issues with the top menu links -- Home, Archive, Contact.  You might want to use a web editor like Dreamweaver, or the VS designer or MS Expression Web if you're unsure of the HTML markup / CSS.

Jan 12, 2011 at 7:20 AM

Im sorry, i will reupload everything when i get home. I used other pre-made themes and they still didnt work, so i must be doing something wrong. Hopefully you can see what the problem is when i provide good links.

 

See you in a bit.

Jan 12, 2011 at 4:35 PM

Sorry i took long, i reuploaded everything. The site http://hotfile.com/dl/96280927/a3209e2/Website.rar.html.

 

And the screenshots:

 

How it looks in the designer http://img402.imageshack.us/i/screen2vh.jpg/

How it looks in the browser http://img96.imageshack.us/i/screen1wx.jpg/

 

Thanks!

Jan 12, 2011 at 6:45 PM

Bump

Jan 12, 2011 at 7:05 PM

Why are you uploading all BE source? Only files in the theme are needed to review
Have changed any original BE source (outside theme folder)

And please don't bump frequently imo it's annoying and should be considered as flooding :\

Jan 12, 2011 at 8:01 PM

I uploaded all of it so people dont have to copy paste, its a small file anyway. But you are right only the theme folder is different. Did you find what is wrong with it?

Jan 12, 2011 at 9:15 PM

What browser are you using? IE 6?
Looks about the same in IE 8, FF 3.5.11 and Chrome 8.0.552.224 as in your VS image

Testet on vanilla BE 2.0.31

Don't you have a hosting site at this stage? Themes can be viewed using eg http://localhost/blognet/?theme=MyTheme

Jan 13, 2011 at 7:12 AM
plykkegaard wrote:

What browser are you using? IE 6?
Looks about the same in IE 8, FF 3.5.11 and Chrome 8.0.552.224 as in your VS image

Testet on vanilla BE 2.0.31

Don't you have a hosting site at this stage? Themes can be viewed using eg http://localhost/blognet/?theme=MyTheme

So its working? Im testing it using the visual studio "asp.net server" that comes with it. I guess thats the problem. Is there anyway else i can test it locally? I dont want to buy hosting before the site is ready.

 

Thanks :)

Coordinator
Jan 13, 2011 at 7:24 AM

I downloaded the RAR and ran the project.  There's 3 themes in there ... Standard, Standard2 and MyTheme.  I'm guessing you are working with MyTheme.  Standard2 is the ExtremeBlog theme.

Here's what MyTheme looks like in both Firefox and IE.  It doesn't look like what you posted here.  For the VS designer, I wouldn't trust that .... sometimes it isn't able to put everything together at design time.  Especially since the theme is dynamically set at runtime ... the VS designer doesn't know what that theme is.

For reference, I am using the web server built-into VS.  So the URL looks like http://localhost:52457/BlogEngine.NET/.

Basically the MyTheme theme you have seems to look good.  I'm not sure what the design goals are however.

Jan 13, 2011 at 7:32 AM
Edited Jan 13, 2011 at 7:40 AM
BenAmada wrote:

I downloaded the RAR and ran the project.  There's 3 themes in there ... Standard, Standard2 and MyTheme.  I'm guessing you are working with MyTheme.  Standard2 is the ExtremeBlog theme.

Here's what MyTheme looks like in both Firefox and IE.  It doesn't look like what you posted here.  For the VS designer, I wouldn't trust that .... sometimes it isn't able to put everything together at design time.  Especially since the theme is dynamically set at runtime ... the VS designer doesn't know what that theme is.

For reference, I am using the web server built-into VS.  So the URL looks like http://localhost:52457/BlogEngine.NET/.

Basically the MyTheme theme you have seems to look good.  I'm not sure what the design goals are however.

If you are also running it using teh built-in server in vs, why is yours looking ok and mine isnt? Im using vs 2010. Do you need to build the project or something before testing? Weird :S

Coordinator
Jan 13, 2011 at 7:39 AM

Did you go into the control panel, the Settings tab and select "MyTheme" as the theme from the dropdown list?  I did need to do that when I pulled up your site.

Jan 13, 2011 at 7:42 AM
BenAmada wrote:

Did you go into the control panel, the Settings tab and select "MyTheme" as the theme from the dropdown list?  I did need to do that when I pulled up your site.

I tried that and it had no effect. Did yours look like the screen shot i posted before you selected the theme?

Coordinator
Jan 13, 2011 at 7:55 AM

At first, I believe the Standard theme was the selected theme (I'm almost positive).  And it looked normal.  I just checked again by selecting the "Standard" theme in the control panel.  It looks like this -- the basic Standard theme.

I then logged in, went to the Settings tab on the control panel, selected MyTheme from the dropdown list and Saved.  I then went to the front of the site and saw that theme.

You said it has "no effect".  After saving, if you go to the front end of the site, and then go back into the Settings tab in the control panel, which theme is selected?  Is the "Standard" theme still selected?

When you click the Save button on the Settings tab, do you see a green bar at the top that says "Settings saved"?

You might want to check the settings.xml file in the App_Data folder.  Check to see if the timestamp is being updated when you click the Save button.  The selected theme is saved in that file.  For example, the theme in settings.xml after I changed the theme to MyTheme looks like:

<theme>MyTheme</theme>

Jan 13, 2011 at 3:58 PM
BenAmada wrote:

At first, I believe the Standard theme was the selected theme (I'm almost positive).  And it looked normal.  I just checked again by selecting the "Standard" theme in the control panel.  It looks like this -- the basic Standard theme.

I then logged in, went to the Settings tab on the control panel, selected MyTheme from the dropdown list and Saved.  I then went to the front of the site and saw that theme.

You said it has "no effect".  After saving, if you go to the front end of the site, and then go back into the Settings tab in the control panel, which theme is selected?  Is the "Standard" theme still selected?

When you click the Save button on the Settings tab, do you see a green bar at the top that says "Settings saved"?

You might want to check the settings.xml file in the App_Data folder.  Check to see if the timestamp is being updated when you click the Save button.  The selected theme is saved in that file.  For example, the theme in settings.xml after I changed the theme to MyTheme looks like:

<theme>MyTheme</theme>

Wierd... it works now. Hehe, il try and style it and get back to you.

 

Thanks bro!

Jan 13, 2011 at 5:50 PM

I ran into another problem. Im trying to put items into a strip but for some reason they are not staying aligned. Here is the html code:

 

<%--Top Menu--%>
                    <div>
                        <ul>
                            <li>
                                <div class="left">
                                    <asp:HyperLink ID="HlHome" NavigateUrl="~/default.aspx" runat="server">Home</asp:HyperLink>
                                </div>
                            </li>
                            <li>
                                <div class="left">
                                    <blog:PageList ID="PageList1" runat="Server" />
                                </div>
                            </li>
                            <li>
                                <div class="left">
                                    <asp:HyperLink ID="HyperLink1" NavigateUrl="~/archive.aspx" runat="server">Archive</asp:HyperLink>
                                </div>
                            </li>
                            <li>
                                <div class="left">
                                    <asp:HyperLink ID="HyperLink2" NavigateUrl="~/contact.aspx" runat="server">Contact</asp:HyperLink>
                                </div>
                            </li>
                            <%--RSS Button--%>
                            <li><a href="<%=Utils.FeedUrl %>">
                                <asp:Image ID="RssIconImage1" runat="Server" Width="24px" Height="24px" AlternateText="RSS Feed"
                                    ImageAlign="Middle" Style="margin: 0 0 0 10px" /></a> </li>
                            <%--Log in Button--%>
                            <div class="right">
                                <asp:LoginStatus ID="LoginStatus2" runat="Server" LoginText="Sign in" LogoutText="Sign out"
                                    EnableViewState="false" />
                            </div>
                        </ul>
                    </div>

 

And the css code:

 

.left { float: left; }
.right { float: right; }

 

Here is a screenshot of what it looks like:

 

http://img225.imageshack.us/img225/3059/stripl.jpg

 

As you can see the Log in/out button is too far up, and the rss button is also too far up.

 

Thanks

Jan 14, 2011 at 7:13 AM

Bump

Coordinator
Jan 14, 2011 at 7:23 AM

It's sort of a guessing game, but if you add a class to your UL, for example:

<ul class="top-menu">

Then you could add a new CSS style, that looks like:

ul.top-menu li { padding-top: 4px; }

That might help.  Alternatively, you could add padding-top to the .left and .right classes.

Jan 14, 2011 at 5:28 PM
Edited Jan 14, 2011 at 6:48 PM
BenAmada wrote:

It's sort of a guessing game, but if you add a class to your UL, for example:

<ul class="top-menu">

Then you could add a new CSS style, that looks like:

ul.top-menu li { padding-top: 4px; }

That might help.  Alternatively, you could add padding-top to the .left and .right classes.

Didnt help at all. any other way?

 

Ps: How do you remove the hover effect from links?

 

Pss: Is this how widgets are supposed to look in the desiger? What is widgetzone?

 

http://i56.tinypic.com/e9erkg.jpg

 

There seems to be a folder called widgets, which i think means user controls right? How do you configure them anyway? For example i want to add something to the calender.

 

Thanks and sorry for all the questions :)

Coordinator
Jan 15, 2011 at 5:47 AM
Edited Jan 15, 2011 at 5:47 AM

CSS Primer or CSS Primer

BlogEngine WidgetZone

BlogEngine Calendar

Jan 15, 2011 at 6:49 AM
BenAmada wrote:

CSS Primer or CSS Primer

BlogEngine WidgetZone

BlogEngine Calendar

 I tried css primer before i posted here, cant find what im looking for.

 

I now understand what a widgetzone is, a field where you can drag and rop widgets to in the designer right? How come it shows up like the picture? I also dont have widgets in the toolbox.

 

I also googled about the calendar but i only found information about the normal calendar, but the one in the widget.

 

Thanks.

Jan 15, 2011 at 2:19 PM

Bump

Coordinator
Jan 16, 2011 at 7:21 AM

The VS designer is probably not good to use or rely on.  The drag and drop capabilities of the Widget Zone work during runtime when viewing and blog in your browser.  The widget zone doesn't do anything during design time.

The calendar widget is in the widgets\Calendar folder.  You can control some of it there.  It makes use of the PostCalendar control (PostCalendar.cs) in the App_Code\Controls folder.  So to customize the Calendar widget may be a combination of editing the Calendar widget and the PostCalendar.cs control.

Jan 16, 2011 at 2:18 PM
Edited Jan 17, 2011 at 5:54 PM
BenAmada wrote:

The VS designer is probably not good to use or rely on.  The drag and drop capabilities of the Widget Zone work during runtime when viewing and blog in your browser.  The widget zone doesn't do anything during design time.

The calendar widget is in the widgets\Calendar folder.  You can control some of it there.  It makes use of the PostCalendar control (PostCalendar.cs) in the App_Code\Controls folder.  So to customize the Calendar widget may be a combination of editing the Calendar widget and the PostCalendar.cs control.

 

I have some more questions, i put them in number format:

1) Where exactly in the control panel do you have to go into to add something to the calendar?

2) I created a new page called "About" and put this code in it:

<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeFile="about.aspx.cs" Inherits="about" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cphBody" runat="Server">
    <div id="about">
        <div>
            <h1>
                About</h1>
        </div>
        <div>
            <p>
                Info
            </p>
        </div>
    </div>
</asp:Content>

 

Pretty basic, but when i click the link it tells me that it needs a master page. I know how to specify a master page, but none of the pages have it (like contact, archive, etc). I think this is because multiple themes can use the same page. Do i need to modify the code?

 

 

 

Thanks a lot for all your help dude, if it wasn't for you id be stuck at step 1 :). Sorry for all the questions but sometimes its hard finding something in all that code.

 

What do you think of the layout? :)

 

http://img4.imageshack.us/img4/672/layoutvi.jpg

 

Any suggestions? I still have to come up with a name.

 

Thanks

Jan 17, 2011 at 8:26 AM

Bump

Coordinator
Jan 18, 2011 at 6:59 AM

The master page is dynamically assigned at runtime.  For the "about" page you created ... the ASPX markup you show indicates there is a code-behind file -- about.aspx.cs.  In that file (about.aspx.cs), make sure that it inherits from BlogBasePage.  So it should look like:

public partial class about : BlogEngine.Core.Web.Controls.BlogBasePage

And then at runtime, the master page will get assigned.

The Calendar control is not very configurable via the control panel.  You'll most likely need to edit the PostCalendar.cs file in the App_Code\Controls folder.  It also depends on what you want to edit.  And depending on what you want to edit, it may not be that straight forward.  Then again, if you know what you're doing, it might not be bad!

The theme looks good... how about the Hercules theme?  Or Muscle Bound theme.  I guess there's many ways you could go with that.

Jan 18, 2011 at 4:13 PM
BenAmada wrote:

The master page is dynamically assigned at runtime.  For the "about" page you created ... the ASPX markup you show indicates there is a code-behind file -- about.aspx.cs.  In that file (about.aspx.cs), make sure that it inherits from BlogBasePage.  So it should look like:

public partial class about : BlogEngine.Core.Web.Controls.BlogBasePage

And then at runtime, the master page will get assigned.

The Calendar control is not very configurable via the control panel.  You'll most likely need to edit the PostCalendar.cs file in the App_Code\Controls folder.  It also depends on what you want to edit.  And depending on what you want to edit, it may not be that straight forward.  Then again, if you know what you're doing, it might not be bad!

The theme looks good... how about the Hercules theme?  Or Muscle Bound theme.  I guess there's many ways you could go with that.

 

Ok man, i decided not to use the calender, didnt look professional.

 

Thanks a lot man :)