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

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Anti-Spam Guide
Xabi
Registered User
Posts: 460
Joined: Wed May 23, 2007 9:04 am

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

Post by Xabi »

I have followed this tutorial and it works ok, but I'm getting more margin at the left side than the right side. How to solve this?

I would like to attach an image, but I do not have permission in this forum :cry: :?:
Ronald Daniels
Registered User
Posts: 2
Joined: Sun Jun 17, 2007 6:19 am

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

Post by Ronald Daniels »

I'm having a few issues getting this to work, for some reasons the corners are not showing up. Example can be found here: http://www.an-ex.com/board/index.php
Fridge
Registered User
Posts: 307
Joined: Sat Nov 11, 2006 1:41 am
Location: Rotterdam, The Netherlands
Name: Martin
Contact:

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

Post by Fridge »

Did you download the corners image.....

Code: Select all

http://home.tiscali.nl/developerscorner/liquidcorners/images/corners1280x18.gif
....and placed it in your styles/*template*/theme/images folder ?
Ronald Daniels
Registered User
Posts: 2
Joined: Sun Jun 17, 2007 6:19 am

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

Post by Ronald Daniels »

Fridge wrote:Did you download the corners image.....

Code: Select all

http://home.tiscali.nl/developerscorner/liquidcorners/images/corners1280x18.gif
....and placed it in your styles/*template*/theme/images folder ?
I did in fact do this.


Edit: Had a bit of bad code in the way stopping it from showing >_> I fixed it.
ndrakey
Registered User
Posts: 4
Joined: Wed Jun 20, 2007 5:42 pm

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

Post by ndrakey »

Mhm that guide didn't work for me.
Could someone please upload the edited files

tweaks.css
colours.css
overall_header.html
overall_footer.html

for me ?

I must have done something wrong
-Thanks
Mizpah
Registered User
Posts: 79
Joined: Tue Apr 25, 2006 1:23 pm

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

Post by Mizpah »

Hello Guys,

A strange one this - have followed the edits, but get this:

The lost titans

As a result! Its as if the css is not being used and all colours are being ignored.

I have played with a this for a while - and althoug I could restore the original, I am keen to see what i have done wrong!

Oh and Ash, in the html edit step you state:
FIND:
<body

AFTER ADD:

Do you in fact mean <body> Insert code ? I have assumed that and made the insert out side of the body tag - however i have also tried it as <body inserted code > just in case!

attached is colours.css (where I assume the issue is) but can happily link others.

Code: Select all

/*  	
--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */

html, body {
	color: #536482;
	background-color: #FFFFFF;
}

h1 {
	color: #FFFFFF;
}

h2 {
	color: #28313F;
}

h3 {
	border-bottom-color: #CCCCCC;
	color: #115098;
}

hr {
	border-color: #FFFFFF;
	border-top-color: #CCCCCC;
}

hr.dashed {
	border-top-color: #CCCCCC;
}

/* Search box
--------------------------------------------- */

#search-box {
	color: #FFFFFF;
}

#search-box #keywords {
	background-color: #FFF;
}

#search-box input {
	border-color: #0075B0;
}

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
	color: #FFFFFF;
}

.navbar {
	background-color: #cadceb;
}

.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");
}

.panel {
	background-color: #ECF1F3;
	color: #28313F;
}

.post:target .content {
	color: #000000;
}

.post:target h3 a {
	color: #000000;
}

