How can I make my Website look like this…

Hi Eande,
Does your theme give you a section in the dashboard where you can make CSS modifications without editing the theme’s files?

I can edit CSS via the appearance, but I tend to place it in the ‘backend’ section of suffusion options where it overrides the updates..

Okay, so you’re alright with adding CSS to that backend section?
Here’s some CSS to get you started;

#content h1.posttitle {
 text-align: left;
}

input[type="submit"] {
	font-size: 14px;
	color: #ffffff;
	background: -moz-linear-gradient(
		top,
		#00bf00 0%,
		#008500);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#00bf00),
		to(#008500));
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	border: 1px solid #000000;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,1);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,1);
	text-shadow:
		0px 1px 0px rgba(000,000,000,0.7),
		0px 1px 0px rgba(255,255,255,0.3);

}

Could you make quote bits actual blockquotes? There should be a button to do this.
E.g quote:

Dedicate yourself to continuous, personal improvement,
for you are your most precious resource
Brian Tracy

thank you.. and yes I have done this, but I’m not seeing a difference?!

You may need to clear your browser’s cache to see instantaneous changes.

Also for aligning the title left, replace this part of the code;

#content h1.posttitle {
 text-align: left;
}

with this;

#content h1.posttitle {
 text-align: left !important;
}

Thank you, I’ve cleared my cache but still I’m not seeing any changes… Am i looking to see a box around my quotes? My Header is now aligned to the left!

Am i looking to see a box around my quotes?

Not yet, it just allows you to apply styles to that particular (blockquote) element.

Let’s do that now;

blockquote {
 margin: 0;
 margin-bottom: 20px;
 padding-top: 20px;
 background-size: 3%;
 background-position: 20px 10px;
 background-color: rgb(247,244,246);
 font-size: 18px;
 font-family: georgia, serif;
 font-style: italic;
 height: auto;
}

blockquote p {
 margin: 0;
}

Thank you! That looks lovely!!

To make the text align with the navigation;

article.page {
 padding-left: 0;
}

And to pad-out the navigation a bit;

#wrapper #nav {
 padding: 5px;
}

wicked thank you ?? ?? ??
The nav bar looks so much better like this…
How did you stretch our the boxes for the sign up form in the widget? The text you use is a lot nicer as well and the button looks great.
Can I incorporate this button on my sign-up form plugin too?

How did you stretch our the boxes for the sign up form in the widget?

#wysija-2 input[type="submit"] {
 width: 100%;
 /* also you may need this to make your button behave like a button */
 cursor: pointer;
}

Can I incorporate this button on my sign-up form plugin too?

Sure, amend this;

input[type="submit"] {
	font-size: 14px;
	color: #ffffff;
	background: -moz-linear-gradient(
		top,
		#00bf00 0%,
		#008500);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#00bf00),
		to(#008500));
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	border: 1px solid #000000;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,1);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,1);
	text-shadow:
		0px 1px 0px rgba(000,000,000,0.7),
		0px 1px 0px rgba(255,255,255,0.3);

}

To this;

.mabstyle-default.magic-action-box form input[type="submit"],
input[type="submit"] {
	font-size: 14px;
	color: #ffffff;
	background: -moz-linear-gradient(
		top,
		#00bf00 0%,
		#008500);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#00bf00),
		to(#008500));
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	border: 1px solid #000000;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,1);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,1);
	text-shadow:
		0px 1px 0px rgba(000,000,000,0.7),
		0px 1px 0px rgba(255,255,255,0.3);

}

Thanks andrew,
I’m having problems implementing this code, I’ve put it in the custom styles for magic box, also tried in the backend – emptied caches and nothings showing at the moment.
Am I missing something?
Also in the sign-up widget on the right side-bar, you stretched out my input boxes for name and email,,, can I do this too?

I can’t see the code coming through into the webpage, as in all other code like the blockquote style is coming through. Just not the code in my last post.

Do you have any ideas why?

No I really don’t know why.. I’m trying to figure it out… Where should I put this code normally??