Customising Standard Theme

May 10, 2009 at 5:28 AM

Yeah!  I'm a nong .. but learning ... if somewhat slowly..

I've installed 1.5 to my source (thanks to Ben's help) and started playing with Standard theme.  I hope to make BE have similar look to my site:  golfclubsdownunder.com.au

 1.  Working in style.css have introduced fixed image background but now the panels are floating.  I need a background for the panels.  How?

 2.  I want to use an image as the header rather than the generated header.  Have read other discussions with reference to the site.master file and to lines of code to edit but my site.master only has following:

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;

public partial class StandardSite : System.Web.UI.MasterPage
{
  protected void Page_Load(object sender, EventArgs e)
  {
  if (Page.User.Identity.IsAuthenticated)
  {
   aLogin.InnerText = Resources.labels.logoff;
   aLogin.HRef = BlogEngine.Core.Utils.RelativeWebRoot + "login.aspx?logoff";
  }
  else
  {
   aLogin.HRef = BlogEngine.Core.Utils.RelativeWebRoot + "login.aspx";
   aLogin.InnerText = Resources.labels.login;
  }
  }

Any guidance will be gratefully rec'd

 

Cliff

Coordinator
May 10, 2009 at 7:38 AM

For #1, I'm not sure what you mean by 'panels'.  What did you change in style.css to get a fixed image background?

For #2, the code you pasted here is from site.master.cs.  The layout is in site.master (without the .CS ending).  In the Standard theme's site.master file, the header is outputted with the markup below.

<div id="header">
    <p><a href="<%=Utils.AbsoluteWebRoot %>"><%=BlogSettings.Instance.Name %></a></p>
    <span><%=BlogSettings.Instance.Description %></span>
</div>

You can replace that content above with your image.  So, it might end up looking like:

<div id="header">
    <img src="<%= Utils.RelativeWebRoot + "pics/YourImage.jpg" %>" style="border:none;" />
</div>

May 10, 2009 at 10:10 AM

Ben, don't you ever sleep?  I assume it is some un-godly hour in the night where you are.

#1.  I changed:

background-color: #F1F1F1;
 color: #444444;
 font-family: Verdana;
 font-size: 11px;
 margin: 0 auto;
 width: 980px;
 position: relative;

with

background: url(/Assets/Bg2.jpg) no-repeat right center fixed;
 margin: 0 auto;
 width: 800px;
 position: relative;

I also changed background color: white to #ECE9D8 throughout the file and have been playing with font colors.

#2  Something is wrong at my end (probably me) because the only files I have in themes>Standard are:  CommentView.acx; PostView.acx; site.master.cs and style.css  Have checked Mobile and Idigo (theonly other two that came with my download of 1.5, and they are the same.     NB  I have imported from the blog to Dreamweaver to make alters.

By panels I am referring to 'header' 'body' 'About the Author'  'Admin.'  'Tag Cloud' etc., these are now all floating on my fixed background.  I'd like to tie them all together with a 800 px site background.

As the expression goes "Some mothers do 'ave 'em!"

Cliff

May 10, 2009 at 10:22 AM

Ben, a thought!

Take a look if you like:  http://www.golfclubsdownunder.com.au/Blog/?theme=Standard

Yes I wanted the header transparent to float the image.

Cliff

Coordinator
May 10, 2009 at 7:12 PM

You're going to need to find the site.master file.  It's there.  If it wasn't there, you wouldn't be seeing anything.  I'm not familiar with Dreamweaver, but it's probably just not showing you the file.  You should see the site.master file if you view the folder using Windows Explorer (if the files are on your local computer) or through a regular FTP client (if the files are on a remote web server).

Once you find the site.master file, I would add a <div> right after the opening <body> tag and close the </div> right before the closing </body> tag.  E.g.

<body>
    <div id="mainContentWrapper">
        .... existing content ....
    </div>
</body>

The CSS for the new DIV would look something like:

#mainContentWrapper {
    width: 800px;
    background-color: #ECE9D8;
}

May 11, 2009 at 11:14 AM

Ben

Thanks so much.  Have followed your instructions and all is sweet.

Very much appreciate your advice you made it easy, even for an old foggy like me. (81 year old)

Yes,  Dreamweaver tends to look for html, asp, css etc., files.  You need to call for 'All file' to find site.master

Cliff

May 23, 2009 at 10:38 AM

I'm probably exceeding my expertise but that wont stop me trying

I'm adapting the Standard theme:  the <mainContentWrapper> codes worked fine (site.master and style,css) for a while and then, for no apparent reason, dropped back to only wrapping the header.

I'm trying to achieve 40% transparency in the wrap. When I place code in site.master  <div id="mainContentWrapper" style="filter: alpha (opacity=60)"> this re-introduces the 'total' wrap but affects the whole site - everything becomes semi transparent.  Is there a way I can float the main content of each page (solid) on a 40% transparent wrapper which floats on top of my fixed background ?

Cliff

 

Coordinator
May 24, 2009 at 8:20 AM
Edited May 24, 2009 at 8:21 AM

Cliff,

There's two things I noticed.

1.  There's a number of JavaScript errors at http://www.golfclubsdownunder.com.au/Blog/.  These appear to be related to the "WebResource.axd" file not getting sent to the browser correctly.  In the control panel, on the Settings tab, there's a checkbox in the Advanced Setting section labeled "Compress WebResource.axd".  Unchecking that will probably fix all these JS errors which will cause people to have problems when doing various things on the site.

2. For the problem with the wrapper not going down to the bottom ... the mainContentWrapper we put in there starts right after the opening <body> tag and ends before the closing </body> tag.  This is all in the site.master file.  If you add the <div> shown below in bold, that should get the wrapper working again.

<body>
      <div id="mainContentWrapper">


            <div style="clear:both;"></div>
      </div>
</body>

I'm not entirely clear on what you're trying to do with the opacity.  On a side note, the alpha filter you show I believe only works with IE.  There's a similar filter you can use for browsers like Mozilla.  Check out the "Cross browser compatible example" on this page.  It uses a combination of CSS settings so the opacity works across many browsers.

May 24, 2009 at 11:30 PM

Thanks Ben,

Have actioned (1.) and the new <div> has fixed the wrap

To explain what I'm hoping to achieve.  Consider the blog as having 3 layers A; B; C;.   A; is the fixed background on top of which is B; the wrap on top of which is C: the header, the widget, posts, etc.  in other words the blog proper.

I would like to apply opacity to B; the wrap only so that A; shows thro' while C; remains 100% on top.   Does that make sense?

NB Thanks for the clue re cross browser compatibility.

Cliff

 

Coordinator
May 25, 2009 at 12:17 AM

This can probably be accomplished by using a partially transparent BG image.  I just created one now that uses 40% transparency with the #ece9d8 background color you have now.  You can try it out.

In the CSS file, change #mainContentWrapper like this:

#mainContentWrapper {
    background: url(http://allben.net/misc/images/ece9d8_bg_40_percent_transparency.png);
    width: 800px;
}

That will apply the partially transparent background to mainContentWrapper.  Some of the individual blocks appear to be setting their own background colors (using the #ece9d8 color).  You could modify those styles so they too use this same semi-transparent background image (or just remove their explicit background styles so they inherit the background from mainContentWrapper).

I'm not 100% sure if this is what you're after, but it demonstrates one way to do something close to what you're after.

May 25, 2009 at 1:27 AM

Thanks again Ben,

That is what I was looking for.  Have now made my own bg file so that I can play with level of transparency.

Cliff