.bg1	{ background-color: #ECF3F7; }
.bg2	{ background-color: #e1ebf2;  }
.bg3	{ background-color: #cadceb; }

.ucprowbg {
	background-color: #DCDEE2;
}

.fieldsbg {
	background-color: #E7E8EA;
}

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

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

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

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

/* Horizontal lists
----------------------------------------*/

ul.navlinks {
	border-bottom-color: #FFFFFF;
}

/* Table styles
----------------------------------------*/
table.table1 thead th {
	color: #FFFFFF;
}

table.table1 tbody tr {
	border-color: #BFC1CF;
}

table.table1 tbody tr:hover, table.table1 tbody tr.hover {
	background-color: #CFE1F6;
	color: #000;
}

table.table1 td {
	color: #536482;
}

table.table1 tbody td {
	border-top-color: #FAFAFA;
}

table.table1 tbody th {
	border-bottom-color: #000000;
	color: #333333;
	background-color: #FFFFFF;
}

table.info tbody th {
	color: #000000;
}

/* Misc layout styles
---------------------------------------- */
dl.details dt {
	color: #000000;
}

dl.details dd {
	color: #536482;
}

.sep {
	color: #1198D9;
}

/* Pagination
---------------------------------------- */

.pagination span strong {
	color: #FFFFFF;
	background-color: #4692BF;
	border-color: #4692BF;
}

.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active {
	color: #5C758C;
	background-color: #ECEDEE;
	border-color: #B4BAC0;
}

.pagination span a:hover {
	border-color: #368AD2;
	background-color: #368AD2;
	color: #FFF;
}

/* Pagination in viewforum for multipage topics */
.row .pagination {
	background-image: url("{T_THEME_PATH}/images/icon_pages.gif");
}

.row .pagination span a, li.pagination span a {
	background-color: #FFFFFF;
}

.row .pagination span a:hover, li.pagination span a:hover {
	background-color: #368AD2;
}

/* Miscellaneous styles
---------------------------------------- */

.copyright {
	color: #555555;
}

.error {
	color: #BC2A4D;
}

.reported {
	background-color: #F7ECEF;
}

li.reported:hover {
	background-color: #ECD5D8 !important;
}
.sticky, .announce {
	/* you can add a background for stickies and announcements*/
}

div.rules {
	background-color: #ECD5D8;
	color: #BC2A4D;
}

p.rules {
	background-color: #ECD5D8;
	background-image: none;
}

/*  	
--------------------------------------------------------------
Colours and backgrounds for links.css
-------------------------------------------------------------- */

a:link	{ color: #105289; }
a:visited	{ color: #105289; }
a:hover	{ color: #D31141; }
a:active	{ color: #368AD2; }

/* Links on gradient backgrounds */
#search-box a:link, .navbg a:link, .forumbg .header a:link, .forabg .header a:link, th a:link {
	color: #FFFFFF;
}

#search-box a:visited, .navbg a:visited, .forumbg .header a:visited, .forabg .header a:visited, th a:visited {
	color: #FFFFFF;
}

#search-box a:hover, .navbg a:hover, .forumbg .header a:hover, .forabg .header a:hover, th a:hover {
	color: #A8D8FF;
}

#search-box a:active, .navbg a:active, .forumbg .header a:active, .forabg .header a:active, th a:active {
	color: #C8E6FF;
}

/* Links for forum/topic lists */
a.forumtitle {
	color: #105289;
}

/* a.forumtitle:visited { color: #105289; } */

a.forumtitle:hover {
	color: #BC2A4D;
}

a.forumtitle:active {
	color: #105289;
}

a.topictitle {
	color: #105289;
}

/* a.topictitle:visited { color: #368AD2; } */

a.topictitle:hover {
	color: #BC2A4D;
}

a.topictitle:active {
	color: #105289;
}

/* Post body links */
.postlink {
	color: #368AD2;
	border-bottom-color: #368AD2;
}

.postlink:visited {
	color: #5D8FBD;
	border-bottom-color: #666666;
}

.postlink:active {
	color: #368AD2;
}

.postlink:hover {
	background-color: #D0E4F6;
	color: #0D4473;
}

.signature a, .signature a:visited, .signature a:active, .signature a:hover {
	background-color: transparent;
}

/* Profile links */
.postprofile a:link, .postprofile a:active, .postprofile a:visited, .postprofile dt.author a {
	color: #105289;
}

.postprofile a:hover, .postprofile dt.author a:hover {
	color: #D31141;
}

/* Profile searchresults */	
.search .postprofile a {
	color: #105289;
}

.search .postprofile a:hover {
	color: #D31141;
}

/* Back to top of page */
a.top {
	background-image: url("{IMG_ICON_BACK_TOP_SRC}");
}

a.top2 {
	background-image: url("{IMG_ICON_BACK_TOP_SRC}");
}

/* Arrow links  */
a.up		{ background-image: url("{T_THEME_PATH}/images/arrow_up.gif") }
a.down		{ background-image: url("{T_THEME_PATH}/images/arrow_down.gif") }
a.left		{ background-image: url("{T_THEME_PATH}/images/arrow_left.gif") }
a.right		{ background-image: url("{T_THEME_PATH}/images/arrow_right.gif") }

a.up:hover {
	background-color: transparent;
}

a.left:hover {
	color: #368AD2;
}

a.right:hover {
	color: #368AD2;
}


/*  	
--------------------------------------------------------------
Colours and backgrounds for content.css
-------------------------------------------------------------- */

ul.forums {
	background-color: #eef5f9;
	background-image: url("{T_THEME_PATH}/images/gradient.gif");
}

ul.topiclist li {
	color: #4C5D77;
}

ul.topiclist dd {
	border-left-color: #FFFFFF;
}

ul.topiclist li.row dt a.subforum.read {
	background-image: url("{IMG_SUBFORUM_READ_SRC}");
}

ul.topiclist li.row dt a.subforum.unread {
	background-image: url("{IMG_SUBFORUM_UNREAD_SRC}");
}

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

li.row strong {
	color: #000000;
}

li.row:hover {
	background-color: #F6F4D0;
}

li.row:hover dd {
	border-left-color: #CCCCCC;
}

li.header dt, li.header dd {
	color: #FFFFFF;
}

/* Forum list column styles */
ul.topiclist dd.searchextra {
	color: #333333;
}

/* Post body styles
----------------------------------------*/
.postbody {
	color: #333333;
}

/* Content container styles
----------------------------------------*/
.content {
	color: #333333;
}

.content h2, .panel h2 {
	color: #115098;
	border-bottom-color:  #CCCCCC;
}

dl.faq dt {
	color: #333333;
}

.posthilit {
	background-color: #F3BFCC;
	color: #BC2A4D;
}

.announce, .unreadpost {
	/* Highlight the announcements & unread posts box */
	border-left-color: #BC2A4D;
	border-right-color: #BC2A4D;
}

/* Post signature */
.signature {
	border-top-color: #CCCCCC;
}

/* Post noticies */
.notice {
	border-top-color:  #CCCCCC;
}

/* BB Code styles
----------------------------------------*/
/* Quote block */
blockquote {
	background-color: #EBEADD;
	background-image: url("{T_THEME_PATH}/images/quote.gif");
	border-color:#DBDBCE;
}

blockquote blockquote {
	/* Nested quotes */
	background-color:#EFEED9;
}

blockquote blockquote blockquote {
	/* Nested quotes */
	background-color: #EBEADD;
}

/* Code block */
dl.codebox {
	background-color: #FFFFFF;
	border-color: #C9D2D8;
}

dl.codebox dt {
	border-bottom-color:  #CCCCCC;
}

dl.codebox code {
	color: #2E8B57;
}

.syntaxbg		{ color: #FFFFFF; }
.syntaxcomment	{ color: #FF8000; }
.syntaxdefault	{ color: #0000BB; }
.syntaxhtml		{ color: #000000; }
.syntaxkeyword	{ color: #007700; }
.syntaxstring	{ color: #DD0000; }

/* Attachments
----------------------------------------*/
.attachbox {
	background-color: #FFFFFF;
	border-color:  #C9D2D8;
}

.pm-message .attachbox {
	background-color: #F2F3F3;
}

.attachbox dd {
	border-top-color: #C9D2D8;
}

.attachbox p {
	color: #666666;
}

.attachbox p.stats
{
	color: #666666;
}

.attach-image img {
	border-color: #999999;
}

/* Inline image thumbnails */

dl.file dd {
	color: #666666;
}

dl.thumbnail img {
	border-color: #666666;
	background-color: #FFFFFF;
}

dl.thumbnail dd {
	color: #666666;
}

dl.thumbnail dt a:hover {
	background-color: #EEEEEE;
}

dl.thumbnail dt a:hover img {
	border-color: #368AD2;
}

/* Post poll styles
----------------------------------------*/

fieldset.polls dl {
	border-top-color: #DCDEE2;
	color: #666666;
}

fieldset.polls dl.voted {
	color: #000000;
}

fieldset.polls dd div {
	color: #FFFFFF;
}

.pollbar1 {
	background-color: #AA2346;
	border-bottom-color: #74162C;
	border-right-color: #74162C;
}

.pollbar2 {
	background-color: #BE1E4A;
	border-bottom-color: #8C1C38;
	border-right-color: #8C1C38;
}

.pollbar3 {
	background-color: #D11A4E;
	border-bottom-color: #AA2346;
	border-right-color: #AA2346;
}

.pollbar4 {
	background-color: #E41653;
	border-bottom-color: #BE1E4A;
	border-right-color: #BE1E4A;
}

.pollbar5 {
	background-color: #F81157;
	border-bottom-color: #D11A4E;
	border-right-color: #D11A4E;
}

/* Poster profile block
----------------------------------------*/
.postprofile {
	color: #666666;
	border-left-color: #FFFFFF;
}

.pm .postprofile {
	border-left-color: #DDDDDD;
}

.postprofile strong {
	color: #000000;
}

.online {
	background-image: url("{T_IMAGESET_LANG_PATH}/icon_user_online.gif");
}

/*  	
--------------------------------------------------------------
Colours and backgrounds for buttons.css
-------------------------------------------------------------- */

/* Big button images */
.reply-icon, .reply-icon a			{ background-image: url("{IMG_BUTTON_TOPIC_REPLY_SRC}"); }
.post-icon, .post-icon a				{ background-image: url("{IMG_BUTTON_TOPIC_NEW_SRC}") ;}
.locked-icon, .locked-icon a			{ background-image: url("{IMG_BUTTON_TOPIC_LOCKED_SRC}"); }
.pmreply-icon, .pmreply-icon a		{ background-image: url("{IMG_BUTTON_PM_REPLY_SRC}") ;}
.newpm-icon, .newpm-icon a			{ background-image: url("{IMG_BUTTON_PM_NEW_SRC}") ;}
.forwardpm-icon, .forwardpm-icon a 	{ background-image: url("{IMG_BUTTON_PM_FORWARD_SRC}") ;}

a.print {
	background-image: url("{T_THEME_PATH}/images/icon_print.gif");
}

a.sendemail {
	background-image: url("{T_THEME_PATH}/images/icon_sendemail.gif");
}

a.fontsize {
	background-image: url("{T_THEME_PATH}/images/icon_fontsize.gif");
}

/* Icon images
---------------------------------------- */
.sitehome						{ background-image: url("{T_THEME_PATH}/images/icon_home.gif"); }
.icon-faq						{ background-image: url("{T_THEME_PATH}/images/icon_faq.gif"); }
.icon-members					{ background-image: url("{T_THEME_PATH}/images/icon_members.gif"); }
.icon-home						{ background-image: url("{T_THEME_PATH}/images/icon_home.gif"); }
.icon-ucp						{ background-image: url("{T_THEME_PATH}/images/icon_ucp.gif"); }
.icon-register					{ background-image: url("{T_THEME_PATH}/images/icon_register.gif"); }
.icon-logout					{ background-image: url("{T_THEME_PATH}/images/icon_logout.gif"); }
.icon-bookmark					{ background-image: url("{T_THEME_PATH}/images/icon_bookmark.gif"); }
.icon-bump						{ background-image: url("{T_THEME_PATH}/images/icon_bump.gif"); }
.icon-subscribe					{ background-image: url("{T_THEME_PATH}/images/icon_subscribe.gif"); }
.icon-unsubscribe				{ background-image: url("{T_THEME_PATH}/images/icon_unsubscribe.gif"); }
.icon-pages						{ background-image: url("{T_THEME_PATH}/images/icon_pages.gif"); }
.icon-search					{ background-image: url("{T_THEME_PATH}/images/icon_search.gif"); }

/* Profile & navigation icons */
.email-icon, .email-icon a		{ background-image: url("{IMG_ICON_CONTACT_EMAIL_SRC}"); }
.aim-icon, .aim-icon a			{ background-image: url("{IMG_ICON_CONTACT_AIM_SRC}"); }
.yahoo-icon, .yahoo-icon a		{ background-image: url("{IMG_ICON_CONTACT_YAHOO_SRC}"); }
.web-icon, .web-icon a			{ background-image: url("{IMG_ICON_CONTACT_WWW_SRC}"); }
.msnm-icon, .msnm-icon a			{ background-image: url("{IMG_ICON_CONTACT_MSNM_SRC}"); }
.icq-icon, .icq-icon a			{ background-image: url("{IMG_ICON_CONTACT_ICQ_SRC}"); }
.jabber-icon, .jabber-icon a		{ background-image: url("{IMG_ICON_CONTACT_JABBER_SRC}"); }
.pm-icon, .pm-icon a				{ background-image: url("{IMG_ICON_CONTACT_PM_SRC}"); }
.quote-icon, .quote-icon a		{ background-image: url("{IMG_ICON_POST_QUOTE_SRC}"); }

/* Moderator icons */
.report-icon, .report-icon a		{ background-image: url("{IMG_ICON_POST_REPORT_SRC}"); }
.edit-icon, .edit-icon a			{ background-image: url("{IMG_ICON_POST_EDIT_SRC}"); }
.delete-icon, .delete-icon a		{ background-image: url("{IMG_ICON_POST_DELETE_SRC}"); }
.info-icon, .info-icon a			{ background-image: url("{IMG_ICON_POST_INFO_SRC}"); }
.warn-icon, .warn-icon a			{ background-image: url("{IMG_ICON_USER_WARN_SRC}"); } /* Need updated warn icon */

/*  	
--------------------------------------------------------------
Colours and backgrounds for cp.css
-------------------------------------------------------------- */

/* Main CP box
----------------------------------------*/

#cp-main h3, #cp-main hr, #cp-menu hr {
	border-color: #A4B3BF;
}

#cp-main .panel li.row {
	border-bottom-color: #B5C1CB;
	border-top-color: #F9F9F9;
}

ul.cplist {
	border-top-color: #B5C1CB;
}

#cp-main .panel li.header dd, #cp-main .panel li.header dt {
	color: #000000;
}

#cp-main table.table1 thead th {
	color: #333333;
	border-bottom-color: #333333;
}

#cp-main .pm-message {
	border-color: #DBDEE2;
	background-color: #FFFFFF;
}

/* CP tabbed menu
----------------------------------------*/
#tabs a {
	background-image: url("{T_THEME_PATH}/images/bg_tabs1.gif");
}

#tabs a span {
	background-image: url("{T_THEME_PATH}/images/bg_tabs2.gif");
	color: #536482;
}

#tabs a:hover span {
	color: #BC2A4D;
}

#tabs .activetab a {
	border-bottom-color: #CADCEB;
}

