Creating a style....

[cisco007]

....all I need help with now is installing the last topic title on the index and I need a little help with installing AJAX chat.....

I really don't see what that has to do with creating a style, if you need help with any of those things you will have to ask in the appropriate forum!

[Bullseye]

I will, I was just telling Steve how far I had got, he said he's going to help me with rounding the corners, then the style is pretty much done......

[Steve]

rounded corners the easy way
open styles/your style/template overall_header.html
find:

Code: Select all

<div id="wrap">

add after:

Code: Select all

<div class="inner"><span class="corners-topb"><span></span></span>

open styles/your style/template overall_footer.html
find:

Code: Select all

<div>
	<a id="bottom" name="bottom" accesskey="z"></a>

Add before:

Code: Select all

<span class="corners-bottomb"><span></span></span></div>

open styles/your style/theme/colours.css
find:

Code: Select all

span.corners-bottom span {
	background-image: url("{T_THEME_PATH}/images/corners_right.png");
}

add after:

Code: Select all

/*--- bigger corners --*/
span.corners-topb {
	background-image: url("{T_THEME_PATH}/images/corners_leftb.png");
}

span.corners-topb span {
	background-image: url("{T_THEME_PATH}/images/corners_rightb.png");
}

span.corners-bottomb {
	background-image: url("{T_THEME_PATH}/images/corners_leftb.png");
}

span.corners-bottomb span {
	background-image: url("{T_THEME_PATH}/images/corners_rightb.png");
}

open styles/your style/theme/common.css
find:

Code: Select all

.rules span.corners-top {
	margin: 0 -10px 5px -10px;
}

.rules span.corners-bottom {
	margin: 5px -10px 0 -10px;
}

add after:

Code: Select all

/*--- bigger corners --*/
span.corners-topb, span.corners-bottomb, span.corners-topb span, span.corners-bottomb span {
	font-size: 1px;
	line-height: 1px;
	display: block;
	height: 10px;
	background-repeat: no-repeat;
}

span.corners-topb {
	background-image: none;
	background-position: 0 0;
	margin: 0 -21px;
}

span.corners-topb span {
	background-image: none;
	background-position: 100% 0;
}

span.corners-bottomb {
	background-image: none;
	background-position: 0 100%;
	margin: 0 -21px;
	clear: both;
}

span.corners-bottomb span {
	background-image: none;
	background-position: 100% 100%;
}

upload these two images to your style/theme/images/*.*

images.zip

refresh template and theme in acp ,and web browser
should look like this ?

rounded.PNG

[Steve]

heres your site logo how to
open your style/imageset/imageset.cfg
find:

Code: Select all

img_site_logo = site_logo.gif*52*139

replace with:

Code: Select all

img_site_logo = site_logo.png*207*843

upload the new resized logo to your style/imageset/*.*

site_logo.zip

refresh imageset in admin

let me know when this far we will do the menu part

logoadded.PNG

[Bullseye]

I just tried it and it doesn't work, despite refreshing in both the browser and the ACP.....................

[Steve]

lets refresh the template in acpanel or did you ?

* edit i see the images folder is not downloaded yet. or the smaller site logo ........

[Bullseye]

yes I did, the corners are still square....

this may sound daft, but when it say 'find' and then 'add after' does it mean add after the code that has been found and is it suppose to be on the same line or on a new one?

*edit:

I changed the logo last night.....

[Steve]

you add after on a new line and the images have still not been download m8

[Bullseye]

I've tried it about 15 times, its still not working, I'm so sorry to be a pain.....

Am I doing properly

For example when it says:

find:

Code: Select all

<div id="wrap">

add after:

Code: Select all

<div class="inner"><span class="corners-topb"><span></span></span>

When its done should it look like this?:

Code: Select all

<div id="wrap">
<div class="inner"><span class="corners-topb"><span></span></span>

Because that's how I've been doing it and I also added the images, thinking that's where I went wrong, but the corners are still square....

I've been editing in 'wordpad' is that the problem?

Thank you for your patience.

[Steve]

That edits correct ,be sure the images for round corners are in your style/theme/images folder.
Be sure you are refreshing the template and theme.
use this for editing files > http://notepad-plus.sourceforge.net/uk/site.htm

this does work your just doing summit wrong. Keep practicing