Page: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 ... [21]
Thread starter
Preview How to install (Firefox only): 1. You need to install the extension Stylish. This allows the user to add custom CSS on a site. 2. Navigate here and click "Load into Stylish" and then "Save". 3. Done Alternative Themes: No banner Clock restored Clock restored and no banner Retro MrBasil in the logo Retro MrBasil and clock restored To use one of these: 1. Right click the icon in the status bar 2. Right click "Vusys' Basil Theme" 3. Delete all the text in the bottom text box and replace it without one of the ones above. Things to come: Removing the sidebar in the forums. (This is actually already in the code, but commented out as it's not prefect yet) Improved images. Other general tweaks. A quick overview on making a theme. Things you will need to make a decent theme Program(s) that can create images including alpha transparent PNGs (or GIFs, but GIFs suck). Some elementary knowledge of CSS and/or the ability to learn new skills. Firefox with the stylish extension. A place to host images. The default CSS of basilmarket Basic synax */ Comment */ .ID {command:value !important} */ = Start comment Comment = Comment text */ = End comment .ID = the ID you want to change. You can find IDs in the HTML of a page or the CSS of the whole site. { = The values to change go in these brackets. command = You can find a list of commands you can use on the web. Common ones include "background" and "color". value = The new value to change to. For the most part, you'll change colours and image URLs. !important = This tells firefox to override any existing CSS (ie, the default theme) to change to yours. } = The close bracket. The banner The banner is made of five different elements. innerWrapday & innerWrapnight .innerWrapday {background:url( URL ) top repeat-x !important;} and .innerWrapnight {background:url( URL ) top repeat-x !important;} Default day image Default night image Change the URL here to change the main background of the banner. By giving different URLs here, you can use different images for day and night. This needs to be an alpha transparent PNG, 820 pixels wide and 80 in height. innerWrapPP1 .innerWrapPP1 {background:url( URL ) !important} and .innerWrapPP1 {background:url( URL ) !important} Default day image Default night image This changes the image with "BasilMarket" and "MapleStory HQ" with MrBasil on it. Unlike innerWrapday/night, you cannot change this depending on if it's day or night. This needs to be an alpha transparent PNG, 249 pixels wide and 80 in height. innerWrapPP2 innerWrapPP2 is the element that contains the user's avatar. There is not much to do with this other than remove it if you don't want it shown. innerWrap This is the whole banner. Again, not much you can do here; but I've included it because if you don't display it, it removes the whole banner. Some people might like that look. ;) The top gradients and smoothing night & day .night {background:url( URL ) top repeat-x #efeee7 !important;} and .day {background:url( URL ) top repeat-x #efeee7 !important;} Default day image Default night image These are the images that fade from blue to white in the day, and black to white at night at the very top of the page. They can be any height (166 by default) and the bottom must match the background colour of the page (#EFEEE7 by default); the default image is 40 pixels wide, but since this image tiles, it can be any width you want. bwnight & bwday .bwnight {background:url( URL ) top no-repeat #f8f7f2 !important;} and .bwday {background:url( URL ) top no-repeat #f8f7f2 !important;} Default night smoothing Default day smoothing As you may see, these images smooth the top of the main column. They are non-transparent GIF images. You must recolour the centre of them to the background of the main column (#fff by default). The edges should be curved with the colour of the part of the background gradient that they will be next to. Column headers You find these in various places on the site. Left are the columns that are only on the main page in green; strangely on the left and right, (but not the centre). Right are the columns on the front page in the centre, and are also found as the background of the text "Thread starter", "Replies" and "Reply" on a forum thread. right .right {background:url( URL ) !important;} Default right image As you can see, right must tile and be 23 pixels in height, however as long as it tiles correctly, it can be any width you want (within reason, of course) left .left {background:url( URL ) !important;} Default left image For reasons unknown, left is also tiled however the image is longer than it needs to be (256 pixels wide). You can change it to any image that tiles correctly and is 24 pixels in height. topicBar .topicBar, .bbTop {background:url(http://www.basilmarket.com/img/topicbar.gif) top no-repeat #F8F7F2 !important;} Default topic bar This is the big header on forum topics and on a BasilID. It needs to be 800 pixels in width and can be any height up to 70 pixels. If it is less than 70 pixels, the background colour will show below. Other parts of the site topMsg .topMsg{background:url( URL ) !important; border:1px solid #CCAA00 !important} The default background is a solid colour, however I changed it to an image. To use a solid colour, use "background: color", or to use an image, make a repeating tile that's 26 pixels in height. The border colour can be changed here too. sub_menu This controls the dropdown menus. You can make the dropdown menus tranparent with "opacity: 0.9". Change 0.9 to any other number between 0 and 1 to alter the transparency. The background can be changed to a different solid colour, or (in theory) an image although I've not tried this. Changing the border would be rather easy too. Forum tweaks postSubn .postSubn {background:url( URL) !important} Default post back This is the background an avatar stands in front of in a post, or on a BasilID. It must be 100 pixels in height, can be any width since it tiles, and must be the colour of the post background at the bottom (#EFEEE7). postSubn is used for a few other things that can you change, but I won't detail them here. New Pic: Presents from Suama
Replies
Firefox?...*leaves*
New Blog: Yugioh Bel-Air Rap
I'm in the banner twice =).
Nice job on the design, looks a lot cleaner. New Blog: PC Mods Update
xknight1001 said: "Firefox?...*leaves*" Or Opera... or any browser that supports using custom CSS. New Pic: Presents from Suama
Whoooooa! Vusys, that looks incredible! Nice job.
 New Pic: Death The Kid
xknight1001 said: "Firefox?...*leaves*" WHAT? Get over here! -scorpion chain pull- -epic punch- MysticMagix said: "I'm in the banner twice =). Nice job on the design, looks a lot cleaner." Your ego is showing. D: New Pic: Okay, I gave in. :3
Oh sick. I didn't even need to restart Firefox... I guess I can live with it for now.
...I loaded it in, and Good God is it stylish.
New Pic: Death The Kid
Could you possibly do one with retro Mr.Basil and clock working?
Only downside is that if MrBasil makes a new update to basil, and you wanted to use the new basil, you'd either need to get the code for it and re-download firefox... or would it just autmatically update?
New Pic: Christmas~
Kazum said: "Oya. Lack of a clock is displeasing :<" Meh. I don't use it at all. It's 6 hours out of sync with my timezone and I don't use auctions, so I removed it. :] New Pic: Presents from Suama
Page: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 ... [21]
Register / login
|
