Starter Site's Site.css : The Official Microsoft ASP.NET Forums

Reply

longemaja

Member

1 Points

Starter Site's Site.css

Nov 07, 2012 08:05 AM|LINK

I'm trying to understand and manipulate the content/settings in Site.css without ANY success.
For example, if I change the background-color to #e80c4d (red) in

body {
    background-color:  #fff;
    border-top: solid 10px #000;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

nothing happens. Is there any blog or other media where the Starter Site's Site.css is explained?

Reply

h.zahed@live...

Contributor

3171 Points

514 Posts

Re: Starter Site's Site.css

Nov 07, 2012 08:28 AM|LINK

Hi,

Is the css file connected to your master page file in head section?

Hossein Zahed
MCP-MCTS-MCPD
Mark the post as Answer, if it helped you in solving your question.

Reply

longemaja

Member

1 Points

13 Posts

Re: Starter Site's Site.css

Nov 07, 2012 08:33 AM|LINK

The path (generated by the Starter Site Template in Webmatrix 2) is

~/Content/Site.css

Reply

Afzaal.Ahmad...

Contributor

2661 Points

1040 Posts

Re: Starter Site's Site.css

Nov 07, 2012 10:26 AM|LINK

The problem is not this.

Its because you have a starter site and in starter site there are other divs too.

For example the text you see on main page is in div with class main-content

If you want to change the background-color for that you need to scroll down to mid point there will be class for main-content (Or the class of the div) then edit that background-color.

Note: While editing the page css please note that you need to use class, ids for your elements. This will help you edit the style for every element without changing the style of others.

Please "Marks As Answer" if any answer helped you out!
~~! FIREWALL !~~

Reply

longemaja

Member

1 Points

13 Posts

Re: Starter Site's Site.css

Nov 07, 2012 11:47 AM|LINK

Nothing happens if I add background-color in class main-content. Please have a look at the Site.css below;

html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}
 
body {
    background-color:    #fff;
    border-top: solid 10px #000;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}
 
a {
    color:  #333;
    outline: none;
    padding-left: 3px;
    padding-right: 3px;
    text-decoration: underline;
}
 
    a:link, a:visited,
    a:active, a:hover {
        color: #333;
    }
 
    a:hover {
        background-color: #c7d1d6;
    }
 
header, footer, hgroup,
nav, section {
    display: block;
}
 
mark {
    background-color: #a6dbed;
    padding-left: 5px;
    padding-right: 5px;
}
 
.float-left {
    float: left;
}
 
.float-right {
    float: right;
}
 
.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
 
h1, h2, h3,
h4, h5, h6 {
    color:  #000;
    margin-bottom: 0;
    padding-bottom: 0;
}
 
h1 {
    font-size: 2em;
}
 
h2 {
    font-size: 1.75em;
}
 
h3 {
    font-size: 1.2em;
}
 
h4 {
    font-size: 1.1em;
}
 
h5, h6 {
    font-size: 1em;
}
 
    h5 a:link, h5 a:visited, h5 a:active {
        padding: 0;
        text-decoration: none;
    }
 
 
/* main layout ----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    max-width: 960px;
}
 
#body {
    background-color: #efeeef;
    clear: both;
    padding-bottom: 35px;
}
 
    .main-content {
        background: url("../Images/accent.png") no-repeat;
        padding-left: 10px;
        padding-top: 30px;
    }
 
    .featured + .main-content {
        background: url("../Images/heroAccent.png") no-repeat;
    }
 
header .content-wrapper {
    padding-top: 20px; 
}
 
footer {
    clear: both;
    background-color:  #e2e2e2 ;
    font-size: .8em;
    height: 100px;
}
 
 
/* site title ----------------------------------------------------------*/
.site-title {
    color: #c8c8c8;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 2.3em;
    margin: 0;
}
 
.site-title a, .site-title a:hover, .site-title a:active {
    background: none;
    color: #c8c8c8;
    outline: none;
    text-decoration: none;
}
 
 
/* login ----------------------------------------------------------*/
#login {
    display: block;
    font-size: .85em;
    margin: 0 0 10px;
    text-align: right;
}
 
    #login a {
        background-color: #d3dce0;
        margin-left: 10px;
        margin-right: 3px;
        padding: 2px 3px;
        text-decoration: none;
    }
 
    #login a.email {
        background: none;
        margin: 0;
        padding: 0;
        text-decoration: underline;
    }
 
    #login ul {
        margin: 0;
    }
 
    #login li {
        display: inline;
        list-style: none;
    }
 
 