#tabs .activetab a span {
	color: #333333;
}

#tabs .activetab a:hover span {
	color: #000000;
}

/* Mini tabbed menu used in MCP
----------------------------------------*/
#minitabs li {
	background-color: #E1EBF2;
}

#minitabs li.activetab {
	background-color: #F9F9F9;
}

#minitabs li.activetab a, #minitabs li.activetab a:hover {
	color: #333333;
}

/* UCP navigation menu
----------------------------------------*/

/* Link styles for the sub-section links */
#navigation a {
	color: #333;
	background-color: #B2C2CF;
	background-image: url("{T_THEME_PATH}/images/bg_menu.gif");
}

#navigation a:hover {
	background-color: #aabac6;
	color: #BC2A4D;
}

#navigation #active-subsection a {
	color: #D31141;
	background-color: #F9F9F9;
	background-image: none;
}

#navigation #active-subsection a:hover {
	color: #D31141;
}

/* Preferences pane layout
----------------------------------------*/
#cp-main h2 {
	color: #333333;
}

#cp-main .panel {
	background-color: #F9F9F9;
}

#cp-main .pm {
	background-color: #FFFFFF;
}

#cp-main span.corners-top, #cp-menu span.corners-top {
	background-image: url("{T_THEME_PATH}/images/corners_left2.gif");
}

