Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 4.5 > BOOK: Beginning ASP.NET 4.5 : in C# and VB
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
BOOK: Beginning ASP.NET 4.5 : in C# and VB
This is the forum to discuss the Wrox book Beginning ASP.NET 4.5: in C# and VB by Imar Spaanjaars; ISBN: 978-1-118-31180-6
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET 4.5 : in C# and VB section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old July 22nd, 2014, 12:21 PM
Registered User
Points: 29, Level: 1
Points: 29, Level: 1 Points: 29, Level: 1 Points: 29, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2014
Location: Bristol, UK
Posts: 7
Thanks: 5
Thanked 0 Times in 0 Posts
Default Chapter 6: p235 adding images to your [Monochrome] Theme

Hi Imar,

Really enjoying the book so far, but I've hit a snag when adding the the Monochrome.css from the downloaded files.

Whilst the sidebar image does appear in the browser, it doesn't fit to the right of the main content. Indeed the words "sidebar goes here" appears underneath the main content area. This is only the case when I'm using the Monochrome theme. I noticed that you advised other people to remove styleSheetTheme="Monochrome" from web.config so I tried that, but it still appears the same.

I notice that Monochrome.css has (in aside#Sidebar) a width of 142px whilst sidebar.jpg appears to have a width of 163 pixels. So I tried changing width in aside#Sidebar, but that hasn't done it.

Can you advise?

Code follows:

web.config
code
<?xml version="1.0"?>
<!--
For more information on how to configure your ASP.NET application, please visit
http://go.microsoft.com/fwlink/?LinkId=169433
-->
<configuration>
<system.web>
<compilation debug="true" strict="false" explicit="true" targetFramework="4.5"/>
<httpRuntime targetFramework="4.5"/>
<pages theme="Monochrome" styleSheetTheme="Monochrome"/>
</system.web>
</configuration>
/code


FrontEnd.master
code
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script src="/Scripts/modernizr-2.7.2.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="PageWrapper">
<header><a href="/">x`</a></header>
<nav>Menu Goes Here</nav>
<section id="MainContent">
<asp:ContentPlaceHolder ID="cpMainContent" runat="server">
</asp:ContentPlaceHolder>
</section>
<aside id="Sidebar">Sidebar Goes Here</aside>
<footer>Footer Goes Here</footer>
</div>
</form>
</body>
</html>

/code

Monochrome.css
code
*
{
/*
Defines the main font used throughout the entire site.
*/
font-family: Arial, Sans-Serif;
}

body
{
/*
Clears white space around the body and gives it a grey background color.
*/
margin: 0;
background-color: #cccccc;
}

a
{
/*
Clears the underline on normal links, and gives them a different text color.
*/
text-decoration: none;
color: #0760B2;
}

a:hover
{
/*
Underlines links when the user hovers the mouse over them.
*/
text-decoration: underline;
}

h1
{
/*
Makes h1 elements smaller than their browser default.
*/
font-size: 20px;
}

h2
{
/*
Gives h2 elements a different background color and size,
and adds a bit of margin at the top to create room between the heading and the preceding element.
*/
font-size: 14px;
color: #7773A1;
margin-top: 10px;
}

#PageWrapper
{
/*
Sets the total width for the entire page. Also sets the background color
which is used to fill the background of the Sidebar in case the MainContent section is taller than the Sidebar.
Uses margin: auto to center the entire page in the middle of the browser's window.
*/
width: 844px;
background-color: #5487c0;
margin: auto;
}

header
{
/*
Gives the header the same width as the PageWrapper. The height creates some room for the logo
that is set with the background-image.
*/
background-image: url(Images/Header.jpg);
width: 844px;
height: 86px;
}

header a
{
/*
The header a is a link nested in header. It provides a link back to the homepage.
The size of the link is the same as the header, so the entire header is clickable.
*/
width: 844px;
height: 86px;
display: block;
}

nav
{
/*
The menu spans the page width, right below the header.
At the top and left a few pixels padding is applied to create some room.
*/
background-image: url(Images/MenuBackground.jpg);
width: 827px;
height: 36px;
padding-top: 7px;
padding-left: 17px;
}

nav a
{
/*
Links in the Menu are white. This gets overriden by styles in chapter 7.
*/
color: #fff;
}

.MainMenu
{
/*
The Menu gets a white border on all four sides.
*/
border: 1px solid #999999;
width: 814px;
height: 19px;
background-color: #555555;
}

.MainMenu ul li
{
/*
Gives the four menu items in the main menu a width of 200px each.
*/
width: 200px;
}

section#MainContent
{
/*
Defines the main content area. The #MainContent element has a minimum height of 500 pixels, but can grow if necessary.
The font-size is 80% of its parent element, which in this case comes down to 80% of the font
the user has specified as the default font in the browser.
*/
font-size: 0.8em;
width: 659px;
border-left: 1px solid white;
border-right: 2px solid white;
float: left;
background-color: #e1e1e1;
min-height: 500px;
padding: 10px;
}

aside#Sidebar
{
/*
The Sidebar is positioned to the right of the MainContent section. It gets the same font-size as the
#MainContent section and gets a background image called Sidebar.jpg.
To ensure the image is visible in (most) browsers on a small page, the element gets a minimum
height of 500px. This is ignored by IE 6.
*/
font-size: 0.8em;
color: White;
background-image: url(Images/Sidebar.jpg);
background-repeat: no-repeat;
background-color: #7773A1;
width: 142px;
min-height: 500px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
float: left;
}

footer
{
/*
The footer is positioned below all other content (yet still within PageWrapper).
clear: both is used to clear the impact of the float properties used for #MainContent and #Sidebar.
*/
width: 844px;
clear: both;
height: 37px;
background-color: #A8D5FE;
color: White;
text-align: center;
font-size: 0.7em;
font-weight: bold;
line-height: 37px;
}

.Introduction
{
font-style: italic;
color: #3e3e3e;
}

.MyButton
{
color: White;
}
/code
Reply With Quote
  #2 (permalink)  
Old July 22nd, 2014, 04:13 PM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

Hi there,

Could this be a caching issue? Try reloading the browser using Ctrl+F5 or Ctrl+R. Maybe your browser is still working with an older version of the CSS files.

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
The Following User Says Thank You to Imar For This Useful Post:
RichM-UK (July 28th, 2014)
  #3 (permalink)  
Old July 23rd, 2014, 04:41 AM
Registered User
Points: 29, Level: 1
Points: 29, Level: 1 Points: 29, Level: 1 Points: 29, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2014
Location: Bristol, UK
Posts: 7
Thanks: 5
Thanked 0 Times in 0 Posts
Default Chapter 6: p235 adding images to your [Monochrome] Theme

Hi Imar,

Thanks for replying, but I don't believe that caching can be the issue as this (p235 TRY IT OUT Adding Images to Your Theme) is the first time that the CSS file has included images, and the images ARE appearing - just in the wrong place. An old cached CSS file wouldn't mention the images.

I've got a couple of screen-shots in here to demonstrate:
https://drive.google.com/folderview?...2M&usp=sharing

Also, my PC has been turned off overnight and it's still displaying the same behaviour this morning. Another reason why I wouldn't have thought caching was the issue. I did try Ctrl + 'R', btw.

Now the CSS file itself is (as per the bottom of p235) exactly the one downloaded from the Wrox site (some months ago I admit, before I recently found time to roll my sleeves up and get stuck into your book).

I might have to resort to backing up my other files and substituting the downloaded ones, one at a time until hopefully I find that one of them straightens things out, but if you can make any other suggestions I'd appreciate it.

Richard
Reply With Quote
  #4 (permalink)  
Old July 23rd, 2014, 06:57 AM
Registered User
Points: 29, Level: 1
Points: 29, Level: 1 Points: 29, Level: 1 Points: 29, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2014
Location: Bristol, UK
Posts: 7
Thanks: 5
Thanked 0 Times in 0 Posts
Default Chapter 6: p235 adding images to your [Monochrome] Theme

Hi Imar,

Good news - I'm back on track!

I'd backed up Monochrome.css to Monochrome-A.css before the last change (this latter file was left in the App_Themes folder).

I didn't think the backup file would affect anything as it wasn't referenced in the code BUT when I did a 'View Source' from the browser I could see that the backed up Monochrome-A.css file WAS in the rendered code. So I deleted the backup file and...well things are as they should be. Phew!

Rendered file looked like this:
https://drive.google.com/file/d/0B7C...it?usp=sharing

Right - lets get back to the next stage in the book (really enjoying it!)

Richard
Reply With Quote
  #5 (permalink)  
Old July 23rd, 2014, 08:55 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

Hi Richard,

Ah, that makes sense.

>> I didn't think the backup file would affect anything as it wasn't referenced in the code

The Monochrome in the web.config or code refers to the Theme's folder, not to the individual Monochrome.css file. When a theme is rendered, ASP.NET creates links to *all* .css files in the theme's folders, in alphabetical order. This means your backup file was loaded last, overwriting whatever is in Monochrome.css.

Great find!

>> Right - lets get back to the next stage in the book (really enjoying it!)

Good to hear, thanks!

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
The Following User Says Thank You to Imar For This Useful Post:
RichM-UK (July 28th, 2014)
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Not able to change theme between monochrome & darkgrey Neeta Shah BOOK: Beginning ASP.NET 4 : in C# and VB 4 March 20th, 2013 03:24 PM
Chapter 6: Monochrome Theme does not work correctly in my browsers rodgerpb BOOK: Beginning ASP.NET 4 : in C# and VB 8 February 18th, 2013 01:42 PM
CHAPTER 6 -ADDING THEME TO WEB.CONFIG FILE bankole BOOK: Beginning ASP.NET 4 : in C# and VB 2 February 8th, 2011 09:16 AM
Chapter 14-Photo Album Pages Monochrome vs Dark Grey jlransford BOOK: Beginning ASP.NET 4 : in C# and VB 3 August 3rd, 2010 12:08 PM
Monochrome Theme jack_hilary BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 4 April 18th, 2010 12:45 PM



All times are GMT -4. The time now is 12:55 PM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.