[HOW TO] Add Liquid/Dynamic Rounded corners to your style

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Ideas Centre
sathsara
Registered User
Posts: 137
Joined: Sun Sep 07, 2008 9:33 am
Location: Sri Lanka

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by sathsara »

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

<!--
	phpBB style name: prosilver
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:      
	
	NOTE: This page was generated by phpBB, the free open-source bulletin board package.
	      The phpBB Group is not responsible for the content of this page and forum. For more information
	      about phpBB please visit http://www.phpbb.com
-->

<script type="text/javascript">
// <![CDATA[
	var jump_page = '{LA_JUMP_PAGE}:';
	var on_page = '{ON_PAGE}';
	var per_page = '{PER_PAGE}';
	var base_url = '{A_BASE_URL}';
	var style_cookie = 'phpBBstyle';
	var onload_functions = new Array();
	var onunload_functions = new Array();

	<!-- IF S_USER_PM_POPUP -->
		if ({S_NEW_PM})
		{
			var url = '{UA_POPUP_PM}';
			window.open(url.replace(/&/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
		}
	<!-- ENDIF -->

	/**
	* Find a member
	*/
	function find_username(url)
	{
		popup(url, 760, 570, '_usersearch');
		return false;
	}

	/**
	* New function for handling multiple calls to window.onload and window.unload by pentapenguin
	*/
	window.onload = function()
	{
		for (var i = 0; i < onload_functions.length; i++)
		{
			eval(onload_functions[i]);
		}
	}

	window.onunload = function()
	{
		for (var i = 0; i < onunload_functions.length; i++)
		{
			eval(onunload_functions[i]);
		}
	}

// ]]>
</script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->

<!-- INCLUDE ads/ads.js -->
</head>

<body <div class="outside">
<div class="top-left"></div><div class="top-right"></div>
<div class="inside">
<div class="notopgap"> id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">{ADS_1}


		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
			</div>

		<!-- IF ( S_DISPLAY_SEARCH and not S_IN_SEARCH ) and not ( S_MENU_ENABLED and S_MENU_SEARCH ) -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->
		<!-- IF S_MENU_ENABLED -->
	<span class="corners-bottom" style="height:0px;"><span></span></span></div>
</div>
<div id="menu" class="{S_MENU_COLOR} menu-<!-- IF S_MENU_MARGIN -->thin<!-- ELSE -->no<!-- ENDIF -->margin" style="clear:both">
	<div class="inner">
	<span class="corner-left"></span>
	<span class="corner-right"></span>
<!-- IF S_DISPLAY_SEARCH and S_MENU_SEARCH -->
	<div id="top-search">
		<form action="{U_SEARCH}" method="post" id="search">
		<fieldset>
			<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="menu_search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
			{S_SEARCH_HIDDEN_FIELDS}
		</fieldset>
		</form>
	</div>
<!-- ENDIF -->
	<ul class="menu_buttons">
	<!-- BEGIN menu -->
		<li><a href="{menu.BUTTON_URL}" title="{menu.BUTTON_NAME}"<!-- IF menu.BUTTON_TARGET --> target="_blank"<!-- ENDIF -->><span style="background-image:url('{menu.BUTTON_SRC}'); width:{menu.BUTTON_WIDTH}px">{menu.BUTTON_NAME}</span></a></li>
	<!-- END menu -->
	</ul>
<!-- ENDIF -->

			<span class="corners-bottom"><span></span></span></div>
		</div>{ADS_2}

		<!-- IF not $S_IN_PORTAL or not S_DISPLAY_MAINMENU -->

		<div class="navbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<ul class="linklist navlinks">
				<!-- IF S_IN_ARCADE -->
<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <strong>&#8249;</strong> <a href="{U_ARCADE}">{L_ARCADE_INDEX}</a><!-- IF S_IN_SEARCH --> <strong>&#8249;</strong> {L_ARCADE_SEARCH}<!-- ENDIF --><!-- IF S_IN_FAV --> <strong>&#8249;</strong> <a href="{U_ARCADE_FAV}">{L_ARCADE_FAV}</a><!-- ENDIF --><!-- IF S_IN_STATS --> <strong>&#8249;</strong> <a href="{U_ARCADE_STATS}">{L_ARCADE_STATS}</a><!-- ENDIF --><!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_CAT}">{navlinks.CAT_NAME}</a><!-- END navlinks --><!-- IF GAME_NAME --> <strong>&#8249;</strong> <a href="{U_VIEW_GAME}">{GAME_NAME}</a><!-- ENDIF --></li>
<!-- ELSE -->
				<li class="icon-home"><a href="{U_PORTAL}">{L_PORTAL}</a> &#187; <a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>
				<!-- ENDIF -->
				

				<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="fontsizeup(); return false;" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

				<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
			</ul>

			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
			<ul class="linklist leftside">
				<li class="icon-ucp">
					<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="u">{L_PROFILE}</a>
						<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF --> &bull; 
					<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
					<!-- IF U_RESTORE_PERMISSIONS --> &bull;
					<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
					<!-- ENDIF -->
				</li>
			</ul>
			<!-- ENDIF -->

			<ul class="linklist rightside">
				<li class="icon-logout"><a href="radio/radio.php" onclick="window.open('radio/radio.php','','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=420, height=400, left=20, top=20'); return false;">Radio</a></li>
				<!-- BEGIN blog_links -->
					<li class="{blog_links.CLASS}"><a href="{blog_links.URL}">{blog_links.TEXT}</a></li>
				<!-- END blog_links --><li class="icon-ucp"><a href="{U_ARCADE}" title="{L_ARCADE_EXPLAIN}">{L_ARCADE}</a></li><li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
				<!-- IF not S_IS_BOT -->
					<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
					<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
					<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a></li>
				<!-- ENDIF -->
			</ul>

			<span class="corners-bottom"><span></span></span></div>
		</div>
		<!-- ENDIF -->

	</div>

	<a name="start_here"></a>
	<div id="page-body">
		
		 <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) --> 
		<div id="message" class="rules">
			<div class="inner"><span class="corners-top"><span></span></span>
				<strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
			<span class="corners-bottom"><span></span></span></div>
		</div>
		<!-- ENDIF -->
<!-- IF S_IN_ARCADE and S_ARCADE_DISABLED and S_USER_LOGGED_IN and U_ACP --> 
		<div id="message" class="rules">
			<div class="inner"><span class="corners-top"><span></span></span>
				<strong>{L_INFORMATION}:</strong> {L_ARCADE_DISABLED}
			<span class="corners-bottom"><span></span></span></div>
		</div>
		<!-- ENDIF -->
sathsara
Registered User
Posts: 137
Joined: Sun Sep 07, 2008 9:33 am
Location: Sri Lanka

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by sathsara »

Whats wrong with that?
sathsara
Registered User
Posts: 137
Joined: Sun Sep 07, 2008 9:33 am
Location: Sri Lanka

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by sathsara »

Bump.......... Can anyone help me?
User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by Raimon »

search:

Code: Select all

<body <div class="outside">
<div class="top-left"></div><div class="top-right"></div>
<div class="inside">
<div class="notopgap"> id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

replace with:

Code: Select all

<body  id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
<div class="outside">
<div class="top-left"></div><div class="top-right"></div>
<div class="inside">
<div class="notopgap">
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!
sathsara
Registered User
Posts: 137
Joined: Sun Sep 07, 2008 9:33 am
Location: Sri Lanka

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by sathsara »

Thanks ! Thank you so much!
User avatar
1234homie
Registered User
Posts: 439
Joined: Fri Sep 26, 2008 3:17 pm

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by 1234homie »

Hi when i add it in subsilver style on my forum, where i have width = 670px. Its corners are showing out of the forum width pls help
User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by Raimon »

Could you post a link to your board please ?
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!
User avatar
briztian
Registered User
Posts: 26
Joined: Sat Nov 01, 2008 4:50 am

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by briztian »

How will I know how wide to make the images for the corners and borders around my forum? Where do i look to find the pixel dimensions of my forum?

Again thanks Raimon for helping me with changing the background color. When I change the color however, it fills in around my posts which is why i changed it back to white. After finishing with rounded corners and borders, will the background color still fill in around my posts?
http://briztian.com/forum
pumping_iron_300
Registered User
Posts: 60
Joined: Thu Dec 18, 2008 5:27 am

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by pumping_iron_300 »

I have no colors.css

Also where do i put the corners.pg image at
gt500
Registered User
Posts: 143
Joined: Thu Jun 12, 2008 11:35 am

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by gt500 »

how do i change the width so my logo is not overlapping the edge on the right hand side

thanks
User avatar
Jo Ann
Registered User
Posts: 209
Joined: Wed Dec 10, 2003 2:00 am
Location: Western PA
Contact:

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by Jo Ann »

does anyone have the images for the side borders so I have an idea on how they need to be? the links for the border images are no longer accessable.

thanx
Jo Ann
User avatar
modifier
Registered User
Posts: 71
Joined: Thu Jul 30, 2009 7:31 pm
Location: Maryland
Contact:

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by modifier »

Ca i use this same technique on the interior boxes as well ? The viewforum, viewtopic posting etc ?
http://www.ngnuke.comYour source for PHPBB3 Graphics and Mods.
User avatar
modifier
Registered User
Posts: 71
Joined: Thu Jul 30, 2009 7:31 pm
Location: Maryland
Contact:

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by modifier »

Ash i have tried several times to make a corner image like yours with a black BG and a #333333 interior color. I cannot get the corners exactly right. What are the chance of you making it for me my friend. With a border of #500101
http://www.ngnuke.comYour source for PHPBB3 Graphics and Mods.
User avatar
modifier
Registered User
Posts: 71
Joined: Thu Jul 30, 2009 7:31 pm
Location: Maryland
Contact:

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by modifier »

I found a way to do this with a css script but have an issue in the footer. See image below.

Image

Here is my footer code:

Code: Select all

	<div class="copyright">Dark-Shines style by <a href="http://www.christianbullock.com" rel="dofollow">Christian Bullock</a>.
    <br />Advertise your forum at <a href="http://forumpromotion.net" rel="dofollow">Forum Promotion</a> // More phpBB3 styles at <a href="http://pixelraider.com" rel="dofollow">PixelRaider</a>.
    
<!-- ###### END LEGAL USE NOTICE ###### -->

		<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->

		<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->

		<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->



<div>

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

	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->

</div><!-- /rbcontent -->
	<div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->

</body>

</html>
Can anyone help with any suggestions ona way to fix this:

Here is the css i added in my colours.css

Code: Select all

    /* set millions of background images */
.rbroundbox { background: url({T_THEME_PATH}/images/nt.gif) repeat; }
.rbtop div { background: url({T_THEME_PATH}/images/tl.gif) no-repeat top left; }
.rbtop { background: url({T_THEME_PATH}/images/tr.gif) no-repeat top right; }
.rbbot div { background: url({T_THEME_PATH}/images/bl.gif) no-repeat bottom left; }
.rbbot { background: url({T_THEME_PATH}/images/br.gif) no-repeat bottom right; }

/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 20px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 95%; margin: 0em auto; }
Please, any help would be great.
http://www.ngnuke.comYour source for PHPBB3 Graphics and Mods.
User avatar
modifier
Registered User
Posts: 71
Joined: Thu Jul 30, 2009 7:31 pm
Location: Maryland
Contact:

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by modifier »

I hav etried moving to overall code around everywhere but to no avail, please anyone have any ideas on even another way to do this.
http://www.ngnuke.comYour source for PHPBB3 Graphics and Mods.
Locked

Return to “[3.0.x] Styles Support & Discussion”