#cp-main span.corners-top span, #cp-menu span.corners-top span {
	background-image: url("{T_THEME_PATH}/images/corners_right2.gif");
}

#cp-main span.corners-bottom, #cp-menu span.corners-bottom {
	background-image: url("{T_THEME_PATH}/images/corners_left2.gif");
}

#cp-main span.corners-bottom span, #cp-menu span.corners-bottom span {
	background-image: url("{T_THEME_PATH}/images/corners_right2.gif");
}

/* Topicreview */
#cp-main .panel #topicreview span.corners-top, #cp-menu .panel #topicreview span.corners-top {
	background-image: url("{T_THEME_PATH}/images/corners_left.gif");
}

#cp-main .panel #topicreview span.corners-top span, #cp-menu .panel #topicreview span.corners-top span {
	background-image: url("{T_THEME_PATH}/images/corners_right.gif");
}

#cp-main .panel #topicreview span.corners-bottom, #cp-menu .panel #topicreview span.corners-bottom {
	background-image: url("{T_THEME_PATH}/images/corners_left.gif");
}

#cp-main .panel #topicreview span.corners-bottom span, #cp-menu .panel #topicreview span.corners-bottom span {
	background-image: url("{T_THEME_PATH}/images/corners_right.gif");
}

/* Friends list */
.cp-mini {
	background-color: #eef5f9;
}

