Jump to content
Sign in to follow this  
waltersrs

Rounded Corners and Background Image

Recommended Posts

waltersrs

Okay... I've been reading through the posts and realize that my knowledge of CSS is nonexistent other than checking out firebug and understanding the videos posted. I'm interested in learning, but not exactly sure where to start. Help would be appreciated. Here is my website http://soccerskillsacademy.net/ I want to round the corners of the canvas and provide a background image using the following: http://soccerskillsacademy.net/wp-content/uploads/2011/01/Soccer-Field.jpg acqV2.png Please help and point me in the right direction.

Share this post


Link to post
Share on other sites
bryan-hadaway

Here's the holy grail tool set just for you :): Firefox: http://www.firefox.com/ Firebug: https://addons.mozilla.org/en-US/firefox/addon/firebug/ Learn CSS: http://www.w3schools.com/css/ CSS Rounded Corners: http://www.css3.info/preview/rounded-border/ We definitely encourage learning, but if you get frustrated and want to take a shortcut we'll be here to help. Thanks, Bryan

Share this post


Link to post
Share on other sites
waltersrs

Do I add my css to the custom code section? I'm unfamiliar with the child themes and believe that it would not be in my best interest to modify the css files directly...

Share this post


Link to post
Share on other sites
kastelic

Yes, in the custom code section in the "custom css" box is where you would add styles affecting backgrounds, rounded corners etc. To set a background:

#page-canvas{background: url(images/yourimage.jpg) no-repeat}
To make rounded corners:
#page-canvas{
	    -webkit-border-radius:10px;
	    -moz-border-radius:10px;
	}

Share this post


Link to post
Share on other sites
waltersrs

I'm clearly not doing something right. I took the code from above pasted it to the custom css section, hit save, went to my site, hit F5, no changes made. Hopefully through this example, I can learn something and apply it to the advice I got from Bryan.

Share this post


Link to post
Share on other sites
catrina

Try adding the CSS to the base.css file instead. This CSS file is located in the child theme (Platform Base), which must be activated in Appearance > Themes on your Dashboard. Also, depending on which browser you're using, the round corners may or may not work.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
makeylon

Also, if you're trying to view it in IE, unless they've made some upgrades, IE doesn't do rounded corners through CSS. Granted, its been a while since I've played with css and IE as I concentrate on firefox and avoid using code that IE screws up.

Share this post


Link to post
Share on other sites
bryan-hadaway

That is indeed an important note: rounded corners are for modern, standards compliant browsers, it is a CSS3 style. IE for how popular it is (unfortunately) is one of the worst browsers around in almost all areas. Because it's so popular though, we are slaves to making things look good in it. If you're concerned about cross-browser compatibility and consistency, rounded corners are not a style to use. If your user base is a tech savvy one that will be using Firefox, Chrome, Safari etc. then you're probably fine using new styling techniques like rounded corners. Thanks, Bryan

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×