PDA

View Full Version : Editing CSS/HTML for Blogger.. Respositioning, Inserting space (warning: n00b)



cbflorida
Jan 28th, 2010, 07:38 PM
Hello everyone!

Thank you for looking at my post. I am a beginner with CSS.

I am in charge of setting up a blog for a course at my college. We are using Blogger for the class, so we can have multiple authors and the fact that the professor likes it.

We have a background image that another classmate made, but we don't know how to make it work for us properly.

The image is the background, but you can't see the whole image because of the layout.. so we need to move down the layout in the code..

(which i would use <p> or <br> in other situations)

Blogspot has the pre-made layouts, which we are basing our layout from. I went into the HTML part to try and figure it out..

I looked up some CSS codes but I don't think I am looking in the right places.

Here is the blog: http://flaglersocialmedia.blogspot.com

It is in mock-up mode, so please excuse the lack of real content.





*/

body {
background: #000000 url('http://i46.tinypic.com/aolt6o.jpg') no-repeat top;

background-position:top center;

margin:0;
text-align:center;
line-height: 1.5em;
font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:$mainTextColor;
font-size/* */:/**/small;
font-size: /**/small;
}



that is an excerpt from the code before it starts the layout..


THANK YOU!:D I appreciate any help I can get.

Excavator
Jan 28th, 2010, 08:20 PM
Hello cbflorida,
In your embedded styles there is an entry for #outer-wrapper. Add some top margin to that to move it down.
Like this bit highlighted in red -
/* Page Structure
----------------------------------------------- */
/* The images which help create rounded corners depend on the
following widths and measurements. If you want to change
these measurements, the images will also need to change.
*/
#outer-wrapper {
width:740px;
margin: 450px auto 0;
text-align:left;
font: normal normal 100% Verdana, sans-serif;
}

Excavator
Jan 28th, 2010, 08:22 PM
Embedded styles are CSS that are enclosed in the head of the .html document.
I've highlighted yours in red below ... just to make it easier for you -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir='ltr' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<script type="text/javascript">(function() { var a=window;function e(b){this.t={};this.tick=function(c,h,d){d=d?d:(new Date).getTime();this.t[c]=[d,h]};this.tick("start",null,b)}var f=new e;a.jstiming={Timer:e,load:f};try{a.jstiming.pt=a.gtbExternal&&a.gtbExternal.pageT()||a.external&&a.external.pageT}catch(g){};a.tickAboveFold=function(b){b=b;var c=0;if(b.offsetParent){do c+=b.offsetTop;while(b=b.offsetParent)}b=c;b<=750&&a.jstiming.load.tick("aft")};var i=false;function j(){if(!i){i=true;a.jstiming.load.tick("firstScrollTime")}}a.addEventListener?a.addEventListener("scroll",j,false):a.attachEvent("onscroll",j); })();</script>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
<link href='http://flaglersocialmedia.blogspot.com/' rel='canonical'/>
<link rel="alternate" type="application/atom+xml" title="Social Media - Atom" href="http://flaglersocialmedia.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="Social Media - RSS" href="http://flaglersocialmedia.blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="Social Media - Atom" href="http://www.blogger.com/feeds/1005547181295490641/posts/default" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID=1005547181295490641" />
<link rel="me" href="http://www.blogger.com/profile/03976970441549425901" />
<link rel="openid.server" href="http://www.blogger.com/openid-server.g" />
<title>Social Media</title>

<link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/1557371536-widget_css_bundle.css' />
<link rel="stylesheet" type="text/css" href="http://www.blogger.com/static/v1/v-css/3727950723-blog_controls.css"/>
<link rel="stylesheet" type="text/css" href="http://www.blogger.com/dyn-css/authorization.css?targetBlogID=1005547181295490641&zx=35d365f3-fe6d-4dbc-ac96-2006759a06f4"/>
<style type="text/css">#navbar-iframe { display:block }
</style>

<style id='page-skin-1' type='text/css'><!--
/*
-----------------------------------------------
Blogger Template Style
Name: Rounders
Date: 27 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#fff">
<Variable name="mainTextColor" description="Text Color" type="color"
default="#333">
<Variable name="postTitleColor" description="Post Title Color" type="color"
default="#333">
<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#357">
<Variable name="borderColor" description="Post Border Color" type="color"
default="#bbb">
<Variable name="mainLinkColor" description="Link Color" type="color"
default="#258">
<Variable name="mainVisitedLinkColor" description="Visited Link Color"
type="color" default="#666">
<Variable name="titleBgColor" description="Page Header Background Color"
type="color" default="#456">
<Variable name="titleTextColor" description="Blog Title Color"
type="color" default="#fff">
<Variable name="topSidebarHeaderColor"
description="Top Sidebar Title Color"
type="color" default="#234">
<Variable name="topSidebarBgColor"
description="Top Sidebar Background Color"
type="color" default="#cdc">
<Variable name="topSidebarTextColor" description="Top Sidebar Text Color"
type="color" default="#345">
<Variable name="topSidebarLinkColor" description="Top Sidebar Link Color"
type="color" default="#258">
<Variable name="topSidebarVisitedLinkColor"
description="Top Sidebar Visited Link Color"
type="color" default="#258">
<Variable name="bodyFont" description="Text Font" type="font"
default="normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif">
<Variable name="pageTitleFont" description="Blog Title Font" type="font"
default="normal bold 200% 'Trebuchet MS',Verdana,Arial,Sans-serif">
<Variable name="descriptionFont" description="Blog Description Font" type="font"
default="normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif">
<Variable name="headerFont" description="Sidebar Title Font" type="font"
default="normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif">
<Variable name="postTitleFont" description="Post Title Font" type="font"
default="normal bold 135% 'Trebuchet MS',Verdana,Arial,Sans-serif">
<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right">
*/
body {
background: #000000 url('http://i46.tinypic.com/aolt6o.jpg') no-repeat top;
background-position:top center;
margin:0;
text-align:center;
line-height: 1.5em;
font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:#000000;
font-size/* */:/**/small;
font-size: /**/small;
}
/* Page Structure
----------------------------------------------- */
/* The images which help create rounded corners depend on the
following widths and measurements. If you want to change
these measurements, the images will also need to change.
*/
#outer-wrapper {
width:740px;
margin:0 auto;
text-align:left;
font: normal normal 100% Verdana, sans-serif;
}#main-wrap1 {
width:485px;
float:left;
background:#ffffff url("http://www1.blogblog.com/rounders/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0;
padding:0 0 10px;
color:#000000;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

cbflorida
Jan 28th, 2010, 10:00 PM
Thank you so much!
This did it and makes it look like we want it to!!

:)