dl.mini dt {
	color: #425067;
}

/* PM Styles
----------------------------------------*/
/* PM Message history */
.current {
	color: #999999 !important;
}

/* PM marking colours */
.pmlist li.pm_message_reported_colour, .pm_message_reported_colour {
	border-left-color: #BC2A4D;
	border-right-color: #BC2A4D;
}

.pmlist li.pm_marked_colour, .pm_marked_colour {
	border-color: #FF6600;
}

.pmlist li.pm_replied_colour, .pm_replied_colour {
	border-color: #A9B8C2;
}

.pmlist li.pm_friend_colour, .pm_friend_colour {
	border-color: #5D8FBD;
}

pmlist li.pm_foe_colour, .pm_foe_colour {
	border-color: #000000;
}

/* Avatar gallery */
#gallery label {
	background-color: #FFFFFF;
	border-color: #CCC;
}

#gallery label:hover {
	background-color: #EEE;
}

/*  	
--------------------------------------------------------------
Colours and backgrounds for forms.css
-------------------------------------------------------------- */

/* General form styles
----------------------------------------*/
select {
	border-color: #666666;
	background-color: #FAFAFA;
}

label {
	color: #425067;
}

/* Definition list layout for forms
---------------------------------------- */
dd label {
	color: #333;
}