/* menu ----------------------------------------------------------*/
ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
}
 
    ul#menu li {
        display: inline;
        list-style: none;
        padding-left: 15px;
    }
 
        ul#menu li a {
            background: none;
            color: #999;
            text-decoration: none;
        }
 
        ul#menu li a:hover {
            color: #333;
            text-decoration: none;
        }
 
 
/* page elements ----------------------------------------------------------*/
/* featured */
.featured {
    background-color: #fff;
}
 
    .featured .content-wrapper {
        background-color: #7ac0da;
        background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
        background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
        color: #3e5667;
        padding: 20px 40px 30px 40px;
    }
 
        .featured hgroup.title h1, .featured hgroup.title h2 {
            color:  #fff;
        }
 
        .featured p {
            font-size: 1.1em;
        }
 
/* page titles */
hgroup.title {
    margin-bottom: 10px;
}
 
hgroup.title h1, hgroup.title h2 {
    display: inline;
}
 
hgroup.title h2 {
    font-weight: normal;
    margin-left: 3px;
}
 
/* features */
section.feature {
    width: 300px;
    float: left;
    padding: 10px;
}
 
/* ordered list */
ol.round {
    list-style-type: none;
    padding-left: 0;
}
 
    ol.round li {
        margin: 25px 0;
        padding-left: 45px;
    }
 
        ol.round li.zero {
            background: url("../Images/orderedList0.png") no-repeat;
        }
 
        ol.round li.one {
            background: url("../Images/orderedList1.png") no-repeat;
        }
 
        ol.round li.two {
            background: url("../Images/orderedList2.png") no-repeat;
        }
 
        ol.round li.three {
            background: url("../Images/orderedList3.png") no-repeat;
        }
 
        ol.round li.four {
            background: url("../Images/orderedList4.png") no-repeat;
        }
 
        ol.round li.five {
            background: url("../Images/orderedList5.png") no-repeat;
        }
 
        ol.round li.six {
            background: url("../Images/orderedList6.png") no-repeat;
        }
 
        ol.round li.seven {
            background: url("../Images/orderedList7.png") no-repeat;
        }
 
        ol.round li.eight {
            background: url("../Images/orderedList8.png") no-repeat;
        }
 
        ol.round li.nine {
            background: url("../Images/orderedList9.png") no-repeat;
        }
 
/* content */
article {
    float: left;
    width: 70%;
}
 
aside {
    float: right;
    width: 25%;
}
 
    aside ul {
        list-style: none;
        padding: 0;
    }
 
        aside ul li {
            background: url("../Images/bullet.png") no-repeat 0 50%;
            padding: 2px 0 2px 20px;
        }
 
.label {
    font-weight: 700;
}
 
/* login page */
#loginForm {
    border-right: solid 2px #c8c8c8;
    float: left;
    width: 55%;
}
 
    #loginForm .validation-error {
        display: block;
        margin-left: 15px;
    }
 
    #loginForm .validation-summary-errors ul {
        margin: 0;
        padding: 0;
    }
 
    #loginForm .validation-summary-errors li {
        display: inline;
        list-style: none;
        margin: 0;
    }
 
    #loginForm input {
        width: 250px;
    }
 
    #loginForm input[type="checkbox"],
    #loginForm input[type="submit"],
    #loginForm input[type="button"],
    #loginForm button {
        width: auto;
    }
 
#socialLoginForm {
    margin-left: 40px;
    float: left;
    width: 40%;
}
 
    #socialLoginForm h2 {
        margin-bottom:  5px;
    }
 
#socialLoginList button {
    margin-bottom: 12px;
}
 
#logoutForm {
    display: inline;
}
 
/* contact */
.contact h3 {
    font-size: 1.2em;
}
 
.contact p {
    margin: 5px 0 0 10px;
}
 
.contact iframe {
    border: 1px solid #333;
    margin: 5px 0 0 10px;
}
 
/* forms */
fieldset {
    border: none;
    margin: 0;
    padding: 0;
}
 
    fieldset legend {
        display: none;
    }
 
    fieldset ol {
        padding: 0;
        list-style: none;
    }
 
        fieldset ol li {
            padding-bottom: 5px;
        }
 
label {
    display: block;
    font-size: 1.2em;
    font-weight: 600;
}
 
label.checkbox {
    display: inline;
}
 
input, textarea {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333;
    font-size: 1.2em;
    margin: 5px 0 6px 0;
    padding: 5px;
    width: 300px;
}
 
