Rounding prosilvers corners

[adaptusaaf]

Hi, I need a way to achieve rounded corners on the forum boxes (not category boxes, those are round by default), using images (so it's cross-browser supported)
I'm sure it's really simple but I'm a complete noob.

[Steve]

Should be easy enough todo will post results later

[Steve]

Open styles/prosilver/template/forumlist_body.html

find:

Code: Select all

	<!-- IF not forumrow.S_IS_CAT -->
		<li class="row">

add after:

Code: Select all

<span class="corners-toper"><span></span></span>

find:

Code: Select all

		<!-- IF not S_IS_BOT --><a href="{forumrow.U_LAST_POST}">{LAST_POST_IMG}</a> <!-- ENDIF --><br />{forumrow.LAST_POST_TIME}<!-- ELSE -->{L_NO_POSTS}<br />&nbsp;<!-- ENDIF --></span>
					</dd>
				<!-- ENDIF -->
			</dl>

add after:

Code: Select all

<span class="corners-bottomer"><span></span></span>

pressume view forum also
Open styles/prosilver/template/viewforum_body.html

find:

Code: Select all

		<li class="row<!-- IF topicrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF --><!-- IF topicrow.S_POST_ANNOUNCE --> announce<!-- ENDIF --><!-- IF topicrow.S_POST_STICKY --> sticky<!-- ENDIF --><!-- IF topicrow.S_TOPIC_REPORTED --> reported<!-- ENDIF -->">
		

add after:

Code: Select all

<span class="corners-toper"><span></span></span>

find:

Code: Select all

					<!-- IF not S_IS_BOT --><a href="{topicrow.U_LAST_POST}">{LAST_POST_IMG}</a> <!-- ENDIF --><br />{topicrow.LAST_POST_TIME}</span>
				</dd>
			</dl>

add after:

Code: Select all

<span class="corners-toper"><span></span></span>

Open styles/prosilver/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

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

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

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

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

Open styles/prosilver/theme/common.css

find:

Code: Select all

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

add after:

Code: Select all

span.corners-toper, span.corners-bottomer, span.corners-toper span, span.corners-bottomer span {
	font-size: 1px;
	line-height: 1px;
	display: block;
	height: 5px;
	background-repeat: no-repeat;
}

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

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

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

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

Refresh template/theme for prosilver and refresh your web browser.
Awaits for i want to change the corner image and remove the border top and bottom.
pic:

corner.PNG

[adaptusaaf]

I guess you caught my backup plan post on phpBB.com
'i want to change the corner image and remove the border top and bottom.'

[Steve]

Theres two places in prosilvers theme css files to remove the border top and bottom so,

Open styles/prosilver/theme/colours.css
find:

Code: Select all

li.row {
	border-top-color:  #FFFFFF;
	border-bottom-color: #00608F;
}

replace with:

Code: Select all

li.row {
	border-top-color:  none;
	border-bottom-color: none;
}

Open styles/prosilver/theme/content.css
find:

Code: Select all

li.row {
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #8f8f8f;
}

replace with:

Code: Select all

li.row {
	border-top: none;
	border-bottom: none;
}

I will make some images tommorow getting late now.

[Steve]

ok i made it look spot on and changed viewforum images around also.
Upload these images to prossilver/theme/images/*.*

images (2).zip

** Make sure you do the thml code changes as posted above for forumlist_body.html and viewforum_body.html.

Open styles prosilver/theme/colours.css
find:

Code: Select all

.forabg {
	background-color: #0076b1;
	background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}

.forumbg {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
}

replace with:

Code: Select all

.forabg {
	background-color: #0076b1;
	background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}

.forumbg {
	background-color: #0076b1;
	background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}

find:

Code: Select all

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

add after:

Code: Select all

/* duplice for internal corners css */
span.corners-toper {
	background-image: url("{T_THEME_PATH}/images/corners_lefter.png");
}

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

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

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

find:

Code: Select all

li.row {
	border-top-color:  #FFFFFF;
	border-bottom-color: #00608F;
}

replace with:

Code: Select all

li.row {
	border-top: none;
	border-bottom: 1px solid #0076b1;
}

Open styles prosilver/theme/content.css
find:

Code: Select all

	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #8f8f8f;

replace with:

Code: Select all

li.row {
	border-top: none;
	border-bottom: 1px solid #0076b1;
}

Refresh theme in admin control panel for prosilver will look like this now.

index.PNG

vforum.PNG

[neptune]

wooow looks great now, thx a lot for your edits xD

is this only for forums or are the edits also affect all boxes in phpbb3

[Steve]

Where else do you want internal rounded corners?

[neptune]

on all "forabg" corners on every box like arcade or nv recent topics or anouncement centre etc.

[cisco007]

seems like you want a completely different style than the default prosilver!