/* Hover effects */
fieldset dl:hover dt label {
	color: #000000;
}

fieldset.fields2 dl:hover dt label {
	color: inherit;
}

/* Quick-login on index page */
fieldset.quick-login input {
	background-color: #F2F3F3;
}

/* Posting page styles
----------------------------------------*/

#message-box textarea {
	color: #333333;
}

/* Input field styles
---------------------------------------- */
.inputbox {
	background-color: #FFFFFF; 
	border-color: #B4BAC0;
	color: #333333;
}

.inputbox:hover {
	border-color: #11A3EA;
}

.inputbox:focus {
	border-color: #11A3EA;
	color: #0F4987;
}

/* Form button styles
---------------------------------------- */

a.button1, input.button1, input.button3, a.button2, input.button2 {
	color: #000;
	background-color: #FAFAFA;
	background-image: url("{T_THEME_PATH}/images/bg_button.gif");
}

a.button1, input.button1 {
	border-color: #666666;
}

input.button3 {
	background-image: none;
}

/* Alternative button */
a.button2, input.button2, input.button3 {
	border-color: #666666;
}

/* <a> button in the style of the form buttons */
a.button1, a.button1:link, a.button1:visited, a.button1:active, a.button2, a.button2:link, a.button2:visited, a.button2:active {
	color: #000000;
}

/* Hover states */
a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, input.button3:hover {
	border-color: #BC2A4D;
	color: #BC2A4D;
}

input.search {
	background-image: url("{T_THEME_PATH}/images/icon_textbox_search.gif");
}

.top-left, .top-right, .bottom-left, .bottom-right { 
   background-image: url("{T_THEME_PATH}/images/corners1280x18.gif"); /* CHANGE: path and name of your image */
   height: 9px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
   font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
   }
.top-left, .bottom-left { 
   margin-right: 9px; /* CHANGE: replace by the width of one of your corners */
   }
.top-right, .bottom-right { 
   margin-left: 9px;  /* CHANGE: replace by the width of one of your corners */
   margin-top: -9px;  /* CHANGE: replace by the height of one of your corners */
   }
.top-right {
   background-position: 100% 0;    /* DNC: position right corner at right side, no vertical changes */
   }
.bottom-left  { 
   background-position: 0 -9px;    /* CHANGE: replace second number by negative height of one of your corners */
   }
.bottom-right { 
   background-position: 100% -9px; /* CHANGE: replace second number by negative height of one of your corners */
   }
.inside {
   border-left: 1px solid #C00000; /* YCC: color & properties of the left-borderline */
   border-right: 1px solid #C00000;/* YCC: color & properties of the right-borderline */
   background: #FFFFFF;            /* YCC: background-color of the inside */
   color: #000000;                 /* YCC: default text-color of the inside */
   padding-left: 0px;             /* YCC: all texts at some distance of the left border */
   padding-right: 0px;             /* YCC: all texts at some distance of the right border */
   }
.notopgap    { margin-top: 0; }    /* DNC: to avoid splitting of the box */
.nobottomgap { margin-bottom: 0; } /* DNC: to avoid splitting of the box */

.outside {
   margin : 25px;
}
I have not edited the code further, as I have used your image!
User avatar
Skeetergirl
Registered User
Posts: 33
Joined: Tue Sep 16, 2003 10:08 am

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

Post by Skeetergirl »

This version of rounded corners uses 6 files and takes advantage of having side graphics to create a more dimensional effect. It works great in IE7 & Firefox but NOT IE6. If someone has advise for making it work with IE6 I would appreciate it. You can see it at http://www.realitytvcafe.com/bulletin

Download and insert the images into your theme's images folder. You will need to create your own images as mine have an orange background but you can use these to test it out. :)

Orange background

Images Removed

ADDED: Images with Black background:

Images Removed

Copy this at the bottom of your colours.css file

colours.css

Code: Select all

#liquid-round {
width:96%;
margin:0px auto;
background:#fff url({T_THEME_PATH}/images/leftside.gif) repeat-y left top;
}
.top {
width:100%;
height:20px;
background:url({T_THEME_PATH}/images/top.gif) no-repeat left top;
}
.top span {
display:block;
position:relative;
height:20px;
background:url({T_THEME_PATH}/images/top-right.gif) no-repeat right top;
}
.center-content {
position:relative;
background:url({T_THEME_PATH}/images/rightside.gif) repeat-y right top;
padding:1px 0px 1px 0px;
margin:-1px 0 -50px 0;
}
.bottom {
width:100%;
height:60px;
background:url({T_THEME_PATH}/images/bottom.gif) no-repeat left bottom;
}
.bottom span {
display:block;
position:relative;
height:60px;
background:url({T_THEME_PATH}/images/bottom-right.gif) no-repeat right top;
}
p {margin:0 0 1em 0}

Change your background color (colours.css) here:

Code: Select all

html, body {
	color: #536482;
	background-color: #FEB838;
}
overall_header.html

After <body insert

Code: Select all

<div id="liquid-round">
    <div class="top"><span></span></div>
    <div class="center-content">
        <!-- CONTENT BEGIN -->

overall_footer.html

before </body> insert

Code: Select all

<div class="nobottomgap"></div>
</div>
<div class="bottom-left"></div><div class="bottom-right"></div>
</div></div>
        <!-- CONTENT END -->
Last edited by Skeetergirl on Thu Jan 17, 2008 8:41 pm, edited 3 times in total.
niks999
Registered User
Posts: 29
Joined: Wed Apr 11, 2007 8:31 am

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

Post by niks999 »

First of all..
The code u gave for overall_header
Skeetergirl wrote: overall_footer.html

before </body> insert

Code: Select all

<div class="nobottomgap"></div>
</div>
<div class="bottom-left"></div><div class="bottom-right"></div>
</div>
        <!-- CONTENT END -->
This shud be :-

Code: Select all

        <!-- CONTENT END -->
<div class="nobottomgap"></div>
</div>
<div class="bottom-left"></div><div class="bottom-right"></div>
</div>
<div class="bottom"><span></span></div>
</div>
But the corners are awesome... :D

Can anyone make these for black background ???

http://www.realitytvcafe.com/backgroundimages/top.gif
http://www.realitytvcafe.com/background ... -right.gif
http://www.realitytvcafe.com/background ... ftside.gif
http://www.realitytvcafe.com/background ... htside.gif
http://www.realitytvcafe.com/background ... -right.gif
http://www.realitytvcafe.com/background ... bottom.gif

Plz... :?
ncmontas
Registered User
Posts: 87
Joined: Tue Jun 19, 2007 2:58 pm

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

Post by ncmontas »

Here's my version of the round corners. On the colour.css

Code: Select all

<!-- background round corners -->
.top-left {
	background-image: url("{T_THEME_PATH}/images/top_left.gif");
	height: 22px;
	margin-left: -26px;
}
.top-right {
	float: right;
	background-image: url("{T_THEME_PATH}/images/top_right.gif");
	height: 22px;
	margin-right: -13px;
	margin-top: -22px;
	width: 34px;
}	 
.bottom-left {
	background-image: url("{T_THEME_PATH}/images/bottom_left.gif");
	height: 22px;
	margin-left: -26px;
	margin-right: 5px;
	margin-top: 10px;
}
.bottom-right {
	float: right;
	background-image: url("{T_THEME_PATH}/images/bottom_right.gif");
	height: 22px;
	width: 34px;
	margin-right: -13px;
	margin-top: -22px;
On overall_footer.html

Code: Select all

<div class="bottom-left"></div>
<div class="bottom-right"></div>
overall_header.html. I tried inserting the <div> after the <body and when i resize my browser the corners is messing up so i decided to insert it after the <div id="wrap">

Code: Select all

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
<div id="wrap">
<!-- background round corners -->
	<div class="top-left"></div>
	<div class="top-right"></div>
my problem is this when I use firefox all my work in the page is messed up but on IE its good. Need your advice thanks.
Last edited by ncmontas on Mon Jun 25, 2007 9:59 am, edited 1 time in total.
niks999
Registered User
Posts: 29
Joined: Wed Apr 11, 2007 8:31 am

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

Post by niks999 »

can v see ur site ??? :?
ncmontas
Registered User
Posts: 87
Joined: Tue Jun 19, 2007 2:58 pm

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

Post by ncmontas »

Image
IE browser
Image
Firefox

Here are the capture images from the two browser... You may notice that when using firefox the round corners
got messed up compared to the IE
User avatar
Skeetergirl
Registered User
Posts: 33
Joined: Tue Sep 16, 2003 10:08 am

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

Post by Skeetergirl »

niks999 wrote:But the corners are awesome... :D

Can anyone make these for black background ???

[Images Removed]

Plz... :?
Here they are for you, niks999... I hope they work! I'd like to see your board after it's applied. :)

[Images Removed]
Last edited by Skeetergirl on Thu Jan 17, 2008 8:42 pm, edited 1 time in total.
BenIPAQ
Registered User
Posts: 13
Joined: Sat Jun 23, 2007 1:47 pm

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

Post by BenIPAQ »

Hi all!

Everything is working like a charm, except...:

Image

What to do?

Greets, Benjamin!
Fridge
Registered User
Posts: 307
Joined: Sat Nov 11, 2006 1:41 am
Location: Rotterdam, The Netherlands
Name: Martin
Contact:

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

Post by Fridge »

You must add another (extra)

Code: Select all

</div>
in the footer
BenIPAQ
Registered User
Posts: 13
Joined: Sat Jun 23, 2007 1:47 pm

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

Post by BenIPAQ »

Fridge wrote:You must add another (extra)

Code: Select all

</div>
in the footer
How do you mean? Do I have to put it in the overall_footer.html? Can you post de code where '</div>' has to be placed ?

Thanks for your reply and I hope you can give an answer on my question above :)
Locked

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