textarea {
    font-family: inherit;
    width: 500px;
}
 
    input:focus, textarea:focus {
        border: 1px solid #7ac0da;
    }
 
    input[type="checkbox"] {
        background: transparent;
        border: inherit;
        width: auto;
    }
 
    input[type="submit"],
    input[type="button"],
    button {
        background-color: #d3dce0;
        border: 1px solid #787878;
        cursor: pointer;
        font-size: 1.2em;
        font-weight: 600;
        padding: 7px;
        margin-right: 8px;
        width: auto;
    }
 
    td input[type="submit"],
    td input[type="button"],
    td button {
        font-size: 1em;
        padding: 4px;
        margin-right: 4px;
    }
 
/* info and errors */
.message-info {
    border: 1px solid;
    clear: both;
    padding: 10px 20px;
}
 
.message-error {
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}
 
.message-success {
    color: #7ac0da;
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}
 
.error {
    color: #e80c4d;
}
 
/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}
 
.field-validation-valid {
    display: none;
}
 
input.input-validation-error {
    border: 1px solid #e80c4d;
}
 
input[type="checkbox"].input-validation-error {
    border: 0 none;
}
 
.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}
 
.validation-summary-valid {
    display: none;
}
 
 
/* tables ----------------------------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    border: 0 none;
}
 
th {
    font-size: 1.2em;
    text-align: left;
    border: none 0px;
    padding-left: 0;
}
 
    th a {
        display: block;
        position: relative;
    }
 
    th a:link, th a:visited, th a:active, th a:hover {
        color: #333;
        font-weight: 600;
        text-decoration: none;
        padding: 0;
    }
 
    th a:hover {
        color: #000;
    }
 
    th.asc a, th.desc a {
        margin-right: .75em;
    }
 
    th.asc a:after, th.desc a:after {
        display: block;
        position: absolute;
        right: 0em;
        top: 0;
        font-size: 0.75em;
    }
 
    th.asc a:after {
        content: '▲';
    }
 
    th.desc a:after {
        content: '▼';
    }
 
td {
    padding: 0.25em 2em 0.25em 0em;
    border: 0 none;
}
 
tr.pager td {
    padding: 0 0.25em 0 0;
}
 
 
/******************** * Mobile Styles * ********************/
@media only screen and (max-width: 850px) {
 
    /* header ----------------------------------------------------------*/
    header .float-left,
    header .float-right {
        float: none;
    }
 
    /* logo */
    header .site-title {
        margin: 10px;
        text-align: center;
    }
 
    /* login */
    #login {
        font-size: .85em;
        margin: 0 0 12px;
        text-align: center;
    }
 
        #login ul {
            margin: 5px 0;
            padding: 0;
        }
 
        #login li {
            display: inline;
            list-style: none;
            margin: 0;
            padding: 0;
        }
 
        #login a {
            background: none;
            color: #999;
            font-weight: 600;
            margin: 2px;
            padding: 0;
        }
 
        #login a:hover {
            color: #333;
        }
 
    /* menu */
    nav {
        margin-bottom: 5px;
    }
 
    ul#menu {
        margin: 0;
        padding: 0;
        text-align: center;
    }
 
        ul#menu li {
            margin: 0;
            padding: 0;
        }
 
 
    /* main layout ----------------------------------------------------------*/
    .main-content,
    .featured + .main-content {
        background-position: 10px 0;
    }
 
    .content-wrapper {
        padding-right: 10px;
        padding-left: 10px;
    }
 
    .featured .content-wrapper {
        padding: 10px;
    }
 
    /* page content */
    article, aside {
        float: none;
        width: 100%;
    }
 
    /* ordered list */
    ol.round {
        list-style-type: none;
        padding-left: 0;
    }
 
        ol.round li {
            padding-left: 10px;
            margin: 25px 0;
        }
 
            ol.round li.zero,
            ol.round li.one,
            ol.round li.two,
            ol.round li.three,
            ol.round li.four,
            ol.round li.five,
            ol.round li.six,
            ol.round li.seven,
            ol.round li.eight,
            ol.round li.nine {
                background: none;
            }
 
     /* features */
     section.feature {
        float: none;
        padding: 10px;
        width: auto;
     }
 
        section.feature img {
            color: #999;
            content: attr(alt);
            font-size: 1.5em;
            font-weight: 600;
        }
 
    /* forms */
    input {
        width: 90%;
    }
 
    /* login page */
    #loginForm {
        border-right: none;
        float: none;
        width: auto;
    }
 
        #loginForm .validation-error {
            display: block;
            margin-left: 15px;
        }
 
    #socialLoginForm {
        margin-left: 0;
        float: none;
        width: auto;
    }
 
 
    /* footer ----------------------------------------------------------*/
    footer .float-left,
    footer .float-right {
        float: none;
    }
 
    footer {
        text-align: center;
        height: auto;
        padding: 10px 0;
    }
 
        footer p {
            margin: 0;
            
    color:  #e80c4d;
        }
}

