[HOW-TO] Add Rounded corners to prosilver, Full tutorial

How-to's, little tricks, tutorials, code examples (snippets) and read-me's.

[HOW-TO] Add Rounded corners to prosilver, Full tutorial

Postby mtotheikle » 22 Feb 2008, 18:53

First of all you need to make a rounded square image in Photoshop or what ever image maker program that you prefer to use. For this example my board width is set to 899px and my image width is 937px
If you use Photoshop the image will look somewhat like this

thumbnail
[ Click to Enlarge ]


Then you will need to slice it using the Photoshop slicing tool, if you don't know what that tool looks like hit shift+k and it will put you on it. An example of how the image will look when you use the slice tool can be found below and it really doesnt matter how you do it.

thumbnail
[ Click to Enlarge ]


Once you get something that looks like the above pic and has three different sections you will need to hit ctrl+ right mouse click to select the slice then copy that selection and make a new image the same height and width as the sliced image, Photoshop should do that automatically if you copied the slice portion already but make sure. Then in the new image use the paste tool to get the image then delete the background from that image so that the background become transparent. You will then want to save this new file with only the sliced part in prosliver/theme/images/. For the top portion of the image usally save it as top-border.gif then the middle as middle-border.gif and the bottom as bottom-border.gif, however you can do as you please. Repeat this step for the other two slices you made.

Now you should have 3 new image inside the prosliver/theme/images directory which we will use latter on in the stylesheet. You will now want to open prosilver/theme/stylesheet.css then,

Find:
Code: Select all
@import url("colours.css");


After Add:
Code: Select all
@import url('borders.css");


You can then close that file and open this file border.css and save it inside the same directory as the stylesheet.css. Then

Open: prosilver/template/overall_header.html

Find:
Code: Select all
<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">


After add:
Code: Select all
<div id="header-bg"></div>
<div id="wrap-bg">


Open: prosilver/template/overall_footer.html

Find:
Code: Select all
   </div>
</div>
</div>


After add:
Code: Select all
</div>
<div id="footer-bg"></div>


Hope this helps everyone and I will update it in a little bit making it easier to follow and read.

border.css file
borders.zip
(708 Bytes) Downloaded 474 times
"You have a lifetime to learn technique. But I can teach you what is more important than technique: How to see. Learn that and all you have to do afterwards is press the shutter." - Garry Winogrand

I have turned into a Military Sergeant and Highway of Life and Handyman are my newest privates under my command. Don't be scared anyone, this is all for your good!

Image
User avatar
mtotheikle    
Supporter
Supporter
 
Posts: 1054
Joined: 10 Oct 2007, 22:43
Location: Washington
Favorite Team: Seahawks
Gender: Male
phpBB Knowledge: 10


Re: [HOW-TO] Add Rounded corners to prosilver, Full tutorial

Postby sbdanielb » 25 Feb 2008, 06:43

That was very easy to follow, thank you
sbdanielb
Ensign
Ensign
 
Posts: 94
Joined: 11 Jan 2008, 05:02
Gender: Male

How do i change background colour to a image?

Postby sbdanielb » 26 Feb 2008, 14:36

I have folled this on how to add borders (viewtopic.php?f=50&t=5234) but it leaves me with a grey colour background, how do i change that to a image? Like what is on Glacier Style
sbdanielb
Ensign
Ensign
 
Posts: 94
Joined: 11 Jan 2008, 05:02
Gender: Male

Re: [HOW-TO] Add Rounded corners to prosilver, Full tutorial

Postby Ika » 26 Feb 2008, 14:44

merged topic
Reason: Please post in corresponding topic when asking about a specific tutorial
Image
05.08.09 The Black Ice Project
Please use the forums for support requests. Review the Board Rules here.
Ika    
STG Styles Team
STG Styles Team
 
Posts: 1618
Joined: 08 Jul 2007, 09:57
Location: Charlotte, NC USA
Favorite Team: Pittsburgh Steelers
Gender: Male
phpBB Knowledge: 8

Re: [HOW-TO] Add Rounded corners to prosilver, Full tutorial

Postby mtotheikle » 27 Feb 2008, 01:08

Open: borders.css

Find:
Code: Select all
html, body {

}


Replace what ever is in between that find with
Code: Select all
html, body {
   background-image: url('{T_THEME_PATH}/images/yourbackgroundimage.png'); /* change yourbackgroundimage.png with the name of your image */
   background-color: #none;
   background-position: top center, no-repeat;
   background-attachment: fixed;
}


Make sure you background is big and will llok good on bigger screens then place the image inside /phpbb3/styles/yourstyle/theme/images

Post back if you have any issues
"You have a lifetime to learn technique. But I can teach you what is more important than technique: How to see. Learn that and all you have to do afterwards is press the shutter." - Garry Winogrand

I have turned into a Military Sergeant and Highway of Life and Handyman are my newest privates under my command. Don't be scared anyone, this is all for your good!

Image
User avatar
mtotheikle    
Supporter
Supporter
 
Posts: 1054
Joined: 10 Oct 2007, 22:43
Location: Washington
Favorite Team: Seahawks
Gender: Male
phpBB Knowledge: 10

Re: [HOW-TO] Add Rounded corners to prosilver, Full tutorial

Postby Dodo187 » 27 Sep 2008, 07:01

Thanks for the Tutorial it was realy helpfull.
User avatar
Dodo187
Crewman
Crewman
 
Posts: 2
Joined: 17 Feb 2008, 13:54
Location: Netherlands, the
Gender: Male

Re: [HOW-TO] Add Rounded corners to prosilver, Full tutorial

Postby mtotheikle » 10 Oct 2008, 19:19

Glad it help and good to see that people are still using it!
"You have a lifetime to learn technique. But I can teach you what is more important than technique: How to see. Learn that and all you have to do afterwards is press the shutter." - Garry Winogrand

I have turned into a Military Sergeant and Highway of Life and Handyman are my newest privates under my command. Don't be scared anyone, this is all for your good!

Image
User avatar
mtotheikle    
Supporter
Supporter
 
Posts: 1054
Joined: 10 Oct 2007, 22:43
Location: Washington
Favorite Team: Seahawks
Gender: Male
phpBB Knowledge: 10

Re: [HOW-TO] Add Rounded corners to prosilver, Full tutorial

Postby billstur » 03 Jan 2009, 13:01

Absolutely amazing! You made this so easy even I could understand it. :)

I used the prosilver style because I wanted to learn how to edit everything. I'm learning, and you helped a lot. Thank you! I'm working on a forum for our family, it's not real big, but we do have a good time.

Take a look if you want, and if you see something you think I should do, let me know;
http://sturgellforum.com/index.php
Last edited by billstur on 03 Jan 2009, 16:09, edited 1 time in total.
User avatar
billstur    
Supporter
Supporter
 
Posts: 43
Joined: 01 Dec 2008, 05:50
Location: Ohio USA
Favorite Team: Buckeyes
Gender: Male
phpBB Knowledge: 2

Re: [HOW-TO] Add Rounded corners to prosilver, Full tutorial

Postby Sniper_E » 03 Jan 2009, 16:13

billstur wrote:Absolutely amazing!

Yes you are Mike. :good: U R Absolutely Amazing! :clapping: :yahoo: in everything you do.

  Except for playing basketball.
I think one of my friends said you were second rate on the court compared to him. :P  
Image
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!
User avatar
Sniper_E    
STG Jedi Master
STG Jedi Master
 
Posts: 6979
Joined: 31 May 2006, 06:29
Location: Shreveport, LA
Favorite Team: The STG Team
Gender: Male
phpBB Knowledge: 6

Re: [HOW-TO] Add Rounded corners to prosilver, Full tutorial

Postby mtotheikle » 03 Jan 2009, 16:52

Glad to see it helped :D

Ed,
where did the basketball stuff come from... I am the best at basketball :D
"You have a lifetime to learn technique. But I can teach you what is more important than technique: How to see. Learn that and all you have to do afterwards is press the shutter." - Garry Winogrand

I have turned into a Military Sergeant and Highway of Life and Handyman are my newest privates under my command. Don't be scared anyone, this is all for your good!

Image
User avatar
mtotheikle    
Supporter
Supporter
 
Posts: 1054
Joined: 10 Oct 2007, 22:43
Location: Washington
Favorite Team: Seahawks
Gender: Male
phpBB Knowledge: 10

Next

Return to Tutorials and How-Tos

Who is online

Users browsing this forum: MSNbot Media and 8 guests

cron