Reply

raju dasa

Star

14412 Points

2452 Posts

Re: Starter Site's Site.css

Nov 07, 2012 12:36 PM|LINK

Hi,

try clearing ur browser cache, then run it again.
to manipulate CSS on the fly, u can use the browser tools:

>Developer tools (IE9) by pressing F12
>Firebug plugin for Firefox browser

Happy Coding ! Mark as Answer if it helps.
rajudasa.blogspot.com || blog@opera

Reply

Afzaal.Ahmad...

Contributor

2661 Points

1040 Posts

Re: Starter Site's Site.css

Nov 07, 2012 07:29 PM|LINK

Ok this was the css.

Did you change the divs ??

Please provide me with the main page code (Default.cshtml)

In that page the divs with classes would be given. From there I would see what class you want to change the color for

Please "Marks As Answer" if any answer helped you out!
~~! FIREWALL !~~

Reply

longemaja

Member

1 Points

13 Posts

Re: Starter Site's Site.css

Nov 07, 2012 07:33 PM|LINK

Here is the Default.cshtml:

@{
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Home Page";
}
 
@section featured {
<section class="featured">
    <div class="content-wrapper">
        <hgroup class="title">
            <h1>@Page.Title.</h1>
            <h2>Modify this template to jump-start your ASP.NET Web Pages application.</h2>
        </hgroup>
        <p>
            To learn more about ASP.NET Web Pages, visit
            <a href="http://asp.net/webpages" title="ASP.NET Web Pages Website">http://asp.net/webpages</a>.
            The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET Web Pages.
            If you have any questions about ASP.NET Web Pages, visit
            <a href="http://forums.iis.net/1166.aspx" title="ASP.NET Web Pages Forum">our forums</a>.
        </p>
    </div>
</section>
}
 
<h3>We suggest the following:</h3>
 
<ol class="round">
    <li class="one">
        <h5>Getting Started</h5>
        ASP.NET Web Pages and the new Razor syntax provide a fast, approachable, and lightweight way to combine server code with HTML
        to create dynamic web content. Connect to databases, add video, link to social networking sites, and include many more features
        that let you create beautiful sites using the latest web standards.
        <a href="http://go.microsoft.com/fwlink/?LinkId=245139">Learn more…</a>
    </li>
 
    <li class="two">
        <h5>Add NuGet packages and jump start your coding</h5>
        NuGet makes it easy to install and update free libraries and tools.
        <a href="http://go.microsoft.com/fwlink/?LinkId=245140">Learn more…</a>
    </li>
 
    <li class="three">
        <h5>Find Web Hosting</h5>
        You can easily find a web hosting company that offers the right mix of features and price for your applications.
        <a href="http://go.microsoft.com/fwlink/?LinkId=245143">Learn more…</a>
    </li>
</ol>

Reply

Afzaal.Ahmad...

Contributor

2661 Points

1040 Posts

Re: Starter Site's Site.css

Nov 07, 2012 07:46 PM|LINK

Ok let me elaborate you the code.

If you see your code.

There is no body div or class. But body is a main element of page. So your code will gain this background.

Now next line

<section class="featured">

For this there will be

.featured {
code will b here for style
}

than next is a div for that you see its class is content-wrapper for this will see a code as

.content-wrapper {
code here..
}

than there are paragraphs(p) and some headings (h1, h2) for these you can use this

h1 {
code..
}

h2 {
code..
}

p {
code..
}

as you can see in your site.css page in the start.

But I will ask you to learn the html basics from this website : https://www.w3schools.com

I hope this helps you. If does please mark my posts as answers thankyou!

Please "Marks As Answer" if any answer helped you out!
~~! FIREWALL !~~

Marked as answer by longemaja on Nov 08, 2012 09:13 AM

Starter Site's Site.css RSS

8 replies

longemaja

Starter Site's Site.css

h.zahed@live...

Re: Starter Site's Site.css

longemaja

Re: Starter Site's Site.css

Afzaal.Ahmad...

Re: Starter Site's Site.css

longemaja

Re: Starter Site's Site.css

raju dasa

Re: Starter Site's Site.css

Afzaal.Ahmad...

Re: Starter Site's Site.css

longemaja

Re: Starter Site's Site.css

Afzaal.Ahmad...

Re: Starter Site's Site.css

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft